Merge cbcc5cd into 2651510

Author: jonrohan

.github/workflows/ci.yml

@@ -179,6 +179,84 @@ 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]
+    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 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:

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]