CI: Add internal Storybook E2E job

code/.eslintrc.js

@@ -201,7 +201,7 @@ module.exports = {
       },
     },
     {
-      files: ['./e2e-tests/*.ts'],
+      files: ['./e2e-tests/*.ts', './e2e-internal/*.ts'],
       extends: ['plugin:playwright/recommended'],
       rules: {
         'playwright/no-skipped-test': [

code/e2e-internal/internal-storybook.smoke.spec.ts

@@ -0,0 +1,25 @@
+import { expect, test } from '@playwright/test';
+import process from 'process';
+
+/**
+ * Smoke tests for the internal Storybook UI (`code/.storybook`), not sandbox templates.
+ *
+ * Run locally (from repo root) with internal Storybook on port 6006:
+ *   cd code && yarn storybook:ui
+ *   yarn task e2e-tests-internal --no-link -s e2e-tests-internal
+ */
+
+const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:6006';
+
+/** Stable core template story shipped with the internal UI. */
+const STORY_PATH = '/story/core-basics--basic';
+
+test.describe('internal Storybook UI', () => {
+  test('loads a story in the preview iframe', async ({ page }) => {
+    await page.goto(`${storybookUrl}/?path=${STORY_PATH}`);
+    await expect(page.locator('#storybook-preview-iframe')).toBeVisible();
+
+    const preview = page.frameLocator('#storybook-preview-iframe');
+    await expect(preview.getByRole('button', { name: 'Click Me!' })).toBeVisible();
+  });
+});

code/playwright.config.ts

@@ -52,6 +52,13 @@ export default defineConfig({
 
   /* Configure projects for major browsers */
   projects: [
+    {
+      name: 'internal-storybook',
+      testDir: './e2e-internal',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
     {
       // Playwright recommends project dependencies over globalSetup when setup needs runner features
       // like fixtures, traces, and retries:

scripts/ci/common-jobs.ts

@@ -2,7 +2,7 @@
 import glob from 'fast-glob';
 import { join } from 'path/posix';
 
-import { WINDOWS_ROOT_DIR, WORKING_DIR } from './utils/constants.ts';
+import { LINUX_ROOT_DIR, WINDOWS_ROOT_DIR, WORKING_DIR } from './utils/constants.ts';
 import {
   CACHE_KEYS,
   CACHE_PATHS,
@@ -161,6 +161,42 @@ export const storybookChromatic = defineJob(
   [commonJobsNoOpJob]
 );
 
+export const internalStorybookE2e = defineJob(
+  'Internal storybook E2E',
+  (workflowName) => ({
+    executor: {
+      name: 'sb_playwright',
+      class: 'medium+',
+    },
+    steps: [
+      ...workflow.restoreLinux(),
+      {
+        run: {
+          name: 'Run internal Storybook',
+          working_directory: 'code',
+          background: true,
+          command: 'yarn storybook:ui',
+        },
+      },
+      server.wait(['6006']),
+      {
+        run: {
+          name: 'Run internal Storybook E2E tests',
+          command: 'yarn task e2e-tests-internal --no-link -s e2e-tests-internal --junit',
+        },
+      },
+      artifact.persist(join(LINUX_ROOT_DIR, WORKING_DIR, 'test-results'), 'test-results'),
+      artifact.persist(
+        join(LINUX_ROOT_DIR, WORKING_DIR, 'code', 'playwright-results'),
+        'playwright-results'
+      ),
+      testResults.persist(join(LINUX_ROOT_DIR, WORKING_DIR, 'test-results')),
+      ...workflow.reportOnFailure(workflowName),
+    ],
+  }),
+  [commonJobsNoOpJob]
+);
+
 export const check = defineJob(
   'TypeScript validation',
   (workflowName) => ({
@@ -253,7 +289,7 @@ export const testsUnit_linux = defineJob(
         run: {
           name: 'Run tests',
           command: [
-            'TEST_FILES=$(circleci tests glob "code/**/*.{test,spec}.{ts,tsx,js,jsx,cjs}" "scripts/**/*.{test,spec}.{ts,tsx,js,jsx,cjs}" | sed "/e2e-tests\\//d" | sed "/node_modules\\//d")',
+            'TEST_FILES=$(circleci tests glob "code/**/*.{test,spec}.{ts,tsx,js,jsx,cjs}" "scripts/**/*.{test,spec}.{ts,tsx,js,jsx,cjs}" | sed "/e2e-tests\\//d" | sed "/e2e-internal\\//d" | sed "/node_modules\\//d")',
             'echo "$TEST_FILES" | circleci tests run --command="xargs yarn test --reporter=junit --reporter=default --outputFile=./test-results/junit.xml" --verbose',
           ].join('\n'),
         },
@@ -281,7 +317,7 @@ export const testsStories_linux = defineJob(
         run: {
           name: 'Run stories tests',
           command: [
-            'TEST_FILES=$(circleci tests glob "code/**/*.{stories}.{ts,tsx,js,jsx,cjs}" | sed "/e2e-tests\\//d" | sed "/node_modules\\//d")',
+            'TEST_FILES=$(circleci tests glob "code/**/*.{stories}.{ts,tsx,js,jsx,cjs}" | sed "/e2e-tests\\//d" | sed "/e2e-internal\\//d" | sed "/node_modules\\//d")',
             'echo "$TEST_FILES" | circleci tests run --command="xargs yarn test --reporter=junit --reporter=default --outputFile=./test-results/junit.xml" --verbose',
           ].join('\n'),
         },

scripts/ci/main.ts

@@ -13,6 +13,7 @@ import {
   knip,
   lint,
   fmt,
+  internalStorybookE2e,
   storybookChromatic,
   testUnit_windows,
   testsStories_linux,
@@ -66,6 +67,7 @@ function generateConfig(workflow: Workflow) {
       knip,
 
       storybookChromatic,
+      internalStorybookE2e,
       benchmarkPackages,
 
       sandboxesNoOpJob,

scripts/task.ts

@@ -23,6 +23,7 @@ import { compile } from './tasks/compile.ts';
 import { dev } from './tasks/dev.ts';
 import { e2eTestsBuild } from './tasks/e2e-tests-build.ts';
 import { e2eTestsDev } from './tasks/e2e-tests-dev.ts';
+import { e2eTestsInternal } from './tasks/e2e-tests-internal.ts';
 import { generate } from './tasks/generate.ts';
 import { install } from './tasks/install.ts';
 import { publish } from './tasks/publish.ts';
@@ -100,13 +101,22 @@ export const tasks = {
   chromatic,
   'e2e-tests': e2eTestsBuild,
   'e2e-tests-dev': e2eTestsDev,
+  'e2e-tests-internal': e2eTestsInternal,
   bench,
   'vitest-integration': vitestTests,
 };
 export type TaskKey = keyof typeof tasks;
 
 function isSandboxTask(taskKey: TaskKey) {
-  return !['install', 'compile', 'publish', 'run-registry', 'check', 'sync-docs'].includes(taskKey);
+  return ![
+    'install',
+    'compile',
+    'publish',
+    'run-registry',
+    'check',
+    'sync-docs',
+    'e2e-tests-internal',
+  ].includes(taskKey);
 }
 
 export const options = createOptions({

scripts/tasks/e2e-tests-internal.ts

@@ -0,0 +1,39 @@
+import waitOn from 'wait-on';
+
+import type { Task } from '../task.ts';
+import { exec } from '../utils/exec.ts';
+
+const STORYBOOK_PORT = 6006;
+
+export const e2eTestsInternal: Task = {
+  description: 'Run e2e tests against the internal Storybook UI (code/.storybook)',
+  dependsOn: ['compile'],
+  junit: true,
+  async ready() {
+    return false;
+  },
+  async run({ codeDir, junitFilename }, { dryRun, debug }) {
+    const storybookUrl = `http://localhost:${STORYBOOK_PORT}`;
+
+    await waitOn({
+      resources: [`${storybookUrl}/index.json`],
+      interval: 16,
+      timeout: 300_000,
+    });
+
+    await exec(
+      'yarn playwright test --project=internal-storybook',
+      {
+        env: {
+          CI: 'true',
+          STORYBOOK_URL: storybookUrl,
+          ...(junitFilename && {
+            PLAYWRIGHT_JUNIT_OUTPUT_NAME: junitFilename,
+          }),
+        },
+        cwd: codeDir,
+      },
+      { dryRun, debug }
+    );
+  },
+};