diff --git a/.changeset/proud-wolves-float.md b/.changeset/proud-wolves-float.md new file mode 100644 index 00000000..8d4ae4c4 --- /dev/null +++ b/.changeset/proud-wolves-float.md @@ -0,0 +1,5 @@ +--- +'@project44-manifest/storybook': minor +--- + +Add Percy visual regression tests diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 21eae04f..73616c70 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -7,6 +7,7 @@ on: pull_request: env: + PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }} TURBO_TEAM: ${{ secrets.TURBO_TEAM }} TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }} @@ -39,3 +40,6 @@ jobs: - name: Run Jest run: yarn test + + - name: Run Percy tests + run: yarn test:visual diff --git a/.gitignore b/.gitignore index 3e2b6f6b..22947181 100644 --- a/.gitignore +++ b/.gitignore @@ -46,4 +46,7 @@ apps/**/sitemap.xml !.yarn/versions # turborepo -.turbo \ No newline at end of file +.turbo + +# environment variables +.env diff --git a/.percy.yml b/.percy.yml new file mode 100644 index 00000000..006941a6 --- /dev/null +++ b/.percy.yml @@ -0,0 +1,14 @@ +version: 2 +snapshot: + widths: + - 1280 + minHeight: 1024 + percyCSS: '' +discovery: + allowedHostnames: [] + disallowedHostnames: [] + networkIdleTimeout: 100 +upload: + files: '**/*.{png,jpg,jpeg}' + ignore: '' + stripExtensions: false diff --git a/apps/storybook/package.json b/apps/storybook/package.json index 70ab373f..e3aebcde 100644 --- a/apps/storybook/package.json +++ b/apps/storybook/package.json @@ -5,7 +5,9 @@ "scripts": { "build": "build-storybook -c .storybook -o ./build", "dev": "start-storybook -p 6006 --quiet", - "clean": "rm -rf .turbo node_modules build" + "clean": "rm -rf .turbo node_modules build", + "percy": "percy storybook ./build", + "test:visual": "yarn build && yarn percy" }, "dependencies": { "@project44-manifest/react": "*", @@ -16,5 +18,9 @@ "react": "^18.1.0", "react-dom": "^18.1.0", "webpack": "^5.74.0" + }, + "devDependencies": { + "@percy/cli": "^1.16.0", + "@percy/storybook": "^4.3.4" } } diff --git a/package.json b/package.json index 463e832c..fffc6ca2 100644 --- a/package.json +++ b/package.json @@ -14,9 +14,12 @@ "dev": "turbo run dev", "format": "prettier --check \"**/*.{ts,tsx,md}\"", "lint": "eslint --ext .tsx,.ts ./packages", + "percy": "yarn ./apps/storybook/ exec percy storybook ./build", "prepare": "husky install", "release-packages": "yarn build && yarn changeset publish", + "storybook:build": "yarn turbo run build --filter=@project44-manifest/storybook", "test": "jest", + "test:visual": "yarn storybook:build && yarn percy", "typecheck": "turbo run typecheck", "version-packages": "yarn changeset version" }, diff --git a/packages/react-tooltip/stories/Tooltip.stories.tsx b/packages/react-tooltip/stories/Tooltip.stories.tsx index 67f32331..461e77b6 100644 --- a/packages/react-tooltip/stories/Tooltip.stories.tsx +++ b/packages/react-tooltip/stories/Tooltip.stories.tsx @@ -14,7 +14,7 @@ export default { }; const Template: ComponentStory = (args) => ( - + ); diff --git a/yarn.lock b/yarn.lock index b0f1dfc6..2db14efc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4098,6 +4098,175 @@ __metadata: languageName: node linkType: hard +"@percy/cli-app@npm:1.16.0": + version: 1.16.0 + resolution: "@percy/cli-app@npm:1.16.0" + dependencies: + "@percy/cli-command": 1.16.0 + "@percy/cli-exec": 1.16.0 + checksum: 90566bf5ecc7ab113f068ec3c097d76d943f24933b52f06f4e47716eb897cbf04b0330594c6387cb1699896e2f473c8d3dd54576a26e1cdd2d7c8caf9cb676fb + languageName: node + linkType: hard + +"@percy/cli-build@npm:1.16.0": + version: 1.16.0 + resolution: "@percy/cli-build@npm:1.16.0" + dependencies: + "@percy/cli-command": 1.16.0 + checksum: 6ef171552ff61a687d91f4f7a2a190168e8ecb167ea5e7f1488510f0d9b570bb692b59bd7184664cd3155a409bc7cff655d2a124b166eef88c0469d12184b9bc + languageName: node + linkType: hard + +"@percy/cli-command@npm:1.16.0, @percy/cli-command@npm:^1.10.4": + version: 1.16.0 + resolution: "@percy/cli-command@npm:1.16.0" + dependencies: + "@percy/config": 1.16.0 + "@percy/core": 1.16.0 + "@percy/logger": 1.16.0 + bin: + percy-cli-readme: bin/readme.js + checksum: 06833a9b31578e1985f284b072d0b98964b940c46d83ffa6a9bec4feec753521422b562e9c5f6fe941185567bb6fb3718a4559aa34eca6eeed931e083ad778bd + languageName: node + linkType: hard + +"@percy/cli-config@npm:1.16.0": + version: 1.16.0 + resolution: "@percy/cli-config@npm:1.16.0" + dependencies: + "@percy/cli-command": 1.16.0 + checksum: 187144b81d21af8724f9cfb33995b6ad9736d4fd50987c9223e616766efd44db31cb18e618e387d085e8281e893e5979c200dd0965b2bcd67b78eed26743213f + languageName: node + linkType: hard + +"@percy/cli-exec@npm:1.16.0": + version: 1.16.0 + resolution: "@percy/cli-exec@npm:1.16.0" + dependencies: + "@percy/cli-command": 1.16.0 + cross-spawn: ^7.0.3 + which: ^2.0.2 + checksum: 78b64f36683db44859a0a82bd49984adeb5fd7aaa5105bed4574cc4f7a3a6fcc88bb05c823e1736bf505cd73c04771c7908dcc938f42cfc23bde9ffec4d54172 + languageName: node + linkType: hard + +"@percy/cli-snapshot@npm:1.16.0": + version: 1.16.0 + resolution: "@percy/cli-snapshot@npm:1.16.0" + dependencies: + "@percy/cli-command": 1.16.0 + yaml: ^2.0.0 + checksum: 87461a6036d4e15299bea7cb6c4b64564eace7385eae48e708ed75322ed3fdd2b179a42437e675a025ee0191c943655b718a81d48a3fe5789f71fba0c88f183b + languageName: node + linkType: hard + +"@percy/cli-upload@npm:1.16.0": + version: 1.16.0 + resolution: "@percy/cli-upload@npm:1.16.0" + dependencies: + "@percy/cli-command": 1.16.0 + fast-glob: ^3.2.11 + image-size: ^1.0.0 + checksum: 8bab3fea7583abdc42403034e86e2d52821099749df0452751f24857ededf801ff7a69adf752a807e0d913e51d7503ad05608da7056cf77f2038a4f97bfb4232 + languageName: node + linkType: hard + +"@percy/cli@npm:^1.16.0": + version: 1.16.0 + resolution: "@percy/cli@npm:1.16.0" + dependencies: + "@percy/cli-app": 1.16.0 + "@percy/cli-build": 1.16.0 + "@percy/cli-command": 1.16.0 + "@percy/cli-config": 1.16.0 + "@percy/cli-exec": 1.16.0 + "@percy/cli-snapshot": 1.16.0 + "@percy/cli-upload": 1.16.0 + "@percy/client": 1.16.0 + "@percy/logger": 1.16.0 + bin: + percy: bin/run.cjs + checksum: fb4131670028399d0a4d76d1f6e35ac4691683a7d77ed8d69206ac6ca1e95272df2a5349c72fa4ff96506f8d0e0b74dd94cc1a5ea5fcd97043dba7d2d305772f + languageName: node + linkType: hard + +"@percy/client@npm:1.16.0": + version: 1.16.0 + resolution: "@percy/client@npm:1.16.0" + dependencies: + "@percy/env": 1.16.0 + "@percy/logger": 1.16.0 + checksum: c42ffd61cbd491101bed62d7c0f1dafd4ca40d8c8601cf6dacfcc8cabf626bb828d0ff2eefc9aa77454dd3b0bc79152f2f0895000a5c7d461c69280f68584b58 + languageName: node + linkType: hard + +"@percy/config@npm:1.16.0": + version: 1.16.0 + resolution: "@percy/config@npm:1.16.0" + dependencies: + "@percy/logger": 1.16.0 + ajv: ^8.6.2 + cosmiconfig: ^7.0.0 + yaml: ^2.0.0 + checksum: 652000a556c593a3ed539e21d094cca918342af899ea919b2722d50e5a1a51567637ed0618dc95a1f7f8e465dc5a68d69b9be02efc72f622ee37845d82b25599 + languageName: node + linkType: hard + +"@percy/core@npm:1.16.0": + version: 1.16.0 + resolution: "@percy/core@npm:1.16.0" + dependencies: + "@percy/client": 1.16.0 + "@percy/config": 1.16.0 + "@percy/dom": 1.16.0 + "@percy/logger": 1.16.0 + content-disposition: ^0.5.4 + cross-spawn: ^7.0.3 + extract-zip: ^2.0.1 + fast-glob: ^3.2.11 + micromatch: ^4.0.4 + mime-types: ^2.1.34 + path-to-regexp: ^6.2.0 + rimraf: ^3.0.2 + ws: ^8.0.0 + checksum: a8202db2a65b0dcb16d879f900cdddb5b5cc0138aec88867f54471f0ed52e5debb8b1f43c620a7dc1fdcfefd9f4b7b8457153f4b0bc2643c6b01a2cc2c4cbe24 + languageName: node + linkType: hard + +"@percy/dom@npm:1.16.0": + version: 1.16.0 + resolution: "@percy/dom@npm:1.16.0" + checksum: 433c2823c82ab4aa2636e3b17658df50765733fa6f645a80ede2dd8e3ee0199cbc62c265b5e77f75919cda2304ef071066f8d1be16b713048298bc66acfb94f0 + languageName: node + linkType: hard + +"@percy/env@npm:1.16.0": + version: 1.16.0 + resolution: "@percy/env@npm:1.16.0" + checksum: 88fba7c4be5ce5c5662d20c3d7d4b2c6df66c516a4e0c0c5e0327768d480eeda8490a9503f60dfd8720df0dfa34481633d3c284a12c25cda87cef3e5381a5e3f + languageName: node + linkType: hard + +"@percy/logger@npm:1.16.0": + version: 1.16.0 + resolution: "@percy/logger@npm:1.16.0" + checksum: 172d2271a6ffd04d1990d616067f1440fb0a236b65f1c52072722e1c6e9c308110bcce86f9ccf91266e1857e83a1d40aed2db2f6dfb947efaf5db59004001d99 + languageName: node + linkType: hard + +"@percy/storybook@npm:^4.3.4": + version: 4.3.4 + resolution: "@percy/storybook@npm:4.3.4" + dependencies: + "@percy/cli-command": ^1.10.4 + cross-spawn: ^7.0.3 + qs: ^6.11.0 + bin: + percy-storybook: bin/percy-storybook.cjs + checksum: c99fab93b7c0b7fcab403b4b658a0a215cc0c80217bb25e91486f7f858b7ca2b9b79879c4a3422acd45b363b26376b61e1728761e96f8bea11aa2a2d9388fa09 + languageName: node + linkType: hard + "@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.3": version: 0.5.8 resolution: "@pmmmwh/react-refresh-webpack-plugin@npm:0.5.8" @@ -4403,6 +4572,8 @@ __metadata: version: 0.0.0-use.local resolution: "@project44-manifest/storybook@workspace:apps/storybook" dependencies: + "@percy/cli": ^1.16.0 + "@percy/storybook": ^4.3.4 "@project44-manifest/react": "*" "@storybook/addon-a11y": ^6.5.10 "@storybook/builder-webpack5": ^6.5.10 @@ -7520,6 +7691,15 @@ __metadata: languageName: node linkType: hard +"@types/yauzl@npm:^2.9.1": + version: 2.10.0 + resolution: "@types/yauzl@npm:2.10.0" + dependencies: + "@types/node": "*" + checksum: 55d27ae5d346ea260e40121675c24e112ef0247649073848e5d4e03182713ae4ec8142b98f61a1c6cbe7d3b72fa99bbadb65d8b01873e5e605cdc30f1ff70ef2 + languageName: node + linkType: hard + "@types/yoga-layout@npm:1.9.2": version: 1.9.2 resolution: "@types/yoga-layout@npm:1.9.2" @@ -8417,6 +8597,18 @@ __metadata: languageName: node linkType: hard +"ajv@npm:^8.6.2": + version: 8.11.2 + resolution: "ajv@npm:8.11.2" + dependencies: + fast-deep-equal: ^3.1.1 + json-schema-traverse: ^1.0.0 + require-from-string: ^2.0.2 + uri-js: ^4.2.2 + checksum: 53435bf79ee7d1eabba8085962dba4c08d08593334b304db7772887f0b7beebc1b3d957432f7437ed4b60e53b5d966a57b439869890209c50fed610459999e3e + languageName: node + linkType: hard + "ansi-align@npm:^3.0.0": version: 3.0.1 resolution: "ansi-align@npm:3.0.1" @@ -9633,6 +9825,13 @@ __metadata: languageName: node linkType: hard +"buffer-crc32@npm:~0.2.3": + version: 0.2.13 + resolution: "buffer-crc32@npm:0.2.13" + checksum: 06252347ae6daca3453b94e4b2f1d3754a3b146a111d81c68924c22d91889a40623264e95e67955b1cb4a68cbedf317abeabb5140a9766ed248973096db5ce1c + languageName: node + linkType: hard + "buffer-equal-constant-time@npm:1.0.1": version: 1.0.1 resolution: "buffer-equal-constant-time@npm:1.0.1" @@ -10662,7 +10861,7 @@ __metadata: languageName: node linkType: hard -"content-disposition@npm:0.5.4": +"content-disposition@npm:0.5.4, content-disposition@npm:^0.5.4": version: 0.5.4 resolution: "content-disposition@npm:0.5.4" dependencies: @@ -13368,6 +13567,23 @@ __metadata: languageName: node linkType: hard +"extract-zip@npm:^2.0.1": + version: 2.0.1 + resolution: "extract-zip@npm:2.0.1" + dependencies: + "@types/yauzl": ^2.9.1 + debug: ^4.1.1 + get-stream: ^5.1.0 + yauzl: ^2.10.0 + dependenciesMeta: + "@types/yauzl": + optional: true + bin: + extract-zip: cli.js + checksum: 8cbda9debdd6d6980819cc69734d874ddd71051c9fe5bde1ef307ebcedfe949ba57b004894b585f758b7c9eeeea0e3d87f2dda89b7d25320459c2c9643ebb635 + languageName: node + linkType: hard + "fast-deep-equal@npm:^3.1.1, fast-deep-equal@npm:^3.1.3": version: 3.1.3 resolution: "fast-deep-equal@npm:3.1.3" @@ -13457,6 +13673,15 @@ __metadata: languageName: node linkType: hard +"fd-slicer@npm:~1.1.0": + version: 1.1.0 + resolution: "fd-slicer@npm:1.1.0" + dependencies: + pend: ~1.2.0 + checksum: c8585fd5713f4476eb8261150900d2cb7f6ff2d87f8feb306ccc8a1122efd152f1783bdb2b8dc891395744583436bfd8081d8e63ece0ec8687eeefea394d4ff2 + languageName: node + linkType: hard + "fetch-blob@npm:^3.1.2, fetch-blob@npm:^3.1.4": version: 3.2.0 resolution: "fetch-blob@npm:3.2.0" @@ -15147,6 +15372,17 @@ __metadata: languageName: node linkType: hard +"image-size@npm:^1.0.0": + version: 1.0.2 + resolution: "image-size@npm:1.0.2" + dependencies: + queue: 6.0.2 + bin: + image-size: bin/image-size.js + checksum: 01745fdb47f87cecf538e69c63f9adc5bfab30a345345c2de91105f3afbd1bfcfba1256af02bf3323077b33b0004469a837e077bf0cbb9c907e9c1e9e7547585 + languageName: node + linkType: hard + "imagescript@npm:^1.2.9": version: 1.2.9 resolution: "imagescript@npm:1.2.9" @@ -18823,7 +19059,7 @@ __metadata: languageName: node linkType: hard -"mime-types@npm:^2.1.12, mime-types@npm:^2.1.27, mime-types@npm:^2.1.30, mime-types@npm:~2.1.24, mime-types@npm:~2.1.34": +"mime-types@npm:^2.1.12, mime-types@npm:^2.1.27, mime-types@npm:^2.1.30, mime-types@npm:^2.1.34, mime-types@npm:~2.1.24, mime-types@npm:~2.1.34": version: 2.1.35 resolution: "mime-types@npm:2.1.35" dependencies: @@ -20393,6 +20629,13 @@ __metadata: languageName: node linkType: hard +"path-to-regexp@npm:^6.2.0": + version: 6.2.1 + resolution: "path-to-regexp@npm:6.2.1" + checksum: f0227af8284ea13300f4293ba111e3635142f976d4197f14d5ad1f124aebd9118783dd2e5f1fe16f7273743cc3dbeddfb7493f237bb27c10fdae07020cc9b698 + languageName: node + linkType: hard + "path-type@npm:^1.0.0": version: 1.1.0 resolution: "path-type@npm:1.1.0" @@ -20433,6 +20676,13 @@ __metadata: languageName: node linkType: hard +"pend@npm:~1.2.0": + version: 1.2.0 + resolution: "pend@npm:1.2.0" + checksum: 6c72f5243303d9c60bd98e6446ba7d30ae29e3d56fdb6fae8767e8ba6386f33ee284c97efe3230a0d0217e2b1723b8ab490b1bbf34fcbb2180dbc8a9de47850d + languageName: node + linkType: hard + "periscopic@npm:^3.0.0": version: 3.0.4 resolution: "periscopic@npm:3.0.4" @@ -21158,7 +21408,7 @@ __metadata: languageName: node linkType: hard -"qs@npm:6.11.0, qs@npm:^6.10.0": +"qs@npm:6.11.0, qs@npm:^6.10.0, qs@npm:^6.11.0": version: 6.11.0 resolution: "qs@npm:6.11.0" dependencies: @@ -21207,6 +21457,15 @@ __metadata: languageName: node linkType: hard +"queue@npm:6.0.2": + version: 6.0.2 + resolution: "queue@npm:6.0.2" + dependencies: + inherits: ~2.0.3 + checksum: ebc23639248e4fe40a789f713c20548e513e053b3dc4924b6cb0ad741e3f264dcff948225c8737834dd4f9ec286dbc06a1a7c13858ea382d9379f4303bcc0916 + languageName: node + linkType: hard + "quick-lru@npm:^4.0.1": version: 4.0.1 resolution: "quick-lru@npm:4.0.1" @@ -25544,6 +25803,21 @@ __metadata: languageName: node linkType: hard +"ws@npm:^8.0.0": + version: 8.11.0 + resolution: "ws@npm:8.11.0" + peerDependencies: + bufferutil: ^4.0.1 + utf-8-validate: ^5.0.2 + peerDependenciesMeta: + bufferutil: + optional: true + utf-8-validate: + optional: true + checksum: 316b33aba32f317cd217df66dbfc5b281a2f09ff36815de222bc859e3424d83766d9eb2bd4d667de658b6ab7be151f258318fb1da812416b30be13103e5b5c67 + languageName: node + linkType: hard + "ws@npm:^8.2.3, ws@npm:^8.9.0": version: 8.10.0 resolution: "ws@npm:8.10.0" @@ -25650,7 +25924,7 @@ __metadata: languageName: node linkType: hard -"yaml@npm:^2.1.1, yaml@npm:^2.1.3": +"yaml@npm:^2.0.0, yaml@npm:^2.1.1, yaml@npm:^2.1.3": version: 2.1.3 resolution: "yaml@npm:2.1.3" checksum: 91316062324a93f9cb547469092392e7d004ff8f70c40fecb420f042a4870b2181557350da56c92f07bd44b8f7a252b0be26e6ade1f548e1f4351bdd01c9d3c7 @@ -25730,6 +26004,16 @@ __metadata: languageName: node linkType: hard +"yauzl@npm:^2.10.0": + version: 2.10.0 + resolution: "yauzl@npm:2.10.0" + dependencies: + buffer-crc32: ~0.2.3 + fd-slicer: ~1.1.0 + checksum: 7f21fe0bbad6e2cb130044a5d1d0d5a0e5bf3d8d4f8c4e6ee12163ce798fee3de7388d22a7a0907f563ac5f9d40f8699a223d3d5c1718da90b0156da6904022b + languageName: node + linkType: hard + "yn@npm:3.1.1": version: 3.1.1 resolution: "yn@npm:3.1.1"