Merge pull request #20892 from storybookjs/chore/enable-sandbox-templates

Build: add more sandboxes to CI tests

.circleci/config.yml

@@ -599,23 +599,23 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 15
+          parallelism: 18
           requires:
             - build
       - build-sandboxes:
-          parallelism: 15
+          parallelism: 18
           requires:
             - create-sandboxes
       - test-runner-sandboxes:
-          parallelism: 15
+          parallelism: 18
           requires:
             - build-sandboxes
       - chromatic-sandboxes:
-          parallelism: 15
+          parallelism: 18
           requires:
             - build-sandboxes
       - e2e-sandboxes:
-          parallelism: 15
+          parallelism: 18
           requires:
             - build-sandboxes
   daily:
@@ -630,25 +630,25 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 27
+          parallelism: 31
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 27
+          parallelism: 31
           requires:
             - create-sandboxes
       - test-runner-sandboxes:
-          parallelism: 27
+          parallelism: 31
           requires:
             - build-sandboxes
       - chromatic-sandboxes:
-          parallelism: 27
+          parallelism: 31
           requires:
             - build-sandboxes
       - e2e-sandboxes:
-          parallelism: 27
+          parallelism: 31
           requires:
             - build-sandboxes

code/e2e-tests/addon-docs.spec.ts

@@ -1,3 +1,4 @@
+/* eslint-disable jest/valid-title */
 /* eslint-disable jest/no-disabled-tests */
 /* eslint-disable no-await-in-loop */
 import { test, expect } from '@playwright/test';
@@ -16,7 +17,6 @@ test.describe('addon-docs', () => {
   test('should provide source snippet', async ({ page }) => {
     // templateName is e.g. 'Vue-CLI (Default JS)'
     test.skip(
-      // eslint-disable-next-line jest/valid-title
       /^(vue3|vue-cli|preact)/i.test(`${templateName}`),
       `Skipping ${templateName}, which does not support dynamic source snippets`
     );
@@ -54,6 +54,12 @@ test.describe('addon-docs', () => {
   });
 
   test('should order entries correctly', async ({ page }) => {
+    // TODO: This is broken in SSV6 Webpack. Context: https://github.com/storybookjs/storybook/issues/20941
+    test.skip(
+      templateName.includes('ssv6-webpack'),
+      `${templateName} fails because of a known issue: https://github.com/storybookjs/storybook/issues/20941`
+    );
+
     const sbPage = new SbPage(page);
     await sbPage.navigateToStory('addons/docs/docspage/basic', 'docs');
 

code/e2e-tests/framework-nextjs.spec.ts

@@ -8,18 +8,20 @@ const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:6006';
 const templateName = process.env.STORYBOOK_TEMPLATE_NAME;
 
 test.describe('Next.js', () => {
+  // TODO: improve these E2E tests given that we have more version of Next.js to test
+  // and this only tests nextjs/default-js
+  test.skip(
+    // eslint-disable-next-line jest/valid-title
+    !templateName.includes('nextjs/default-js'),
+    'Only run this test for the Frameworks that support next/navigation'
+  );
+
   test.beforeEach(async ({ page }) => {
     await page.goto(storybookUrl);
     await new SbPage(page).waitUntilLoaded();
   });
 
   test.describe('next/navigation', () => {
-    test.skip(
-      // eslint-disable-next-line jest/valid-title
-      !templateName.includes('nextjs/default-js'),
-      'Only run this test for the Frameworks that support next/navigation'
-    );
-
     let root: Locator;
     let sbPage: SbPage;
 
@@ -52,12 +54,6 @@ test.describe('Next.js', () => {
   });
 
   test.describe('next/router', () => {
-    test.skip(
-      // eslint-disable-next-line jest/valid-title
-      !templateName.includes('nextjs'),
-      'Only run this test for the Frameworks that support next/router'
-    );
-
     let root: Locator;
     let sbPage: SbPage;
 

code/e2e-tests/json-files.spec.ts

@@ -1,7 +1,9 @@
+/* eslint-disable jest/no-disabled-tests */
 import { test, expect } from '@playwright/test';
 import process from 'process';
 
 const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
+const templateName = process.env.STORYBOOK_TEMPLATE_NAME;
 
 test.describe('JSON files', () => {
   test.beforeEach(async ({ page }) => {
@@ -9,6 +11,11 @@ test.describe('JSON files', () => {
   });
 
   test('should have index.json', async ({ page }) => {
+    test.skip(
+      // eslint-disable-next-line jest/valid-title
+      templateName.includes('ssv6'),
+      'Only run this test for Sandboxes with StoryStoreV7 enabled'
+    );
     const json = await page.evaluate(() => fetch('/index.json').then((res) => res.json()));
 
     expect(json).toEqual({

code/lib/cli/src/sandbox-templates.ts

@@ -128,7 +128,7 @@ const baseTemplates = {
     },
   },
   'react-webpack/18-ts': {
-    name: 'React Webpack5 (TS)',
+    name: 'React 18 Webpack5 (TS)',
     script: 'yarn create webpack5-react .',
     expected: {
       framework: '@storybook/react-webpack5',
@@ -137,7 +137,7 @@ const baseTemplates = {
     },
   },
   'react-webpack/17-ts': {
-    name: 'React Webpack5 (TS)',
+    name: 'React 17 Webpack5 (TS)',
     script: 'yarn create webpack5-react . --version-react="17" --version-react-dom="17"',
     expected: {
       framework: '@storybook/react-webpack5',
@@ -195,8 +195,6 @@ const baseTemplates = {
       renderer: '@storybook/html',
       builder: '@storybook/builder-vite',
     },
-    // TODO: remove this once html-vite framework is released
-    inDevelopment: true,
   },
   'html-vite/default-ts': {
     name: 'HTML Vite TS',
@@ -206,8 +204,6 @@ const baseTemplates = {
       renderer: '@storybook/html',
       builder: '@storybook/builder-vite',
     },
-    // TODO: remove this once html-vite framework is released
-    inDevelopment: true,
   },
   'svelte-vite/default-js': {
     name: 'Svelte Vite (JS)',
@@ -357,8 +353,10 @@ const baseTemplates = {
   'qwik-vite/default-ts': {
     name: 'Qwik CLI (Default TS)',
     script: 'yarn create qwik basic {{beforeDir}} --no-install',
-    inDevelopment: true,
+    // TODO: The community template does not provide standard stories, which is required for e2e tests.
     skipTasks: ['e2e-tests'],
+    // TODO: Re-enable once problems are fixed.
+    inDevelopment: true,
     expected: {
       framework: 'storybook-framework-qwik',
       renderer: 'storybook-framework-qwik',
@@ -376,7 +374,6 @@ const internalTemplates = {
   'internal/ssv6-vite': {
     ...baseTemplates['react-vite/default-ts'],
     name: 'StoryStore v6 (react-vite/default-ts)',
-    inDevelopment: true,
     isInternal: true,
     modifications: {
       mainConfig: {
@@ -389,7 +386,6 @@ const internalTemplates = {
   'internal/ssv6-webpack': {
     ...baseTemplates['react-webpack/18-ts'],
     name: 'StoryStore v6 (react-webpack/18-ts)',
-    inDevelopment: true,
     isInternal: true,
     modifications: {
       mainConfig: {
@@ -425,6 +421,7 @@ export const merged: TemplateKey[] = [
   'preact-webpack5/default-ts',
   'preact-vite/default-ts',
   'html-webpack/default',
+  'html-vite/default-ts',
   'internal/ssv6-vite',
   'internal/ssv6-webpack',
 ];
@@ -443,6 +440,7 @@ export const daily: TemplateKey[] = [
   'qwik-vite/default-ts',
   'preact-webpack5/default-js',
   'preact-vite/default-js',
+  'html-vite/default-js',
 ];
 
 export const templatesByCadence = { ci, pr, merged, daily };

scripts/event-log-checker.ts

@@ -53,20 +53,23 @@ async function run() {
       assert.equal(bootEvent.payload?.eventType, eventType);
     });
 
-    const { exampleStoryCount, exampleDocsCount } = mainEvent.payload?.storyIndex || {};
-    if (['build', 'dev'].includes(eventType)) {
-      test(`${eventType} event should contain 8 stories and 3 docs entries`, () => {
-        assert.equal(
-          exampleStoryCount,
-          8,
-          `Expected 8 stories but received ${exampleStoryCount} instead.`
-        );
-        assert.equal(
-          exampleDocsCount,
-          3,
-          `Expected 3 docs entries but received ${exampleDocsCount} instead.`
-        );
-      });
+    // Test only StoryStoreV7 projects, as ssv6 does not support the storyIndex
+    if (template.modifications?.mainConfig?.features?.storyStoreV7 !== false) {
+      const { exampleStoryCount, exampleDocsCount } = mainEvent.payload?.storyIndex || {};
+      if (['build', 'dev'].includes(eventType)) {
+        test(`${eventType} event should contain 8 stories and 3 docs entries`, () => {
+          assert.equal(
+            exampleStoryCount,
+            8,
+            `Expected 8 stories but received ${exampleStoryCount} instead.`
+          );
+          assert.equal(
+            exampleDocsCount,
+            3,
+            `Expected 3 docs entries but received ${exampleDocsCount} instead.`
+          );
+        });
+      }
     }
 
     test(`main event should be ${eventType} and contain correct id and session id`, () => {

scripts/tasks/e2e-tests.ts

@@ -9,13 +9,13 @@ export const e2eTests: Task = {
   async ready() {
     return false;
   },
-  async run({ codeDir, junitFilename, template }, { dryRun, debug }) {
+  async run({ codeDir, junitFilename, key }, { dryRun, debug }) {
     await exec(
       `yarn playwright test`,
       {
         env: {
           STORYBOOK_URL: `http://localhost:${PORT}`,
-          STORYBOOK_TEMPLATE_NAME: template.name,
+          STORYBOOK_TEMPLATE_NAME: key,
           ...(junitFilename && {
             PLAYWRIGHT_JUNIT_OUTPUT_NAME: junitFilename,
           }),

scripts/tasks/test-runner.ts

@@ -9,11 +9,17 @@ export const testRunner: Task = {
   async ready() {
     return false;
   },
-  async run({ sandboxDir, junitFilename }, { dryRun, debug }) {
+  async run({ sandboxDir, junitFilename, template }, { dryRun, debug }) {
     const execOptions = { cwd: sandboxDir };
+    const flags = [`--url http://localhost:${PORT}`, '--junit', '--maxWorkers=2'];
+
+    // index-json mode is only supported in ssv7
+    if (template.modifications?.mainConfig?.features?.storyStoreV7 !== false) {
+      flags.push('--index-json');
+    }
 
     await exec(
-      `yarn test-storybook --url http://localhost:${PORT} --junit --index-json --maxWorkers=2`,
+      `yarn test-storybook ${flags.join(' ')}`,
       {
         ...execOptions,
         env: {