From 8d428c42a73931e5eca1d48b308f5f120f043241 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Fri, 12 Apr 2024 15:39:19 +0200 Subject: [PATCH] test/documentation): add snapshot command --- .../documentation/cypress.snapshot.config.js | 2 +- .../snapshots/components/button.snapshot.ts | 12 +- .../documentation/cypress/support/commands.ts | 33 ++++ .../documentation/cypress/support/index.d.ts | 1 + packages/documentation/package.json | 1 + pnpm-lock.yaml | 141 +++++++++++------- 6 files changed, 136 insertions(+), 54 deletions(-) diff --git a/packages/documentation/cypress.snapshot.config.js b/packages/documentation/cypress.snapshot.config.js index 865d0cb1c9..e42cf2b4a1 100644 --- a/packages/documentation/cypress.snapshot.config.js +++ b/packages/documentation/cypress.snapshot.config.js @@ -4,7 +4,7 @@ module.exports = defineConfig({ projectId: 'f9aegu', e2e: { baseUrl: 'http://localhost:9001', - specPattern: ['cypress/**/*.snapshot.{ts,tsx}'], + specPattern: ['cypress/**/button.snapshot.{ts,tsx}'], includeShadowDom: true, viewportWidth: 1024, viewportHeight: 576, diff --git a/packages/documentation/cypress/snapshots/components/button.snapshot.ts b/packages/documentation/cypress/snapshots/components/button.snapshot.ts index b9087b8749..1392a86b5c 100644 --- a/packages/documentation/cypress/snapshots/components/button.snapshot.ts +++ b/packages/documentation/cypress/snapshots/components/button.snapshot.ts @@ -1,7 +1,13 @@ describe('Button', () => { it('default', () => { - cy.visit('/iframe.html?id=snapshots--button'); - cy.get('button post-icon', { timeout: 30000 }).should('be.visible'); - cy.percySnapshot('Buttons', { widths: [1440] }); + // cy.visit('/iframe.html?id=snapshots--button'); + // cy.get('button post-icon', { timeout: 30000 }).should('be.visible'); + // cy.percySnapshot('Buttons', { widths: [1440] }); + + cy.snapshot({ + url: { story: 'button' }, + page: { selector: 'button post-icon' }, + snapshot: { name: 'Buttons' }, + }); }); }); diff --git a/packages/documentation/cypress/support/commands.ts b/packages/documentation/cypress/support/commands.ts index 4afbcb2507..5f68a68a91 100644 --- a/packages/documentation/cypress/support/commands.ts +++ b/packages/documentation/cypress/support/commands.ts @@ -1,3 +1,5 @@ +import { SnapshotOptions } from '@percy/core'; + /// // *********************************************** // This example commands.ts shows you how to @@ -66,3 +68,34 @@ Cypress.Commands.add('checkAriaExpanded', (isExpanded: 'true' | 'false') => { cy.get(`[aria-controls="${id}"]`).should('have.attr', 'aria-expanded', isExpanded); }); }); + +interface ISnapshotOptions { + url: { + id?: string; + story?: string; + }; + page: { + selector: string; + timeout?: number; + }; + snapshot: { + name: string; + wait?: number; + options?: SnapshotOptions; + }; +} + +Cypress.Commands.add('snapshot', (options: ISnapshotOptions) => { + const urlId = options.url.id ?? `snapshots--${options.url.story}`; + const pageTimeout = options.page.timeout ?? 30000; + const snapshotWait = options.snapshot.wait ?? 1000; + const snapshotOptions = options.snapshot.options ?? { widths: [1440] }; + + cy.visit(`/iframe.html?id=${urlId}`); + cy.window().then(w => { + w.addEventListener('storybook:ready', () => { + cy.get(options.page.selector, { timeout: pageTimeout }).should('be.visible'); + cy.wait(snapshotWait).percySnapshot(options.snapshot.name, snapshotOptions); + }); + }); +}); diff --git a/packages/documentation/cypress/support/index.d.ts b/packages/documentation/cypress/support/index.d.ts index 564e9357f2..76e7a9beb8 100644 --- a/packages/documentation/cypress/support/index.d.ts +++ b/packages/documentation/cypress/support/index.d.ts @@ -4,6 +4,7 @@ declare global { registerCollapsibleFrom(url: string): Chainable; checkVisibility(visibility: 'visible' | 'hidden'): Chainable; checkAriaExpanded(isExpanded: 'true' | 'false'): Chainable; + snapshot(options: ISnapshotOptions): Chainable; } } } diff --git a/packages/documentation/package.json b/packages/documentation/package.json index 084c4450ef..c23afc14e2 100644 --- a/packages/documentation/package.json +++ b/packages/documentation/package.json @@ -38,6 +38,7 @@ "@lit/task": "1.0.0", "@open-wc/lit-helpers": "0.7.0", "@percy/cli": "1.28.2", + "@percy/core": "1.28.3", "@percy/cypress": "3.1.2", "@pxtrn/storybook-addon-docs-stencil": "6.4.1", "@storybook/addon-designs": "7.0.9", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 04350f057a..8f8a6453dc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -511,6 +511,9 @@ importers: '@percy/cli': specifier: 1.28.2 version: 1.28.2 + '@percy/core': + specifier: 1.28.3 + version: 1.28.3 '@percy/cypress': specifier: 3.1.2 version: 3.1.2(cypress@13.7.2) @@ -561,7 +564,7 @@ importers: version: 7.6.17(lit@3.1.2)(react-dom@18.2.0)(react@18.2.0) '@storybook/web-components-vite': specifier: 7.6.17 - version: 7.6.17(lit@3.1.2)(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)(vite@5.0.12) + version: 7.6.17(lit@3.1.2)(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)(vite@5.1.5) '@types/css-modules': specifier: 1.0.5 version: 1.0.5 @@ -1815,7 +1818,6 @@ packages: dependencies: '@babel/highlight': 7.24.2 picocolors: 1.0.0 - dev: true /@babel/compat-data@7.23.5: resolution: {integrity: sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==} @@ -2265,7 +2267,6 @@ packages: chalk: 2.4.2 js-tokens: 4.0.0 picocolors: 1.0.0 - dev: true /@babel/parser@7.23.6: resolution: {integrity: sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==} @@ -4145,7 +4146,7 @@ packages: resolution: {integrity: sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==} engines: {node: '>=6.9.0'} dependencies: - '@babel/code-frame': 7.23.5 + '@babel/code-frame': 7.24.2 '@babel/parser': 7.23.9 '@babel/types': 7.23.9 @@ -6176,6 +6177,15 @@ packages: '@percy/logger': 1.28.2 dev: true + /@percy/client@1.28.3: + resolution: {integrity: sha512-UpgwvppMh5DMQlH1QVPkt3A2gMr5WiZJA6kHBnTRgUyGt7tZYVlvJshb1Mbu2tnTYJ1vtA6Lrtyb+VCLNAodug==} + engines: {node: '>=14'} + dependencies: + '@percy/env': 1.28.3 + '@percy/logger': 1.28.3 + pako: 2.1.0 + dev: true + /@percy/config@1.28.2: resolution: {integrity: sha512-Q9NoenDuhRiY+eBGrw8FJmmU8hErTsjBxccUOvrfn0A4JXRvcFHitvrh85rXG/HhyT4bcoB9O93QhV6F9KTq7A==} engines: {node: '>=14'} @@ -6186,6 +6196,16 @@ packages: yaml: 2.3.4 dev: true + /@percy/config@1.28.3: + resolution: {integrity: sha512-qoKTLD1bBTbv1gncS3F48IAg8WkDnSOH1EJpZdl2ZkbbQV1DUELqOiKZQjl4EYStI8JR722r8D9PHls4K3nJWg==} + engines: {node: '>=14'} + dependencies: + '@percy/logger': 1.28.3 + ajv: 8.12.0 + cosmiconfig: 8.2.0 + yaml: 2.3.4 + dev: true + /@percy/core@1.28.2: resolution: {integrity: sha512-7JkZrsLoHDD2bkhN4u5T/+0sC0UT73Lv1qF3lIMLu+Qjt1BhyKdnitbOnjFlrVOwqC5uNgr7/gvcULLVbJga8Q==} engines: {node: '>=14'} @@ -6204,7 +6224,33 @@ packages: mime-types: 2.1.35 path-to-regexp: 6.2.1 rimraf: 3.0.2 - ws: 8.13.0 + ws: 8.16.0 + transitivePeerDependencies: + - bufferutil + - supports-color + - utf-8-validate + dev: true + + /@percy/core@1.28.3: + resolution: {integrity: sha512-aICOHPYrEmG8EIDhepl/wmVyaGo7PFWHHCgf2QUwvfp6qDaydfIVbVJ87BhXLB3Tz1xfjxeE+X1egkavvffq1w==} + engines: {node: '>=14'} + requiresBuild: true + dependencies: + '@percy/client': 1.28.3 + '@percy/config': 1.28.3 + '@percy/dom': 1.28.3 + '@percy/logger': 1.28.3 + '@percy/webdriver-utils': 1.28.3 + content-disposition: 0.5.4 + cross-spawn: 7.0.3 + extract-zip: 2.0.1(supports-color@8.1.1) + fast-glob: 3.3.2 + micromatch: 4.0.5 + mime-types: 2.1.35 + pako: 2.1.0 + path-to-regexp: 6.2.1 + rimraf: 3.0.2 + ws: 8.16.0 transitivePeerDependencies: - bufferutil - supports-color @@ -6224,6 +6270,10 @@ packages: resolution: {integrity: sha512-bUU38EMowO+y+pnLzl0naikv0pVQvcrkrBm7K7eVGUt6orRTqr5Tr8bMV7Ooac4mlMwaZvCkAH7gPhiDAONUmw==} dev: true + /@percy/dom@1.28.3: + resolution: {integrity: sha512-ybCctmntKK/4JoHkY2ISieqmIxzOFVQTPGqyBuckojVaEuVJS7KjYWg54Wk3/SPchpcNPbRS4/1wxgVxU3BE/g==} + dev: true + /@percy/env@1.28.2: resolution: {integrity: sha512-40UhiL5MylFN39pzzoyDKgult2ZmSbuc3ADrNGBx9zyMdFEoTLZg5BcFZoSUHHjPboe2jYZFYrRqoXxix++OfA==} engines: {node: '>=14'} @@ -6231,11 +6281,23 @@ packages: '@percy/logger': 1.28.2 dev: true + /@percy/env@1.28.3: + resolution: {integrity: sha512-hFNj81QGNA7LZhKUD3TwraAQYjKwrFfLS4j7fBwGZbV5QfanUMnaUaecTiwvOwflEqk2YOoivZ6vY7hmKhdQhg==} + engines: {node: '>=14'} + dependencies: + '@percy/logger': 1.28.3 + dev: true + /@percy/logger@1.28.2: resolution: {integrity: sha512-ZF1iDjY9oBL+4WEqGuJ4JJaUdyUqGhdJtS+qDV8iqrQ6VngWBpO3lg0Uhy8RIkqUSLGKbwVbnxkfvA5kXx+yAw==} engines: {node: '>=14'} dev: true + /@percy/logger@1.28.3: + resolution: {integrity: sha512-zAFlK4CPCC55mnZCtYRJxdQGQ69q1e99xy0z1JkZNe56HL5jShtG3JDdf9T6WH/H+snECdv0oPCwY40gAjZmWA==} + engines: {node: '>=14'} + dev: true + /@percy/sdk-utils@1.24.0: resolution: {integrity: sha512-kfYxX0rHP5N2Da6HyfjRCVaeNahAO9XV5WD4SKWKKjdKVkV/Z5/XjVgSKlTBLSYxnWDzYJJ4UHZV43Mw+facMA==} engines: {node: '>=14'} @@ -6246,6 +6308,11 @@ packages: engines: {node: '>=14'} dev: true + /@percy/sdk-utils@1.28.3: + resolution: {integrity: sha512-0qzyW28U4p/GRSx0mxu+O5dygtECk5uFWoxAbDVGjnTodvH4LKa6nfjr1da+Ebi9w1jW4cNBq1eVGT3Riga/vw==} + engines: {node: '>=14'} + dev: true + /@percy/webdriver-utils@1.28.2: resolution: {integrity: sha512-bD0UoR1/69xcsL2mhvZ4xQKhWJYbqUJUFMiNr8xqR55Z4dArbeN9S2ZYU6aMVRemuKyn7ki0ttNFHq0z2GFvGg==} engines: {node: '>=14'} @@ -6254,6 +6321,14 @@ packages: '@percy/sdk-utils': 1.28.2 dev: true + /@percy/webdriver-utils@1.28.3: + resolution: {integrity: sha512-B1fILN7XgTsFf0qdsFHx1IV0rqBvwx/lY6Z0jJdc5Md0YNnlxk4YQHUACaovEE3OtVLc7Nc15RTiCVonXFfYiA==} + engines: {node: '>=14'} + dependencies: + '@percy/config': 1.28.3 + '@percy/sdk-utils': 1.28.3 + dev: true + /@pkgjs/parseargs@0.11.0: resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} engines: {node: '>=14'} @@ -7452,7 +7527,7 @@ packages: - supports-color dev: true - /@storybook/builder-vite@7.6.17(typescript@5.3.3)(vite@5.0.12): + /@storybook/builder-vite@7.6.17(typescript@5.3.3)(vite@5.1.5): resolution: {integrity: sha512-2Q32qalI401EsKKr9Hkk8TAOcHEerqwsjCpQgTNJnCu6GgCVKoVUcb99oRbR9Vyg0xh+jb19XiWqqQujFtLYlQ==} peerDependencies: '@preact/preset-vite': '*' @@ -7484,7 +7559,7 @@ packages: magic-string: 0.30.7 rollup: 3.29.4 typescript: 5.3.3 - vite: 5.0.12(sass@1.74.1) + vite: 5.1.5(@types/node@18.17.19)(less@4.2.0)(sass@1.74.1) transitivePeerDependencies: - encoding - supports-color @@ -7972,11 +8047,11 @@ packages: file-system-cache: 2.3.0 dev: true - /@storybook/web-components-vite@7.6.17(lit@3.1.2)(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)(vite@5.0.12): + /@storybook/web-components-vite@7.6.17(lit@3.1.2)(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)(vite@5.1.5): resolution: {integrity: sha512-luBXrRP1OS9QfB+Sw7hcP0cktqQmbF41+m2R/3C56DjBckoh8ojw0CUIpNIktkN4rS9cB/NUGHvaeZSWuDtuFw==} engines: {node: ^14.18 || >=16} dependencies: - '@storybook/builder-vite': 7.6.17(typescript@5.3.3)(vite@5.0.12) + '@storybook/builder-vite': 7.6.17(typescript@5.3.3)(vite@5.1.5) '@storybook/core-server': 7.6.17 '@storybook/node-logger': 7.6.17 '@storybook/web-components': 7.6.17(lit@3.1.2)(react-dom@18.2.0)(react@18.2.0) @@ -16720,7 +16795,7 @@ packages: whatwg-encoding: 2.0.0 whatwg-mimetype: 3.0.0 whatwg-url: 11.0.0 - ws: 8.13.0 + ws: 8.16.0 xml-name-validator: 4.0.0 transitivePeerDependencies: - bufferutil @@ -17139,8 +17214,6 @@ packages: peerDependenciesMeta: webpack: optional: true - webpack-sources: - optional: true dependencies: webpack: 5.90.3(esbuild@0.20.1) webpack-sources: 3.2.3 @@ -18778,6 +18851,10 @@ packages: resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==} dev: true + /pako@2.1.0: + resolution: {integrity: sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==} + dev: true + /parent-module@1.0.1: resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==} engines: {node: '>=6'} @@ -18817,7 +18894,7 @@ packages: resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==} engines: {node: '>=8'} dependencies: - '@babel/code-frame': 7.23.5 + '@babel/code-frame': 7.24.2 error-ex: 1.3.2 json-parse-even-better-errors: 2.3.1 lines-and-columns: 1.2.4 @@ -22094,7 +22171,7 @@ packages: jest-worker: 27.5.1 schema-utils: 3.3.0 serialize-javascript: 6.0.1 - terser: 5.29.1 + terser: 5.27.0 webpack: 5.90.3(esbuild@0.20.1) dev: true @@ -23317,42 +23394,6 @@ packages: replace-ext: 1.0.1 dev: true - /vite@5.0.12(sass@1.74.1): - resolution: {integrity: sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==} - engines: {node: ^18.0.0 || >=20.0.0} - hasBin: true - peerDependencies: - '@types/node': ^18.0.0 || >=20.0.0 - less: '*' - lightningcss: ^1.21.0 - sass: '*' - stylus: '*' - sugarss: '*' - terser: ^5.4.0 - peerDependenciesMeta: - '@types/node': - optional: true - less: - optional: true - lightningcss: - optional: true - sass: - optional: true - stylus: - optional: true - sugarss: - optional: true - terser: - optional: true - dependencies: - esbuild: 0.19.12 - postcss: 8.4.38 - rollup: 4.13.0 - sass: 1.74.1 - optionalDependencies: - fsevents: 2.3.3 - dev: true - /vite@5.1.5(@types/node@18.17.19)(less@4.2.0)(sass@1.74.1): resolution: {integrity: sha512-BdN1xh0Of/oQafhU+FvopafUp6WaYenLU/NFoL5WyJL++GxkNfieKzBhM24H3HVsPQrlAqB7iJYTHabzaRed5Q==} engines: {node: ^18.0.0 || >=20.0.0}