From aa31a2a095d805b0720e40546288fd6a0cbae9ee Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 27 Jun 2022 15:05:06 +0530 Subject: [PATCH] fix #861 : Verify file download --- .gitignore | 1 + cypress.config.js | 9 +++++++-- cypress/e2e/actions.spec.ts | 30 ++++++++++++++++++++++++++++++ cypress/snapshots.js | 2 +- cypress/support/e2e.js | 1 + cypress/tsconfig.json | 2 +- package.json | 1 + src/lib/components/actions.svelte | 16 ++++++++-------- tsconfig.json | 3 +++ yarn.lock | 5 +++++ 10 files changed, 58 insertions(+), 12 deletions(-) diff --git a/.gitignore b/.gitignore index edc0e07e..381928d7 100644 --- a/.gitignore +++ b/.gitignore @@ -9,5 +9,6 @@ yarn-error.log /build /functions /snapshots.js +/cypress/downloads /cypress/videos /cypress/screenshots diff --git a/cypress.config.js b/cypress.config.js index 6d4fe61e..c394294b 100644 --- a/cypress.config.js +++ b/cypress.config.js @@ -1,6 +1,6 @@ import { defineConfig } from 'cypress'; import fs from 'fs'; - +import { isFileExist, findFiles } from 'cy-verify-downloads'; export default defineConfig({ projectId: '2ckppp', viewportWidth: 1440, @@ -11,11 +11,16 @@ export default defineConfig({ e2e: { setupNodeEvents(on, config) { on('task', { + isFileExist, + findFiles, + deleteFile(path) { + fs.rmSync(path); + return null; + }, readFileMaybe(filename) { if (fs.existsSync(filename)) { return fs.readFileSync(filename, 'utf8'); } - return null; } }); diff --git a/cypress/e2e/actions.spec.ts b/cypress/e2e/actions.spec.ts index fd5761fc..5b46a37a 100644 --- a/cypress/e2e/actions.spec.ts +++ b/cypress/e2e/actions.spec.ts @@ -3,6 +3,7 @@ describe('Check actions', () => { cy.clearLocalStorage(); cy.visit('/edit'); }); + it('should update markdown code', () => { cy.get('#markdown') .invoke('val') @@ -21,4 +22,33 @@ describe('Check actions', () => { cy.contains('Load Gist').click(); cy.contains('Go shopping!!'); }); + + it('should download png and svg', () => { + const now = new Date(2022, 0, 1).getTime(); + cy.clock(now); + 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); + }; + + verifyFileSize('png', 21_000); + verifyFileSize('svg', 11_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.clock().invoke('restore'); + }); }); diff --git a/cypress/snapshots.js b/cypress/snapshots.js index f351ae4d..05581857 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.0.3", + "__version": "10.2.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/cypress/support/e2e.js b/cypress/support/e2e.js index 6e3de8ab..af0278d8 100644 --- a/cypress/support/e2e.js +++ b/cypress/support/e2e.js @@ -15,6 +15,7 @@ // Import commands.js using ES2015 syntax: import './commands'; +require('cy-verify-downloads').addCustomCommand(); // Alternatively you can use CommonJS syntax: // require('./commands') diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json index 77501744..efeb6a0f 100644 --- a/cypress/tsconfig.json +++ b/cypress/tsconfig.json @@ -1,7 +1,7 @@ { "compilerOptions": { "allowJs": true, - "types": ["cypress", "cypress-localstorage-commands"] + "types": ["cypress", "cypress-localstorage-commands", "cy-verify-downloads"] }, "include": ["**/*.ts"] } diff --git a/package.json b/package.json index 92d98a14..3ff87837 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "autoprefixer": "^10.4.7", "chai": "^4.3.6", "cssnano": "^5.1.12", + "cy-verify-downloads": "^0.1.8", "cypress": "10.2.0", "cypress-localstorage-commands": "^2.1.0", "eslint": "^7.32.0", diff --git a/src/lib/components/actions.svelte b/src/lib/components/actions.svelte index ed3d8cfd..7a23e014 100644 --- a/src/lib/components/actions.svelte +++ b/src/lib/components/actions.svelte @@ -10,6 +10,9 @@ type Exporter = (context: CanvasRenderingContext2D, image: HTMLImageElement) => () => void; + const getFileName = (ext: string) => + `mermaid-diagram-${moment().format('YYYY-MM-DD-HHmmss')}.${ext}`; + const getBase64SVG = (svg?: HTMLElement, width?: number, height?: number): string => { svg?.setAttribute('height', `${height}px`); svg?.setAttribute('width', `${width}px`); // Workaround https://stackoverflow.com/questions/28690643/firefox-error-rendering-an-svg-image-to-html5-canvas-with-drawimage @@ -24,7 +27,7 @@ const exportImage = (event: Event, exporter: Exporter) => { const canvas: HTMLCanvasElement = document.createElement('canvas'); - const svg: HTMLElement = getSvgEl(); + const svg: HTMLElement = document.querySelector('#container svg'); const box: DOMRect = svg.getBoundingClientRect(); canvas.width = box.width; canvas.height = box.height; @@ -78,7 +81,7 @@ const { canvas } = context; context.drawImage(image, 0, 0, canvas.width, canvas.height); simulateDownload( - `mermaid-diagram-${moment().format('YYYYMMDDHHmmss')}.png`, + getFileName('png'), canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream') ); }; @@ -118,10 +121,7 @@ }; const onDownloadSVG = () => { - simulateDownload( - `mermaid-diagram-${moment().format('YYYYMMDDHHmmss')}.svg`, - `data:image/svg+xml;base64,${getBase64SVG()}` - ); + simulateDownload(getFileName('svg'), `data:image/svg+xml;base64,${getBase64SVG()}`); }; const onCopyMarkdown = () => { @@ -170,10 +170,10 @@ > Copy Image to clipboard {/if} - - diff --git a/tsconfig.json b/tsconfig.json index af0b0794..a2f16970 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -7,5 +7,8 @@ "cypress/**/*.js", "static/**/*.js" ], + "compilerOptions": { + "allowSyntheticDefaultImports": true + }, "extends": "./.svelte-kit/tsconfig.json" } diff --git a/yarn.lock b/yarn.lock index 78b4792b..580f2cdb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1066,6 +1066,11 @@ csso@^4.2.0: dependencies: css-tree "^1.1.2" +cy-verify-downloads@^0.1.8: + version "0.1.8" + resolved "https://registry.yarnpkg.com/cy-verify-downloads/-/cy-verify-downloads-0.1.8.tgz#e16e86f1a6cc17376c39b4c5aa53e5ffa630c9c0" + integrity sha512-hfcgXd/YAtoN6TRmuy26DetcxBkApMJPBJI/T61KrV4PciOaWZtFhxPaiF7Kn2aE8XzXt1Os3HULM2Yp8A1mfw== + cypress-localstorage-commands@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/cypress-localstorage-commands/-/cypress-localstorage-commands-2.1.0.tgz#6fc299ec60b6b5ccfc09dd23d004866b7444ee78"