test: add storybook vrt setup for styled-react (#7297)

Co-authored-by: Copilot <[email protected]>

Author: joshblack

.github/workflows/vrt-reports.yml

@@ -42,14 +42,25 @@ jobs:
           pid=$!
           echo "pid=$pid" >> $GITHUB_OUTPUT
           sleep 5
+      - name: Run styled-react storybook
+        id: styled-react-storybook
+        run: |
+          npx serve -l 6007 packages/styled-react/storybook-static &
+          pid=$!
+          echo "pid=$pid" >> $GITHUB_OUTPUT
+          sleep 5
       - name: Run VRT
         uses: docker://mcr.microsoft.com/playwright:v1.56.1-jammy
         env:
           STORYBOOK_URL: 'http://172.17.0.1:6006'
+          STYLED_REACT_STORYBOOK_URL: 'http://172.17.0.1:6007'
         with:
           args: npx playwright test --grep @vrt --shard="${{ matrix.shard }}/${{ strategy.job-total }}"
       - name: Stop storybook
+        if: ${{ always() }}
         run: kill ${{ steps.storybook.outputs.pid }}
+      - name: Stop styled-react storybook
+        run: kill ${{ steps.styled-react-storybook.outputs.pid }}
       - name: Upload report
         if: ${{ always() }}
         uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4

.github/workflows/vrt.yml

@@ -42,24 +42,32 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Build storybook
-        run: npx storybook build
-        working-directory: packages/react
+        run: npx turbo build:storybook
       - name: Run storybook
         id: storybook
         run: |
           npx serve -l 6006 packages/react/storybook-static &
           pid=$!
           echo "pid=$pid" >> $GITHUB_OUTPUT
           sleep 5
+      - name: Run styled-react storybook
+        id: styled-react-storybook
+        run: |
+          npx serve -l 6007 packages/styled-react/storybook-static &
+          pid=$!
+          echo "pid=$pid" >> $GITHUB_OUTPUT
+          sleep 5
       - name: Run VRT
         uses: docker://mcr.microsoft.com/playwright:v1.56.1-jammy
         env:
           STORYBOOK_URL: 'http://172.17.0.1:6006'
+          STYLED_REACT_STORYBOOK_URL: 'http://172.17.0.1:6007'
         with:
           args: npx playwright test --grep @vrt --update-snapshots --shard="${{ matrix.shard }}/${{ strategy.job-total }}"
       - name: Stop storybook
-        if: ${{ always() }}
         run: kill ${{ steps.storybook.outputs.pid }}
+      - name: Stop styled-react storybook
+        run: kill ${{ steps.styled-react-storybook.outputs.pid }}
       - name: Create snapshots.zip
         run: |
           if [[ ! -z  $(git ls-files --others --exclude-standard --modified) ]]; then

.playwright/snapshots/styled-react/components/Button.test.ts-snapshots/Button-WithColor-linux.png

@@ -0,0 +1,21 @@
+import path from 'node:path'
+import {test, expect} from '@playwright/test'
+import {getStories, visit} from '../../test-helpers/storybook'
+
+const stories = getStories(path.resolve(__dirname, '../../../packages/styled-react/src/components/Button.stories.tsx'))
+
+test.describe('Button (@primer/styled-react)', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      test(`default @vrt`, async ({page}) => {
+        await visit(page, {
+          id: story.id,
+          storybook: 'styled-react',
+        })
+
+        // Default state
+        await expect(page.getByTestId('screenshot')).toHaveScreenshot(`Button.${story.title}.png`)
+      })
+    })
+  }
+})

.playwright/snapshots/styled-react/components/Button.test.ts-snapshots/Button-WithFontSize-linux.png

@@ -1,4 +1,7 @@
+import fs from 'node:fs'
+import {parseSync, traverse, types as t} from '@babel/core'
 import type {Page} from '@playwright/test'
+import {kebabCase} from 'change-case'
 import {waitForImages} from './waitForImages'
 
 type Value =
@@ -13,14 +16,23 @@ interface Options {
   id: string
   args?: Record<string, string | boolean>
   globals?: Record<string, Value>
+  storybook?: 'react' | 'styled-react'
 }
 
-const {STORYBOOK_URL = 'http://localhost:6006'} = process.env
+const {STORYBOOK_URL = 'http://localhost:6006', STYLED_REACT_STORYBOOK_URL = 'http://localhost:6007'} = process.env
 
-export async function visit(page: Page, options: Options) {
+function getStorybookUrl(storybook: 'react' | 'styled-react' = 'react'): string {
+  if (storybook === 'react') {
+    return STORYBOOK_URL
+  }
+  return STYLED_REACT_STORYBOOK_URL
+}
+
+async function visit(page: Page, options: Options) {
   const {id, args, globals} = options
+  const storybookURL = getStorybookUrl(options.storybook)
   // In CI, the static server strips `.html` extensions
-  const url = process.env.CI ? new URL(`${STORYBOOK_URL}/iframe`) : new URL(`${STORYBOOK_URL}/iframe.html`)
+  const url = process.env.CI ? new URL(`${storybookURL}/iframe`) : new URL(`${storybookURL}/iframe.html`)
 
   url.searchParams.set('id', id)
   url.searchParams.set('viewMode', 'story')
@@ -77,3 +89,60 @@ function serialize(value: Value): string {
 
   return `${value}`
 }
+
+function getStories(filepath: string): Array<{title: string; id: string}> {
+  const contents = fs.readFileSync(filepath, 'utf-8')
+  const ast = parseSync(contents, {
+    sourceType: 'module',
+    parserOpts: {
+      plugins: ['typescript', 'jsx'],
+    },
+  })
+
+  let storyTitle = ''
+  const exports: Array<string> = []
+
+  traverse(ast!, {
+    ExportDefaultDeclaration(path) {
+      if (t.isObjectExpression(path.node.declaration)) {
+        const titleProperty = path.node.declaration.properties.find(prop => {
+          return t.isObjectProperty(prop) && t.isIdentifier(prop.key) && prop.key.name === 'title'
+        })
+
+        if (titleProperty && t.isObjectProperty(titleProperty) && t.isStringLiteral(titleProperty.value)) {
+          storyTitle = titleProperty.value.value
+        }
+      }
+    },
+
+    ExportNamedDeclaration(path) {
+      if (path.node.declaration) {
+        if (t.isVariableDeclaration(path.node.declaration)) {
+          for (const declarator of path.node.declaration.declarations) {
+            if (t.isIdentifier(declarator.id)) {
+              exports.push(declarator.id.name)
+            }
+          }
+        }
+      }
+    },
+  })
+
+  return exports.map(name => {
+    return {
+      title: name,
+      id: getStorybookId(storyTitle, name),
+    }
+  })
+}
+
+function getStorybookId(title: string, storyName: string): string {
+  const group = title
+    .split('/')
+    .map(part => part.toLowerCase())
+    .join('-')
+  const story = kebabCase(storyName)
+  return `${group}--${story}`
+}
+
+export {visit, getStories}