Merge pull request #863 from mermaid-js/develop

Develop

.gitignore

@@ -9,5 +9,6 @@ yarn-error.log
 /build
 /functions
 /snapshots.js
+/cypress/downloads
 /cypress/videos
 /cypress/screenshots

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

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');
+	});
 });

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

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')

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

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",

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 @@
 				><i class="far fa-copy mr-2" /> Copy Image to clipboard
 			</button>
 		{/if}
-		<button class="action-btn flex-auto" on:click={onDownloadPNG}>
+		<button id="downloadPNG" class="action-btn flex-auto" on:click={onDownloadPNG}>
 			<i class="fas fa-download mr-2" /> PNG
 		</button>
-		<button class="action-btn flex-auto" on:click={onDownloadSVG}>
+		<button id="downloadSVG" class="action-btn flex-auto" on:click={onDownloadSVG}>
 			<i class="fas fa-download mr-2" /> SVG
 		</button>
 		<a target="_blank" href={iUrl}>

tsconfig.json

@@ -7,5 +7,8 @@
 		"cypress/**/*.js",
 		"static/**/*.js"
 	],
+	"compilerOptions": {
+		"allowSyntheticDefaultImports": true
+	},
 	"extends": "./.svelte-kit/tsconfig.json"
 }

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"