Merge pull request storybookjs#32089 from storybookjs/yann/increase-e2e-dev-coverage

Build: Testing more e2e-dev instead of e2e build

Author: valentinpalkovic

.circleci/config.yml

@@ -951,11 +951,11 @@ workflows:
                 requires:
                     - create-sandboxes
             - e2e-production:
-                parallelism: 25
+                parallelism: 7
                 requires:
                     - create-sandboxes
             - e2e-dev:
-                parallelism: 1
+                parallelism: 25
                 requires:
                     - create-sandboxes
             - test-runner-production:
@@ -1040,11 +1040,11 @@ workflows:
                 requires:
                     - create-sandboxes
             - e2e-production:
-                parallelism: 12
+                parallelism: 6
                 requires:
                     - create-sandboxes
             - e2e-dev:
-                parallelism: 1
+                parallelism: 12
                 requires:
                     - create-sandboxes
             - test-runner-production:
@@ -1110,11 +1110,11 @@ workflows:
                 requires:
                     - create-sandboxes
             - e2e-production:
-                parallelism: 8
+                parallelism: 6
                 requires:
                     - create-sandboxes
             - e2e-dev:
-                parallelism: 1
+                parallelism: 8
                 requires:
                     - create-sandboxes
             - test-runner-production:

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

@@ -1,22 +1,16 @@
 import { expect, test } from '@playwright/test';
 import process from 'process';
 
-import { SbPage } from './util';
+import { SbPage, hasOnboardingFeature } from './util';
 
 const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
 const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
 const type = process.env.STORYBOOK_TYPE || 'dev';
 
-const supportsOnboarding =
-  templateName.includes('react') ||
-  templateName.includes('vue3') ||
-  templateName.includes('angular') ||
-  templateName.includes('next');
-
 test.describe('addon-onboarding', () => {
   test.skip(type === 'build', `Skipping addon tests for production Storybooks`);
   test.skip(
-    !supportsOnboarding,
+    !hasOnboardingFeature(templateName),
     `Skipping ${templateName}, which does not have addon-onboarding set up.`
   );
   test('the onboarding flow', async ({ page }) => {

code/e2e-tests/module-mocking.spec.ts

@@ -33,10 +33,24 @@ test.describe('module-mocking', () => {
       '9 - [from meta afterEach]',
     ];
 
-    // Assert that each LI text content contains the expected text in order
-    for (let i = 0; i < expectedTexts.length; i++) {
-      const nthText = await logItem.locator(`li >> nth=${i}`).innerText();
-      expect(nthText).toMatch(expectedTexts[i]);
+    // Collect all logs in the panel but only check the order of the logs
+    // we care about, disregarding any other logs that could appear in between
+    const logItemsCount = await logItem.locator('li').count();
+    const actualTexts = [];
+    for (let i = 0; i < logItemsCount; i++) {
+      actualTexts.push(await logItem.locator(`li >> nth=${i}`).innerText());
+    }
+
+    let lastMatchIndex = -1;
+
+    for (const expected of expectedTexts) {
+      const foundIndex = actualTexts.findIndex(
+        (text, i) => i > lastMatchIndex && text.includes(expected)
+      );
+      expect(foundIndex, `Expected log "${expected}" to appear in order`).toBeGreaterThan(
+        lastMatchIndex
+      );
+      lastMatchIndex = foundIndex;
     }
   });
 

code/e2e-tests/util.ts

@@ -207,3 +207,8 @@ const templateName: keyof typeof allTemplates = process.env.STORYBOOK_TEMPLATE_N
 const templates = allTemplates;
 export const hasVitestIntegration =
   !templates[templateName]?.skipTasks?.includes('vitest-integration');
+
+export const hasOnboardingFeature = (templateName: string) =>
+  ['@storybook/react', '@storybook/vue3', '@storybook/angular'].includes(
+    templates[templateName as keyof typeof templates]?.expected.renderer
+  );