Merge branch 'next' into reflect-search-in-url-16287

code/package.json

@@ -50,7 +50,7 @@
     "storybook:blocks:chromatic": "STORYBOOK_BLOCKS_ONLY=true yarn storybook:ui:chromatic --project-token=${CHROMATIC_TOKEN_STORYBOOK_BLOCKS:-MISSING_PROJECT_TOKEN}",
     "storybook:ui": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js dev --port 6006 --config-dir ./ui/.storybook",
     "storybook:ui:build": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js build --config-dir ./ui/.storybook --webpack-stats-json",
-    "storybook:ui:chromatic": "../scripts/node_modules/.bin/chromatic --build-script-name storybook:ui:build --storybook-base-dir ./ --project-token=${CHROMATIC_TOKEN_STORYBOOK_UI:-MISSING_PROJECT_TOKEN} --only-changed --exit-zero-on-changes --exit-once-uploaded",
+    "storybook:ui:chromatic": "../scripts/node_modules/.bin/chromatic --build-script-name storybook:ui:build --storybook-base-dir ./ --project-token=${CHROMATIC_TOKEN_STORYBOOK_UI:-MISSING_PROJECT_TOKEN} --exit-zero-on-changes --exit-once-uploaded",
     "task": "yarn --cwd ../scripts task",
     "test": "NODE_OPTIONS=--max_old_space_size=4096 vitest run",
     "test:watch": "NODE_OPTIONS=--max_old_space_size=4096 vitest watch"

code/ui/manager/src/components/notifications/NotificationItem.stories.tsx

@@ -99,8 +99,8 @@ export const Clickable: Story = {
   },
   play: async ({ args, canvasElement }) => {
     const canvas = within(canvasElement);
-    const [button] = await canvas.findAllByRole('button');
-    await userEvent.click(button);
+    const notification = await canvas.findByText('Storybook cool!');
+    await userEvent.click(notification);
     await expect(args.notification.onClick).toHaveBeenCalledWith({ onDismiss: expect.anything() });
   },
 };

code/ui/manager/src/components/sidebar/FileSearchList.stories.tsx

@@ -43,32 +43,38 @@ export const WithResults: Story = {
     const exportedElement1 = await findByText(canvasElement, 'module-multiple-exports');
     fireEvent.click(exportedElement1);
 
-    expect(args.onNewStory).toHaveBeenCalledWith({
-      selectedItemId: 'src/module-multiple-exports.js_0',
-      componentExportName: 'default',
-      componentFilePath: 'src/module-multiple-exports.js',
-      componentIsDefaultExport: true,
-    });
+    expect(args.onNewStory).toHaveBeenCalledWith(
+      expect.objectContaining({
+        selectedItemId: 'src/module-multiple-exports.js_0',
+        componentExportName: 'default',
+        componentFilePath: 'src/module-multiple-exports.js',
+        componentIsDefaultExport: true,
+      })
+    );
 
     const exportedElement2 = await findByText(canvasElement, 'namedExport');
     fireEvent.click(exportedElement2);
 
-    expect(args.onNewStory).toHaveBeenCalledWith({
-      selectedItemId: 'src/module-multiple-exports.js_1',
-      componentExportName: 'namedExport',
-      componentFilePath: 'src/module-multiple-exports.js',
-      componentIsDefaultExport: false,
-    });
+    expect(args.onNewStory).toHaveBeenCalledWith(
+      expect.objectContaining({
+        selectedItemId: 'src/module-multiple-exports.js_1',
+        componentExportName: 'namedExport',
+        componentFilePath: 'src/module-multiple-exports.js',
+        componentIsDefaultExport: false,
+      })
+    );
 
     const singleExport = await findByText(canvasElement, 'module-single-export.js');
     fireEvent.click(singleExport);
 
-    expect(args.onNewStory).toHaveBeenCalledWith({
-      selectedItemId: 'src/module-single-export.js',
-      componentExportName: 'default',
-      componentFilePath: 'src/module-single-export.js',
-      componentIsDefaultExport: true,
-    });
+    expect(args.onNewStory).toHaveBeenCalledWith(
+      expect.objectContaining({
+        selectedItemId: 'src/module-single-export.js',
+        componentExportName: 'default',
+        componentFilePath: 'src/module-single-export.js',
+        componentIsDefaultExport: true,
+      })
+    );
 
     expect(args.onNewStory).toHaveBeenCalledTimes(3);
 

code/ui/manager/src/components/sidebar/Sidebar.stories.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import type { IndexHash, State } from '@storybook/manager-api';
 import { ManagerContext, types } from '@storybook/manager-api';
 import type { StoryObj, Meta } from '@storybook/react';
-import { within, userEvent, expect } from '@storybook/test';
+import { within, userEvent, expect, fn } from '@storybook/test';
 import type { Addon_SidebarTopType } from '@storybook/types';
 import { Button, IconButton } from '@storybook/components';
 import { FaceHappyIcon } from '@storybook/icons';
@@ -55,12 +55,15 @@ const meta = {
               },
             },
             api: {
-              emit: () => {},
-              on: () => {},
-              off: () => {},
-              getShortcutKeys: () => ({ search: ['control', 'shift', 's'] }),
-              setQueryParams: () => {},
-              getQueryParams: () => {},
+              emit: fn().mockName('api::emit'),
+              on: fn().mockName('api::on'),
+              off: fn().mockName('api::off'),
+              getShortcutKeys: fn(() => ({ search: ['control', 'shift', 's'] })).mockName(
+                'api::getShortcutKeys'
+              ),
+              selectStory: fn().mockName('api::selectStory'),
+              setQueryParams: fn().mockName('api::setQueryParams'),
+              getQueryParams: fn().mockName('api::getQueryParams'),
             },
           } as any
         }
@@ -290,19 +293,19 @@ export const Scrolled: Story = {
     const scrollable = await canvasElement.querySelector('[data-radix-scroll-area-viewport]');
     await step('expand component', async () => {
       const componentNode = await canvas.queryAllByText('Child A2')[1];
-      userEvent.click(componentNode);
+      await userEvent.click(componentNode);
     });
     await wait(100);
     await step('scroll to bottom', async () => {
       scrollable.scrollTo(0, scrollable.scrollHeight);
     });
     await step('toggle parent state', async () => {
       const button = await canvas.findByRole('button', { name: 'Change state' });
-      button.click();
+      await userEvent.click(button);
     });
     await wait(100);
 
     // expect the scrollable to be scrolled to the bottom
-    expect(scrollable.scrollTop).toBe(scrollable.scrollHeight - scrollable.clientHeight);
+    await expect(scrollable.scrollTop).toBe(scrollable.scrollHeight - scrollable.clientHeight);
   },
 };

scripts/bench/browse.ts

@@ -37,15 +37,15 @@ async function benchAutodocs(url: string) {
   const browser = await chromium.launch(/* { headless: false } */);
   await browser.newContext();
   const page = await browser.newPage();
-  await page.setDefaultTimeout(40000);
+  page.setDefaultTimeout(40000);
 
   const start = now();
   await page.goto(`${url}?path=/docs/example-button--docs`);
 
   const tasks = [
     async () => {
       const previewPage = await getPreviewPage(page);
-      await previewPage.setDefaultTimeout(40000);
+      previewPage.setDefaultTimeout(40000);
 
       await previewPage.waitForLoadState('load');
       await previewPage.getByText('Primary UI component for user interaction');
@@ -72,7 +72,7 @@ async function benchMDX(url: string) {
   const tasks = [
     async () => {
       const previewPage = await getPreviewPage(page);
-      await previewPage.setDefaultTimeout(40000);
+      previewPage.setDefaultTimeout(40000);
 
       await previewPage.waitForLoadState('load');
       await previewPage.getByText('Configure your project');
@@ -108,7 +108,7 @@ async function benchStory(url: string) {
     },
     async () => {
       const previewPage = await getPreviewPage(page);
-      await previewPage.setDefaultTimeout(40000);
+      previewPage.setDefaultTimeout(40000);
 
       await previewPage.waitForLoadState('load');
       await previewPage.getByText('Button');

scripts/bench/utils.ts

@@ -33,9 +33,24 @@ export const loadBench = async (options: SaveBenchOptions): Promise<Partial<Benc
 };
 
 export async function getPreviewPage(page: Page) {
-  await page.waitForFunction(() => {
-    return document.querySelector('iframe')?.contentDocument.readyState === 'complete';
-  });
-  const previewPage = await page.frame({ url: /iframe.html/ }).page();
-  return previewPage;
+  /**
+   * Fix flakiness in preview iframe retrieval
+   * Sometimes the iframe is not yet available when we try to access it,
+   * even after waiting for the readyState to be complete.
+   *
+   * This loop will keep trying to access the iframe until it's available.
+   */
+  for (let i = 0; i < 10; i++) {
+    // eslint-disable-next-line @typescript-eslint/no-loop-func
+    await page.waitForFunction(() => {
+      return document.querySelector('iframe')?.contentDocument.readyState === 'complete';
+    });
+
+    const previewPage = page.frame({ url: /iframe.html/ })?.page();
+    if (previewPage) {
+      return previewPage;
+    }
+  }
+
+  throw new Error('The preview iframe was never found');
 }