Add the framework required to run component stress tests

.changeset/eleven-crabs-achieved.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add the framework required to run component stress tests

.github/workflows/stress-tests.yml

@@ -0,0 +1,55 @@
+name: Stress Tests
+
+on: [push]
+
+jobs:
+  stress-tests:
+    runs-on: ubuntu-latest-4-cores
+    steps:
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
+      - name: Set up Node.js
+        uses: actions/setup-node@cdca7365b2dadb8aad0a33bc7601856ffabcc48e
+        with:
+          node-version: 22
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Build storybook
+        run: npx storybook build
+        working-directory: packages/react
+      - name: Run storybook
+        id: storybook
+        run: |
+          npx serve -l 6006 packages/react/storybook-static &
+          pid=$!
+          echo "pid=$pid" >> $GITHUB_OUTPUT
+          sleep 5
+      - name: Run Stress Tests
+        uses: docker://mcr.microsoft.com/playwright:v1.51.0-jammy
+        env:
+          STORYBOOK_URL: 'http://172.17.0.1:6006'
+        with:
+          args: npx playwright test --grep @stress-test"
+      - name: Stop storybook
+        if: ${{ always() }}
+        run: kill ${{ steps.storybook.outputs.pid }}
+      - name: Download previous benchmark data (if any)
+        uses: actions/cache@v4
+        with:
+          path: ./cache
+          key: stress-tests-benchmark
+      - name: Store benchmark result
+        uses: benchmark-action/github-action-benchmark@v1
+        with:
+          tool: 'customSmallerIsBetter'
+          output-file-path: results.json
+          # Where the previous data file is stored
+          external-data-json-path: ./cache/stress-tests-benchmark-data.json
+          # Workflow will fail when an alert happens
+          fail-on-alert: true
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          alert-threshold: '150%'
+          # Enable alert commit comment
+          comment-on-alert: true
+          # Mention @rhysd in the commit comment
+          alert-comment-cc-users: '@hectahertz'

e2e/components/StressTests.test.ts

@@ -0,0 +1,24 @@
+import {test} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+
+const stressTests = [
+  {component: 'ActionList', testName: 'Single select', id: 'stresstests-components-actionlist--single-select'},
+  {component: 'Pagination', testName: 'Page update', id: 'stresstests-components-pagination--page-update'},
+  {component: 'Button', testName: 'Label update', id: 'stresstests-components-button--label-update'},
+  {component: 'Button', testName: 'Count update', id: 'stresstests-components-button--count-update'},
+  {component: 'TreeView', testName: 'Current update', id: 'stresstests-components-treeview--current-update'},
+]
+
+stressTests.forEach(({component, testName, id}) => {
+  test.describe(`${component} Stress Tests`, () => {
+    test(`${testName} @stress-test`, async ({page}, testInfo) => {
+      await visit(page, {id})
+      await page.getByTestId('start').click()
+      const result = await page.getByTestId('result').textContent()
+      await testInfo.attach('stress-test-result', {
+        body: JSON.stringify({id, duration: result}),
+        contentType: 'application/json',
+      })
+    })
+  })
+})

e2e/stress-test-reporter.ts

@@ -0,0 +1,39 @@
+import type {FullResult, Reporter, TestCase, TestResult} from '@playwright/test/reporter'
+import {writeFileSync} from 'fs'
+
+class MyReporter implements Reporter {
+  // Format we need:
+  // https://github.com/benchmark-action/github-action-benchmark?tab=readme-ov-file#examples
+  results: {name: string; unit: string; value: number}[] = []
+
+  onTestEnd(test: TestCase, result: TestResult) {
+    console.log(`⚡️ Finished stress-test ${test.title}: ${result.status}`)
+    for (const attachment of result.attachments) {
+      // get the content of the attachment to an object
+      if (
+        attachment.body !== undefined &&
+        attachment.name === 'stress-test-result' &&
+        attachment.contentType === 'application/json'
+      ) {
+        const content = JSON.parse(attachment.body.toString())
+        console.log(`⚡️ Test result: ${content}`)
+        this.results.push({
+          name: content.id,
+          unit: 'ms',
+          value: parseFloat(content.duration),
+        })
+      }
+    }
+  }
+
+  onEnd(result: FullResult) {
+    console.log(`⚡️ Finished the stress tests run: ${result.status}`)
+    const fileName = 'results.json'
+    const fileContentString = JSON.stringify(this.results, null, 2)
+    console.log(`⚡️ Results file content: ${fileContentString}`)
+    writeFileSync(fileName, fileContentString)
+    console.log(`⚡️ File saved: ${fileName}`)
+  }
+}
+
+export default MyReporter

packages/react/package.json

@@ -156,6 +156,7 @@
     "@types/semver": "7.7.0",
     "@types/styled-components": "^5.1.26",
     "@vitejs/plugin-react": "^4.3.3",
+    "afterframe": "^1.0.2",
     "ajv": "8.16.0",
     "axe-core": "4.9.1",
     "babel-core": "7.0.0-bridge.0",

packages/react/src/ActionList/ActionList.stress.stories.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+import type {Meta} from '@storybook/react'
+import type {ComponentProps} from '../utils/types'
+import {StressTest} from '../utils/StressTest'
+import {TableIcon} from '@primer/octicons-react'
+import {ActionList} from '.'
+
+export default {
+  title: 'StressTests/Components/ActionList',
+  component: ActionList,
+} as Meta<ComponentProps<typeof ActionList>>
+
+const totalIterations = 100
+
+const projects = Array.from({length: totalIterations}, (_, i) => ({
+  name: `Project ${i + 1}`,
+  scope: `Scope ${i + 1}`,
+}))
+
+export const SingleSelect = () => {
+  return (
+    <StressTest
+      componentName="ActionList"
+      title="Single Select"
+      description="Selecting a single item from a large list."
+      totalIterations={totalIterations}
+      renderIteration={count => {
+        return (
+          <>
+            <ActionList selectionVariant="single" showDividers role="menu" aria-label="Project">
+              {projects.map((project, index) => (
+                <ActionList.Item
+                  key={index}
+                  role="menuitemradio"
+                  selected={index === count}
+                  aria-checked={index === count}
+                >
+                  <ActionList.LeadingVisual>
+                    <TableIcon />
+                  </ActionList.LeadingVisual>
+                  {project.name}
+                  <ActionList.Description variant="block">{project.scope}</ActionList.Description>
+                </ActionList.Item>
+              ))}
+            </ActionList>
+          </>
+        )
+      }}
+    />
+  )
+}

packages/react/src/Button/Button.stress.stories.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+
+import type {Meta} from '@storybook/react'
+import type {ComponentProps} from '../utils/types'
+import {StressTest} from '../utils/StressTest'
+import {Button} from '.'
+
+export default {
+  title: 'StressTests/Components/Button',
+  component: Button,
+} as Meta<ComponentProps<typeof Button>>
+
+const totalIterations = 500
+
+export const LabelUpdate = () => {
+  return (
+    <StressTest
+      componentName="Button"
+      title="Label update"
+      description="Update the label a large number of times."
+      totalIterations={totalIterations}
+      renderIteration={count => (
+        <div>
+          <Button variant="primary" size="large" onClick={() => {}}>
+            {`Button ${count + 1}`}
+          </Button>
+          <Button variant="default" size="medium" onClick={() => {}}>
+            {`Button ${count + 1}`}
+          </Button>
+          <Button variant="danger" size="small" onClick={() => {}}>
+            {`Button ${count + 1}`}
+          </Button>
+        </div>
+      )}
+    />
+  )
+}
+
+export const CountUpdate = () => {
+  return (
+    <StressTest
+      componentName="Button"
+      title="Count update"
+      description="Update the count a large number of times."
+      totalIterations={totalIterations}
+      renderIteration={count => (
+        <div>
+          <Button variant="primary" size="large" onClick={() => {}} count={count}>
+            Button
+          </Button>
+          <Button variant="default" size="medium" onClick={() => {}} count={count}>
+            Button
+          </Button>
+          <Button variant="danger" size="small" onClick={() => {}} count={count}>
+            Button
+          </Button>
+        </div>
+      )}
+    />
+  )
+}

packages/react/src/Pagination/Pagination.stress.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import type {Meta} from '@storybook/react'
+import type {ComponentProps} from '../utils/types'
+import Pagination from './Pagination'
+import {StressTest} from '../utils/StressTest'
+
+export default {
+  title: 'StressTests/Components/Pagination',
+  component: Pagination,
+} as Meta<ComponentProps<typeof Pagination>>
+
+const totalIterations = 500
+
+export const PageUpdate = () => {
+  return (
+    <StressTest
+      componentName="Pagination"
+      title="Page update"
+      description="Navigation through a large number of pages."
+      totalIterations={totalIterations}
+      renderIteration={count => (
+        <Pagination pageCount={totalIterations} currentPage={count + 1} showPages={{narrow: false}} />
+      )}
+    />
+  )
+}

packages/react/src/TreeView/TreeView.stress.stories.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+
+import type {Meta} from '@storybook/react'
+import type {ComponentProps} from '../utils/types'
+import {StressTest} from '../utils/StressTest'
+import {TreeView} from './TreeView'
+import {FileIcon, DiffAddedIcon, DiffModifiedIcon} from '@primer/octicons-react'
+import Octicon from '../Octicon'
+
+export default {
+  title: 'StressTests/Components/TreeView',
+  component: TreeView,
+} as Meta<ComponentProps<typeof TreeView>>
+
+const totalIterations = 100
+
+const Files = Array.from({length: totalIterations}, (_, i) => ({
+  name: `File_${i + 1}.tsx`,
+}))
+
+export const CurrentUpdate = () => {
+  return (
+    <StressTest
+      componentName="TreeView"
+      title="Simple current update"
+      description="Marking a file as current from a large list."
+      totalIterations={totalIterations}
+      renderIteration={count => (
+        <TreeView aria-label="Files changed">
+          <TreeView.Item id="src" defaultExpanded>
+            <TreeView.LeadingVisual>
+              <TreeView.DirectoryIcon />
+            </TreeView.LeadingVisual>
+            src
+            <TreeView.SubTree>
+              {Files.map((file, index) => (
+                <TreeView.Item key={index} id={`src/${file.name}`} current={index === count}>
+                  <TreeView.LeadingVisual>
+                    <FileIcon />
+                  </TreeView.LeadingVisual>
+                  {file.name}
+                  <TreeView.TrailingVisual label="Added">
+                    <Octicon icon={DiffAddedIcon} color="success.fg" />
+                  </TreeView.TrailingVisual>
+                </TreeView.Item>
+              ))}
+            </TreeView.SubTree>
+          </TreeView.Item>
+        </TreeView>
+      )}
+    />
+  )
+}