diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml new file mode 100644 index 0000000000..2261e935c0 --- /dev/null +++ b/.github/workflows/playwright.yml @@ -0,0 +1,27 @@ +name: Playwright Tests +on: + push: + branches: [ main, master ] + pull_request: + branches: [ main, master ] +jobs: + test: + timeout-minutes: 60 + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: lts/* + - name: Install dependencies + run: npm ci + - name: Install Playwright Browsers + run: npx playwright install --with-deps + - name: Run Playwright tests + run: npx playwright test + - uses: actions/upload-artifact@v4 + if: ${{ !cancelled() }} + with: + name: playwright-report + path: playwright-report/ + retention-days: 30 \ No newline at end of file diff --git a/bun.lockb b/bun.lockb index 931716e907..35c8bfe349 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/packages/vue/.gitignore b/packages/vue/.gitignore new file mode 100644 index 0000000000..51de079a40 --- /dev/null +++ b/packages/vue/.gitignore @@ -0,0 +1,6 @@ +node_modules/ +/test-results/ +/playwright-report/ +/blob-report/ +/playwright/.cache/ +src/components/_tests/reports/ diff --git a/packages/vue/.storybook/styles/accordion.css b/packages/vue/.storybook/styles/accordion.css index e83b9d5680..8180df7a80 100644 --- a/packages/vue/.storybook/styles/accordion.css +++ b/packages/vue/.storybook/styles/accordion.css @@ -40,8 +40,8 @@ [data-scope="accordion"][data-part="item-content"] { overflow: hidden; max-width: 400px; - background-color: cadetblue; - color:white; + background-color: #004c4c; + color: white; } [data-scope="accordion"][data-part="item-content"][data-state="open"] { diff --git a/packages/vue/package.json b/packages/vue/package.json index 2c2e3f7a20..268bff5933 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -141,6 +141,8 @@ "lint": "echo 'No linting configured for this package.'", "test": "vitest", "test:ci": "vitest --run", + "test:pw": "playwright test", + "test:pw:ui": "playwright test --ui", "typecheck": "vue-tsc", "storybook": "histoire dev", "release-it": "release-it --config ../../release-it.json", @@ -180,10 +182,10 @@ "@zag-js/dom-query": "0.77.1", "@zag-js/editable": "0.77.1", "@zag-js/file-upload": "0.77.1", + "@zag-js/file-utils": "0.77.1", "@zag-js/highlight-word": "0.77.1", "@zag-js/hover-card": "0.77.1", "@zag-js/i18n-utils": "0.77.1", - "@zag-js/file-utils": "0.77.1", "@zag-js/menu": "0.77.1", "@zag-js/number-input": "0.77.1", "@zag-js/pagination": "0.77.1", @@ -198,6 +200,8 @@ "@zag-js/signature-pad": "0.77.1", "@zag-js/slider": "0.77.1", "@zag-js/splitter": "0.77.1", + "@zag-js/steps": "0.77.1", + "@zag-js/store": "0.77.1", "@zag-js/switch": "0.77.1", "@zag-js/tabs": "0.77.1", "@zag-js/tags-input": "0.77.1", @@ -209,19 +213,20 @@ "@zag-js/tree-view": "0.77.1", "@zag-js/types": "0.77.1", "@zag-js/utils": "0.77.1", - "@zag-js/steps": "0.77.1", - "@zag-js/store": "0.77.1", "@zag-js/vue": "0.77.1" }, "devDependencies": { + "@axe-core/playwright": "^4.10.1", "@biomejs/biome": "1.9.4", "@histoire/plugin-vue": "0.17.17", + "@playwright/test": "^1.49.0", "@release-it/keep-a-changelog": "5.0.0", "@testing-library/dom": "10.4.0", "@testing-library/jest-dom": "6.6.3", "@testing-library/user-event": "14.5.2", "@testing-library/vue": "8.0.3", "@types/jsdom": "21.1.7", + "@types/node": "^22.10.1", "@vitejs/plugin-vue": "5.2.0", "@vitejs/plugin-vue-jsx": "4.1.0", "@vue/compiler-sfc": "3.5.13", diff --git a/packages/vue/playwright.config.ts b/packages/vue/playwright.config.ts new file mode 100644 index 0000000000..d52ae1f22f --- /dev/null +++ b/packages/vue/playwright.config.ts @@ -0,0 +1,81 @@ +import { defineConfig, devices } from '@playwright/test' + +/** + * Read environment variables from file. + * https://github.com/motdotla/dotenv + */ +// import dotenv from 'dotenv'; +// import path from 'path'; +// dotenv.config({ path: path.resolve(__dirname, '.env') }); + +/** + * See https://playwright.dev/docs/test-configuration. + */ +export default defineConfig({ + testDir: './src/components/_tests', + testMatch: '**/*.pw.test.ts', + snapshotPathTemplate: '{testDir}/{testFileDir}/__snapshots__/{projectName}/{arg}{ext}', + /* Run tests in files in parallel */ + fullyParallel: true, + /* Fail the build on CI if you accidentally left test.only in the source code. */ + forbidOnly: !!process.env.CI, + /* Retry on CI only */ + retries: process.env.CI ? 2 : 0, + /* Opt out of parallel tests on CI. */ + workers: process.env.CI ? 1 : undefined, + /* Reporter to use. See https://playwright.dev/docs/test-reporters */ + reporter: [['html', { outputFolder: './src/components/_tests/reports' }]], + /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ + use: { + /* Base URL to use in actions like `await page.goto('/')`. */ + baseURL: 'http://localhost:6006', // Histoire + + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: 'on-first-retry', + }, + + /* Configure projects for major browsers */ + projects: [ + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + }, + + { + name: 'firefox', + use: { ...devices['Desktop Firefox'] }, + }, + + { + name: 'webkit', + use: { ...devices['Desktop Safari'] }, + }, + + /* Test against mobile viewports. */ + // { + // name: 'Mobile Chrome', + // use: { ...devices['Pixel 5'] }, + // }, + // { + // name: 'Mobile Safari', + // use: { ...devices['iPhone 12'] }, + // }, + + /* Test against branded browsers. */ + // { + // name: 'Microsoft Edge', + // use: { ...devices['Desktop Edge'], channel: 'msedge' }, + // }, + // { + // name: 'Google Chrome', + // use: { ...devices['Desktop Chrome'], channel: 'chrome' }, + // }, + ], + + /* Run your local dev server before starting the tests */ + // webServer: { + // command: 'npm run start', + // url: 'http://127.0.0.1:3000', + // reuseExistingServer: !process.env.CI, + // }, +}) diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Context-focusedValue-variant-has-first-item-co-bc079-t-React-focused-and-focused-item-set-to-React-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Context-focusedValue-variant-has-first-item-co-bc079-t-React-focused-and-focused-item-set-to-React-1.png new file mode 100644 index 0000000000..a0ec8726bc Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Context-focusedValue-variant-has-first-item-co-bc079-t-React-focused-and-focused-item-set-to-React-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Context-focusedValue-variant-has-first-item-content-about-React-open-and-focused-item-empty-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Context-focusedValue-variant-has-first-item-content-about-React-open-and-focused-item-empty-1.png new file mode 100644 index 0000000000..aa22835e9c Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Context-focusedValue-variant-has-first-item-content-about-React-open-and-focused-item-empty-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Context-get-item-state-value-variant-has-first-72c9f-to-not-disabled-not-expanded-and-not-focused-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Context-get-item-state-value-variant-has-first-72c9f-to-not-disabled-not-expanded-and-not-focused-1.png new file mode 100644 index 0000000000..99015eccab Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Context-get-item-state-value-variant-has-first-72c9f-to-not-disabled-not-expanded-and-not-focused-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Context-get-item-state-value-variant-has-item--ae608-d-and-Vue-item-state-to-expanded-and-focussed-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Context-get-item-state-value-variant-has-item--ae608-d-and-Vue-item-state-to-expanded-and-focussed-1.png new file mode 100644 index 0000000000..a3cbf9ce4f Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Context-get-item-state-value-variant-has-item--ae608-d-and-Vue-item-state-to-expanded-and-focussed-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Context-get-item-state-value-variant-has-item--cd213-d-and-Vue-item-state-to-expanded-and-focussed-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Context-get-item-state-value-variant-has-item--cd213-d-and-Vue-item-state-to-expanded-and-focussed-1.png new file mode 100644 index 0000000000..bcd4491e42 Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Context-get-item-state-value-variant-has-item--cd213-d-and-Vue-item-state-to-expanded-and-focussed-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Context-set-value-variant-has-first-item-content-about-React-open-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Context-set-value-variant-has-first-item-content-about-React-open-1.png new file mode 100644 index 0000000000..268d5a931b Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Context-set-value-variant-has-first-item-content-about-React-open-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Context-set-value-variant-should-open-the-Vue-item-content-when-the-set-value-button-is-clicked-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Context-set-value-variant-should-open-the-Vue-item-content-when-the-set-value-button-is-clicked-1.png new file mode 100644 index 0000000000..0107b4c331 Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Context-set-value-variant-should-open-the-Vue-item-content-when-the-set-value-button-is-clicked-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Context-value-variant-has-first-item-content-about-React-open-and-context-value-set-to-React-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Context-value-variant-has-first-item-content-about-React-open-and-context-value-set-to-React-1.png new file mode 100644 index 0000000000..d92d06c40d Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Context-value-variant-has-first-item-content-about-React-open-and-context-value-set-to-React-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Context-value-variant-has-item-content-about-Vue-clicked-and-context-value-set-to-Vue-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Context-value-variant-has-item-content-about-Vue-clicked-and-context-value-set-to-Vue-1.png new file mode 100644 index 0000000000..d610d13ab8 Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Context-value-variant-has-item-content-about-Vue-clicked-and-context-value-set-to-Vue-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Horizontal-variant-has-data-orientation-attribute-set-to-horizontal-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Horizontal-variant-has-data-orientation-attribute-set-to-horizontal-1.png new file mode 100644 index 0000000000..98150ca8e7 Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Horizontal-variant-has-data-orientation-attribute-set-to-horizontal-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Root-provider-variant-has-first-item-content-about-React-closed-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Root-provider-variant-has-first-item-content-about-React-closed-1.png new file mode 100644 index 0000000000..026f2594af Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Root-provider-variant-has-first-item-content-about-React-closed-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Root-provider-variant-has-first-item-content-about-React-open-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Root-provider-variant-has-first-item-content-about-React-open-1.png new file mode 100644 index 0000000000..026f2594af Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Root-provider-variant-has-first-item-content-about-React-open-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Root-provider-variant-should-open-the-Vue-item-content-when-the-set-value-button-is-clicked-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Root-provider-variant-should-open-the-Vue-item-content-when-the-set-value-button-is-clicked-1.png new file mode 100644 index 0000000000..d2ccdc687a Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/Root-provider-variant-should-open-the-Vue-item-content-when-the-set-value-button-is-clicked-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/basic-variant-has-first-item-content-about-React-open-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/basic-variant-has-first-item-content-about-React-open-1.png new file mode 100644 index 0000000000..98150ca8e7 Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/basic-variant-has-first-item-content-about-React-open-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/basic-variant-toggles-content-when-clicking-on-another-accordion-item-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/basic-variant-toggles-content-when-clicking-on-another-accordion-item-1.png new file mode 100644 index 0000000000..75c2dd99d9 Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/basic-variant-toggles-content-when-clicking-on-another-accordion-item-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/closed-variant-has-first-item-content-about-React-closed-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/closed-variant-has-first-item-content-about-React-closed-1.png new file mode 100644 index 0000000000..12661900ca Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/closed-variant-has-first-item-content-about-React-closed-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/closed-variant-opens-the-content-of-the-first-item-when-clicking-on-the-accordion-item-trigger-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/closed-variant-opens-the-content-of-the-first-item-when-clicking-on-the-accordion-item-trigger-1.png new file mode 100644 index 0000000000..4138c030ca Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/closed-variant-opens-the-content-of-the-first-item-when-clicking-on-the-accordion-item-trigger-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/collapsible-variant-closes-the-content-of-the--4638d-the-accordion-item-trigger-of-the-second-item-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/collapsible-variant-closes-the-content-of-the--4638d-the-accordion-item-trigger-of-the-second-item-1.png new file mode 100644 index 0000000000..3f32c8dc34 Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/collapsible-variant-closes-the-content-of-the--4638d-the-accordion-item-trigger-of-the-second-item-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/collapsible-variant-closes-the-content-of-the--e4996--clicking-on-the-accordion-item-trigger-again-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/collapsible-variant-closes-the-content-of-the--e4996--clicking-on-the-accordion-item-trigger-again-1.png new file mode 100644 index 0000000000..22953a15ba Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/collapsible-variant-closes-the-content-of-the--e4996--clicking-on-the-accordion-item-trigger-again-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/collapsible-variant-has-first-item-content-about-React-closed-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/collapsible-variant-has-first-item-content-about-React-closed-1.png new file mode 100644 index 0000000000..12661900ca Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/collapsible-variant-has-first-item-content-about-React-closed-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/collapsible-variant-opens-the-content-of-the-f-7e88e-m-when-clicking-on-the-accordion-item-trigger-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/collapsible-variant-opens-the-content-of-the-f-7e88e-m-when-clicking-on-the-accordion-item-trigger-1.png new file mode 100644 index 0000000000..4138c030ca Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/collapsible-variant-opens-the-content-of-the-f-7e88e-m-when-clicking-on-the-accordion-item-trigger-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/controlled-variant-has-first-item-content-about-React-open-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/controlled-variant-has-first-item-content-about-React-open-1.png new file mode 100644 index 0000000000..287a1ded4d Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/controlled-variant-has-first-item-content-about-React-open-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/controlled-variant-toggles-content-when-clicking-on-another-accordion-item-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/controlled-variant-toggles-content-when-clicking-on-another-accordion-item-1.png new file mode 100644 index 0000000000..223c1906d4 Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/controlled-variant-toggles-content-when-clicking-on-another-accordion-item-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/disabled-variant-second-trigger-item-for-Solid-is-disabled-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/disabled-variant-second-trigger-item-for-Solid-is-disabled-1.png new file mode 100644 index 0000000000..08d468b9eb Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/disabled-variant-second-trigger-item-for-Solid-is-disabled-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/multiple-variant-closes-the-content-of-the-fir-dc1fa--clicking-on-the-accordion-item-trigger-again-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/multiple-variant-closes-the-content-of-the-fir-dc1fa--clicking-on-the-accordion-item-trigger-again-1.png new file mode 100644 index 0000000000..22953a15ba Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/multiple-variant-closes-the-content-of-the-fir-dc1fa--clicking-on-the-accordion-item-trigger-again-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/multiple-variant-has-first-item-content-about-React-closed-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/multiple-variant-has-first-item-content-about-React-closed-1.png new file mode 100644 index 0000000000..12661900ca Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/multiple-variant-has-first-item-content-about-React-closed-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/multiple-variant-opens-multiple-content-items-of-the-accordion-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/multiple-variant-opens-multiple-content-items-of-the-accordion-1.png new file mode 100644 index 0000000000..325e82693f Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/multiple-variant-opens-multiple-content-items-of-the-accordion-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/multiple-variant-opens-the-content-of-the-first-item-when-clicking-on-the-accordion-item-trigger-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/multiple-variant-opens-the-content-of-the-first-item-when-clicking-on-the-accordion-item-trigger-1.png new file mode 100644 index 0000000000..4138c030ca Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/multiple-variant-opens-the-content-of-the-first-item-when-clicking-on-the-accordion-item-trigger-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/render-prop-variant-has-first-item-content-about-React-closed-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/render-prop-variant-has-first-item-content-about-React-closed-1.png new file mode 100644 index 0000000000..083f3af82b Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/render-prop-variant-has-first-item-content-about-React-closed-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/render-prop-variant-toggles-content-when-clicking-on-another-accordion-item-trigger-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/render-prop-variant-toggles-content-when-clicking-on-another-accordion-item-trigger-1.png new file mode 100644 index 0000000000..7d6591e655 Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/render-prop-variant-toggles-content-when-clicking-on-another-accordion-item-trigger-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/render-prop-variant-toggles-content-when-clicking-on-the-accordion-item-trigger-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/render-prop-variant-toggles-content-when-clicking-on-the-accordion-item-trigger-1.png new file mode 100644 index 0000000000..a0a98872b9 Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/render-prop-variant-toggles-content-when-clicking-on-the-accordion-item-trigger-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/vertical-variant-has-data-orientation-attribute-set-to-vertical-1.png b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/vertical-variant-has-data-orientation-attribute-set-to-vertical-1.png new file mode 100644 index 0000000000..cb20512425 Binary files /dev/null and b/packages/vue/src/components/_tests/accordion/__snapshots__/chromium/vertical-variant-has-data-orientation-attribute-set-to-vertical-1.png differ diff --git a/packages/vue/src/components/_tests/accordion/accordion.pw.test.ts b/packages/vue/src/components/_tests/accordion/accordion.pw.test.ts new file mode 100644 index 0000000000..f78bfe801b --- /dev/null +++ b/packages/vue/src/components/_tests/accordion/accordion.pw.test.ts @@ -0,0 +1,473 @@ +import { expect, test } from '@playwright/test' +import { gotoStory, testA11yWithAttachedResults } from '../utils' + +// Basic variant tests +test.describe('basic variant', () => { + test.beforeEach(async ({ page }) => { + await gotoStory('accordion', 'basic', page) + await page.getByRole('button', { name: 'What is React?' }).waitFor() + }) + test('has first item content about React open', async ({ page }) => { + expect(page.getByRole('button', { name: 'What is React?' })).toHaveAttribute( + 'data-state', + 'open', + ) + expect(page.getByText('React is a JavaScript library for building user interfaces.')).toBeVisible() + expect(page).toHaveScreenshot() + }) + test('has no a11y violations', async ({ page }, testInfo) => { + const accessibilityScanResults = await testA11yWithAttachedResults(page, testInfo, 'accordion') + expect(accessibilityScanResults.violations).toEqual([]) + }) + test('toggles content when clicking on another accordion item', async ({ page }) => { + await page.getByRole('button', { name: 'What is Vue?' }).click() + expect(page.getByRole('button', { name: 'What is React?' })).toHaveAttribute( + 'data-state', + 'closed', + ) + expect(page.getByRole('button', { name: 'What is Vue?' })).toHaveAttribute( + 'data-state', + 'open', + ) + expect(page.getByText('React is a JavaScript library for building user interfaces.')).not.toBeVisible() + expect(page.getByText('Vue is a JavaScript library for building user interfaces.')).toBeVisible() + expect(page).toHaveScreenshot() + }) +}) + +// Render prop variant tests +test.describe('render prop variant', () => { + test.beforeEach(async ({ page }) => { + await gotoStory('accordion', 'render-prop', page) + await page.getByRole('button', { name: 'Closed React' }).waitFor() + }) + test('has first item content about React closed', async ({ page }) => { + expect(page.getByRole('button', { name: 'Closed React' })).toHaveAttribute( + 'data-state', + 'closed', + ) + expect(page).toHaveScreenshot() + }) + test('has no a11y violations in closed state', async ({ page }, testInfo) => { + const accessibilityScanResults = await testA11yWithAttachedResults(page, testInfo, 'accordion') + expect(accessibilityScanResults.violations).toEqual([]) + }) + test('has no a11y violations in open state', async ({ page }, testInfo) => { + await page.getByRole('button', { name: 'Closed React' }).click() + const accessibilityScanResults = await testA11yWithAttachedResults(page, testInfo, 'accordion') + expect(accessibilityScanResults.violations).toEqual([]) + }) + test('toggles content when clicking on the accordion item trigger', async ({ page }) => { + await page.getByRole('button', { name: 'Closed React' }).click() + expect(page.getByRole('button', { name: 'Expanded React' })).toHaveAttribute( + 'data-state', + 'open', + ) + expect(page.getByText('React content')).toBeVisible() + expect(page).toHaveScreenshot() + }) + test('toggles content when clicking on another accordion item trigger', async ({ page }) => { + await page.getByRole('button', { name: 'Closed React' }).click() + await page.getByRole('button', { name: 'Closed Solid' }).click() + expect(page.getByRole('button', { name: 'Closed' }).first()).toHaveAttribute( + 'data-state', + 'closed', + ) + expect(page.getByRole('button', { name: 'Expanded' })).toHaveAttribute( + 'data-state', + 'open', + ) + expect(page.getByText('React content')).not.toBeVisible() + expect(page.getByText('Solid content')).toBeVisible() + expect(page).toHaveScreenshot() + }) +}) + +// Collapsible variant tests +test.describe('collapsible variant', () => { + test.beforeEach(async ({ page }) => { + await gotoStory('accordion', 'collapsible', page) + await page.getByRole('button', { name: 'What is React?' }).waitFor() + }) + test('has first item content about React closed', async ({ page }) => { + expect(page.getByRole('button', { name: 'What is React?' })).toHaveAttribute( + 'data-state', + 'closed', + ) + expect(page).toHaveScreenshot() + }) + test('has no a11y violations in closed state', async ({ page }, testInfo) => { + const accessibilityScanResults = await testA11yWithAttachedResults(page, testInfo, 'accordion') + expect(accessibilityScanResults.violations).toEqual([]) + }) + test('has no a11y violations in open state', async ({ page }, testInfo) => { + await page.getByRole('button', { name: 'What is React?' }).click() + const accessibilityScanResults = await testA11yWithAttachedResults(page, testInfo, 'accordion') + expect(accessibilityScanResults.violations).toEqual([]) + }) + test('opens the content of the first item when clicking on the accordion item trigger', async ({ page }) => { + await page.getByRole('button', { name: 'What is React?' }).click() + expect(page.getByRole('button', { name: 'What is React?' })).toHaveAttribute( + 'data-state', + 'open', + ) + expect(page.getByText('React is a JavaScript library for building user interfaces.')).toBeVisible() + expect(page).toHaveScreenshot() + }) + test('closes the content of the first item when clicking on the accordion item trigger again', async ({ page }) => { + await page.getByRole('button', { name: 'What is React?' }).click() + expect(page.getByRole('button', { name: 'What is React?' })).toHaveAttribute( + 'data-state', + 'open', + ) + await page.getByRole('button', { name: 'What is React?' }).click() + expect(page.getByRole('button', { name: 'What is React?' })).toHaveAttribute( + 'data-state', + 'closed', + ) + expect(page.getByText('React is a JavaScript library for building user interfaces.')).not.toBeVisible() + expect(page).toHaveScreenshot() + }) + test('closes the content of the first item when clicking on the accordion item trigger of the second item', async ({ page }) => { + await page.getByRole('button', { name: 'What is React?' }).click() + expect(page.getByRole('button', { name: 'What is React?' })).toHaveAttribute( + 'data-state', + 'open', + ) + await page.getByRole('button', { name: 'What is Solid?' }).click() + expect(page.getByRole('button', { name: 'What is React?' })).toHaveAttribute( + 'data-state', + 'closed', + ) + expect(page.getByText('React is a JavaScript library for building user interfaces.')).not.toBeVisible() + expect(page.getByRole('button', { name: 'What is Solid?' })).toHaveAttribute( + 'data-state', + 'open', + ) + expect(page.getByText('Solid is a JavaScript library for building user interfaces.')).toBeVisible() + expect(page).toHaveScreenshot() + }) +}) + +// Multiple items variant tests +test.describe('multiple variant', () => { + test.beforeEach(async ({ page }) => { + await gotoStory('accordion', 'multiple', page) + await page.getByRole('button', { name: 'What is React?' }).waitFor() + }) + test('has first item content about React closed', async ({ page }) => { + expect(page.getByRole('button', { name: 'What is React?' })).toHaveAttribute( + 'data-state', + 'closed', + ) + expect(page).toHaveScreenshot() + }) + test('has no a11y violations in closed state', async ({ page }, testInfo) => { + const accessibilityScanResults = await testA11yWithAttachedResults(page, testInfo, 'accordion') + expect(accessibilityScanResults.violations).toEqual([]) + }) + test('has no a11y violations in open state', async ({ page }, testInfo) => { + await page.getByRole('button', { name: 'What is React?' }).click() + const accessibilityScanResults = await testA11yWithAttachedResults(page, testInfo, 'accordion') + expect(accessibilityScanResults.violations).toEqual([]) + }) + test('opens the content of the first item when clicking on the accordion item trigger', async ({ page }) => { + await page.getByRole('button', { name: 'What is React?' }).click() + expect(page.getByRole('button', { name: 'What is React?' })).toHaveAttribute( + 'data-state', + 'open', + ) + expect(page.getByText('React is a JavaScript library for building user interfaces.')).toBeVisible() + expect(page).toHaveScreenshot() + }) + test('closes the content of the first item when clicking on the accordion item trigger again', async ({ page }) => { + await page.getByRole('button', { name: 'What is React?' }).click() + expect(page.getByRole('button', { name: 'What is React?' })).toHaveAttribute( + 'data-state', + 'open', + ) + await page.getByRole('button', { name: 'What is React?' }).click() + expect(page.getByRole('button', { name: 'What is React?' })).toHaveAttribute( + 'data-state', + 'closed', + ) + expect(page.getByText('React is a JavaScript library for building user interfaces.')).not.toBeVisible() + expect(page).toHaveScreenshot() + }) + test('opens multiple content items of the accordion', async ({ page }) => { + await page.getByRole('button', { name: 'What is React?' }).click() + await page.getByRole('button', { name: 'What is Solid?' }).click() + + expect(page.getByRole('button', { name: 'What is React?' })).toHaveAttribute( + 'data-state', + 'open', + ) + expect(page.getByRole('button', { name: 'What is Solid?' })).toHaveAttribute( + 'data-state', + 'open', + ) + expect(page.getByText('React is a JavaScript library for building user interfaces.')).toBeVisible() + expect(page.getByText('Solid is a JavaScript library for building user interfaces.')).toBeVisible() + expect(page).toHaveScreenshot() + }) +}) + +// Controlled variant tests +test.describe('controlled variant', () => { + test.beforeEach(async ({ page }) => { + await gotoStory('accordion', 'controlled', page) + await page.getByRole('button', { name: 'React trigger' }).waitFor() + }) + test('has first item content about React open', async ({ page }) => { + expect(page.getByRole('button', { name: 'React trigger' })).toHaveAttribute( + 'data-state', + 'open', + ) + expect(page.getByText('React content')).toBeVisible() + expect(page).toHaveScreenshot() + }) + test('has no a11y violations', async ({ page }, testInfo) => { + const accessibilityScanResults = await testA11yWithAttachedResults(page, testInfo, 'accordion') + expect(accessibilityScanResults.violations).toEqual([]) + }) + test('toggles content when clicking on another accordion item', async ({ page }) => { + await page.getByRole('button', { name: 'Vue trigger' }).click() + expect(page.getByRole('button', { name: 'React trigger' })).toHaveAttribute( + 'data-state', + 'closed', + ) + expect(page.getByRole('button', { name: 'Vue trigger' })).toHaveAttribute( + 'data-state', + 'open', + ) + expect(page.getByText('React content')).not.toBeVisible() + expect(page.getByText('Vue content')).toBeVisible() + expect(page).toHaveScreenshot() + }) +}) + +// Vertical variant tests +test.describe('Vertical variant', () => { + test.beforeEach(async ({ page }) => { + await gotoStory('accordion', 'vertical', page) + await page.getByRole('button', { name: 'React trigger' }).waitFor() + }) + test('has data orientation attribute set to vertical', async ({ page }) => { + expect(page.getByRole('button', { name: 'React trigger' })).toHaveAttribute( + 'data-orientation', + 'vertical', + ) + expect(page).toHaveScreenshot() + }) + test('has no a11y violations', async ({ page }, testInfo) => { + const accessibilityScanResults = await testA11yWithAttachedResults(page, testInfo, 'accordion') + expect(accessibilityScanResults.violations).toEqual([]) + }) +}) + +// Horizontal variant tests +test.describe('Horizontal variant', () => { + test.beforeEach(async ({ page }) => { + await gotoStory('accordion', 'horizontal', page) + await page.getByRole('button', { name: 'What is React?' }).waitFor() + }) + test('has data orientation attribute set to horizontal', async ({ page }) => { + expect(page.getByRole('button', { name: 'What is React?' })).toHaveAttribute( + 'data-orientation', + 'horizontal', + ) + expect(page).toHaveScreenshot() + }) + test('has no a11y violations', async ({ page }, testInfo) => { + const accessibilityScanResults = await testA11yWithAttachedResults(page, testInfo, 'accordion') + expect(accessibilityScanResults.violations).toEqual([]) + }) +}) + +// Disabled variant tests +test.describe('disabled variant', () => { + test.beforeEach(async ({ page }) => { + await gotoStory('accordion', 'disabled', page) + await page.getByRole('button', { name: 'React trigger' }).waitFor() + }) + test('has no a11y violations', async ({ page }, testInfo) => { + const accessibilityScanResults = await testA11yWithAttachedResults(page, testInfo, 'accordion') + expect(accessibilityScanResults.violations).toEqual([]) + }) + test('second trigger item for Solid is disabled', async ({ page }) => { + await expect(page.getByRole('button', { name: 'Solid trigger' })).toBeDisabled() + expect(page.getByRole('button', { name: 'Solid trigger' })).toHaveAttribute( + 'disabled', + ) + expect(page.getByRole('button', { name: 'Solid trigger' })).toHaveAttribute( + 'aria-disabled', + 'true', + ) + expect(page).toHaveScreenshot() + }) +}) + +// Closed variant tests +test.describe('closed variant', () => { + test.beforeEach(async ({ page }) => { + await gotoStory('accordion', 'closed', page) + await page.getByRole('button', { name: 'What is React?' }).waitFor() + }) + test('has first item content about React closed', async ({ page }) => { + expect(page.getByRole('button', { name: 'What is React?' })).toHaveAttribute( + 'data-state', + 'closed', + ) + expect(page).toHaveScreenshot() + }) + test('has no a11y violations', async ({ page }, testInfo) => { + const accessibilityScanResults = await testA11yWithAttachedResults(page, testInfo, 'accordion') + expect(accessibilityScanResults.violations).toEqual([]) + }) +}) + +// Root provider variant tests +test.describe('Root provider variant', () => { + test.beforeEach(async ({ page }) => { + await gotoStory('accordion', 'root-provider', page) + await page.getByRole('button', { name: 'What is React?' }).waitFor() + }) + test('has first item content about React open', async ({ page }) => { + expect(page.getByRole('button', { name: 'What is React?' })).toHaveAttribute( + 'data-state', + 'open', + ) + expect(page).toHaveScreenshot() + }) + test('should open the Vue item content when the set value button is clicked', async ({ page }) => { + await page.getByRole('button', { name: 'Set to Vue' }).click() + expect(page.getByRole('button', { name: 'What is React?' })).toHaveAttribute( + 'data-state', + 'closed', + ) + expect(page.getByRole('button', { name: 'What is Vue?' })).toHaveAttribute( + 'data-state', + 'open', + ) + expect(page.getByText('React is a JavaScript library for building user interfaces.')).not.toBeVisible() + expect(page.getByText('Vue is a JavaScript library for building user interfaces.')).toBeVisible() + expect(page).toHaveScreenshot() + }) + test('has no a11y violations', async ({ page }, testInfo) => { + const accessibilityScanResults = await testA11yWithAttachedResults(page, testInfo, 'accordion') + expect(accessibilityScanResults.violations).toEqual([]) + }) +}) + +// Context focusedValue variant tests +test.describe('Context focusedValue variant', () => { + test.beforeEach(async ({ page }) => { + await gotoStory('accordion', 'context-focusedValue', page) + await page.getByRole('button', { name: 'What is React?' }).waitFor() + }) + test('has first item content about React open and focused item empty', async ({ page }) => { + expect(page.getByRole('button', { name: 'What is React?' })).toHaveAttribute( + 'data-state', + 'open', + ) + expect(page.getByText('Focused item:')).toBeVisible() + expect(page).toHaveScreenshot() + }) + test('has no a11y violations', async ({ page }, testInfo) => { + const accessibilityScanResults = await testA11yWithAttachedResults(page, testInfo, 'accordion') + expect(accessibilityScanResults.violations).toEqual([]) + }) + test('has first item content about React focused and focused item set to React', async ({ page }) => { + await page.getByRole('button', { name: 'What is React?' }).focus() + expect(page.getByText('Focused item: React')).toBeVisible() + expect(page).toHaveScreenshot() + }) +}) + +// Context value variant tests +test.describe('Context value variant', () => { + test.beforeEach(async ({ page }) => { + await gotoStory('accordion', 'context-value', page) + await page.getByRole('button', { name: 'What is React?' }).waitFor() + }) + test('has first item content about React open and context value set to React', async ({ page }) => { + expect(page.getByRole('button', { name: 'What is React?' })).toHaveAttribute( + 'data-state', + 'open', + ) + expect(page.getByText('Selected items: React')).toBeVisible() + expect(page).toHaveScreenshot() + }) + test('has no a11y violations', async ({ page }, testInfo) => { + const accessibilityScanResults = await testA11yWithAttachedResults(page, testInfo, 'accordion') + expect(accessibilityScanResults.violations).toEqual([]) + }) + test('has item content about Vue clicked and context value set to Vue', async ({ page }) => { + await page.getByRole('button', { name: 'What is Vue?' }).click() + expect(page.getByText('Selected items: Vue')).toBeVisible() + expect(page).toHaveScreenshot() + }) +}) + +// Context set value variant tests +test.describe('Context set value variant', () => { + test.beforeEach(async ({ page }) => { + await gotoStory('accordion', 'context-set-value', page) + await page.getByRole('button', { name: 'What is React?' }).waitFor() + }) + test('has first item content about React open', async ({ page }) => { + expect(page.getByRole('button', { name: 'What is React?' })).toHaveAttribute( + 'data-state', + 'open', + ) + expect(page).toHaveScreenshot() + }) + test('should open the Vue item content when the set value button is clicked', async ({ page }) => { + await page.getByRole('button', { name: 'Select Vue' }).click() + expect(page.getByRole('button', { name: 'What is React?' })).toHaveAttribute( + 'data-state', + 'closed', + ) + expect(page.getByRole('button', { name: 'What is Vue?' })).toHaveAttribute( + 'data-state', + 'open', + ) + expect(page.getByText('React is a JavaScript library for building user interfaces.')).not.toBeVisible() + expect(page.getByText('Vue is a JavaScript library for building user interfaces.')).toBeVisible() + expect(page).toHaveScreenshot() + }) + test('has no a11y violations', async ({ page }, testInfo) => { + const accessibilityScanResults = await testA11yWithAttachedResults(page, testInfo, 'accordion') + expect(accessibilityScanResults.violations).toEqual([]) + }) +}) + +// Context get item state value variant tests +test.describe('Context get item state value variant', () => { + test.beforeEach(async ({ page }) => { + await gotoStory('accordion', 'context-get-item-state', page) + await page.getByRole('button', { name: 'What is React?' }).waitFor() + }) + test('has first item content about React open and Vue item state to not disabled, not expanded and not focused', async ({ page }) => { + expect(page.getByRole('button', { name: 'What is React?' })).toHaveAttribute( + 'data-state', + 'open', + ) + expect(page.getByText('Vue State:Disabled: NExpanded: NFocused: N')).toBeVisible() + expect(page).toHaveScreenshot() + }) + test('has no a11y violations', async ({ page }, testInfo) => { + const accessibilityScanResults = await testA11yWithAttachedResults(page, testInfo, 'accordion') + expect(accessibilityScanResults.violations).toEqual([]) + }) + test('has item content about Vue clicked and Vue item state to expanded and focussed', async ({ page }) => { + await page.getByRole('button', { name: 'What is Vue?' }).click() + expect(page.getByText('Vue State:Disabled: NExpanded: YFocused: Y')).toBeVisible() + expect(page).toHaveScreenshot() + }) + test('has item trigger about Vue focused and Vue item state to expanded and focussed', async ({ page }) => { + await page.getByRole('button', { name: 'What is Vue?' }).focus() + expect(page.getByText('Vue State:Disabled: NExpanded: NFocused: Y')).toBeVisible() + expect(page).toHaveScreenshot() + }) +}) \ No newline at end of file diff --git a/packages/vue/src/components/_tests/avatar/__snapshots__/chromium/basic-variant-has-avatar-image-1.png b/packages/vue/src/components/_tests/avatar/__snapshots__/chromium/basic-variant-has-avatar-image-1.png new file mode 100644 index 0000000000..2da36162f6 Binary files /dev/null and b/packages/vue/src/components/_tests/avatar/__snapshots__/chromium/basic-variant-has-avatar-image-1.png differ diff --git a/packages/vue/src/components/_tests/avatar/__snapshots__/chromium/closed-variant-displays-avatar-with-name-1.png b/packages/vue/src/components/_tests/avatar/__snapshots__/chromium/closed-variant-displays-avatar-with-name-1.png new file mode 100644 index 0000000000..2da36162f6 Binary files /dev/null and b/packages/vue/src/components/_tests/avatar/__snapshots__/chromium/closed-variant-displays-avatar-with-name-1.png differ diff --git a/packages/vue/src/components/_tests/avatar/__snapshots__/chromium/root-provided-variant-has-avatar-image-1.png b/packages/vue/src/components/_tests/avatar/__snapshots__/chromium/root-provided-variant-has-avatar-image-1.png new file mode 100644 index 0000000000..77ad4ffe1f Binary files /dev/null and b/packages/vue/src/components/_tests/avatar/__snapshots__/chromium/root-provided-variant-has-avatar-image-1.png differ diff --git a/packages/vue/src/components/_tests/avatar/avatar.pw.test.ts b/packages/vue/src/components/_tests/avatar/avatar.pw.test.ts new file mode 100644 index 0000000000..951d346ed1 --- /dev/null +++ b/packages/vue/src/components/_tests/avatar/avatar.pw.test.ts @@ -0,0 +1,56 @@ +import { expect, test } from '@playwright/test' +import { gotoStory, testA11yWithAttachedResults } from '../utils' + +test.describe('basic variant', () => { + test.beforeEach(async ({ page }) => { + await gotoStory('avatar', 'basic', page) + await page.getByAltText('avatar').waitFor() + }) + test('has avatar image', async ({ page }) => { + expect(page.getByAltText('avatar')).toHaveAttribute( + 'src', + 'https://avatars.githubusercontent.com/u/1846056?v=4', + ) + expect(page).toHaveScreenshot() + }) + test('has no a11y violations', async ({ page }, testInfo) => { + const accessibilityScanResults = await testA11yWithAttachedResults(page, testInfo, 'avatar') + expect(accessibilityScanResults.violations).toEqual([]) + }) +}) + +test.describe('closed variant', () => { + test.beforeEach(async ({ page }) => { + await gotoStory('avatar', 'closed', page) + await page.getByAltText('Christian').waitFor() + }) + test('displays avatar with name', async ({ page }) => { + expect(page.getByAltText('Christian')).toHaveAttribute( + 'src', + 'https://avatars.githubusercontent.com/u/1846056?v=4', + ) + expect(page).toHaveScreenshot() + }) + test('has no a11y violations', async ({ page }, testInfo) => { + const accessibilityScanResults = await testA11yWithAttachedResults(page, testInfo, 'avatar') + expect(accessibilityScanResults.violations).toEqual([]) + }) +}) + +test.describe('root-provided variant', () => { + test.beforeEach(async ({ page }) => { + await gotoStory('avatar', 'root-provider', page) + await page.getByAltText('avatar').waitFor() + }) + test('has avatar image', async ({ page }) => { + expect(page.getByAltText('avatar')).toHaveAttribute( + 'src', + 'https://avatars.githubusercontent.com/u/1846056?v=4', + ) + expect(page).toHaveScreenshot() + }) + test('has no a11y violations', async ({ page }, testInfo) => { + const accessibilityScanResults = await testA11yWithAttachedResults(page, testInfo, 'avatar') + expect(accessibilityScanResults.violations).toEqual([]) + }) +}) diff --git a/packages/vue/src/components/_tests/utils.ts b/packages/vue/src/components/_tests/utils.ts new file mode 100644 index 0000000000..01f4b8b95b --- /dev/null +++ b/packages/vue/src/components/_tests/utils.ts @@ -0,0 +1,27 @@ +import AxeBuilder from '@axe-core/playwright' +import type { Page, TestInfo } from '@playwright/test' + +export const gotoStory = async (storyId: string, variantId: string, page: Page) => { + if (!storyId || !variantId) await page.goto('/') + + // Using the sandbox to isolate the story from the rest of Histoire. + await page.goto(`/__sandbox.html?storyId=${storyId}&variantId=${variantId}`) +} + +export const testA11yWithAttachedResults = async ( + page: Page, + testInfo: TestInfo, + componentName: string, +) => { + const accessibilityScanResults = await new AxeBuilder({ page }) + .include(`[data-scope="${componentName}"][data-part="root"]`) + .disableRules('color-contrast') // This rule is not relevant since Ark components are not styled by default. + .analyze() + + await testInfo.attach('accessibility-scan-results', { + body: JSON.stringify(accessibilityScanResults, null, 2), + contentType: 'application/json', + }) + + return accessibilityScanResults +} diff --git a/packages/vue/src/components/accordion/accordion.stories.vue b/packages/vue/src/components/accordion/accordion.stories.vue index a9cc0cd072..0ac640cc4a 100644 --- a/packages/vue/src/components/accordion/accordion.stories.vue +++ b/packages/vue/src/components/accordion/accordion.stories.vue @@ -15,47 +15,47 @@ import RootProvider from './examples/root-provider.vue' import Vertical from './examples/vertical.vue'