diff --git a/website/.gitignore b/website/.gitignore index 265e0054..86e167da 100644 --- a/website/.gitignore +++ b/website/.gitignore @@ -37,3 +37,7 @@ next-env.d.ts # Vim files *.swp + +# cypress +/cypress-visual-screenshots/diff +/cypress-visual-screenshots/comparison diff --git a/website/cypress-visual-screenshots/baseline/Button.cy.tsx-button-element.png b/website/cypress-visual-screenshots/baseline/Button.cy.tsx-button-element.png new file mode 100755 index 00000000..1d2b519f Binary files /dev/null and b/website/cypress-visual-screenshots/baseline/Button.cy.tsx-button-element.png differ diff --git a/website/cypress.config.ts b/website/cypress.config.ts index 21e3de09..9610624f 100644 --- a/website/cypress.config.ts +++ b/website/cypress.config.ts @@ -1,10 +1,12 @@ import { defineConfig } from "cypress"; +import getCompareSnapshotsPlugin from "cypress-image-diff-js/dist/plugin"; export default defineConfig({ e2e: { baseUrl: "http://localhost:3000", setupNodeEvents(on, config) { // implement node event listeners here + getCompareSnapshotsPlugin(on, config); }, }, @@ -15,5 +17,9 @@ export default defineConfig({ viewportWidth: 500, viewportHeight: 500, }, + setupNodeEvents(on, config) { + // implement node event listeners here + getCompareSnapshotsPlugin(on, config); + }, }, }); diff --git a/website/cypress/support/component.ts b/website/cypress/support/component.ts index 58ff5656..a39e2560 100644 --- a/website/cypress/support/component.ts +++ b/website/cypress/support/component.ts @@ -15,6 +15,7 @@ // Import commands.js using ES2015 syntax: import "./commands"; +import compareSnapshotCommand from "cypress-image-diff-js/dist/command"; import "../../src/styles/globals.css"; // Alternatively you can use CommonJS syntax: @@ -38,3 +39,5 @@ Cypress.Commands.add("mount", mount); // Example use: // cy.mount() + +compareSnapshotCommand(); diff --git a/website/cypress/support/e2e.ts b/website/cypress/support/e2e.ts index f80f74f8..ccfa0fb9 100644 --- a/website/cypress/support/e2e.ts +++ b/website/cypress/support/e2e.ts @@ -14,7 +14,9 @@ // *********************************************************** // Import commands.js using ES2015 syntax: -import './commands' +import "./commands"; +import compareSnapshotCommand from "cypress-image-diff-js/dist/command"; +compareSnapshotCommand(); // Alternatively you can use CommonJS syntax: -// require('./commands') \ No newline at end of file +// require('./commands') diff --git a/website/package-lock.json b/website/package-lock.json index f552d2aa..38f48630 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -54,6 +54,7 @@ "@typescript-eslint/eslint-plugin": "^5.47.1", "babel-loader": "^8.3.0", "cypress": "^12.2.0", + "cypress-image-diff-js": "^1.23.0", "eslint-plugin-storybook": "^0.6.8", "prettier": "2.8.1", "prisma": "^4.7.1", @@ -10647,6 +10648,15 @@ "dev": true, "license": "MIT" }, + "node_modules/colors": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz", + "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==", + "dev": true, + "engines": { + "node": ">=0.1.90" + } + }, "node_modules/combined-stream": { "version": "1.0.8", "license": "MIT", @@ -11683,6 +11693,43 @@ "node": "^14.0.0 || ^16.0.0 || >=18.0.0" } }, + "node_modules/cypress-image-diff-js": { + "version": "1.23.0", + "resolved": "https://registry.npmjs.org/cypress-image-diff-js/-/cypress-image-diff-js-1.23.0.tgz", + "integrity": "sha512-A1faTHAkyfZBosXDMUQS9h+CAHZt7C9WCI6qILVZcorC8RW5WA+ErKk86YXWiPoGBKw8RuNUECZenHHA11lpqg==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.12.5", + "arg": "^4.1.1", + "colors": "^1.4.0", + "cypress-recurse": "^1.13.1", + "fs-extra": "^9.0.1", + "handlebars": "^4.7.7", + "pixelmatch": "^5.1.0", + "pngjs": "^3.4.0" + }, + "bin": { + "cypress-image-diff": "bin/cypress-image-diff.js" + }, + "peerDependencies": { + "cypress": "^9.6.1 || ^10 || ^11 || ^12" + } + }, + "node_modules/cypress-image-diff-js/node_modules/arg": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz", + "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==", + "dev": true + }, + "node_modules/cypress-recurse": { + "version": "1.26.0", + "resolved": "https://registry.npmjs.org/cypress-recurse/-/cypress-recurse-1.26.0.tgz", + "integrity": "sha512-FioASB4kPgO8G0l4SkjPyFnm2VMvfG0zbjr3N/FqOiiq+YRtsXqGvFIYK9jKay90Ciqq3hKVLTuMCaNpniXYfA==", + "dev": true, + "dependencies": { + "humanize-duration": "^3.27.3" + } + }, "node_modules/cypress/node_modules/@types/node": { "version": "14.18.36", "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.36.tgz", @@ -15110,6 +15157,12 @@ "node": ">=10.17.0" } }, + "node_modules/humanize-duration": { + "version": "3.27.3", + "resolved": "https://registry.npmjs.org/humanize-duration/-/humanize-duration-3.27.3.tgz", + "integrity": "sha512-iimHkHPfIAQ8zCDQLgn08pRqSVioyWvnGfaQ8gond2wf7Jq2jJ+24ykmnRyiz3fIldcn4oUuQXpjqKLhSVR7lw==", + "dev": true + }, "node_modules/iconv-lite": { "version": "0.4.24", "dev": true, @@ -18272,6 +18325,27 @@ "node": ">= 6" } }, + "node_modules/pixelmatch": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-5.3.0.tgz", + "integrity": "sha512-o8mkY4E/+LNUf6LzX96ht6k6CEDi65k9G2rjMtBe9Oo+VPKSvl+0GKHuH/AlG+GA5LPG/i5hrekkxUc3s2HU+Q==", + "dev": true, + "dependencies": { + "pngjs": "^6.0.0" + }, + "bin": { + "pixelmatch": "bin/pixelmatch" + } + }, + "node_modules/pixelmatch/node_modules/pngjs": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-6.0.0.tgz", + "integrity": "sha512-TRzzuFRRmEoSW/p1KVAmiOgPco2Irlah+bGFCeNfJXxxYGwSw7YwAOAcd7X28K/m5bjBWKsC29KyoMfHbypayg==", + "dev": true, + "engines": { + "node": ">=12.13.0" + } + }, "node_modules/pkg-dir": { "version": "5.0.0", "dev": true, @@ -18283,6 +18357,15 @@ "node": ">=10" } }, + "node_modules/pngjs": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz", + "integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==", + "dev": true, + "engines": { + "node": ">=4.0.0" + } + }, "node_modules/pnp-webpack-plugin": { "version": "1.6.4", "dev": true, @@ -30583,6 +30666,12 @@ "version": "1.4.0", "dev": true }, + "colors": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz", + "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==", + "dev": true + }, "combined-stream": { "version": "1.0.8", "requires": { @@ -31305,6 +31394,39 @@ } } }, + "cypress-image-diff-js": { + "version": "1.23.0", + "resolved": "https://registry.npmjs.org/cypress-image-diff-js/-/cypress-image-diff-js-1.23.0.tgz", + "integrity": "sha512-A1faTHAkyfZBosXDMUQS9h+CAHZt7C9WCI6qILVZcorC8RW5WA+ErKk86YXWiPoGBKw8RuNUECZenHHA11lpqg==", + "dev": true, + "requires": { + "@babel/runtime": "^7.12.5", + "arg": "^4.1.1", + "colors": "^1.4.0", + "cypress-recurse": "^1.13.1", + "fs-extra": "^9.0.1", + "handlebars": "^4.7.7", + "pixelmatch": "^5.1.0", + "pngjs": "^3.4.0" + }, + "dependencies": { + "arg": { + "version": "4.1.3", + "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz", + "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==", + "dev": true + } + } + }, + "cypress-recurse": { + "version": "1.26.0", + "resolved": "https://registry.npmjs.org/cypress-recurse/-/cypress-recurse-1.26.0.tgz", + "integrity": "sha512-FioASB4kPgO8G0l4SkjPyFnm2VMvfG0zbjr3N/FqOiiq+YRtsXqGvFIYK9jKay90Ciqq3hKVLTuMCaNpniXYfA==", + "dev": true, + "requires": { + "humanize-duration": "^3.27.3" + } + }, "damerau-levenshtein": { "version": "1.0.8" }, @@ -33587,6 +33709,12 @@ "version": "2.1.0", "dev": true }, + "humanize-duration": { + "version": "3.27.3", + "resolved": "https://registry.npmjs.org/humanize-duration/-/humanize-duration-3.27.3.tgz", + "integrity": "sha512-iimHkHPfIAQ8zCDQLgn08pRqSVioyWvnGfaQ8gond2wf7Jq2jJ+24ykmnRyiz3fIldcn4oUuQXpjqKLhSVR7lw==", + "dev": true + }, "iconv-lite": { "version": "0.4.24", "dev": true, @@ -35631,6 +35759,23 @@ "version": "4.0.5", "dev": true }, + "pixelmatch": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-5.3.0.tgz", + "integrity": "sha512-o8mkY4E/+LNUf6LzX96ht6k6CEDi65k9G2rjMtBe9Oo+VPKSvl+0GKHuH/AlG+GA5LPG/i5hrekkxUc3s2HU+Q==", + "dev": true, + "requires": { + "pngjs": "^6.0.0" + }, + "dependencies": { + "pngjs": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-6.0.0.tgz", + "integrity": "sha512-TRzzuFRRmEoSW/p1KVAmiOgPco2Irlah+bGFCeNfJXxxYGwSw7YwAOAcd7X28K/m5bjBWKsC29KyoMfHbypayg==", + "dev": true + } + } + }, "pkg-dir": { "version": "5.0.0", "dev": true, @@ -35638,6 +35783,12 @@ "find-up": "^5.0.0" } }, + "pngjs": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz", + "integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==", + "dev": true + }, "pnp-webpack-plugin": { "version": "1.6.4", "dev": true, diff --git a/website/package.json b/website/package.json index 6c2a4274..409c45e5 100644 --- a/website/package.json +++ b/website/package.json @@ -58,6 +58,7 @@ "@types/react": "18.0.26", "babel-loader": "^8.3.0", "cypress": "^12.2.0", + "cypress-image-diff-js": "^1.23.0", "eslint-plugin-storybook": "^0.6.8", "@typescript-eslint/eslint-plugin": "^5.47.1", "prettier": "2.8.1", diff --git a/website/src/components/Button.cy.tsx b/website/src/components/Button.cy.tsx index 36430b90..cfb7c28f 100644 --- a/website/src/components/Button.cy.tsx +++ b/website/src/components/Button.cy.tsx @@ -4,6 +4,7 @@ import { Button } from "./Button"; describe("); + cy.mount(); + cy.get("button").compareSnapshot("button-element"); }); });