Merge pull request #23051 from storybookjs/fix/viewports-e2e-test

Build: Fix E2E and chromatic inconsistencies

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

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,27 @@ export const TsComponentProps = { parameters: { component: TsComponentPropsCompo
 
 export const TsJsdoc = { parameters: { component: TsJsdocComponent } };
 
-export const TsTypes = { parameters: { component: TsTypesComponent } };
+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 flaky rows.
+    const canvas = within(canvasElement);
+    const funcCell = await canvas.findByText('funcWithArgsAndReturns');
+    addChromaticIgnore(funcCell);
+    const namedNumericCell = await canvas.findByText('namedNumericLiteralUnion');
+    addChromaticIgnore(namedNumericCell);
+    const inlinedNumericCell = await canvas.findByText('inlinedNumericLiteralUnion');
+    addChromaticIgnore(inlinedNumericCell);
+  },
+};
 
 export const TsHtml = { parameters: { component: TsHtmlComponent } };

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 = [
             <Global styles={createReset} />
             <ThemedSetRoot />
             {!parameters.theme && isChromatic() && playFunction && (
-              <PlayFnNotice>
-                <span>Detected play function.</span>
-                <span>Rendering in a single theme</span>
-              </PlayFnNotice>
+              <>
+                <PlayFnNotice>
+                  <span>
+                    Detected play function in Chromatic. Rendering only light theme to avoid
+                    multiple play functions in the same story.
+                  </span>
+                </PlayFnNotice>
+                <div style={{ marginBottom: 20 }} />
+              </>
             )}
             <StoryFn />
           </ThemeProvider>

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'],
   },

code/ui/manager/src/components/layout/app.mockdata.tsx

@@ -105,6 +105,7 @@ class PlaceholderClock extends Component<{ color: string }, { count: number }> {
     return (
       <PlaceholderBlock color={color}>
         <h2
+          data-chromatic="ignore"
           style={{
             position: 'absolute',
             bottom: 0,