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..211f5b70fb19 --- /dev/null +++ b/.github/workflows/02-e2e-patternhub.yml @@ -0,0 +1,77 @@ +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 + + # We test everything for patternhub and main branch + - name: ๐Ÿ‘ฉโ€๐Ÿ”ฌ Test showcase with Playwright ๐ŸŽญ + shell: bash + env: + NEXT_PUBLIC_BASE_PATH: ${{ inputs.path }} + run: | + mkdir -p ./build-showcases${{ inputs.path }} + cp -RT ./build-showcases/patternhub ./build-showcases${{ inputs.path }} + 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..dd47880be40f 100644 --- a/.github/workflows/02-e2e-showcases.yml +++ b/.github/workflows/02-e2e-showcases.yml @@ -9,9 +9,16 @@ on: showcase: required: true type: string - path: - required: false - type: string + outputs: + aria-snapshots-changed: + description: "If aria snapshots changed in current PR" + value: ${{ jobs.playwright-showcases.outputs.aria-snapshots-changed }} + aria-snapshots-changed-to-main: + description: "If aria snapshots changed to main branch" + value: ${{ jobs.playwright-showcases.outputs.aria-snapshots-changed-to-main }} + visual-snapshots-changed: + description: "If visual snapshots changed" + value: ${{ jobs.playwright-showcases.outputs.visual-snapshots-changed }} permissions: actions: write @@ -27,11 +34,18 @@ 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 }} + aria-snapshots-changed-to-main: ${{ steps.aria-snapshots.outputs.aria-snapshots-changed-to-main }} + visual-snapshots-changed: ${{ steps.visual-snapshots.outputs.visual-snapshots-changed }} steps: - name: โฌ Checkout repo uses: actions/checkout@v4 + with: + fetch-depth: 0 # fetch all history for all branches + fetch-tags: false - name: ๐Ÿ”„ Init Cache uses: ./.github/actions/npm-cache @@ -60,21 +74,50 @@ 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 + OUTPUT=$(npx --no tsx scripts/github/snapshot-changes/check-main-aria.ts) + echo "aria-snapshots-changed-to-main=$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 && + steps.aria-snapshots.outputs.aria-snapshots-changed-to-main=='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 +131,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..0ad5a391c4b4 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' @@ -170,14 +169,24 @@ jobs: get-playwright-version ] + # This job runs only if aria-snapshots were changed compared to main or if it runs on main branch test-screen-reader: + if: | + needs.test-showcase-react.outputs.aria-snapshots-changed-to-main == '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 }} @@ -231,7 +240,7 @@ jobs: resultTestShowcasePatternhub="${{ needs.test-showcase-patternhub.result }}" resultTestScreenReader="${{ needs.test-screen-reader.result }}" if [[ $resultTestFoundations == "success" ]] && \ - [[ $resultTestScreenReader == "success" ]] && \ + [[ $resultTestScreenReader == "success" || $resultTestScreenReader == "skipped" ]] && \ [[ $resultTestShowcaseStencil == "success" ]] && \ [[ $resultTestShowcaseAngular == "success" ]] && \ [[ $resultTestShowcaseReact == "success" ]] && \ 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/__snapshots__/custom-select/showcase/webkit/DBCustomSelect-should-match-screenshot-1/DBCustomSelect-should-match-screenshot.png b/__snapshots__/custom-select/showcase/webkit/DBCustomSelect-should-match-screenshot-1/DBCustomSelect-should-match-screenshot.png index 2deab5179355..c6228106dc64 100644 Binary files a/__snapshots__/custom-select/showcase/webkit/DBCustomSelect-should-match-screenshot-1/DBCustomSelect-should-match-screenshot.png and b/__snapshots__/custom-select/showcase/webkit/DBCustomSelect-should-match-screenshot-1/DBCustomSelect-should-match-screenshot.png differ diff --git a/__snapshots__/stack/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBStack-should-have-same-aria-snapshot.yaml b/__snapshots__/stack/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBStack-should-have-same-aria-snapshot.yaml new file mode 100644 index 000000000000..bd4a43c942f8 --- /dev/null +++ b/__snapshots__/stack/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBStack-should-have-same-aria-snapshot.yaml @@ -0,0 +1,94 @@ +- main: + - heading "DBStack" [level=1] + - link "Density" + - text: Functional + - link "Content 1" + - text: Content 2 Content 3 (Default) Regular + - link "Content 1" + - text: Content 2 Content 3 Expressive + - link "Content 1" + - text: Content 2 Content 3 + - link "Variant" + - text: (Default) Simple + - link "Content 1" + - text: Content 2 Content 3 Divider + - link "Content 1" + - text: Content 2 Content 3 + - link "Gap" + - text: none + - link "Content 1" + - text: Content 2 Content 3 3x-small + - link "Content 1" + - text: Content 2 Content 3 2x-small + - link "Content 1" + - text: Content 2 Content 3 x-small + - link "Content 1" + - text: Content 2 Content 3 (Default) small + - link "Content 1" + - text: Content 2 Content 3 medium + - link "Content 1" + - text: Content 2 Content 3 large + - link "Content 1" + - text: Content 2 Content 3 x-large + - link "Content 1" + - text: Content 2 Content 3 2x-large + - link "Content 1" + - text: Content 2 Content 3 3x-large + - link "Content 1" + - text: Content 2 Content 3 + - link "Direction" + - text: (Default) Column + - link "Content 1" + - text: Content 2 Content 3 Row + - link "Content 1" + - text: Content 2 Content 3 + - link "Wrap" + - text: "(Default) No Wrap: Column" + - link "Content 1" + - text: "Content 2 Content 3 No Wrap: Row" + - link "Content 1" + - text: "Content 2 Content 3 Wrap: Column" + - link "Content 1" + - text: "Content 2 Content 3 Wrap: Row" + - link "Content 1" + - text: Content 2 Content 3 + - link "Alignment Column" + - text: (Default) Stretch + - link "Content 1" + - text: Content 2 Content 3 Start + - link "Content 1" + - text: Content 2 Content 3 Center + - link "Content 1" + - text: Content 2 Content 3 End + - link "Content 1" + - text: Content 2 Content 3 + - link "Alignment Row" + - text: (Default) Stretch + - link "Content 1" + - text: Content 2 Content 3 Start + - link "Content 1" + - text: Content 2 Content 3 Center + - link "Content 1" + - text: Content 2 Content 3 End + - link "Content 1" + - text: Content 2 Content 3 + - link "Justify Content Column" + - text: (Default) Start + - link "Content 1" + - text: Content 2 Content 3 Center + - link "Content 1" + - text: Content 2 Content 3 End + - link "Content 1" + - text: Content 2 Content 3 Space-Between + - link "Content 1" + - text: Content 2 Content 3 + - link "Justify Content Row" + - text: (Default) Start + - link "Content 1" + - text: Content 2 Content 3 Center + - link "Content 1" + - text: Content 2 Content 3 End + - link "Content 1" + - text: Content 2 Content 3 Space-Between + - link "Content 1" + - text: Content 2 Content 3 \ No newline at end of file diff --git a/__snapshots__/stack/showcase/chromium/should-have-same-aria-snapshot/DBStack-should-have-same-aria-snapshot.yaml b/__snapshots__/stack/showcase/chromium/should-have-same-aria-snapshot/DBStack-should-have-same-aria-snapshot.yaml new file mode 100644 index 000000000000..bd4a43c942f8 --- /dev/null +++ b/__snapshots__/stack/showcase/chromium/should-have-same-aria-snapshot/DBStack-should-have-same-aria-snapshot.yaml @@ -0,0 +1,94 @@ +- main: + - heading "DBStack" [level=1] + - link "Density" + - text: Functional + - link "Content 1" + - text: Content 2 Content 3 (Default) Regular + - link "Content 1" + - text: Content 2 Content 3 Expressive + - link "Content 1" + - text: Content 2 Content 3 + - link "Variant" + - text: (Default) Simple + - link "Content 1" + - text: Content 2 Content 3 Divider + - link "Content 1" + - text: Content 2 Content 3 + - link "Gap" + - text: none + - link "Content 1" + - text: Content 2 Content 3 3x-small + - link "Content 1" + - text: Content 2 Content 3 2x-small + - link "Content 1" + - text: Content 2 Content 3 x-small + - link "Content 1" + - text: Content 2 Content 3 (Default) small + - link "Content 1" + - text: Content 2 Content 3 medium + - link "Content 1" + - text: Content 2 Content 3 large + - link "Content 1" + - text: Content 2 Content 3 x-large + - link "Content 1" + - text: Content 2 Content 3 2x-large + - link "Content 1" + - text: Content 2 Content 3 3x-large + - link "Content 1" + - text: Content 2 Content 3 + - link "Direction" + - text: (Default) Column + - link "Content 1" + - text: Content 2 Content 3 Row + - link "Content 1" + - text: Content 2 Content 3 + - link "Wrap" + - text: "(Default) No Wrap: Column" + - link "Content 1" + - text: "Content 2 Content 3 No Wrap: Row" + - link "Content 1" + - text: "Content 2 Content 3 Wrap: Column" + - link "Content 1" + - text: "Content 2 Content 3 Wrap: Row" + - link "Content 1" + - text: Content 2 Content 3 + - link "Alignment Column" + - text: (Default) Stretch + - link "Content 1" + - text: Content 2 Content 3 Start + - link "Content 1" + - text: Content 2 Content 3 Center + - link "Content 1" + - text: Content 2 Content 3 End + - link "Content 1" + - text: Content 2 Content 3 + - link "Alignment Row" + - text: (Default) Stretch + - link "Content 1" + - text: Content 2 Content 3 Start + - link "Content 1" + - text: Content 2 Content 3 Center + - link "Content 1" + - text: Content 2 Content 3 End + - link "Content 1" + - text: Content 2 Content 3 + - link "Justify Content Column" + - text: (Default) Start + - link "Content 1" + - text: Content 2 Content 3 Center + - link "Content 1" + - text: Content 2 Content 3 End + - link "Content 1" + - text: Content 2 Content 3 Space-Between + - link "Content 1" + - text: Content 2 Content 3 + - link "Justify Content Row" + - text: (Default) Start + - link "Content 1" + - text: Content 2 Content 3 Center + - link "Content 1" + - text: Content 2 Content 3 End + - link "Content 1" + - text: Content 2 Content 3 Space-Between + - link "Content 1" + - text: Content 2 Content 3 \ No newline at end of file diff --git a/__snapshots__/stack/showcase/firefox/should-have-same-aria-snapshot/DBStack-should-have-same-aria-snapshot.yaml b/__snapshots__/stack/showcase/firefox/should-have-same-aria-snapshot/DBStack-should-have-same-aria-snapshot.yaml new file mode 100644 index 000000000000..bd4a43c942f8 --- /dev/null +++ b/__snapshots__/stack/showcase/firefox/should-have-same-aria-snapshot/DBStack-should-have-same-aria-snapshot.yaml @@ -0,0 +1,94 @@ +- main: + - heading "DBStack" [level=1] + - link "Density" + - text: Functional + - link "Content 1" + - text: Content 2 Content 3 (Default) Regular + - link "Content 1" + - text: Content 2 Content 3 Expressive + - link "Content 1" + - text: Content 2 Content 3 + - link "Variant" + - text: (Default) Simple + - link "Content 1" + - text: Content 2 Content 3 Divider + - link "Content 1" + - text: Content 2 Content 3 + - link "Gap" + - text: none + - link "Content 1" + - text: Content 2 Content 3 3x-small + - link "Content 1" + - text: Content 2 Content 3 2x-small + - link "Content 1" + - text: Content 2 Content 3 x-small + - link "Content 1" + - text: Content 2 Content 3 (Default) small + - link "Content 1" + - text: Content 2 Content 3 medium + - link "Content 1" + - text: Content 2 Content 3 large + - link "Content 1" + - text: Content 2 Content 3 x-large + - link "Content 1" + - text: Content 2 Content 3 2x-large + - link "Content 1" + - text: Content 2 Content 3 3x-large + - link "Content 1" + - text: Content 2 Content 3 + - link "Direction" + - text: (Default) Column + - link "Content 1" + - text: Content 2 Content 3 Row + - link "Content 1" + - text: Content 2 Content 3 + - link "Wrap" + - text: "(Default) No Wrap: Column" + - link "Content 1" + - text: "Content 2 Content 3 No Wrap: Row" + - link "Content 1" + - text: "Content 2 Content 3 Wrap: Column" + - link "Content 1" + - text: "Content 2 Content 3 Wrap: Row" + - link "Content 1" + - text: Content 2 Content 3 + - link "Alignment Column" + - text: (Default) Stretch + - link "Content 1" + - text: Content 2 Content 3 Start + - link "Content 1" + - text: Content 2 Content 3 Center + - link "Content 1" + - text: Content 2 Content 3 End + - link "Content 1" + - text: Content 2 Content 3 + - link "Alignment Row" + - text: (Default) Stretch + - link "Content 1" + - text: Content 2 Content 3 Start + - link "Content 1" + - text: Content 2 Content 3 Center + - link "Content 1" + - text: Content 2 Content 3 End + - link "Content 1" + - text: Content 2 Content 3 + - link "Justify Content Column" + - text: (Default) Start + - link "Content 1" + - text: Content 2 Content 3 Center + - link "Content 1" + - text: Content 2 Content 3 End + - link "Content 1" + - text: Content 2 Content 3 Space-Between + - link "Content 1" + - text: Content 2 Content 3 + - link "Justify Content Row" + - text: (Default) Start + - link "Content 1" + - text: Content 2 Content 3 Center + - link "Content 1" + - text: Content 2 Content 3 End + - link "Content 1" + - text: Content 2 Content 3 Space-Between + - link "Content 1" + - text: Content 2 Content 3 \ No newline at end of file diff --git a/__snapshots__/stack/showcase/mobile-chrome/should-have-same-aria-snapshot/DBStack-should-have-same-aria-snapshot.yaml b/__snapshots__/stack/showcase/mobile-chrome/should-have-same-aria-snapshot/DBStack-should-have-same-aria-snapshot.yaml new file mode 100644 index 000000000000..bd4a43c942f8 --- /dev/null +++ b/__snapshots__/stack/showcase/mobile-chrome/should-have-same-aria-snapshot/DBStack-should-have-same-aria-snapshot.yaml @@ -0,0 +1,94 @@ +- main: + - heading "DBStack" [level=1] + - link "Density" + - text: Functional + - link "Content 1" + - text: Content 2 Content 3 (Default) Regular + - link "Content 1" + - text: Content 2 Content 3 Expressive + - link "Content 1" + - text: Content 2 Content 3 + - link "Variant" + - text: (Default) Simple + - link "Content 1" + - text: Content 2 Content 3 Divider + - link "Content 1" + - text: Content 2 Content 3 + - link "Gap" + - text: none + - link "Content 1" + - text: Content 2 Content 3 3x-small + - link "Content 1" + - text: Content 2 Content 3 2x-small + - link "Content 1" + - text: Content 2 Content 3 x-small + - link "Content 1" + - text: Content 2 Content 3 (Default) small + - link "Content 1" + - text: Content 2 Content 3 medium + - link "Content 1" + - text: Content 2 Content 3 large + - link "Content 1" + - text: Content 2 Content 3 x-large + - link "Content 1" + - text: Content 2 Content 3 2x-large + - link "Content 1" + - text: Content 2 Content 3 3x-large + - link "Content 1" + - text: Content 2 Content 3 + - link "Direction" + - text: (Default) Column + - link "Content 1" + - text: Content 2 Content 3 Row + - link "Content 1" + - text: Content 2 Content 3 + - link "Wrap" + - text: "(Default) No Wrap: Column" + - link "Content 1" + - text: "Content 2 Content 3 No Wrap: Row" + - link "Content 1" + - text: "Content 2 Content 3 Wrap: Column" + - link "Content 1" + - text: "Content 2 Content 3 Wrap: Row" + - link "Content 1" + - text: Content 2 Content 3 + - link "Alignment Column" + - text: (Default) Stretch + - link "Content 1" + - text: Content 2 Content 3 Start + - link "Content 1" + - text: Content 2 Content 3 Center + - link "Content 1" + - text: Content 2 Content 3 End + - link "Content 1" + - text: Content 2 Content 3 + - link "Alignment Row" + - text: (Default) Stretch + - link "Content 1" + - text: Content 2 Content 3 Start + - link "Content 1" + - text: Content 2 Content 3 Center + - link "Content 1" + - text: Content 2 Content 3 End + - link "Content 1" + - text: Content 2 Content 3 + - link "Justify Content Column" + - text: (Default) Start + - link "Content 1" + - text: Content 2 Content 3 Center + - link "Content 1" + - text: Content 2 Content 3 End + - link "Content 1" + - text: Content 2 Content 3 Space-Between + - link "Content 1" + - text: Content 2 Content 3 + - link "Justify Content Row" + - text: (Default) Start + - link "Content 1" + - text: Content 2 Content 3 Center + - link "Content 1" + - text: Content 2 Content 3 End + - link "Content 1" + - text: Content 2 Content 3 Space-Between + - link "Content 1" + - text: Content 2 Content 3 \ No newline at end of file diff --git a/__snapshots__/stack/showcase/mobile-safari/should-have-same-aria-snapshot/DBStack-should-have-same-aria-snapshot.yaml b/__snapshots__/stack/showcase/mobile-safari/should-have-same-aria-snapshot/DBStack-should-have-same-aria-snapshot.yaml new file mode 100644 index 000000000000..bd4a43c942f8 --- /dev/null +++ b/__snapshots__/stack/showcase/mobile-safari/should-have-same-aria-snapshot/DBStack-should-have-same-aria-snapshot.yaml @@ -0,0 +1,94 @@ +- main: + - heading "DBStack" [level=1] + - link "Density" + - text: Functional + - link "Content 1" + - text: Content 2 Content 3 (Default) Regular + - link "Content 1" + - text: Content 2 Content 3 Expressive + - link "Content 1" + - text: Content 2 Content 3 + - link "Variant" + - text: (Default) Simple + - link "Content 1" + - text: Content 2 Content 3 Divider + - link "Content 1" + - text: Content 2 Content 3 + - link "Gap" + - text: none + - link "Content 1" + - text: Content 2 Content 3 3x-small + - link "Content 1" + - text: Content 2 Content 3 2x-small + - link "Content 1" + - text: Content 2 Content 3 x-small + - link "Content 1" + - text: Content 2 Content 3 (Default) small + - link "Content 1" + - text: Content 2 Content 3 medium + - link "Content 1" + - text: Content 2 Content 3 large + - link "Content 1" + - text: Content 2 Content 3 x-large + - link "Content 1" + - text: Content 2 Content 3 2x-large + - link "Content 1" + - text: Content 2 Content 3 3x-large + - link "Content 1" + - text: Content 2 Content 3 + - link "Direction" + - text: (Default) Column + - link "Content 1" + - text: Content 2 Content 3 Row + - link "Content 1" + - text: Content 2 Content 3 + - link "Wrap" + - text: "(Default) No Wrap: Column" + - link "Content 1" + - text: "Content 2 Content 3 No Wrap: Row" + - link "Content 1" + - text: "Content 2 Content 3 Wrap: Column" + - link "Content 1" + - text: "Content 2 Content 3 Wrap: Row" + - link "Content 1" + - text: Content 2 Content 3 + - link "Alignment Column" + - text: (Default) Stretch + - link "Content 1" + - text: Content 2 Content 3 Start + - link "Content 1" + - text: Content 2 Content 3 Center + - link "Content 1" + - text: Content 2 Content 3 End + - link "Content 1" + - text: Content 2 Content 3 + - link "Alignment Row" + - text: (Default) Stretch + - link "Content 1" + - text: Content 2 Content 3 Start + - link "Content 1" + - text: Content 2 Content 3 Center + - link "Content 1" + - text: Content 2 Content 3 End + - link "Content 1" + - text: Content 2 Content 3 + - link "Justify Content Column" + - text: (Default) Start + - link "Content 1" + - text: Content 2 Content 3 Center + - link "Content 1" + - text: Content 2 Content 3 End + - link "Content 1" + - text: Content 2 Content 3 Space-Between + - link "Content 1" + - text: Content 2 Content 3 + - link "Justify Content Row" + - text: (Default) Start + - link "Content 1" + - text: Content 2 Content 3 Center + - link "Content 1" + - text: Content 2 Content 3 End + - link "Content 1" + - text: Content 2 Content 3 Space-Between + - link "Content 1" + - text: Content 2 Content 3 \ No newline at end of file diff --git a/__snapshots__/stack/showcase/webkit/should-have-same-aria-snapshot/DBStack-should-have-same-aria-snapshot.yaml b/__snapshots__/stack/showcase/webkit/should-have-same-aria-snapshot/DBStack-should-have-same-aria-snapshot.yaml new file mode 100644 index 000000000000..bd4a43c942f8 --- /dev/null +++ b/__snapshots__/stack/showcase/webkit/should-have-same-aria-snapshot/DBStack-should-have-same-aria-snapshot.yaml @@ -0,0 +1,94 @@ +- main: + - heading "DBStack" [level=1] + - link "Density" + - text: Functional + - link "Content 1" + - text: Content 2 Content 3 (Default) Regular + - link "Content 1" + - text: Content 2 Content 3 Expressive + - link "Content 1" + - text: Content 2 Content 3 + - link "Variant" + - text: (Default) Simple + - link "Content 1" + - text: Content 2 Content 3 Divider + - link "Content 1" + - text: Content 2 Content 3 + - link "Gap" + - text: none + - link "Content 1" + - text: Content 2 Content 3 3x-small + - link "Content 1" + - text: Content 2 Content 3 2x-small + - link "Content 1" + - text: Content 2 Content 3 x-small + - link "Content 1" + - text: Content 2 Content 3 (Default) small + - link "Content 1" + - text: Content 2 Content 3 medium + - link "Content 1" + - text: Content 2 Content 3 large + - link "Content 1" + - text: Content 2 Content 3 x-large + - link "Content 1" + - text: Content 2 Content 3 2x-large + - link "Content 1" + - text: Content 2 Content 3 3x-large + - link "Content 1" + - text: Content 2 Content 3 + - link "Direction" + - text: (Default) Column + - link "Content 1" + - text: Content 2 Content 3 Row + - link "Content 1" + - text: Content 2 Content 3 + - link "Wrap" + - text: "(Default) No Wrap: Column" + - link "Content 1" + - text: "Content 2 Content 3 No Wrap: Row" + - link "Content 1" + - text: "Content 2 Content 3 Wrap: Column" + - link "Content 1" + - text: "Content 2 Content 3 Wrap: Row" + - link "Content 1" + - text: Content 2 Content 3 + - link "Alignment Column" + - text: (Default) Stretch + - link "Content 1" + - text: Content 2 Content 3 Start + - link "Content 1" + - text: Content 2 Content 3 Center + - link "Content 1" + - text: Content 2 Content 3 End + - link "Content 1" + - text: Content 2 Content 3 + - link "Alignment Row" + - text: (Default) Stretch + - link "Content 1" + - text: Content 2 Content 3 Start + - link "Content 1" + - text: Content 2 Content 3 Center + - link "Content 1" + - text: Content 2 Content 3 End + - link "Content 1" + - text: Content 2 Content 3 + - link "Justify Content Column" + - text: (Default) Start + - link "Content 1" + - text: Content 2 Content 3 Center + - link "Content 1" + - text: Content 2 Content 3 End + - link "Content 1" + - text: Content 2 Content 3 Space-Between + - link "Content 1" + - text: Content 2 Content 3 + - link "Justify Content Row" + - text: (Default) Start + - link "Content 1" + - text: Content 2 Content 3 Center + - link "Content 1" + - text: Content 2 Content 3 End + - link "Content 1" + - text: Content 2 Content 3 Space-Between + - link "Content 1" + - text: Content 2 Content 3 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index bcec699f6b80..bd9c37931374 100644 --- a/package-lock.json +++ b/package-lock.json @@ -42268,7 +42268,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-main-aria.ts b/scripts/github/snapshot-changes/check-main-aria.ts new file mode 100644 index 000000000000..34b88ddad6df --- /dev/null +++ b/scripts/github/snapshot-changes/check-main-aria.ts @@ -0,0 +1,3 @@ +import { checkSnapshotChanges } from './check.js'; + +console.log(checkSnapshotChanges(true, 'origin/main')); 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..464dae4c8903 --- /dev/null +++ b/scripts/github/snapshot-changes/check.ts @@ -0,0 +1,22 @@ +import { execSync } from 'node:child_process'; + +export const checkSnapshotChanges = (aria = true, branch = ''): boolean => { + try { + // Run the Git command to check for changes compared to the main branch + const changedFiles = execSync(`git diff ${branch} --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..422bf475fd35 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=angular-showcase npx playwright test --config=../playwright.a11y-checker.ts", + "test:aria-snapshots": "cross-env showcase=angular-showcase npx playwright test --config=../playwright.aria-snapshots.ts", + "test:axe-core": "cross-env showcase=angular-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=angular-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