From 2d04a066ba555747341293814a57681d0c0cfd59 Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Tue, 1 Jul 2025 16:45:07 +0200 Subject: [PATCH 01/19] chore: update playwright in ci to run only on aria changes --- .config/.jscpd.json | 1 + .github/workflows/02-e2e-patternhub.yml | 81 +++++++++++++++++++ .github/workflows/02-e2e-regenerate.yml | 3 +- .github/workflows/02-e2e-showcases.yml | 66 ++++++++++----- .github/workflows/default.yml | 16 +++- .github/workflows/release.yml | 5 +- package-lock.json | 2 +- .../mitosis/new/showcases/e2e-a11y-test.ejs.t | 1 - .../new/showcases/e2e-snapshot-test.ejs.t | 1 - scripts/github/snapshot-changes/check-aria.ts | 3 + .../github/snapshot-changes/check-visual.ts | 3 + scripts/github/snapshot-changes/check.ts | 22 +++++ showcases/angular-showcase/package.json | 4 + .../accordion-item-a11y-checker.spec.ts | 6 ++ .../accordion-item-aria-snapshot.spec.ts | 7 ++ ...pec.ts => accordion-item-axe-core.spec.ts} | 3 +- ...=> accordion-item-visual-snapshot.spec.ts} | 3 +- .../accordion/accordion-a11y-checker.spec.ts | 8 ++ .../accordion/accordion-aria-snapshot.spec.ts | 7 ++ ...11y.spec.ts => accordion-axe-core.spec.ts} | 9 +-- ...c.ts => accordion-visual-snapshot.spec.ts} | 3 +- .../e2e/badge/badge-a11y-checker.spec.ts | 6 ++ .../e2e/badge/badge-aria-snapshot.spec.ts | 7 ++ ...ge-a11y.spec.ts => badge-axe-core.spec.ts} | 3 +- ....spec.ts => badge-visual-snapshot.spec.ts} | 3 +- .../e2e/brand/brand-a11y-checker.spec.ts | 6 ++ .../e2e/brand/brand-aria-snapshot.spec.ts | 7 ++ ...nd-a11y.spec.ts => brand-axe-core.spec.ts} | 3 +- ....spec.ts => brand-visual-snapshot.spec.ts} | 3 +- .../e2e/button/button-a11y-checker.spec.ts | 6 ++ .../e2e/button/button-aria-snapshot.spec.ts | 7 ++ ...n-a11y.spec.ts => button-axe-core.spec.ts} | 3 +- ...spec.ts => button-visual-snapshot.spec.ts} | 3 +- showcases/e2e/card/card-a11y-checker.spec.ts | 6 ++ showcases/e2e/card/card-aria-snapshot.spec.ts | 7 ++ ...ard-a11y.spec.ts => card-axe-core.spec.ts} | 3 +- ...t.spec.ts => card-visual-snapshot.spec.ts} | 3 +- .../checkbox/checkbox-a11y-checker.spec.ts | 6 ++ .../checkbox/checkbox-aria-snapshot.spec.ts | 7 ++ ...a11y.spec.ts => checkbox-axe-core.spec.ts} | 3 +- ...ec.ts => checkbox-visual-snapshot.spec.ts} | 2 +- .../custom-select-a11y-checker.spec.ts | 8 ++ .../custom-select-aria-snapshot.spec.ts | 22 +++++ ...spec.ts => custom-select-axe-core.spec.ts} | 3 +- ... => custom-select-visual-snapshot.spec.ts} | 3 +- .../e2e/divider/divider-a11y-checker.spec.ts | 6 ++ .../e2e/divider/divider-aria-snapshot.spec.ts | 8 ++ ...-a11y.spec.ts => divider-axe-core.spec.ts} | 3 +- ...pec.ts => divider-visual-snapshot.spec.ts} | 3 +- .../e2e/drawer/drawer-a11y-checker.spec.ts | 6 ++ .../e2e/drawer/drawer-aria-snapshot.spec.ts | 7 ++ ...r-a11y.spec.ts => drawer-axe-core.spec.ts} | 3 +- ...spec.ts => drawer-visual-snapshot.spec.ts} | 3 +- .../e2e/header/header-a11y-checker.spec.ts | 10 +++ .../e2e/header/header-aria-snapshot.spec.ts | 11 +++ ...r-a11y.spec.ts => header-axe-core.spec.ts} | 10 +-- ...spec.ts => header-visual-snapshot.spec.ts} | 7 +- showcases/e2e/home/showcase-home.spec.ts | 2 +- showcases/e2e/icon/icon-a11y-checker.spec.ts | 6 ++ showcases/e2e/icon/icon-aria-snapshot.spec.ts | 7 ++ ...con-a11y.spec.ts => icon-axe-core.spec.ts} | 3 +- ...t.spec.ts => icon-visual-snapshot.spec.ts} | 3 +- .../infotext/infotext-a11y-checker.spec.ts | 6 ++ .../infotext/infotext-aria-snapshot.spec.ts | 7 ++ ...a11y.spec.ts => infotext-axe-core.spec.ts} | 3 +- ...ec.ts => infotext-visual-snapshot.spec.ts} | 3 +- .../e2e/input/input-a11y-checker.spec.ts | 8 ++ .../e2e/input/input-aria-snapshot.spec.ts | 7 ++ ...ut-a11y.spec.ts => input-axe-core.spec.ts} | 5 +- ....spec.ts => input-visual-snapshot.spec.ts} | 3 +- showcases/e2e/link/link-a11y-checker.spec.ts | 10 +++ showcases/e2e/link/link-aria-snapshot.spec.ts | 7 ++ ...ink-a11y.spec.ts => link-axe-core.spec.ts} | 3 +- ...t.spec.ts => link-visual-snapshot.spec.ts} | 3 +- .../navigation-item-a11y-checker.spec.ts | 8 ++ .../navigation-item-aria-snapshot.spec.ts | 13 +++ ...ec.ts => navigation-item-axe-core.spec.ts} | 7 +- ...> navigation-item-visual-snapshot.spec.ts} | 6 +- .../navigation-a11y-checker.spec.ts | 6 ++ .../navigation-aria-snapshot.spec.ts | 11 +++ ...1y.spec.ts => navigation-axe-core.spec.ts} | 7 +- ....ts => navigation-visual-snapshot.spec.ts} | 6 +- .../notification-a11y-checker.spec.ts | 6 ++ .../notification-aria-snapshot.spec.ts | 7 ++ ....spec.ts => notification-axe-core.spec.ts} | 3 +- ...s => notification-visual-snapshot.spec.ts} | 3 +- .../e2e/popover/popover-a11y-checker.spec.ts | 6 ++ .../e2e/popover/popover-aria-snapshot.spec.ts | 13 +++ ...-a11y.spec.ts => popover-axe-core.spec.ts} | 3 +- ...pec.ts => popover-visual-snapshot.spec.ts} | 10 +-- .../e2e/radio/radio-a11y-checker.spec.ts | 6 ++ .../e2e/radio/radio-aria-snapshot.spec.ts | 7 ++ ...io-a11y.spec.ts => radio-axe-core.spec.ts} | 3 +- ....spec.ts => radio-visual-snapshot.spec.ts} | 2 +- .../e2e/section/section-a11y-checker.spec.ts | 6 ++ .../e2e/section/section-aria-snapshot.spec.ts | 7 ++ ...-a11y.spec.ts => section-axe-core.spec.ts} | 3 +- ...pec.ts => section-visual-snapshot.spec.ts} | 3 +- .../e2e/select/select-a11y-checker.spec.ts | 6 ++ .../e2e/select/select-aria-snapshot.spec.ts | 7 ++ ...t-a11y.spec.ts => select-axe-core.spec.ts} | 3 +- ...spec.ts => select-visual-snapshot.spec.ts} | 3 +- .../e2e/stack/stack-a11y-checker.spec.ts | 6 ++ .../e2e/stack/stack-aria-snapshot.spec.ts | 8 ++ ...ck-a11y.spec.ts => stack-axe-core.spec.ts} | 3 +- ....spec.ts => stack-visual-snapshot.spec.ts} | 0 .../e2e/switch/switch-a11y-checker.spec.ts | 10 +++ .../e2e/switch/switch-aria-snapshot.spec.ts | 8 ++ ...h-a11y.spec.ts => switch-axe-core.spec.ts} | 7 +- ...spec.ts => switch-visual-snapshot.spec.ts} | 2 +- .../tab-item/tab-item-a11y-checker.spec.ts | 18 +++++ .../tab-item/tab-item-aria-snapshot.spec.ts | 7 ++ ...a11y.spec.ts => tab-item-axe-core.spec.ts} | 7 +- ...ec.ts => tab-item-visual-snapshot.spec.ts} | 3 +- showcases/e2e/tabs/tabs-a11y-checker.spec.ts | 14 ++++ showcases/e2e/tabs/tabs-aria-snapshot.spec.ts | 23 ++++++ ...abs-a11y.spec.ts => tabs-axe-core.spec.ts} | 7 +- ...t.spec.ts => tabs-visual-snapshot.spec.ts} | 6 +- showcases/e2e/tag/tag-a11y-checker.spec.ts | 6 ++ showcases/e2e/tag/tag-aria-snapshot.spec.ts | 8 ++ ...{tag-a11y.spec.ts => tag-axe-core.spec.ts} | 3 +- ...ot.spec.ts => tag-visual-snapshot.spec.ts} | 3 +- .../textarea/textarea-a11y-checker.spec.ts | 9 +++ .../textarea/textarea-aria-snapshot.spec.ts | 7 ++ ...a11y.spec.ts => textarea-axe-core.spec.ts} | 3 +- ...ec.ts => textarea-visual-snapshot.spec.ts} | 2 +- .../e2e/tooltip/tooltip-a11y-checker.spec.ts | 6 ++ .../e2e/tooltip/tooltip-aria-snapshot.spec.ts | 13 +++ ...-a11y.spec.ts => tooltip-axe-core.spec.ts} | 3 +- ...pec.ts => tooltip-visual-snapshot.spec.ts} | 6 +- showcases/patternhub/package.json | 4 +- .../playwright.patternhub-config.ts | 0 showcases/playwright.a11y-checker.ts | 9 +++ showcases/playwright.aria-snapshots.ts | 9 +++ showcases/playwright.axe-core.ts | 9 +++ ...hots.ts => playwright.visual-snapshots.ts} | 2 +- showcases/react-showcase/package.json | 13 ++- .../playwright.screen-reader.macos.ts | 0 .../playwright.screen-reader.ts | 0 .../playwright.screen-reader.windows.ts | 0 showcases/stencil-showcase/package.json | 4 + showcases/vue-showcase/package.json | 6 +- 142 files changed, 763 insertions(+), 209 deletions(-) create mode 100644 .github/workflows/02-e2e-patternhub.yml create mode 100644 scripts/github/snapshot-changes/check-aria.ts create mode 100644 scripts/github/snapshot-changes/check-visual.ts create mode 100644 scripts/github/snapshot-changes/check.ts create mode 100644 showcases/e2e/accordion-item/accordion-item-a11y-checker.spec.ts create mode 100644 showcases/e2e/accordion-item/accordion-item-aria-snapshot.spec.ts rename showcases/e2e/accordion-item/{accordion-item-a11y.spec.ts => accordion-item-axe-core.spec.ts} (81%) rename showcases/e2e/accordion-item/{accordion-item-snapshot.spec.ts => accordion-item-visual-snapshot.spec.ts} (58%) create mode 100644 showcases/e2e/accordion/accordion-a11y-checker.spec.ts create mode 100644 showcases/e2e/accordion/accordion-aria-snapshot.spec.ts rename showcases/e2e/accordion/{accordion-a11y.spec.ts => accordion-axe-core.spec.ts} (80%) rename showcases/e2e/accordion/{accordion-snapshot.spec.ts => accordion-visual-snapshot.spec.ts} (57%) create mode 100644 showcases/e2e/badge/badge-a11y-checker.spec.ts create mode 100644 showcases/e2e/badge/badge-aria-snapshot.spec.ts rename showcases/e2e/badge/{badge-a11y.spec.ts => badge-axe-core.spec.ts} (71%) rename showcases/e2e/badge/{badge-snapshot.spec.ts => badge-visual-snapshot.spec.ts} (55%) create mode 100644 showcases/e2e/brand/brand-a11y-checker.spec.ts create mode 100644 showcases/e2e/brand/brand-aria-snapshot.spec.ts rename showcases/e2e/brand/{brand-a11y.spec.ts => brand-axe-core.spec.ts} (71%) rename showcases/e2e/brand/{brand-snapshot.spec.ts => brand-visual-snapshot.spec.ts} (55%) create mode 100644 showcases/e2e/button/button-a11y-checker.spec.ts create mode 100644 showcases/e2e/button/button-aria-snapshot.spec.ts rename showcases/e2e/button/{button-a11y.spec.ts => button-axe-core.spec.ts} (71%) rename showcases/e2e/button/{button-snapshot.spec.ts => button-visual-snapshot.spec.ts} (56%) create mode 100644 showcases/e2e/card/card-a11y-checker.spec.ts create mode 100644 showcases/e2e/card/card-aria-snapshot.spec.ts rename showcases/e2e/card/{card-a11y.spec.ts => card-axe-core.spec.ts} (71%) rename showcases/e2e/card/{card-snapshot.spec.ts => card-visual-snapshot.spec.ts} (55%) create mode 100644 showcases/e2e/checkbox/checkbox-a11y-checker.spec.ts create mode 100644 showcases/e2e/checkbox/checkbox-aria-snapshot.spec.ts rename showcases/e2e/checkbox/{checkbox-a11y.spec.ts => checkbox-axe-core.spec.ts} (71%) rename showcases/e2e/checkbox/{checkbox-snapshot.spec.ts => checkbox-visual-snapshot.spec.ts} (89%) create mode 100644 showcases/e2e/custom-select/custom-select-a11y-checker.spec.ts create mode 100644 showcases/e2e/custom-select/custom-select-aria-snapshot.spec.ts rename showcases/e2e/custom-select/{custom-select-a11y.spec.ts => custom-select-axe-core.spec.ts} (74%) rename showcases/e2e/custom-select/{custom-select-snapshot.spec.ts => custom-select-visual-snapshot.spec.ts} (81%) create mode 100644 showcases/e2e/divider/divider-a11y-checker.spec.ts create mode 100644 showcases/e2e/divider/divider-aria-snapshot.spec.ts rename showcases/e2e/divider/{divider-a11y.spec.ts => divider-axe-core.spec.ts} (71%) rename showcases/e2e/divider/{divider-snapshot.spec.ts => divider-visual-snapshot.spec.ts} (59%) create mode 100644 showcases/e2e/drawer/drawer-a11y-checker.spec.ts create mode 100644 showcases/e2e/drawer/drawer-aria-snapshot.spec.ts rename showcases/e2e/drawer/{drawer-a11y.spec.ts => drawer-axe-core.spec.ts} (80%) rename showcases/e2e/drawer/{drawer-snapshot.spec.ts => drawer-visual-snapshot.spec.ts} (56%) create mode 100644 showcases/e2e/header/header-a11y-checker.spec.ts create mode 100644 showcases/e2e/header/header-aria-snapshot.spec.ts rename showcases/e2e/header/{header-a11y.spec.ts => header-axe-core.spec.ts} (72%) rename showcases/e2e/header/{header-snapshot.spec.ts => header-visual-snapshot.spec.ts} (61%) create mode 100644 showcases/e2e/icon/icon-a11y-checker.spec.ts create mode 100644 showcases/e2e/icon/icon-aria-snapshot.spec.ts rename showcases/e2e/icon/{icon-a11y.spec.ts => icon-axe-core.spec.ts} (71%) rename showcases/e2e/icon/{icon-snapshot.spec.ts => icon-visual-snapshot.spec.ts} (55%) create mode 100644 showcases/e2e/infotext/infotext-a11y-checker.spec.ts create mode 100644 showcases/e2e/infotext/infotext-aria-snapshot.spec.ts rename showcases/e2e/infotext/{infotext-a11y.spec.ts => infotext-axe-core.spec.ts} (71%) rename showcases/e2e/infotext/{infotext-snapshot.spec.ts => infotext-visual-snapshot.spec.ts} (56%) create mode 100644 showcases/e2e/input/input-a11y-checker.spec.ts create mode 100644 showcases/e2e/input/input-aria-snapshot.spec.ts rename showcases/e2e/input/{input-a11y.spec.ts => input-axe-core.spec.ts} (71%) rename showcases/e2e/input/{input-snapshot.spec.ts => input-visual-snapshot.spec.ts} (56%) create mode 100644 showcases/e2e/link/link-a11y-checker.spec.ts create mode 100644 showcases/e2e/link/link-aria-snapshot.spec.ts rename showcases/e2e/link/{link-a11y.spec.ts => link-axe-core.spec.ts} (78%) rename showcases/e2e/link/{link-snapshot.spec.ts => link-visual-snapshot.spec.ts} (56%) create mode 100644 showcases/e2e/navigation-item/navigation-item-a11y-checker.spec.ts create mode 100644 showcases/e2e/navigation-item/navigation-item-aria-snapshot.spec.ts rename showcases/e2e/navigation-item/{navigation-item-a11y.spec.ts => navigation-item-axe-core.spec.ts} (77%) rename showcases/e2e/navigation-item/{navigation-item-snapshot.spec.ts => navigation-item-visual-snapshot.spec.ts} (68%) create mode 100644 showcases/e2e/navigation/navigation-a11y-checker.spec.ts create mode 100644 showcases/e2e/navigation/navigation-aria-snapshot.spec.ts rename showcases/e2e/navigation/{navigation-a11y.spec.ts => navigation-axe-core.spec.ts} (73%) rename showcases/e2e/navigation/{navigation-snapshot.spec.ts => navigation-visual-snapshot.spec.ts} (60%) create mode 100644 showcases/e2e/notification/notification-a11y-checker.spec.ts create mode 100644 showcases/e2e/notification/notification-aria-snapshot.spec.ts rename showcases/e2e/notification/{notification-a11y.spec.ts => notification-axe-core.spec.ts} (72%) rename showcases/e2e/notification/{notification-snapshot.spec.ts => notification-visual-snapshot.spec.ts} (58%) create mode 100644 showcases/e2e/popover/popover-a11y-checker.spec.ts create mode 100644 showcases/e2e/popover/popover-aria-snapshot.spec.ts rename showcases/e2e/popover/{popover-a11y.spec.ts => popover-axe-core.spec.ts} (80%) rename showcases/e2e/popover/{popover-snapshot.spec.ts => popover-visual-snapshot.spec.ts} (68%) create mode 100644 showcases/e2e/radio/radio-a11y-checker.spec.ts create mode 100644 showcases/e2e/radio/radio-aria-snapshot.spec.ts rename showcases/e2e/radio/{radio-a11y.spec.ts => radio-axe-core.spec.ts} (71%) rename showcases/e2e/radio/{radio-snapshot.spec.ts => radio-visual-snapshot.spec.ts} (89%) create mode 100644 showcases/e2e/section/section-a11y-checker.spec.ts create mode 100644 showcases/e2e/section/section-aria-snapshot.spec.ts rename showcases/e2e/section/{section-a11y.spec.ts => section-axe-core.spec.ts} (71%) rename showcases/e2e/section/{section-snapshot.spec.ts => section-visual-snapshot.spec.ts} (56%) create mode 100644 showcases/e2e/select/select-a11y-checker.spec.ts create mode 100644 showcases/e2e/select/select-aria-snapshot.spec.ts rename showcases/e2e/select/{select-a11y.spec.ts => select-axe-core.spec.ts} (71%) rename showcases/e2e/select/{select-snapshot.spec.ts => select-visual-snapshot.spec.ts} (56%) create mode 100644 showcases/e2e/stack/stack-a11y-checker.spec.ts create mode 100644 showcases/e2e/stack/stack-aria-snapshot.spec.ts rename showcases/e2e/stack/{stack-a11y.spec.ts => stack-axe-core.spec.ts} (71%) rename showcases/e2e/stack/{stack-snapshot.spec.ts => stack-visual-snapshot.spec.ts} (100%) create mode 100644 showcases/e2e/switch/switch-a11y-checker.spec.ts create mode 100644 showcases/e2e/switch/switch-aria-snapshot.spec.ts rename showcases/e2e/switch/{switch-a11y.spec.ts => switch-axe-core.spec.ts} (53%) rename showcases/e2e/switch/{switch-snapshot.spec.ts => switch-visual-snapshot.spec.ts} (89%) create mode 100644 showcases/e2e/tab-item/tab-item-a11y-checker.spec.ts create mode 100644 showcases/e2e/tab-item/tab-item-aria-snapshot.spec.ts rename showcases/e2e/tab-item/{tab-item-a11y.spec.ts => tab-item-axe-core.spec.ts} (82%) rename showcases/e2e/tab-item/{tab-item-snapshot.spec.ts => tab-item-visual-snapshot.spec.ts} (57%) create mode 100644 showcases/e2e/tabs/tabs-a11y-checker.spec.ts create mode 100644 showcases/e2e/tabs/tabs-aria-snapshot.spec.ts rename showcases/e2e/tabs/{tabs-a11y.spec.ts => tabs-axe-core.spec.ts} (82%) rename showcases/e2e/tabs/{tabs-snapshot.spec.ts => tabs-visual-snapshot.spec.ts} (82%) create mode 100644 showcases/e2e/tag/tag-a11y-checker.spec.ts create mode 100644 showcases/e2e/tag/tag-aria-snapshot.spec.ts rename showcases/e2e/tag/{tag-a11y.spec.ts => tag-axe-core.spec.ts} (71%) rename showcases/e2e/tag/{tag-snapshot.spec.ts => tag-visual-snapshot.spec.ts} (55%) create mode 100644 showcases/e2e/textarea/textarea-a11y-checker.spec.ts create mode 100644 showcases/e2e/textarea/textarea-aria-snapshot.spec.ts rename showcases/e2e/textarea/{textarea-a11y.spec.ts => textarea-axe-core.spec.ts} (77%) rename showcases/e2e/textarea/{textarea-snapshot.spec.ts => textarea-visual-snapshot.spec.ts} (89%) create mode 100644 showcases/e2e/tooltip/tooltip-a11y-checker.spec.ts create mode 100644 showcases/e2e/tooltip/tooltip-aria-snapshot.spec.ts rename showcases/e2e/tooltip/{tooltip-a11y.spec.ts => tooltip-axe-core.spec.ts} (80%) rename showcases/e2e/tooltip/{tooltip-snapshot.spec.ts => tooltip-visual-snapshot.spec.ts} (62%) rename showcases/{ => patternhub}/playwright.patternhub-config.ts (100%) create mode 100644 showcases/playwright.a11y-checker.ts create mode 100644 showcases/playwright.aria-snapshots.ts create mode 100644 showcases/playwright.axe-core.ts rename showcases/{playwright.showcase-snapshots.ts => playwright.visual-snapshots.ts} (84%) rename showcases/{ => react-showcase}/playwright.screen-reader.macos.ts (100%) rename showcases/{ => react-showcase}/playwright.screen-reader.ts (100%) rename showcases/{ => react-showcase}/playwright.screen-reader.windows.ts (100%) diff --git a/.config/.jscpd.json b/.config/.jscpd.json index 48bc7431db18..ca7ea4c40988 100644 --- a/.config/.jscpd.json +++ b/.config/.jscpd.json @@ -34,6 +34,7 @@ "**/test-results/**", "**/tests/**", "**/tsconfig.json", + "**/e2e/**/*.spec.ts", "packages/components/scripts/post-build/components.ts", "packages/components/src/components/**/*.spec.tsx", "packages/components/src/components/**/index.html", diff --git a/.github/workflows/02-e2e-patternhub.yml b/.github/workflows/02-e2e-patternhub.yml new file mode 100644 index 000000000000..cae9bdd2746e --- /dev/null +++ b/.github/workflows/02-e2e-patternhub.yml @@ -0,0 +1,81 @@ +name: ๐ŸŽญ Playwright E2E + +on: + workflow_call: + inputs: + version: + required: true + type: string + path: + required: false + type: string + +permissions: + actions: write + contents: write + +jobs: + playwright-patternhub: + name: ๐Ÿงช๐ŸŽญ - patternhub + runs-on: ubuntu-24.04 # Use Ubuntu 24.04 explicitly + container: + image: mcr.microsoft.com/playwright:v${{ inputs.version }} + options: --user 1001 + steps: + - name: โฌ Checkout repo + uses: actions/checkout@v4 + + - name: ๐Ÿ”„ Init Cache + uses: ./.github/actions/npm-cache + + - name: โฌ Download foundations build + uses: actions/download-artifact@v4 + with: + name: db-ux-foundations-build + path: packages/foundations/build + + - name: โฌ Download output + uses: actions/download-artifact@v4 + with: + name: db-ux-output + path: output + + - name: โฌ Download components styles build + uses: actions/download-artifact@v4 + with: + name: db-ux-components-build + path: packages/components/build + + - name: โฌ Download patternhub + uses: actions/download-artifact@v4 + with: + name: db-ux-patternhub + path: build-showcases/patternhub + + - name: ๐Ÿงด Copy patternhub testing app + shell: bash + run: | + mkdir -p ./build-showcases${{ inputs.path }} + cp -RT ./build-showcases/patternhub ./build-showcases${{ inputs.path }} + + # We test everything for patternhub and main branch + - name: ๐Ÿ‘ฉโ€๐Ÿ”ฌ Test showcase with Playwright ๐ŸŽญ + shell: bash + env: + NEXT_PUBLIC_BASE_PATH: ${{ inputs.path }} + run: | + npm run test:e2e --workspace=patternhub + + - name: ๐Ÿ”ฃ Print GitHub Report + if: failure() + shell: bash + run: | + npx playwright merge-reports --reporter github ./blob-report + + - name: ๐Ÿ†™ Upload test results + if: failure() + uses: actions/upload-artifact@v4 + with: + name: patternhub-playwright-results + path: ./showcases/patternhub/test-results + retention-days: 30 diff --git a/.github/workflows/02-e2e-regenerate.yml b/.github/workflows/02-e2e-regenerate.yml index ba02dbd507e7..d04a779a150b 100644 --- a/.github/workflows/02-e2e-regenerate.yml +++ b/.github/workflows/02-e2e-regenerate.yml @@ -78,7 +78,8 @@ jobs: cp -RT ./build-showcases/${{ inputs.type }} ./build-showcases${{ inputs.path }} npm run regenerate:screenshots --workspace=patternhub else - npm run regenerate:screenshots --workspace=react-showcase + npm run regenerate:visual-snapshots --workspace=react-showcase + npm run regenerate:aria-snapshots --workspace=react-showcase fi - name: ๐Ÿ†™ Upload components diff --git a/.github/workflows/02-e2e-showcases.yml b/.github/workflows/02-e2e-showcases.yml index 18cce5d67188..31c6d4c3c153 100644 --- a/.github/workflows/02-e2e-showcases.yml +++ b/.github/workflows/02-e2e-showcases.yml @@ -9,9 +9,13 @@ on: showcase: required: true type: string - path: - required: false - type: string + outputs: + aria-snapshots-changed: + description: "If aria snapshots changed" + value: ${{ jobs.playwright-showcases.outputs.aria-snapshots-changed }} + visual-snapshots-changed: + description: "If visual snapshots changed" + value: ${{ jobs.playwright-showcases.outputs.visual-snapshots-changed }} permissions: actions: write @@ -27,8 +31,11 @@ jobs: strategy: fail-fast: false matrix: - shardIndex: [1, 2, 3, 4, 5, 6] - shardTotal: [6] + shardIndex: [1, 2, 3, 4] + shardTotal: [4] + outputs: + aria-snapshots-changed: ${{ steps.aria-snapshots.outputs.aria-snapshots-changed }} + visual-snapshots-changed: ${{ steps.visual-snapshots.outputs.visual-snapshots-changed }} steps: - name: โฌ Checkout repo uses: actions/checkout@v4 @@ -60,21 +67,46 @@ jobs: name: db-ux-${{ inputs.showcase }} path: build-showcases/${{ inputs.showcase }} - - name: ๐Ÿงด Copy patternhub testing app - if: inputs.path - shell: bash - run: | - mkdir -p ./build-showcases${{ inputs.path }} - cp -RT ./build-showcases/${{ inputs.showcase }} ./build-showcases${{ inputs.path }} - + # We test everything for patternhub and main branch - name: ๐Ÿ‘ฉโ€๐Ÿ”ฌ Test showcase with Playwright ๐ŸŽญ shell: bash + if: github.event.pull_request == null env: NEXT_PUBLIC_BASE_PATH: ${{ inputs.path }} run: | - ls ./build-showcases${{ inputs.path }} npm run test:e2e --workspace=${{ inputs.showcase }} -- --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} + # We check if aria-snapshots were changed + - name: ๐Ÿ‘ฉโ€๐Ÿ”ฌ Test aria-snapshots with Playwright ๐ŸŽญ + id: aria-snapshots + shell: bash + if: github.event.pull_request != null + run: | + npm run test:aria-snapshots --workspace=${{ inputs.showcase }} -- --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --update-snapshots + OUTPUT=$(npx --no tsx scripts/github/snapshot-changes/check-aria.ts) + echo "aria-snapshots-changed=$OUTPUT" >> $GITHUB_OUTPUT + + - name: ๐Ÿ‘ฉโ€๐Ÿ”ฌ Test axe-core with Playwright ๐ŸŽญ + shell: bash + if: github.event.pull_request != null + run: | + npm run test:axe-core --workspace=${{ inputs.showcase }} -- --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} + + - name: ๐Ÿ‘ฉโ€๐Ÿ”ฌ Test visual-snapshots with Playwright ๐ŸŽญ + id: visual-snapshots + shell: bash + if: github.event.pull_request != null + run: | + npm run test:visual-snapshots --workspace=${{ inputs.showcase }} -- --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --update-snapshots + OUTPUT=$(npx --no tsx scripts/github/snapshot-changes/check-visual.ts) + echo "visual-snapshots-changed=$OUTPUT" >> $GITHUB_OUTPUT + + - name: ๐Ÿ‘ฉโ€๐Ÿ”ฌ Test a11y-checker with Playwright ๐ŸŽญ + shell: bash + if: github.event.pull_request != null && env.aria-snapshots-changed=='true' + run: | + npm run test:a11y-checker --workspace=${{ inputs.showcase }} -- --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} + - name: ๐Ÿ”ฃ Print GitHub Report if: failure() shell: bash @@ -88,11 +120,3 @@ jobs: name: ${{ inputs.showcase }}-playwright-results-${{ matrix.shardIndex }} path: ./showcases/${{ inputs.showcase }}/test-results retention-days: 30 - - - name: ๐Ÿ†™ Upload aChecker results - if: failure() - uses: actions/upload-artifact@v4 - with: - name: ${{ inputs.showcase }}-showcase-achecker-results-${{ matrix.shardIndex }} - path: ./showcases/${{ inputs.showcase }}-showcase/results - retention-days: 30 diff --git a/.github/workflows/default.yml b/.github/workflows/default.yml index 3ba33923b60d..9fa1043a2947 100644 --- a/.github/workflows/default.yml +++ b/.github/workflows/default.yml @@ -133,12 +133,11 @@ jobs: showcase: vue-showcase test-showcase-patternhub: - uses: ./.github/workflows/02-e2e-showcases.yml + uses: ./.github/workflows/02-e2e-patternhub.yml needs: [build-showcase-patternhub, get-playwright-version] with: version: ${{ needs.get-playwright-version.outputs.version }} path: ${{ needs.build-showcase-patternhub.outputs.path }} - showcase: patternhub regenerate-snapshots-components: if: always() && needs.test-components.result == 'failure' @@ -171,13 +170,22 @@ jobs: ] test-screen-reader: + if: | + needs.test-showcase-react.outputs.aria-snapshots-changed == 'true' || + github.event.pull_request == null uses: ./.github/workflows/02-e2e-screen-reader.yml - needs: [build-showcase-react, init-playwright, get-playwright-version] + needs: [test-showcase-react, init-playwright, get-playwright-version] with: version: ${{ needs.get-playwright-version.outputs.version }} regenerate-snapshots: - if: always() && (needs.test-showcase-angular.result == 'failure' || needs.test-showcase-react.result == 'failure' || needs.test-showcase-vue.result == 'failure') + if: | + needs.test-showcase-angular.outputs.aria-snapshots-changed == 'true' || + needs.test-showcase-angular.outputs.visual-snapshots-changed == 'true' || + needs.test-showcase-react.outputs.aria-snapshots-changed == 'true' || + needs.test-showcase-react.outputs.visual-snapshots-changed == 'true' || + needs.test-showcase-vue.outputs.aria-snapshots-changed == 'true' || + needs.test-showcase-vue.outputs.visual-snapshots-changed == 'true' uses: ./.github/workflows/02-e2e-regenerate.yml with: version: ${{ needs.get-playwright-version.outputs.version }} diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index dc416719ecd7..d6e5df22020d 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -130,12 +130,11 @@ jobs: showcase: vue-showcase test-showcase-patternhub: - uses: ./.github/workflows/02-e2e-showcases.yml + uses: ./.github/workflows/02-e2e-patternhub.yml needs: [build-showcase-patternhub, get-playwright-version] with: - path: ${{ needs.build-showcase-patternhub.outputs.path }} version: ${{ needs.get-playwright-version.outputs.version }} - showcase: patternhub + path: ${{ needs.build-showcase-patternhub.outputs.path }} test-screen-reader: uses: ./.github/workflows/02-e2e-screen-reader.yml diff --git a/package-lock.json b/package-lock.json index 9690e1549a71..0128e113f5df 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40585,7 +40585,7 @@ }, "showcases/next-showcase": { "dependencies": { - "next": "*", + "next": "latest", "react": "18.3.1", "react-dom": "18.3.1" }, diff --git a/packages/components/_templates/mitosis/new/showcases/e2e-a11y-test.ejs.t b/packages/components/_templates/mitosis/new/showcases/e2e-a11y-test.ejs.t index 1366e5c4fec1..a6a948401494 100644 --- a/packages/components/_templates/mitosis/new/showcases/e2e-a11y-test.ejs.t +++ b/packages/components/_templates/mitosis/new/showcases/e2e-a11y-test.ejs.t @@ -2,7 +2,6 @@ to: "<%= showcases ? `../../showcases/e2e/${name}/${name}-a11y.spec.ts` : null %>" --- import { test } from '@playwright/test'; -// @ts-expect-error - required for playwright import { getA11yTest } from '../default.ts'; test.describe('DB<%= h.changeCase.pascal(name) %>', () => { diff --git a/packages/components/_templates/mitosis/new/showcases/e2e-snapshot-test.ejs.t b/packages/components/_templates/mitosis/new/showcases/e2e-snapshot-test.ejs.t index 275ba5b99211..a9335429030b 100644 --- a/packages/components/_templates/mitosis/new/showcases/e2e-snapshot-test.ejs.t +++ b/packages/components/_templates/mitosis/new/showcases/e2e-snapshot-test.ejs.t @@ -2,7 +2,6 @@ to: "<%= showcases ? `../../showcases/e2e/${name}/${name}-snapshot.spec.ts` : null %>" --- import { test } from '@playwright/test'; -// @ts-expect-error - required for playwright import { getDefaultScreenshotTest, runAriaSnapshotTest } from '../default.ts'; const path = '<%= name %>'; diff --git a/scripts/github/snapshot-changes/check-aria.ts b/scripts/github/snapshot-changes/check-aria.ts new file mode 100644 index 000000000000..74c55ba6df75 --- /dev/null +++ b/scripts/github/snapshot-changes/check-aria.ts @@ -0,0 +1,3 @@ +import { checkSnapshotChanges } from './check.js'; + +console.log(checkSnapshotChanges(true)); diff --git a/scripts/github/snapshot-changes/check-visual.ts b/scripts/github/snapshot-changes/check-visual.ts new file mode 100644 index 000000000000..56e7cc3e476f --- /dev/null +++ b/scripts/github/snapshot-changes/check-visual.ts @@ -0,0 +1,3 @@ +import { checkSnapshotChanges } from './check.js'; + +console.log(checkSnapshotChanges(false)); diff --git a/scripts/github/snapshot-changes/check.ts b/scripts/github/snapshot-changes/check.ts new file mode 100644 index 000000000000..e48b1bc1e20f --- /dev/null +++ b/scripts/github/snapshot-changes/check.ts @@ -0,0 +1,22 @@ +import { execSync } from 'node:child_process'; + +export const checkSnapshotChanges = (aria = true): boolean => { + try { + // Run the Git command to check for changes compared to the main branch + const changedFiles = execSync('git diff main --name-only', { + encoding: 'utf8' + }) + .split('\n') + .filter(Boolean); + + // Check if any file in __snapshots__ with the name *-aria-snapshot.yml has changed + return changedFiles.some( + (file) => + file.startsWith('__snapshots__') && + file.endsWith(aria ? '-aria-snapshot.yaml' : '-screenshot.png') + ); + } catch (error) { + console.error('Error while checking for changes:', error.message); + return false; + } +}; diff --git a/showcases/angular-showcase/package.json b/showcases/angular-showcase/package.json index 17c18044c0ce..b19245364cfc 100644 --- a/showcases/angular-showcase/package.json +++ b/showcases/angular-showcase/package.json @@ -8,8 +8,12 @@ "ng": "ng", "preview": "npx http-server ../../build-showcases", "start": "ng serve --serve-path angular-showcase", + "test:a11y-checker": "cross-env showcase=vue-showcase npx playwright test --config=../playwright.a11y-checker.ts", + "test:aria-snapshots": "cross-env showcase=vue-showcase npx playwright test --config=../playwright.aria-snapshots.ts", + "test:axe-core": "cross-env showcase=vue-showcase npx playwright test --config=../playwright.axe-core.ts", "test:e2e": "cross-env showcase=angular-showcase npx playwright test --config=../playwright.config.ts", "test:ui": "npm run test:e2e -- --ui", + "test:visual-snapshots": "cross-env showcase=vue-showcase npx playwright test --config=../playwright.visual-snapshots.ts", "watch": "ng build --watch --configuration development" }, "dependencies": { diff --git a/showcases/e2e/accordion-item/accordion-item-a11y-checker.spec.ts b/showcases/e2e/accordion-item/accordion-item-a11y-checker.spec.ts new file mode 100644 index 000000000000..833ec1ea29e5 --- /dev/null +++ b/showcases/e2e/accordion-item/accordion-item-a11y-checker.spec.ts @@ -0,0 +1,6 @@ +import { test } from '@playwright/test'; +import { runA11yCheckerTest } from '../default.ts'; + +test.describe('DBAccordionItem', () => { + runA11yCheckerTest({ path: '04/accordion-item' }); +}); diff --git a/showcases/e2e/accordion-item/accordion-item-aria-snapshot.spec.ts b/showcases/e2e/accordion-item/accordion-item-aria-snapshot.spec.ts new file mode 100644 index 000000000000..ce53a523da1d --- /dev/null +++ b/showcases/e2e/accordion-item/accordion-item-aria-snapshot.spec.ts @@ -0,0 +1,7 @@ +import { test } from '@playwright/test'; +import { runAriaSnapshotTest } from '../default.ts'; + +const path = '04/accordion-item'; +test.describe('DBAccordionItem', () => { + runAriaSnapshotTest({ path }); +}); diff --git a/showcases/e2e/accordion-item/accordion-item-a11y.spec.ts b/showcases/e2e/accordion-item/accordion-item-axe-core.spec.ts similarity index 81% rename from showcases/e2e/accordion-item/accordion-item-a11y.spec.ts rename to showcases/e2e/accordion-item/accordion-item-axe-core.spec.ts index 687909ec1980..61adce89e6b0 100644 --- a/showcases/e2e/accordion-item/accordion-item-a11y.spec.ts +++ b/showcases/e2e/accordion-item/accordion-item-axe-core.spec.ts @@ -1,5 +1,5 @@ import { test } from '@playwright/test'; -import { runA11yCheckerTest, runAxeCoreTest } from '../default.ts'; +import { runAxeCoreTest } from '../default.ts'; import { lvl3 } from '../fixtures/variants'; // Showcase uses
  • outside of