Merge pull request #27145 from storybookjs/yann/fix-failing-stories

Build: Fix failing stories
storybookjs · May 16, 2024 · ba69532 · ba69532
2 parents 27fa22a + 72664eb
commit ba69532
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 29 deletions.
diff --git a/code/package.json b/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"

diff --git a/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx b/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() });
   },
 };

diff --git a/code/ui/manager/src/components/sidebar/FileSearchList.stories.tsx b/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);
 

diff --git a/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx b/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,10 +55,13 @@ const meta = {
               },
             },
             api: {
-              emit: () => {},
-              on: () => {},
-              off: () => {},
-              getShortcutKeys: () => ({ search: ['control', 'shift', 's'] }),
+              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'),
             },
           } as any
         }
@@ -288,19 +291,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);
   },
 };