From 9454788827d1ed98319af61393beef53446c0d00 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 15 May 2024 11:24:18 +0200 Subject: [PATCH 1/3] Fix failing stories --- .../NotificationItem.stories.tsx | 4 +- .../sidebar/FileSearchList.stories.tsx | 42 +++++++++++-------- 2 files changed, 26 insertions(+), 20 deletions(-) diff --git a/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx b/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx index a3b87acdcf52..5ed3ee4b25cc 100644 --- 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 index f2fb798d5992..597b8b82581c 100644 --- 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); From e80cb5a3266f7aaf02923d12a285577ce2a1fb15 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 15 May 2024 12:14:15 +0200 Subject: [PATCH 2/3] fix another story --- .../components/sidebar/Sidebar.stories.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx b/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx index 46c3d7c14979..6d49c03923b6 100644 --- 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,7 +291,7 @@ 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 () => { @@ -296,11 +299,11 @@ export const Scrolled: Story = { }); 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); }, }; From 5a0bf2059e4806998b1bf58cda3e79bca1fe469e Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 15 May 2024 12:16:36 +0200 Subject: [PATCH 3/3] disable chromatic turboSnap for storybook:ui --- code/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/package.json b/code/package.json index ce93ab365302..ea0e9c371640 100644 --- 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"