[charts] Benchmark charts using a real browser

Author: bernardobelchior

.github/workflows/benchmark-chart-baseline.yml

@@ -0,0 +1,44 @@
+name: Update Charts Benchmark Baseline
+
+on:
+  push:
+    branches:
+      - 'master'
+      - 'next'
+    paths:
+      - 'packages/x-charts*/**'
+      - 'test/performance-charts/**'
+
+jobs:
+  performance-test:
+    name: Update Charts Benchmark Baseline
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+      issues: write
+      contents: read
+
+    steps:
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+        with:
+          run_install: false
+      - name: Use Node.js 22.x
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
+        with:
+          node-version: 22
+          cache: 'pnpm' # https://github.com/actions/setup-node/blob/main/docs/advanced-usage.md#caching-packages-dependencies
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm exec playwright install
+      - run: pnpm --filter "@mui/x-charts-premium..." build
+
+      - name: Run performance tests
+        run: pnpm --filter @mui-x-internal/performance-charts test:performance:ci
+      - run: jq '.commit = "${{ github.sha }}"' test/performance-charts/results.json > test/performance-charts/baseline-results.json
+
+      - name: Upload results
+        uses: actions/upload-artifact@v4
+        with:
+          name: charts-benchmarks-results-${{ github.ref_name }}.json
+          path: ./test/performance-charts/baseline-results.json
+          if-no-files-found: error

.github/workflows/codspeed.yml renamed to .github/workflows/benchmark-charts.yml

@@ -1,12 +1,6 @@
-name: Benchmarks
+name: Performance Test
 
 on:
-  push:
-    branches:
-      - 'master'
-      - 'next'
-    paths:
-      - 'packages/x-charts*/**'
   pull_request:
     types:
       - labeled
@@ -15,14 +9,15 @@ on:
       - reopened
     branches:
       - 'master'
-      - 'next'
-
-permissions: {}
 
 jobs:
-  benchmarks:
-    name: Benchmarks Charts
+  performance-test:
+    name: Benchmark Charts
     runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+      issues: write
+      contents: read
     # L1: Run the benchmarks for pushes to the master or next branch and if the changes are in the charts package based on on.push.paths
     # L2: Run the benchmarks if we add the label 'scope: charts' to the pull request
     # L3: Run the benchmarks for pull requests with the label 'scope: charts'
@@ -33,6 +28,7 @@ jobs:
           (github.event_name == 'pull_request' && github.event.action == 'labeled' && github.event.label.name == 'scope: charts') ||
           (github.event_name == 'pull_request' && github.event.action != 'labeled' && contains(github.event.pull_request.labels.*.name, 'scope: charts'))
       }}
+
     steps:
       - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
       - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
@@ -44,10 +40,30 @@ jobs:
           node-version: 22
           cache: 'pnpm' # https://github.com/actions/setup-node/blob/main/docs/advanced-usage.md#caching-packages-dependencies
       - run: pnpm install --frozen-lockfile
+      - run: pnpm exec playwright install
       # Ensure we are running on the prod version of our libs
       - run: pnpm --filter "@mui/x-charts-premium..." build
-      - name: Run benchmarks
-        uses: CodSpeedHQ/action@c28fe9fbe7d57a3da1b7834ae3761c1d8217612d
+
+      - name: Download baseline results, if available
+        run: |
+          echo "Downloading baseline results from branch '${{ github.base_ref }}' for performance tests"
+          gh run download --name "charts-benchmarks-results-${{ github.base_ref }}.json" || true
+          [[ -e ./baseline-results.json ]] && echo "Found baseline, comparing results..." || echo "No baseline results found, skipping comparison"
+          mv ./baseline-results.json ./test/performance-charts/baseline-results.json || true
+
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Run performance tests
+        run: pnpm --filter @mui-x-internal/performance-charts test:performance:ci
+
+      - name: Compare performance results
+        uses: actions/github-script@v7
+        env:
+          BASELINE_PATH: ./test/performance-charts/baseline-results.json
+          COMPARE_PATH: ./test/performance-charts/results.json
+          THRESHOLD: 0.1
         with:
-          run: pnpm --filter @mui-x-internal/performance-charts test:performance
-          token: ${{ secrets.CODSPEED_TOKEN }}
+          script: |
+            const { default: ciBenchmark } = await import('${{ github.workspace }}/test/performance-charts/scripts/ci-benchmark.js');
+            await ciBenchmark({github, context, core});

patches/@vitest__browser.patch

@@ -0,0 +1,41 @@
+diff --git a/dist/client/__vitest_browser__/tester-BYDMHqQ9.js b/dist/client/__vitest_browser__/tester-BYDMHqQ9.js
+index 9916c1f32e9af801b6d425d1ec785f23e830a236..c748ab51bb7c3f236334f4994bab6c0d76902d12 100644
+--- a/dist/client/__vitest_browser__/tester-BYDMHqQ9.js
++++ b/dist/client/__vitest_browser__/tester-BYDMHqQ9.js
+@@ -11,6 +11,27 @@ const assetsURL = function(dep) {
+   return "/" + dep;
+ };
+ const seen = {};
++async function getTestRunnerConstructor(
++    config,
++    executor,
++){
++  if (!config.runner) {
++    const { VitestTestRunner, NodeBenchmarkRunner }
++        = await executor.executeFile(runnersFile)
++    return (
++        config.mode === 'test' ? VitestTestRunner : NodeBenchmarkRunner
++    );
++  }
++  const mod = await executor.executeId(config.runner)
++  if (!mod.default && typeof mod.default !== 'function') {
++    throw new Error(
++        `Runner must export a default function, but got ${typeof mod.default} imported from ${
++            config.runner
++        }`,
++    )
++  }
++  return mod.default;
++}
+ const __vitePreload = function preload(baseModule, deps, importerUrl) {
+   let promise = Promise.resolve();
+   if (deps && deps.length > 0) {
+@@ -1660,7 +1681,7 @@ async function initiateRunner(state, mocker, config) {
+   if (cachedRunner) {
+     return cachedRunner;
+   }
+-  const runnerClass = config.mode === "test" ? VitestTestRunner : NodeBenchmarkRunner;
++  const runnerClass = await getTestRunnerConstructor(config, executor);
+   const BrowserRunner = createBrowserRunner(runnerClass, mocker, state, {
+     takeCoverage: () => takeCoverageInsideWorker(config.coverage, executor)
+   });

pnpm-lock.yaml

@@ -92,3 +92,6 @@ onlyBuiltDependencies:
   - nx
   - sharp
   - unrs-resolver
+
+patchedDependencies:
+  '@vitest/browser': patches/@vitest__browser.patch