From 2f5e7c31deb99b7674120c99aa884fde87714874 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 6 Jan 2023 15:42:32 +0100 Subject: [PATCH 1/3] fix the play function of this story that was failing in chromatic --- code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx index dc9a67ff79ac..b83b3956aeee 100644 --- a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx +++ b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx @@ -12,6 +12,7 @@ const meta: Meta = { title: 'Blocks/Internal/Canvas', component: Canvas, parameters: { + theme: 'light', relativeCsfPaths: ['../examples/Button.stories'], }, render: (args) => { @@ -43,7 +44,7 @@ const expectAmountOfStoriesInSource = // Assert - check that the correct amount of stories' source is shown await waitFor(async () => { - const booleanControlNodes = await canvas.findAllByText('BooleanControl'); + const booleanControlNodes = await canvas.findAllByText('Button'); expect(booleanControlNodes).toHaveLength(amount); }); }; From 5693d260a6bf65b42bc8854c9c8e12301cb8ab26 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 6 Jan 2023 15:49:05 +0100 Subject: [PATCH 2/3] cleanup --- .../blocks/internal/InternalCanvas.stories.tsx | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx index b83b3956aeee..92e43b120449 100644 --- a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx +++ b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx @@ -2,7 +2,7 @@ /// ; import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { userEvent, waitFor, within } from '@storybook/testing-library'; +import { userEvent, within } from '@storybook/testing-library'; import { expect } from '@storybook/jest'; import { Canvas } from '../Canvas'; import { Story as StoryComponent } from '../Story'; @@ -33,20 +33,15 @@ const expectAmountOfStoriesInSource = const canvas = within(canvasElement); // Arrange - find the "Show code" button - let showCodeButton = canvas.getByText('Show code'); - await waitFor(() => { - showCodeButton = canvas.getByText('Show code'); - expect(showCodeButton).toBeInTheDocument(); - }); + const showCodeButton = await canvas.findByText('Show code'); + await expect(showCodeButton).toBeInTheDocument(); // Act - click button to show code await userEvent.click(showCodeButton); // Assert - check that the correct amount of stories' source is shown - await waitFor(async () => { - const booleanControlNodes = await canvas.findAllByText('Button'); - expect(booleanControlNodes).toHaveLength(amount); - }); + const booleanControlNodes = await canvas.findAllByText('Button'); + await expect(booleanControlNodes).toHaveLength(amount); }; export const MultipleChildren: Story = { From 55a1607731afab0ee7a2dbfc2eff75a6aba6fe54 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 6 Jan 2023 16:34:17 +0100 Subject: [PATCH 3/3] fix it! Co-authored-by: Yann Braga --- code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx index 92e43b120449..51107dc87bcf 100644 --- a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx +++ b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx @@ -40,7 +40,7 @@ const expectAmountOfStoriesInSource = await userEvent.click(showCodeButton); // Assert - check that the correct amount of stories' source is shown - const booleanControlNodes = await canvas.findAllByText('Button'); + const booleanControlNodes = await canvas.findAllByText('onClick'); await expect(booleanControlNodes).toHaveLength(amount); }; @@ -111,6 +111,6 @@ export const MixedChildrenStories: Story = { const canvas = within(args.canvasElement); // Assert - only find two headlines, those in the story, and none in the source code - expect(canvas.queryAllByText(/Headline for Boolean Controls/i)).toHaveLength(2); + expect(canvas.queryAllByText(/Headline for /i)).toHaveLength(2); }, };