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}
-