diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index 5498b747..49ae58b5 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -48,3 +48,4 @@ jobs: parallel: true env: CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }} + MERMAID_DISABLE_DEBOUNCE: 'true' diff --git a/.vscode/settings.json b/.vscode/settings.json index 1403e65a..451f836e 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -3,5 +3,6 @@ "cSpell.words": ["pako", "Serde", "serdes"], "vitest.commandLine": "yarn test:unit", "vitest.enable": true, - "testing.autoRun.mode": "rerun" + "testing.autoRun.mode": "rerun", + "svelte.enable-ts-plugin": true } diff --git a/cypress/e2e/actions.spec.ts b/cypress/e2e/actions.spec.ts index 4de9d9b2..2bda6517 100644 --- a/cypress/e2e/actions.spec.ts +++ b/cypress/e2e/actions.spec.ts @@ -1,9 +1,8 @@ -import { disableDebounce, verifyFileSize } from './util'; +import { verifyFileSize } from './util'; describe('Check actions', () => { beforeEach(() => { cy.clearLocalStorage(); cy.visit('/edit'); - disableDebounce(); }); it('should update markdown code', () => { diff --git a/cypress/e2e/diagramUpdate.spec.ts b/cypress/e2e/diagramUpdate.spec.ts index 3f7b495c..b6b415f3 100644 --- a/cypress/e2e/diagramUpdate.spec.ts +++ b/cypress/e2e/diagramUpdate.spec.ts @@ -1,10 +1,9 @@ -import { getEditor, cmd, disableDebounce } from './util'; +import { getEditor, cmd } from './util'; describe('Auto sync tests', () => { beforeEach(() => { cy.clearLocalStorage(); cy.visit('/'); - disableDebounce(); }); it('should dim diagram when code is edited', () => { @@ -72,7 +71,6 @@ describe.only('Pan and Zoom', () => { beforeEach(() => { cy.clearLocalStorage(); cy.visit('/'); - disableDebounce(); }); it('should toggle pan and zoom', () => { cy.get('#svg-pan-zoom-reset-pan-zoom').should('not.exist'); diff --git a/cypress/e2e/history.spec.ts b/cypress/e2e/history.spec.ts index 493ced6e..e9e32fda 100644 --- a/cypress/e2e/history.spec.ts +++ b/cypress/e2e/history.spec.ts @@ -1,11 +1,11 @@ -import { getEditor, disableDebounce, verifyFileSnapshot } from './util'; +import { getEditor, verifyFileSnapshot } from './util'; describe('Save History', () => { beforeEach(() => { cy.clock(new Date(2022, 0, 1).getTime()); cy.clearLocalStorage(); cy.visit('/edit'); - disableDebounce(); + cy.contains('Actions').click(); cy.contains('History').click(); }); @@ -17,11 +17,11 @@ describe('Save History', () => { it('should load history from localstorage', () => { cy.setLocalStorage( 'manualHistoryStore', - '[{"state":{"code":"graph TD\\n A[Halloween] -->|Get money| B(Go shopping)","mermaid":"{\\n \\"theme\\": \\"dark\\"\\n}","updateEditor":false,"autoSync":true,"updateDiagram":false},"time":0,"type":"manual","id":"d7ea820e-21dd-418a-b984-fd58acde09df","name":"hollow-art"},{"state":{"code":"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)","mermaid":"{\\n \\"theme\\": \\"dark\\"\\n}","updateEditor":true,"autoSync":true,"updateDiagram":true},"time":0,"type":"manual","id":"b749ffc6-522b-4a44-86cf-7c1ffc3146b3","name":"helpful-ocean"}]' + '[{"state":{"code":"graph TD\\n A[Halloween] -->|Get money| B(Go shopping)","mermaid":"{\\n \\"theme\\": \\"dark\\"\\n}","autoSync":true,"updateDiagram":false},"time":0,"type":"manual","id":"d7ea820e-21dd-418a-b984-fd58acde09df","name":"hollow-art"},{"state":{"code":"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)","mermaid":"{\\n \\"theme\\": \\"dark\\"\\n}","autoSync":true,"updateDiagram":true},"time":0,"type":"manual","id":"b749ffc6-522b-4a44-86cf-7c1ffc3146b3","name":"helpful-ocean"}]' ); cy.setLocalStorage( 'autoHistoryStore', - '[{"state":{"code":"graph TD\\n A[New Year] -->|Get money| B(Go shopping)","mermaid":"{\\n \\"theme\\": \\"dark\\"\\n}","updateEditor":false,"autoSync":true,"updateDiagram":false},"time":0,"type":"auto","id":"69ea820e-522b-4a44-86cf-fd58acde09df","name":"barking-dog"},{"state":{"code":"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)","mermaid":"{\\n \\"theme\\": \\"dark\\"\\n}","updateEditor":true,"autoSync":true,"updateDiagram":true},"time":0,"type":"manual","id":"x749ffc6-21dd-418a-b984-7c1ffc3146b3","name":"needy-mosquito"}]' + '[{"state":{"code":"graph TD\\n A[New Year] -->|Get money| B(Go shopping)","mermaid":"{\\n \\"theme\\": \\"dark\\"\\n}","autoSync":true,"updateDiagram":false},"time":0,"type":"auto","id":"69ea820e-522b-4a44-86cf-fd58acde09df","name":"barking-dog"},{"state":{"code":"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)","mermaid":"{\\n \\"theme\\": \\"dark\\"\\n}","autoSync":true,"updateDiagram":true},"time":0,"type":"manual","id":"x749ffc6-21dd-418a-b984-7c1ffc3146b3","name":"needy-mosquito"}]' ); cy.reload(); cy.contains('Actions').click(); diff --git a/cypress/e2e/loadSite.spec.ts b/cypress/e2e/loadSite.spec.ts index 50497339..841b4024 100644 --- a/cypress/e2e/loadSite.spec.ts +++ b/cypress/e2e/loadSite.spec.ts @@ -1,11 +1,9 @@ import { toBase64 } from 'js-base64'; -import { disableDebounce } from './util'; describe('Site Loads', () => { beforeEach(() => { cy.clearLocalStorage(); cy.visit('/'); - disableDebounce(); }); it('Check Home page load', () => { cy.url().should('include', '/edit'); @@ -60,7 +58,7 @@ describe('Site Loads', () => { // Disabled temporarily. Should be enabled after the issue is fixed in Mermaid. // it('should prevent setting the "securityLevel" option via URL', () => { // const b64State = toBase64( - // `{"code":"graph TD\\nA[\\"\\"]","mermaid":"{\\"securityLevel\\": \\"loose\\", \\"theme\\": \\"forest\\"}","updateEditor":true,"autoSync":true,"updateDiagram":true}`, + // `{"code":"graph TD\\nA[\\"\\"]","mermaid":"{\\"securityLevel\\": \\"loose\\", \\"theme\\": \\"forest\\"}","autoSync":true,"updateDiagram":true}`, // true // ); // cy.on('window:confirm', () => true); @@ -75,7 +73,7 @@ describe('Site Loads', () => { it('should allow persisting "securityLevel" using confirm dialogue', () => { const b64State = toBase64( - `{"code":"graph TD\\nA[\\"\\"]","mermaid":"{\\"securityLevel\\": \\"loose\\", \\"theme\\": \\"forest\\"}","updateEditor":true,"autoSync":true,"updateDiagram":true}`, + `{"code":"graph TD\\nA[\\"\\"]","mermaid":"{\\"securityLevel\\": \\"loose\\", \\"theme\\": \\"forest\\"}","autoSync":true,"updateDiagram":true}`, true ); cy.on('window:confirm', () => false); diff --git a/cypress/e2e/util.ts b/cypress/e2e/util.ts index 46416037..cf0303ba 100644 --- a/cypress/e2e/util.ts +++ b/cypress/e2e/util.ts @@ -8,8 +8,6 @@ export const getEditor = ({ bottom = true, newline = false } = {}) => .type(`${bottom ? '{pageDown}' : cmd}`) .type(`${newline ? '{enter}' : cmd}`); -export const disableDebounce = () => cy.setLocalStorage('noDebounce', 'true'); - const downloadsFolder = Cypress.config('downloadsFolder'); export const verifyFileSize = ( diff --git a/cypress/snapshots.js b/cypress/snapshots.js index 72b46c0b..a54958c7 100644 --- a/cypress/snapshots.js +++ b/cypress/snapshots.js @@ -1,28 +1,28 @@ module.exports = { "Site Loads": { "Check Home page load": { - "1": "{\"code\":\"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)\\n B --> C{Let me think}\\n C -->|One| D[Laptop]\\n C -->|Two| E[iPhone]\\n C -->|Three| F[fa:fa-car Car]\\n \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":true,\"autoSync\":true,\"updateDiagram\":true}" + "1": "{\"code\":\"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)\\n B --> C{Let me think}\\n C -->|One| D[Laptop]\\n C -->|Two| E[iPhone]\\n C -->|Three| F[fa:fa-car Car]\\n \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":true}" }, "Check Redirect from old URL": { - "1": "{\"code\":\"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)\\n B --> C{Let me think}\\n C -->|One| D[Laptop]\\n C -->|Two| E[iPhone]\\n C -->|Three| F[fa:fa-car Car]\",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":true}" + "1": "{\"code\":\"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)\\n B --> C{Let me think}\\n C -->|One| D[Laptop]\\n C -->|Two| E[iPhone]\\n C -->|Three| F[fa:fa-car Car]\",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":true}" }, "should load diagram from gist": { - "1": "{\"code\":\"graph TD\\n A[Party] -->|Get money| B(Go shopping!!)\\n \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"forest\\\",\\n \\\"test\\\": \\\"hello world\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"gist\",\"config\":{\"url\":\"https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a\"}}}" + "1": "{\"code\":\"graph TD\\n A[Party] -->|Get money| B(Go shopping!!)\\n \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"forest\\\",\\n \\\"test\\\": \\\"hello world\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"gist\",\"config\":{\"url\":\"https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a\"}}}" }, "should load diagram from gist revision": { - "1": "{\"code\":\"graph TD\\n A[Party] -->|Get money| B(Go shopping)\\n \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"forest\\\",\\n \\\"test\\\": \\\"hello\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"gist\",\"config\":{\"url\":\"https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/ec9b4ab0e41e4ff6287326cd3cb47affd7851e19\"}}}" + "1": "{\"code\":\"graph TD\\n A[Party] -->|Get money| B(Go shopping)\\n \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"forest\\\",\\n \\\"test\\\": \\\"hello\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"gist\",\"config\":{\"url\":\"https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/ec9b4ab0e41e4ff6287326cd3cb47affd7851e19\"}}}" }, "should load diagram from raw files": { - "1": "{\"code\":\"graph TD\\n A[Party] -->|Get money| B(Go shopping!!)\\n \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"forest\\\",\\n \\\"test\\\": \\\"hello world\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"files\",\"config\":{\"codeURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/code.mmd\",\"configURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/config.json\"}}}" + "1": "{\"code\":\"graph TD\\n A[Party] -->|Get money| B(Go shopping!!)\\n \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"forest\\\",\\n \\\"test\\\": \\\"hello world\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"files\",\"config\":{\"codeURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/code.mmd\",\"configURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/config.json\"}}}" } }, "__version": "10.6.0", "Auto sync tests": { "should dim diagram when code is edited": { - "1": "{\"code\":\"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)\\n B --> C{Let me think}\\n C -->|One| D[Laptop]\\n C -->|Two| E[iPhone]\\n C -->|Three| F[fa:fa-car Car]\\n C --> Test\",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":false,\"autoSync\":false,\"updateDiagram\":false}" + "1": "{\"code\":\"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)\\n B --> C{Let me think}\\n C -->|One| D[Laptop]\\n C -->|Two| E[iPhone]\\n C -->|Three| F[fa:fa-car Car]\\n C --> Test\",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":false,\"updateDiagram\":false}" }, "should not dim diagram when code is in sync": { - "1": "{\"code\":\"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)\\n B --> C{Let me think}\\n C -->|One| D[Laptop]\\n C -->|Two| E[iPhone]\\n C -->|Three| F[fa:fa-car Car]\\n C --> Testing\",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":false}" + "1": "{\"code\":\"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)\\n B --> C{Let me think}\\n C -->|One| D[Laptop]\\n C -->|Two| E[iPhone]\\n C -->|Three| F[fa:fa-car Car]\\n C --> Testing\",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":false}" } }, "Test themes": { diff --git a/package.json b/package.json index a2f98692..5dacfdf2 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "license": "MIT", "scripts": { "dev": "vite dev", + "dev:test": "MERMAID_DISABLE_DEBOUNCE=true yarn dev", "build": "vite build", "preview": "vite preview", "lint": "prettier --check --cache --plugin-search-dir=. .;eslint --ignore-path .gitignore .", diff --git a/src/lib/components/card/card.svelte b/src/lib/components/card/card.svelte index 90b93e8a..27008d9e 100644 --- a/src/lib/components/card/card.svelte +++ b/src/lib/components/card/card.svelte @@ -5,6 +5,7 @@ export let isCloseable = true; export let isOpen = true; export let tabs: Tab[] = []; + export let activeTabID: string = ''; export let title: string; $: isOpen = isCloseable ? isOpen : true; $: isTabsShown = isOpen && tabs.length > 0; @@ -15,7 +16,7 @@ class="bg-primary p-2 {isTabsShown ? 'pb-0' : ''} flex-none cursor-pointer" on:click={() => (isOpen = !isOpen)}>
- +
diff --git a/src/lib/components/card/tabs.svelte b/src/lib/components/card/tabs.svelte index 5fe726b9..0f99e362 100644 --- a/src/lib/components/card/tabs.svelte +++ b/src/lib/components/card/tabs.svelte @@ -3,12 +3,14 @@ import { createEventDispatcher } from 'svelte'; import { fade } from 'svelte/transition'; export let isCloseable = true; - export let tabs: Tab[] = []; + export let tabs: Tab[]; export let title: string; export let isOpen = false; + export let activeTabID: string; - $: activeTabID = tabs[0]?.id; - + if (!activeTabID && tabs.length > 0) { + activeTabID = tabs[0].id; + } const dispatch = createEventDispatcher(); const toggleTabs = (tab: Tab) => { activeTabID = tab.id; diff --git a/src/lib/components/editor.svelte b/src/lib/components/editor.svelte index 7ff3e575..0b5b8572 100644 --- a/src/lib/components/editor.svelte +++ b/src/lib/components/editor.svelte @@ -1,77 +1,95 @@