From a9c532bce8caa9b89283d491527117bd5db66894 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 4 Oct 2024 20:18:01 +0000 Subject: [PATCH 1/5] Run vrt tests with all flags on --- .github/workflows/ci.yml | 77 +++++++++++++++++++++++++++ packages/react/.storybook/preview.jsx | 15 +++++- 2 files changed, 91 insertions(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 098af6b11c3..2382e325233 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -179,6 +179,83 @@ jobs: if: ${{ needs.vrt-runner.result == 'failure' }} run: exit 1 + vrt-runner-all-flags: + runs-on: ubuntu-latest-8-cores + strategy: + fail-fast: false + matrix: + shard: [1, 2, 3, 4] + steps: + - uses: actions/checkout@v4 + - name: Use Node.js 20.x + uses: actions/setup-node@v4 + with: + node-version: 22 + cache: 'npm' + - run: npm i -g npm@^10.5.1 + - name: Install dependencies + run: npm ci + - name: Build storybook + run: npx storybook build + working-directory: packages/react + - name: Run storybook + id: storybook + working-directory: packages/react + run: | + export PRIMER_REACT_CSS_MODULES_TEAM=1 + export PRIMER_REACT_CSS_MODULES_STAFF=1 + export PRIMER_REACT_CSS_MODULES_GA=1 + npx serve -l 6006 storybook-static & + pid=$! + echo "pid=$pid" >> $GITHUB_OUTPUT + sleep 5 + - name: Run VRT + uses: docker://mcr.microsoft.com/playwright:v1.43.0-jammy + env: + STORYBOOK_URL: 'http://172.17.0.1:6006' + with: + args: npx playwright test --grep @vrt --shard="${{ matrix.shard }}/${{ strategy.job-total }}" + - name: Stop storybook + run: kill ${{ steps.storybook.outputs.pid }} + - name: Upload report + if: ${{ always() }} + uses: actions/upload-artifact@v4 + with: + name: vrt-all-flags-${{ matrix.shard }} + path: blob-report + retention-days: 1 + + vrt-all-flags: + if: ${{ always() }} + runs-on: ubuntu-latest + needs: vrt-runner-all-flags + steps: + - uses: actions/checkout@v4 + - name: Use Node.js 20.x + uses: actions/setup-node@v4 + with: + node-version: 22 + cache: 'npm' + - run: npm i -g npm@^10.5.1 + - name: install dependencies + run: npm ci + - name: download all reports + uses: actions/download-artifact@v4 + with: + path: all-blob-reports + pattern: vrt-all-flags-* + merge-multiple: true + - name: merge all reports + run: npx playwright merge-reports --reporter html ./all-blob-reports + - name: Upload report + uses: actions/upload-artifact@v4 + with: + name: vrt-all-flags + path: playwright-report + - name: check vrt-runner job status + if: ${{ needs.vrt-runner.result == 'failure' }} + run: exit 1 + aat-runner: runs-on: ubuntu-latest-8-cores strategy: diff --git a/packages/react/.storybook/preview.jsx b/packages/react/.storybook/preview.jsx index b2dd26b9350..6181bf703a5 100644 --- a/packages/react/.storybook/preview.jsx +++ b/packages/react/.storybook/preview.jsx @@ -171,6 +171,19 @@ const primerThemes = [ {value: 'dark_high_contrast', left: '🌗', title: 'Dark High Contrast'}, ] +const defaultFeatureFlags = new Map(DefaultFeatureFlags.flags) +const featureFlagEnvList = new Set([ + 'PRIMER_REACT_CSS_MODULES_TEAM', + 'PRIMER_REACT_CSS_MODULES_STAFF', + 'PRIMER_REACT_CSS_MODULES_GA', +]) + +for (const flag of featureFlagEnvList) { + if (process.env[flag] === '1') { + defaultFeatureFlags.set(flag, true) + } +} + export const globalTypes = { colorScheme: { name: 'Theme', @@ -187,7 +200,7 @@ export const globalTypes = { featureFlags: { name: 'Feature flags', description: 'Toggle feature flags', - defaultValue: Object.fromEntries(DefaultFeatureFlags.flags), + defaultValue: Object.fromEntries(defaultFeatureFlags), }, } From 527857c327626a925682e75bbf0d02f47272d442 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 4 Oct 2024 20:33:15 +0000 Subject: [PATCH 2/5] Remove inline feature flag tests --- e2e/components/Banner.test.ts | 57 -- e2e/components/Button.test.ts | 1239 ++++++++++++--------------- e2e/components/ButtonGroup.test.ts | 102 --- e2e/components/Checkbox.test.ts | 42 - e2e/components/CounterLabel.test.ts | 34 - e2e/components/IconButton.test.ts | 744 ++++++++-------- e2e/components/Label.test.ts | 914 +++++++++----------- e2e/components/Link.test.ts | 36 - e2e/components/LinkButton.test.ts | 774 ++++++++--------- e2e/components/Text.test.ts | 36 - 10 files changed, 1664 insertions(+), 2314 deletions(-) diff --git a/e2e/components/Banner.test.ts b/e2e/components/Banner.test.ts index 36162e47f88..83b93892dc3 100644 --- a/e2e/components/Banner.test.ts +++ b/e2e/components/Banner.test.ts @@ -82,24 +82,6 @@ test.describe('Banner', () => { id: story.id, globals: { colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: true, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Banner.${story.title}.${theme}.png`) - }) - - test('default (styled-components) @vrt', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: false, - }, }, }) @@ -112,22 +94,6 @@ test.describe('Banner', () => { id: story.id, globals: { colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: true, - }, - }, - }) - await expect(page).toHaveNoViolations() - }) - - test('axe (styled-components) @aat', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: false, - }, }, }) await expect(page).toHaveNoViolations() @@ -140,29 +106,6 @@ test.describe('Banner', () => { test(`${name} @vrt`, async ({page}) => { await visit(page, { id: story.id, - globals: { - featureFlags: { - primer_react_css_modules_team: true, - }, - }, - }) - const width = viewports[name] - - await page.setViewportSize({ - width, - height: 667, - }) - expect(await page.screenshot()).toMatchSnapshot(`Banner.${story.title}.${name}.png`) - }) - - test(`${name} (styled-components) @vrt`, async ({page}) => { - await visit(page, { - id: story.id, - globals: { - featureFlags: { - primer_react_css_modules_team: false, - }, - }, }) const width = viewports[name] diff --git a/e2e/components/Button.test.ts b/e2e/components/Button.test.ts index c86326eb1a5..1e444ac106f 100644 --- a/e2e/components/Button.test.ts +++ b/e2e/components/Button.test.ts @@ -3,748 +3,627 @@ import {visit} from '../test-helpers/storybook' import {themes} from '../test-helpers/themes' test.describe('Button', () => { - for (const featureFlagOn of [true, false]) { - test.describe(`Feature flag: ${featureFlagOn ? 'on' : 'off'}`, () => { - test.describe('Danger', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--danger', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Danger.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button-features--danger', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) + test.describe('Danger', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--danger', + globals: { + colorScheme: theme, + }, + }) - test.describe('Default', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button--default', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Default.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button--default', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Danger.${theme}.png`) + }) - test.describe('Disabled', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--disabled', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Disabled.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button-features--disabled', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--danger', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) - test.describe('Invisible', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--invisible', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Invisible.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button-features--invisible', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test.describe('Default', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button--default', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Default.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button--default', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) - test.describe('Link', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--link', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Link.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button-features--link', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test.describe('Disabled', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--disabled', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Disabled.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--disabled', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) - test.describe('Large', () => { + test.describe('Invisible', () => { + for (const theme of themes) { + test.describe(theme, () => { test('default @vrt', async ({page}) => { await visit(page, { - id: 'components-button-features--large', + id: 'components-button-features--invisible', globals: { - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Invisible.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--invisible', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', }, }, }) + }) + }) + } + }) + + test.describe('Link', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--link', + globals: { + colorScheme: theme, + }, + }) // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Large.png`) + expect(await page.screenshot()).toMatchSnapshot(`Button.Link.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--link', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) }) }) + } + }) - test.describe('Leading Visual', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--leading-visual', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Leading Visual.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button-features--leading-visual', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test.describe('Large', () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--large', }) - test.describe('Medium', () => { + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Large.png`) + }) + }) + + test.describe('Leading Visual', () => { + for (const theme of themes) { + test.describe(theme, () => { test('default @vrt', async ({page}) => { await visit(page, { - id: 'components-button-features--medium', + id: 'components-button-features--leading-visual', globals: { - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, + colorScheme: theme, }, }) // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Medium.png`) + expect(await page.screenshot()).toMatchSnapshot(`Button.Leading Visual.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--leading-visual', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) }) }) + } + }) - test.describe('Primary', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--primary', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Primary.${theme}.png`) - }) - - test.fixme('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button-features--primary', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test.describe('Medium', () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--medium', }) - test.describe('Small', () => { + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Medium.png`) + }) + }) + + test.describe('Primary', () => { + for (const theme of themes) { + test.describe(theme, () => { test('default @vrt', async ({page}) => { await visit(page, { - id: 'components-button-features--small', + id: 'components-button-features--primary', globals: { - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, + colorScheme: theme, }, }) // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Small.png`) + expect(await page.screenshot()).toMatchSnapshot(`Button.Primary.${theme}.png`) + }) + + test.fixme('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--primary', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) }) }) + } + }) - test.describe('Trailing Action', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--trailing-action', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Trailing Action.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button-features--trailing-action', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test.describe('Small', () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--small', }) - test.describe('Trailing Counter', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--trailing-counter', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Trailing Counter.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button-features--trailing-counter', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Small.png`) + }) + }) + + test.describe('Trailing Action', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--trailing-action', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Trailing Action.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--trailing-action', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } + }) + + test.describe('Trailing Counter', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--trailing-counter', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Trailing Counter.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--trailing-counter', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) - test.describe('Trailing Visual', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--trailing-visual', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Trailing Visual.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button-features--trailing-visual', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test.describe('Trailing Visual', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--trailing-visual', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Trailing Visual.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--trailing-visual', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) - test.describe('Inactive', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--inactive', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Inactive.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button-features--inactive', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test.describe('Inactive', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--inactive', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Inactive.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--inactive', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) - test.describe('Loading', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--loading', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Button.Loading.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button-features--loading', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test.describe('Loading', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--loading', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Button.Loading.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--loading', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Loading With Leading Visual', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--loading-with-leading-visual', + globals: { + colorScheme: theme, + }, + }) - test.describe('Loading With Leading Visual', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--loading-with-leading-visual', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `Button.Loading With Leading Visual.${theme}.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button-features--loading-with-leading-visual', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + // Default state + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `Button.Loading With Leading Visual.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--loading-with-leading-visual', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) - test.describe('Loading With Trailing Visual', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--loading-with-trailing-visual', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `Button.Loading With Trailing Visual.${theme}.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button-features--loading-with-trailing-visual', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test.describe('Loading With Trailing Visual', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--loading-with-trailing-visual', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `Button.Loading With Trailing Visual.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--loading-with-trailing-visual', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) - test.describe('Loading With Trailing Action', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--loading-with-trailing-action', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `Button.Loading With Trailing Action.${theme}.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-button-features--loading-with-trailing-action', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test.describe('Loading With Trailing Action', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--loading-with-trailing-action', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `Button.Loading With Trailing Action.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-button-features--loading-with-trailing-action', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) - test.describe('Dev: Invisible Variants', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-devonly--invisible-variants', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.Invisible Variants.${theme}.png`) - }) - }) - } + test.describe('Dev: Invisible Variants', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-devonly--invisible-variants', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.Invisible Variants.${theme}.png`) + }) }) + } + }) - test.describe('Dev: sx prop', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-devonly--test-sx-prop', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Button.sx prop.${theme}.png`) - }) - }) - } + test.describe('Dev: sx prop', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-devonly--test-sx-prop', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Button.sx prop.${theme}.png`) + }) }) + } + }) + + test.describe('Aria expanded buttons', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-button-features--expanded-button', + globals: { + colorScheme: theme, + }, + }) - test.describe('Aria expanded buttons', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-button-features--expanded-button', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `Button.Aria expanded buttons.${theme}.png`, - ) - }) - - // temporarily disabled due to a bug in primer/primitves - - // eslint-disable-next-line jest/no-commented-out-tests - // test('axe @aat', async ({page}) => { - // await visit(page, { - // id: 'components-button-features--expanded-button', - // globals: { - // colorScheme: theme, - // featureFlags: { - // primer_react_css_modules_staff: featureFlagOn, - // }, - // }, - // }) - // await expect(page).toHaveNoViolations({ - // rules: { - // 'color-contrast': { - // enabled: theme !== 'dark_dimmed', - // }, - // }, - // }) - // }) - }) - } + // Default state + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `Button.Aria expanded buttons.${theme}.png`, + ) + }) + + // temporarily disabled due to a bug in primer/primitves + + // eslint-disable-next-line jest/no-commented-out-tests + // test('axe @aat', async ({page}) => { + // await visit(page, { + // id: 'components-button-features--expanded-button', + // globals: { + // colorScheme: theme, + // }, + // }) + // await expect(page).toHaveNoViolations({ + // rules: { + // 'color-contrast': { + // enabled: theme !== 'dark_dimmed', + // }, + // }, + // }) + // }) }) - }) - } + } + }) }) diff --git a/e2e/components/ButtonGroup.test.ts b/e2e/components/ButtonGroup.test.ts index 4fdcd7ab984..c3ca9822ff7 100644 --- a/e2e/components/ButtonGroup.test.ts +++ b/e2e/components/ButtonGroup.test.ts @@ -11,24 +11,6 @@ test.describe('ButtonGroup', () => { id: 'components-buttongroup--default', globals: { colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: true, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.Default.${theme}.png`) - }) - - test('default @vrt (styled-components)', async ({page}) => { - await visit(page, { - id: 'components-buttongroup--default', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: false, - }, }, }) @@ -41,22 +23,6 @@ test.describe('ButtonGroup', () => { id: 'components-buttongroup--default', globals: { colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: true, - }, - }, - }) - await expect(page).toHaveNoViolations() - }) - - test('axe @aat (styled-components)', async ({page}) => { - await visit(page, { - id: 'components-buttongroup--default', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: false, - }, }, }) await expect(page).toHaveNoViolations() @@ -73,24 +39,6 @@ test.describe('ButtonGroup', () => { id: 'components-buttongroup--playground', globals: { colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: true, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.Playground.${theme}.png`) - }) - - test('default @vrt (styled-components)', async ({page}) => { - await visit(page, { - id: 'components-buttongroup--playground', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: false, - }, }, }) @@ -103,22 +51,6 @@ test.describe('ButtonGroup', () => { id: 'components-buttongroup--playground', globals: { colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: true, - }, - }, - }) - await expect(page).toHaveNoViolations() - }) - - test('axe @aat (styled-components)', async ({page}) => { - await visit(page, { - id: 'components-buttongroup--playground', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: false, - }, }, }) await expect(page).toHaveNoViolations() @@ -135,24 +67,6 @@ test.describe('ButtonGroup', () => { id: 'components-buttongroup-features--icon-buttons', globals: { colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: true, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.Icon Buttons.${theme}.png`) - }) - - test('default @vrt (styled-components)', async ({page}) => { - await visit(page, { - id: 'components-buttongroup-features--icon-buttons', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: false, - }, }, }) @@ -165,22 +79,6 @@ test.describe('ButtonGroup', () => { id: 'components-buttongroup-features--icon-buttons', globals: { colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: true, - }, - }, - }) - await expect(page).toHaveNoViolations() - }) - - test('axe @aat (styled-components)', async ({page}) => { - await visit(page, { - id: 'components-buttongroup-features--icon-buttons', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: false, - }, }, }) await expect(page).toHaveNoViolations() diff --git a/e2e/components/Checkbox.test.ts b/e2e/components/Checkbox.test.ts index a3ae857d7ca..68bdc98193f 100644 --- a/e2e/components/Checkbox.test.ts +++ b/e2e/components/Checkbox.test.ts @@ -42,33 +42,6 @@ test.describe('Checkbox', () => { id: story.id, globals: { colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: true, - }, - }, - args: 'args' in story ? story.args : {}, - }) - - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `Checkbox.${story.title}.${theme}.png`, - ) - - // Focus state - await page.keyboard.press('Tab') - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `Checkbox.${story.title}.focus.${theme}.png`, - ) - }) - - test('default (styled-components) @vrt', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: false, - }, }, args: 'args' in story ? story.args : {}, }) @@ -90,21 +63,6 @@ test.describe('Checkbox', () => { id: story.id, globals: { colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: true, - }, - }, - args: 'args' in story ? story.args : {}, - }) - await expect(page).toHaveNoViolations() - }) - - test('axe (styled-components) @aat', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - colorScheme: theme, - primer_react_css_modules_team: false, }, args: 'args' in story ? story.args : {}, }) diff --git a/e2e/components/CounterLabel.test.ts b/e2e/components/CounterLabel.test.ts index 7933b5b4597..c3945c74083 100644 --- a/e2e/components/CounterLabel.test.ts +++ b/e2e/components/CounterLabel.test.ts @@ -27,24 +27,6 @@ test.describe('CounterLabel', () => { id: story.id, globals: { colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: true, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`CounterLabel.${story.title}.${theme}.png`) - }) - - test('default (styled-components) @vrt', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: false, - }, }, }) @@ -57,22 +39,6 @@ test.describe('CounterLabel', () => { id: story.id, globals: { colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: true, - }, - }, - }) - await expect(page).toHaveNoViolations() - }) - - test('axe (styled-components) @aat', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_team: false, - }, }, }) await expect(page).toHaveNoViolations() diff --git a/e2e/components/IconButton.test.ts b/e2e/components/IconButton.test.ts index e045f5a4c15..86a6b3d1c26 100644 --- a/e2e/components/IconButton.test.ts +++ b/e2e/components/IconButton.test.ts @@ -3,442 +3,372 @@ import {visit} from '../test-helpers/storybook' import {themes} from '../test-helpers/themes' test.describe('IconButton', () => { - for (const featureFlagOn of [true, false]) { - test.describe(`Feature flag: ${featureFlagOn ? 'on' : 'off'}`, () => { - test.describe('Playground', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-iconbutton--playground', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`IconButton.Playground.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-iconbutton--playground', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test.describe('Playground', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-iconbutton--playground', + globals: { + colorScheme: theme, + }, }) - } + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`IconButton.Playground.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-iconbutton--playground', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Danger', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--danger', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`IconButton.Danger.${theme}.png`) + }) - test.describe('Danger', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--danger', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`IconButton.Danger.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--danger', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--danger', + globals: { + colorScheme: theme, + }, }) - } + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Default', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-iconbutton--default', + globals: { + colorScheme: theme, + }, + }) - test.describe('Default', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-iconbutton--default', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`IconButton.Default.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-iconbutton--default', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`IconButton.Default.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-iconbutton--default', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, }) - } + }) }) + } + }) + + test.describe('Disabled', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--disabled', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`IconButton.Disabled.${theme}.png`) + }) - test.describe('Disabled', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--disabled', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`IconButton.Disabled.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--disabled', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--disabled', + globals: { + colorScheme: theme, + }, }) - } + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Invisible', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--invisible', + globals: { + colorScheme: theme, + }, + }) - test.describe('Invisible', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--invisible', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`IconButton.Invisible.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--invisible', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`IconButton.Invisible.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--invisible', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, }) - } + }) }) + } + }) + + test.describe('Large', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--large', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`IconButton.Large.${theme}.png`) + }) - test.describe('Large', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--large', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`IconButton.Large.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--large', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--large', + globals: { + colorScheme: theme, + }, }) - } + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Medium', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--medium', + globals: { + colorScheme: theme, + }, + }) - test.describe('Medium', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--medium', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`IconButton.Medium.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--medium', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`IconButton.Medium.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--medium', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, }) - } + }) }) + } + }) + + test.describe('Primary', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--primary', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`IconButton.Primary.${theme}.png`) + }) - test.describe('Primary', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--primary', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`IconButton.Primary.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--primary', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--primary', + globals: { + colorScheme: theme, + }, }) - } + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Small', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--small', + globals: { + colorScheme: theme, + }, + }) - test.describe('Small', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--small', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`IconButton.Small.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--small', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`IconButton.Small.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--small', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, }) - } + }) }) - test.describe('Keyshortcuts', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--keyshortcuts', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - await page.keyboard.press('Tab') // focus on icon button - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `IconButton.Keyshortcuts.${theme}.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--keyshortcuts', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await page.keyboard.press('Tab') // focus on icon button - await expect(page).toHaveNoViolations() - }) + } + }) + test.describe('Keyshortcuts', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--keyshortcuts', + globals: { + colorScheme: theme, + }, }) - } + + // Default state + await page.keyboard.press('Tab') // focus on icon button + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `IconButton.Keyshortcuts.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--keyshortcuts', + globals: { + colorScheme: theme, + }, + }) + await page.keyboard.press('Tab') // focus on icon button + await expect(page).toHaveNoViolations() + }) }) + } + }) + + test.describe('Keyshortcuts on Description', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--keyshortcuts-on-description', + globals: { + colorScheme: theme, + }, + }) - test.describe('Keyshortcuts on Description', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--keyshortcuts-on-description', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - await page.keyboard.press('Tab') // focus on icon button - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `IconButton.Keyshortcuts on Description.${theme}.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-iconbutton-features--keyshortcuts-on-description', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await page.keyboard.press('Tab') // focus on icon button - await expect(page).toHaveNoViolations() - }) + // Default state + await page.keyboard.press('Tab') // focus on icon button + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `IconButton.Keyshortcuts on Description.${theme}.png`, + ) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-iconbutton-features--keyshortcuts-on-description', + globals: { + colorScheme: theme, + }, }) - } + await page.keyboard.press('Tab') // focus on icon button + await expect(page).toHaveNoViolations() + }) }) - }) - } + } + }) }) diff --git a/e2e/components/Label.test.ts b/e2e/components/Label.test.ts index e54f64022d3..b28b9f7fffb 100644 --- a/e2e/components/Label.test.ts +++ b/e2e/components/Label.test.ts @@ -3,527 +3,445 @@ import {visit} from '../test-helpers/storybook' import {themes} from '../test-helpers/themes' test.describe('Label', () => { - for (const enabled of [true, false]) { - test.describe(`Feature flag enabled: ${enabled}`, () => { - test.describe('Default', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label--default', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Default.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label--default', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test.describe('Default', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label--default', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Default.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label--default', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Playground', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label--playground', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Playground.${theme}.png`) + }) - test.describe('Playground', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label--playground', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Playground.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label--playground', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label--playground', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Accent', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--accent', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Accent.${theme}.png`) + }) - test.describe('Accent', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--accent', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Accent.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--accent', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--accent', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Attention', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--attention', + globals: { + colorScheme: theme, + }, + }) - test.describe('Attention', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--attention', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Attention.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--attention', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Attention.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--attention', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Danger', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--danger', + globals: { + colorScheme: theme, + }, + }) - test.describe('Danger', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--danger', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Danger.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--danger', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Danger.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--danger', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Done', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--done', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Done.${theme}.png`) + }) - test.describe('Done', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--done', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Done.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--done', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--done', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Primary', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--primary', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Primary.${theme}.png`) + }) - test.describe('Primary', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--primary', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Primary.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--primary', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--primary', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Secondary', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--secondary', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Secondary.${theme}.png`) + }) - test.describe('Secondary', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--secondary', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Secondary.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--secondary', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--secondary', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Severe', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--severe', + globals: { + colorScheme: theme, + }, + }) - test.describe('Severe', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--severe', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Severe.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--severe', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Severe.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--severe', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Size Large', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--size-large', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Size Large.${theme}.png`) + }) - test.describe('Size Large', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--size-large', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Size Large.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--size-large', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--size-large', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Size Small', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--size-small', + globals: { + colorScheme: theme, + }, + }) - test.describe('Size Small', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--size-small', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Size Small.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--size-small', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Size Small.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--size-small', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Sponsors', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--sponsors', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Sponsors.${theme}.png`) + }) - test.describe('Sponsors', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--sponsors', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Sponsors.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--sponsors', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--sponsors', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Success', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--success', + globals: { + colorScheme: theme, + }, + }) - test.describe('Success', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--success', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Success.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--success', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: enabled, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Success.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--success', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) - }) - } + } + }) }) diff --git a/e2e/components/Link.test.ts b/e2e/components/Link.test.ts index 19a1b60d470..692444882f2 100644 --- a/e2e/components/Link.test.ts +++ b/e2e/components/Link.test.ts @@ -31,9 +31,6 @@ test.describe('Link', () => { id: story.id, globals: { colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: true, - }, }, }) @@ -50,39 +47,6 @@ test.describe('Link', () => { }) test('axe @aat', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_ga: true, - }, - }, - }) - await expect(page).toHaveNoViolations() - }) - - test('default (styled-component) @vrt', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Link.${story.title}.${theme}.png`) - - // Hover state - await page.getByRole('link').hover() - expect(await page.screenshot()).toMatchSnapshot(`Link.${story.title}.${theme}.hover.png`) - - // Focus state - await page.keyboard.press('Tab') - expect(await page.screenshot()).toMatchSnapshot(`Link.${story.title}.${theme}.focus.png`) - }) - - test('axe (styled-component) @aat', async ({page}) => { await visit(page, { id: story.id, globals: { diff --git a/e2e/components/LinkButton.test.ts b/e2e/components/LinkButton.test.ts index eea305787fc..98a92c22704 100644 --- a/e2e/components/LinkButton.test.ts +++ b/e2e/components/LinkButton.test.ts @@ -3,447 +3,377 @@ import {visit} from '../test-helpers/storybook' import {themes} from '../test-helpers/themes' test.describe('LinkButton', () => { - for (const featureFlagOn of [true, false]) { - test.describe(`Feature flag: ${featureFlagOn ? 'on' : 'off'}`, () => { - test.describe('Playground', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-linkbutton--playground', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Playground.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-linkbutton--playground', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test.describe('Playground', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-linkbutton--playground', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Playground.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-linkbutton--playground', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Danger', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--danger', + globals: { + colorScheme: theme, + }, + }) - test.describe('Danger', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--danger', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Danger.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--danger', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + // Default state + expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Danger.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--danger', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Default', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-linkbutton--default', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Default.${theme}.png`) + }) - test.describe('Default', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-linkbutton--default', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Default.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-linkbutton--default', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-linkbutton--default', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Invisible', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--invisible', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Invisible.${theme}.png`) + }) - test.describe('Invisible', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--invisible', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Invisible.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--invisible', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--invisible', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Large', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--large', + globals: { + colorScheme: theme, + }, + }) - test.describe('Large', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--large', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Large.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--large', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + // Default state + expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Large.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--large', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Leading Visual', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--leading-visual', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Leading Visual.${theme}.png`) + }) - test.describe('Leading Visual', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--leading-visual', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Leading Visual.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--leading-visual', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--leading-visual', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Medium', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--medium', + globals: { + colorScheme: theme, + }, + }) - test.describe('Medium', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--medium', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Medium.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--medium', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + // Default state + expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Medium.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--medium', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Primary', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--primary', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Primary.${theme}.png`) + }) - test.describe('Primary', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--primary', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Primary.${theme}.png`) - }) - - test.fixme('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--primary', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test.fixme('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--primary', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Small', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--small', + globals: { + colorScheme: theme, + }, + }) - test.describe('Small', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--small', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Small.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--small', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + // Default state + expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Small.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--small', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('Trailing Visual', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--trailing-visual', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Trailing Visual.${theme}.png`) + }) - test.describe('Trailing Visual', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--trailing-visual', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Trailing Visual.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--trailing-visual', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--trailing-visual', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) + } + }) + + test.describe('With React Router', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--with-react-router', + globals: { + colorScheme: theme, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`LinkButton.With React Router.${theme}.png`) + }) - test.describe('With React Router', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--with-react-router', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`LinkButton.With React Router.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-linkbutton-features--with-react-router', - globals: { - colorScheme: theme, - featureFlags: { - primer_react_css_modules_staff: featureFlagOn, - }, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-linkbutton-features--with-react-router', + globals: { + colorScheme: theme, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) }) - }) - } + } + }) }) diff --git a/e2e/components/Text.test.ts b/e2e/components/Text.test.ts index e039bac12c4..031a4adf876 100644 --- a/e2e/components/Text.test.ts +++ b/e2e/components/Text.test.ts @@ -44,25 +44,6 @@ test.describe('Text', () => { test('default @vrt', async ({page}) => { await visit(page, { id: story.id, - globals: { - featureFlags: { - primer_react_css_modules_ga: true, - }, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Text.${story.title}.png`) - }) - - test('default (styled-system) @vrt', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - featureFlags: { - primer_react_css_modules_ga: false, - }, - }, }) // Default state @@ -72,23 +53,6 @@ test.describe('Text', () => { test('axe @aat', async ({page}) => { await visit(page, { id: story.id, - globals: { - featureFlags: { - primer_react_css_modules_ga: true, - }, - }, - }) - await expect(page).toHaveNoViolations() - }) - - test('axe (styled-system) @aat', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - featureFlags: { - primer_react_css_modules_ga: false, - }, - }, }) await expect(page).toHaveNoViolations() }) From cbcc5cd669abc0433fd283996ecd7c0692183bb0 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 4 Oct 2024 20:34:40 +0000 Subject: [PATCH 3/5] Set flags on whole job --- .github/workflows/ci.yml | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 2382e325233..f2fce150301 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -185,6 +185,10 @@ jobs: fail-fast: false matrix: shard: [1, 2, 3, 4] + env: + PRIMER_REACT_CSS_MODULES_TEAM: 1 + PRIMER_REACT_CSS_MODULES_STAFF: 1 + PRIMER_REACT_CSS_MODULES_GA: 1 steps: - uses: actions/checkout@v4 - name: Use Node.js 20.x @@ -202,9 +206,6 @@ jobs: id: storybook working-directory: packages/react run: | - export PRIMER_REACT_CSS_MODULES_TEAM=1 - export PRIMER_REACT_CSS_MODULES_STAFF=1 - export PRIMER_REACT_CSS_MODULES_GA=1 npx serve -l 6006 storybook-static & pid=$! echo "pid=$pid" >> $GITHUB_OUTPUT From cfcbd1e780c767b96d8a342473abbfa35d7afe45 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 4 Oct 2024 20:39:02 +0000 Subject: [PATCH 4/5] Also run aat twice --- .github/workflows/ci.yml | 78 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index f2fce150301..46ba1a26b2e 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -331,6 +331,84 @@ jobs: if: ${{ needs.aat-runner.result == 'failure' }} run: exit 1 + aat-runner-all-flags: + runs-on: ubuntu-latest-8-cores + strategy: + fail-fast: false + matrix: + shard: [1, 2, 3, 4] + env: + PRIMER_REACT_CSS_MODULES_TEAM: 1 + PRIMER_REACT_CSS_MODULES_STAFF: 1 + PRIMER_REACT_CSS_MODULES_GA: 1 + steps: + - uses: actions/checkout@v4 + - name: Use Node.js 20.x + uses: actions/setup-node@v4 + with: + node-version: 22 + cache: 'npm' + - run: npm i -g npm@^10.5.1 + - name: Install dependencies + run: npm ci + - name: Build storybook + run: npx storybook build + working-directory: packages/react + - name: Run storybook + id: storybook + working-directory: packages/react + run: | + npx serve -l 6006 storybook-static & + pid=$! + echo "pid=$pid" >> $GITHUB_OUTPUT + sleep 5 + - name: Run AAT + uses: docker://mcr.microsoft.com/playwright:v1.43.0-jammy + env: + STORYBOOK_URL: 'http://172.17.0.1:6006' + with: + args: npx playwright test --grep @aat --shard="${{ matrix.shard }}/${{ strategy.job-total }}" + - name: Stop storybook + run: kill ${{ steps.storybook.outputs.pid }} + - name: Upload report + if: ${{ always() }} + uses: actions/upload-artifact@v4 + with: + name: axe-all-flags-${{ matrix.shard }} + path: blob-report + retention-days: 1 + + aat-all-flags: + if: ${{ always() }} + runs-on: ubuntu-latest + needs: aat-runner + steps: + - uses: actions/checkout@v4 + - name: Use Node.js 20.x + uses: actions/setup-node@v4 + with: + node-version: 22 + cache: 'npm' + - run: npm i -g npm@^10.5.1 + - name: install dependencies + run: npm ci + - name: download all reports + uses: actions/download-artifact@v4 + with: + path: all-blob-reports + pattern: axe-all-flags-* + merge-multiple: true + - name: merge all reports + run: npx playwright merge-reports --reporter html ./all-blob-reports + - name: Upload report + uses: actions/upload-artifact@v4 + with: + name: axe-all-flags + path: playwright-report + - name: Check aat-runner job status + if: ${{ needs.aat-runner.result == 'failure' }} + run: exit 1 + build-components-json: runs-on: ubuntu-latest steps: From e112b582475c7208421047a357f8c5c1f96a32e8 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 4 Oct 2024 20:40:34 +0000 Subject: [PATCH 5/5] Test failure with a module only style change --- packages/react/src/Button/ButtonBase.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/Button/ButtonBase.module.css b/packages/react/src/Button/ButtonBase.module.css index 8f8efabbda4..c084f1a3f3e 100644 --- a/packages/react/src/Button/ButtonBase.module.css +++ b/packages/react/src/Button/ButtonBase.module.css @@ -8,7 +8,7 @@ font-family: inherit; font-size: var(--text-body-size-medium); font-weight: var(--base-text-weight-medium); - color: var(--button-default-fgColor-rest); + color: red; text-align: center; text-decoration: none; cursor: pointer;