From a38d699514a399adb164d3442aa409846f5649b9 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 13 Jun 2023 16:43:36 +0200 Subject: [PATCH 1/5] fix addon viewports e2e test --- code/e2e-tests/addon-viewport.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/e2e-tests/addon-viewport.spec.ts b/code/e2e-tests/addon-viewport.spec.ts index da66778a3708..ec96a3bd93ea 100644 --- a/code/e2e-tests/addon-viewport.spec.ts +++ b/code/e2e-tests/addon-viewport.spec.ts @@ -28,13 +28,13 @@ test.describe('addon-viewport', () => { await sbPage.navigateToStory('example/button', 'primary'); // Measure the original dimensions of previewRoot - const originalDimensions = await sbPage.previewRoot().boundingBox(); + const originalDimensions = await sbPage.getCanvasBodyElement().boundingBox(); await expect(originalDimensions?.width).toBeDefined(); await sbPage.selectToolbar('[title="Change the size of the preview"]', '#list-item-mobile1'); // Measure the adjusted dimensions of previewRoot after clicking the mobile item. - const adjustedDimensions = await sbPage.previewRoot().boundingBox(); + const adjustedDimensions = await sbPage.getCanvasBodyElement().boundingBox(); await expect(adjustedDimensions?.width).toBeDefined(); // Compare the two widths From 1aa9c59c5ea6123585e12b915da65f635edcb29d Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 13 Jun 2023 18:09:27 +0200 Subject: [PATCH 2/5] add chromatic ignore regions --- code/ui/manager/src/components/layout/app.mockdata.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/code/ui/manager/src/components/layout/app.mockdata.tsx b/code/ui/manager/src/components/layout/app.mockdata.tsx index fc87fd64d17e..48e2696d3306 100644 --- a/code/ui/manager/src/components/layout/app.mockdata.tsx +++ b/code/ui/manager/src/components/layout/app.mockdata.tsx @@ -105,6 +105,7 @@ class PlaceholderClock extends Component<{ color: string }, { count: number }> { return (

Date: Tue, 13 Jun 2023 20:06:54 +0200 Subject: [PATCH 3/5] try to ignore flaky regions --- .../template/stories/ts-argtypes.stories.tsx | 17 ++++++++++++++++- code/ui/blocks/src/blocks/DocsPage.stories.tsx | 13 +++++++++++++ 2 files changed, 29 insertions(+), 1 deletion(-) diff --git a/code/renderers/react/template/stories/ts-argtypes.stories.tsx b/code/renderers/react/template/stories/ts-argtypes.stories.tsx index 21eb492d30e7..64f264adca8a 100644 --- a/code/renderers/react/template/stories/ts-argtypes.stories.tsx +++ b/code/renderers/react/template/stories/ts-argtypes.stories.tsx @@ -1,10 +1,12 @@ import React, { useState } from 'react'; import mapValues from 'lodash/mapValues.js'; import { PureArgsTable as ArgsTable } from '@storybook/blocks'; +import type { StoryObj } from '@storybook/react'; import type { Args, Parameters, StoryContext } from '@storybook/types'; import { inferControls } from '@storybook/preview-api'; import { ThemeProvider, themes, convert } from '@storybook/theming'; +import { within } from '@storybook/testing-library'; import { component as TsFunctionComponentComponent } from './docgen-components/ts-function-component/input'; import { component as TsFunctionComponentInlineDefaultsComponent } from './docgen-components/ts-function-component-inline-defaults/input'; import { component as TsReactFcGenericsComponent } from './docgen-components/8143-ts-react-fc-generics/input'; @@ -76,6 +78,19 @@ export const TsComponentProps = { parameters: { component: TsComponentPropsCompo export const TsJsdoc = { parameters: { component: TsJsdocComponent } }; -export const TsTypes = { parameters: { component: TsTypesComponent } }; +export const TsTypes: StoryObj = { + parameters: { component: TsTypesComponent }, + play: async ({ canvasElement }) => { + // This play function's sole purpose is to add a "chromatic ignore" region to a flaky row. + const canvas = within(canvasElement); + const funcCell = await canvas.findByText('funcWithArgsAndReturns'); + const funcRow = funcCell.parentElement?.parentElement; + if (funcRow?.nodeName === 'TR') { + funcRow.setAttribute('data-chromatic', 'ignore'); + } else { + throw new Error('the DOM structure changed, please update this test'); + } + }, +}; export const TsHtml = { parameters: { component: TsHtmlComponent } }; diff --git a/code/ui/blocks/src/blocks/DocsPage.stories.tsx b/code/ui/blocks/src/blocks/DocsPage.stories.tsx index b65768ef1f3d..e0e0daf53722 100644 --- a/code/ui/blocks/src/blocks/DocsPage.stories.tsx +++ b/code/ui/blocks/src/blocks/DocsPage.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; +import { within } from '@storybook/testing-library'; import { DocsPage } from './DocsPage'; const meta = { @@ -16,8 +17,20 @@ export const Default: Story = { parameters: { relativeCsfPaths: ['../examples/Button.stories'], }, + play: async ({ canvasElement }) => { + // This play function's sole purpose is to add a "chromatic ignore" region to a flaky row. + const canvas = within(canvasElement); + const sizeCell = await canvas.findByText('How large should the button be?'); + const sizeRow = sizeCell.parentElement?.parentElement?.parentElement; + if (sizeRow?.nodeName === 'TR') { + sizeRow.setAttribute('data-chromatic', 'ignore'); + } else { + throw new Error('the DOM structure changed, please update this test'); + } + }, }; export const SingleStory: Story = { + ...Default, parameters: { relativeCsfPaths: ['../examples/DocsPageParameters.stories'], }, From b2d03d5dfb721ecb5e6effce18098cff14f83f0b Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 14 Jun 2023 09:03:08 +0200 Subject: [PATCH 4/5] update play function notice banner --- code/ui/.storybook/preview.tsx | 28 +++++++++++++++++----------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/code/ui/.storybook/preview.tsx b/code/ui/.storybook/preview.tsx index ed08e0fd9886..7c52ad023776 100644 --- a/code/ui/.storybook/preview.tsx +++ b/code/ui/.storybook/preview.tsx @@ -64,18 +64,19 @@ const ThemeStack = styled.div( const PlayFnNotice = styled.div( { position: 'absolute', - bottom: '1rem', - right: '1rem', - border: '1px solid #ccc', - borderRadius: '5px', - padding: '1rem', - fontSize: '12px', + top: 0, + left: 0, + width: '100%', + borderBottom: '1px solid #ccc', + padding: '3px 8px', + fontSize: '10px', + fontWeight: 'bold', '> *': { display: 'block', }, }, ({ theme }) => ({ - background: theme.background.content, + background: '#fffbd9', color: theme.color.defaultText, }) ); @@ -219,10 +220,15 @@ export const decorators = [ {!parameters.theme && isChromatic() && playFunction && ( - - Detected play function. - Rendering in a single theme - + <> + + + Detected play function in Chromatic. Rendering only light theme to avoid + multiple play functions in the same story. + + +
+ )} From 8e239f1866ea1d032c77d8ae154abed88498f3ef Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 14 Jun 2023 10:26:06 +0200 Subject: [PATCH 5/5] add another chromatic ignore region --- .../template/stories/ts-argtypes.stories.tsx | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/code/renderers/react/template/stories/ts-argtypes.stories.tsx b/code/renderers/react/template/stories/ts-argtypes.stories.tsx index 64f264adca8a..f2b29752c276 100644 --- a/code/renderers/react/template/stories/ts-argtypes.stories.tsx +++ b/code/renderers/react/template/stories/ts-argtypes.stories.tsx @@ -78,18 +78,26 @@ export const TsComponentProps = { parameters: { component: TsComponentPropsCompo export const TsJsdoc = { parameters: { component: TsJsdocComponent } }; +const addChromaticIgnore = async (element: HTMLElement) => { + const row = element.parentElement?.parentElement; + if (row?.nodeName === 'TR') { + row.setAttribute('data-chromatic', 'ignore'); + } else { + throw new Error('the DOM structure changed, please update this test'); + } +}; + export const TsTypes: StoryObj = { parameters: { component: TsTypesComponent }, play: async ({ canvasElement }) => { - // This play function's sole purpose is to add a "chromatic ignore" region to a flaky row. + // This play function's sole purpose is to add a "chromatic ignore" region to flaky rows. const canvas = within(canvasElement); const funcCell = await canvas.findByText('funcWithArgsAndReturns'); - const funcRow = funcCell.parentElement?.parentElement; - if (funcRow?.nodeName === 'TR') { - funcRow.setAttribute('data-chromatic', 'ignore'); - } else { - throw new Error('the DOM structure changed, please update this test'); - } + addChromaticIgnore(funcCell); + const namedNumericCell = await canvas.findByText('namedNumericLiteralUnion'); + addChromaticIgnore(namedNumericCell); + const inlinedNumericCell = await canvas.findByText('inlinedNumericLiteralUnion'); + addChromaticIgnore(inlinedNumericCell); }, };