wassname/Open-Assistant
1
0
Fork 0
mirror of https://github.com/wassname/Open-Assistant.git synced 2026-08-08 11:13:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add cypress-image-diff for visual testing

Browse Source
This commit is contained in:
Martin H. Normark
2022-12-31 00:11:32 +01:00
parent 82d2b0924b
commit 89c2be5760
8 changed files with 171 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/.gitignore
+4
View File
@@ -37,3 +37,7 @@ next-env.d.ts
# Vim files
*.swp
# cypress
/cypress-visual-screenshots/diff
/cypress-visual-screenshots/comparison
website/cypress-visual-screenshots/baseline/Button.cy.tsx-button-element.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

website/cypress.config.ts
+6
View File
@@ -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);
},
},
});
website/cypress/support/component.ts
+3
View File
@@ -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(<MyComponent />)
compareSnapshotCommand();
website/cypress/support/e2e.ts
+4 -2
View File
@@ -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')
// require('./commands')
website/package-lock.json
Generated
+151
View File
@@ -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,
website/package.json
+1
View File
@@ -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",
website/src/components/Button.cy.tsx
+2 -1
View File
@@ -4,6 +4,7 @@ import { Button } from "./Button";
describe("<Button />", () => {
it("renders", () => {
// see: https://on.cypress.io/mounting-react
cy.mount(<Button className="border-gray-300">Test button</Button>);
cy.mount(<Button className="border-gray-800 m-5">Test button</Button>);
cy.get("button").compareSnapshot("button-element");
});
});