diff --git a/.vscode/settings.json b/.vscode/settings.json index cd3023f6..1403e65a 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,4 +1,7 @@ { "editor.formatOnSave": true, - "cSpell.words": ["pako", "Serde", "serdes"] + "cSpell.words": ["pako", "Serde", "serdes"], + "vitest.commandLine": "yarn test:unit", + "vitest.enable": true, + "testing.autoRun.mode": "rerun" } diff --git a/cypress/e2e/actions.spec.ts b/cypress/e2e/actions.spec.ts index 78e818e4..4de9d9b2 100644 --- a/cypress/e2e/actions.spec.ts +++ b/cypress/e2e/actions.spec.ts @@ -1,4 +1,4 @@ -import { disableDebounce } from './util'; +import { disableDebounce, verifyFileSize } from './util'; describe('Check actions', () => { beforeEach(() => { cy.clearLocalStorage(); @@ -27,28 +27,22 @@ describe('Check actions', () => { it('should download png and svg', () => { cy.clock(new Date(2022, 0, 1).getTime()); - const downloadsFolder = Cypress.config('downloadsFolder'); - const verifyFileSize = (fileType: string, size: number) => { - cy.get(`#download${fileType.toUpperCase()}`).click(); - const fileName = `mermaid-diagram-2022-01-01-000000.${fileType}`; - const filePath = `${downloadsFolder}/${fileName}`; - cy.verifyDownload(fileName); - cy.readFile(filePath, null, { - log: false - }).then((buffer) => expect((buffer as ArrayBuffer).byteLength).to.be.gt(size)); - cy.task('deleteFile', filePath); - }; + cy.get(`#downloadPNG`).click(); + verifyFileSize('diagram', 'png', 21_000); - verifyFileSize('png', 21_000); - verifyFileSize('svg', 11_000); + cy.get(`#downloadSVG`).click(); + verifyFileSize('diagram', 'svg', 10_000); // Verify downloaded file is different for different diagrams cy.contains('Sample Diagrams').click(); cy.contains('ER Diagram').click(); - verifyFileSize('png', 46_000); - verifyFileSize('svg', 12_000); + cy.get(`#downloadPNG`).click(); + verifyFileSize('diagram', 'png', 46_000); + + cy.get(`#downloadSVG`).click(); + verifyFileSize('diagram', 'svg', 12_000); cy.clock().invoke('restore'); }); diff --git a/cypress/e2e/history.spec.ts b/cypress/e2e/history.spec.ts index 92b558d8..493ced6e 100644 --- a/cypress/e2e/history.spec.ts +++ b/cypress/e2e/history.spec.ts @@ -1,8 +1,8 @@ -import { getEditor, disableDebounce } from './util'; +import { getEditor, disableDebounce, verifyFileSnapshot } from './util'; describe('Save History', () => { beforeEach(() => { - cy.clock(); + cy.clock(new Date(2022, 0, 1).getTime()); cy.clearLocalStorage(); cy.visit('/edit'); disableDebounce(); @@ -10,6 +10,38 @@ describe('Save History', () => { cy.contains('History').click(); }); + afterEach(() => { + cy.clock().invoke('restore'); + }); + + 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"}]' + ); + 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"}]' + ); + cy.reload(); + cy.contains('Actions').click(); + cy.contains('History').click(); + cy.get('#historyList').find('li').should('have.length', 2); + cy.get('#historyList').find('No items in History').should('not.exist'); + cy.get('#historyList').contains('helpful-ocean'); + cy.get('#historyList').contains('hollow-art'); + cy.contains('Restore').click(); + cy.contains('Halloween'); + cy.contains('Timeline').click(); + + cy.get('#historyList').find('li').should('have.length', 2); + cy.get('#historyList').find('No items in History').should('not.exist'); + cy.get('#historyList').contains('needy-mosquito'); + cy.get('#historyList').contains('barking-dog'); + cy.contains('Restore').click(); + cy.contains('New Year'); + }); + it('should save when clicked', () => { cy.get('#historyList').find('li').should('have.length', 0); cy.get('#historyList').contains('No items in History'); @@ -64,4 +96,10 @@ describe('Save History', () => { } cy.get('#historyList').find('li').should('have.length', 30); }); + + it('should download history', () => { + cy.get('#saveHistory').click(); + cy.get(`#downloadHistory`).click(); + verifyFileSnapshot('history', 'json', 'A[Christmas] -->|Get money| B(Go shopping)'); + }); }); diff --git a/cypress/e2e/util.ts b/cypress/e2e/util.ts index e715fd36..46416037 100644 --- a/cypress/e2e/util.ts +++ b/cypress/e2e/util.ts @@ -9,3 +9,35 @@ export const getEditor = ({ bottom = true, newline = false } = {}) => .type(`${newline ? '{enter}' : cmd}`); export const disableDebounce = () => cy.setLocalStorage('noDebounce', 'true'); + +const downloadsFolder = Cypress.config('downloadsFolder'); + +export const verifyFileSize = ( + fileType: 'history' | 'diagram', + extension: string, + size: number +) => { + const fileName = `mermaid-${fileType}-2022-01-01-000000.${extension}`; + const filePath = `${downloadsFolder}/${fileName}`; + cy.verifyDownload(fileName); + cy.readFile(filePath, null, { + log: false + }).then((buffer) => expect((buffer as ArrayBuffer).byteLength).to.be.gt(size)); + cy.task('deleteFile', filePath); +}; + +export const verifyFileSnapshot = ( + fileType: 'history' | 'diagram', + extension: string, + content: string +) => { + const fileName = `mermaid-${fileType}-2022-01-01-000000.${extension}`; + const filePath = `${downloadsFolder}/${fileName}`; + cy.verifyDownload(fileName); + cy.readFile(filePath, null, { + log: false + }).then((buffer) => + expect(new TextDecoder('utf-8').decode(buffer as ArrayBuffer)).to.contain(content) + ); + cy.task('deleteFile', filePath); +}; diff --git a/cypress/snapshots.js b/cypress/snapshots.js index 0de6a809..72b46c0b 100644 --- a/cypress/snapshots.js +++ b/cypress/snapshots.js @@ -16,7 +16,7 @@ module.exports = { "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\"}}}" } }, - "__version": "10.4.0", + "__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}" diff --git a/package.json b/package.json index 4346b300..25e86170 100644 --- a/package.json +++ b/package.json @@ -21,34 +21,36 @@ }, "devDependencies": { "@cypress/snapshot": "2.1.7", - "@sveltejs/adapter-static": "1.0.0-next.39", - "@sveltejs/kit": "1.0.0-next.444", + "@sveltejs/adapter-static": "1.0.0-next.41", + "@sveltejs/kit": "1.0.0-next.463", "@testing-library/jest-dom": "5.16.5", "@testing-library/svelte": "3.2.1", "@types/mermaid": "8.2.9", "@types/pako": "1.0.3", + "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "5.35.1", - "@typescript-eslint/parser": "5.34.0", + "@typescript-eslint/parser": "5.36.1", "@vitest/ui": "0.22.1", "autoprefixer": "10.4.8", "c8": "7.12.0", "chai": "4.3.6", "cssnano": "5.1.13", "cy-verify-downloads": "0.1.8", - "cypress": "10.6.0", + "cypress": "10.7.0", "cypress-localstorage-commands": "2.2.0", - "eslint": "8.22.0", + "eslint": "8.23.0", "eslint-config-prettier": "8.5.0", "eslint-plugin-cypress": "2.12.1", "eslint-plugin-es": "4.1.0", "eslint-plugin-postcss-modules": "2.0.0", "eslint-plugin-svelte3": "4.0.0", - "eslint-plugin-tailwindcss": "3.6.0", + "eslint-plugin-tailwindcss": "3.6.1", "eslint-plugin-vitest": "0.0.8", + "esserializer": "^1.3.2", "husky": "8.0.1", "jsdom": "20.0.0", "lint-staged": "13.0.3", - "node-html-parser": "5.4.1", + "node-html-parser": "5.4.2", "postcss": "8.4.16", "postcss-load-config": "4.0.1", "prettier": "2.7.1", @@ -58,13 +60,11 @@ "tailwindcss": "3.1.8", "tslib": "2.4.0", "typescript": "4.8.2", - "vite": "3.0.9", - "vitest": "0.22.1", - "vitest-svelte-kit": "0.0.7" + "vite": "3.1.0-beta.2", + "vitest": "0.22.1" }, "dependencies": { "@analytics/google-analytics": "1.0.3", - "@macfja/svelte-persistent-store": "1.3.0", "analytics": "0.8.1", "analytics-plugin-plausible": "^0.0.6", "daisyui": "2.24.0", @@ -75,7 +75,8 @@ "monaco-mermaid": "1.0.6", "pako": "2.0.4", "random-word-slugs": "0.1.6", - "svg-pan-zoom": "^3.6.1" + "svg-pan-zoom": "^3.6.1", + "uuid": "^8.3.2" }, "lint-staged": { "*.{ts,svelte,js,css,md,json}": [ diff --git a/src/hooks.ts b/src/hooks.ts index 916b2c81..75d6e91a 100644 --- a/src/hooks.ts +++ b/src/hooks.ts @@ -1,9 +1,6 @@ import type { Handle } from '@sveltejs/kit'; export const handle: Handle = async ({ event, resolve }) => { - const response = await resolve(event, { - ssr: false - }); - + const response = await resolve(event, {}); return response; }; diff --git a/src/lib/components/actions.svelte b/src/lib/components/actions.svelte index 8e75a3f2..56476363 100644 --- a/src/lib/components/actions.svelte +++ b/src/lib/components/actions.svelte @@ -1,5 +1,5 @@