diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.stories.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.stories.tsx index e176cb564742..9986aabb1220 100644 --- a/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.stories.tsx +++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.stories.tsx @@ -3,6 +3,7 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react-vite'; import { action } from 'storybook/actions'; +import { expect, within } from 'storybook/test'; import { styled } from 'storybook/theming'; import * as ArgRow from './ArgRow.stories'; @@ -156,11 +157,34 @@ export const Error = { }, }; -export const Empty = { - args: {}, +const expectEmptyState = async (canvasElement: HTMLElement) => { + const canvas = within(canvasElement); + + await expect(await canvas.findByText('This story has no controls')).toBeVisible(); + await expect( + await canvas.findByText(/Storybook couldn't find or generate any controls for this story/i) + ).toBeVisible(); + const learnMoreLink = await canvas.findByRole('link', { + name: /Read docs/i, + }); + + await expect(learnMoreLink).toBeVisible(); + await expect(learnMoreLink).toHaveAttribute( + 'href', + 'https://storybook.js.org/docs/essentials/controls?ref=ui' + ); +}; + +export const Empty: Story = { + args: { + rows: {}, + }, parameters: { layout: 'centered', }, + play: async ({ canvasElement }) => { + await expectEmptyState(canvasElement); + }, }; export const EmptyInsideAddonPanel: Story = { @@ -171,6 +195,9 @@ export const EmptyInsideAddonPanel: Story = { parameters: { layout: 'centered', }, + play: async ({ canvasElement }) => { + await expectEmptyState(canvasElement); + }, }; export const WithDefaultExpandedArgs = { diff --git a/code/addons/docs/src/blocks/components/ArgsTable/Empty.tsx b/code/addons/docs/src/blocks/components/ArgsTable/Empty.tsx index b8e0b8fbd11e..a8b6df56f4b0 100644 --- a/code/addons/docs/src/blocks/components/ArgsTable/Empty.tsx +++ b/code/addons/docs/src/blocks/components/ArgsTable/Empty.tsx @@ -51,39 +51,23 @@ export const Empty: FC = ({ inAddonPanel }) => { return ( - Controls give you an easy to use interface to test your components. Set your story args - and you'll see controls appearing here automatically. + Storybook couldn't find or generate any controls for this story. Define{' '} + args or argTypes, or configure docgen to let Storybook + generate controls automatically. } footer={ - {inAddonPanel && ( - <> - - Read docs - - - )} - {!inAddonPanel && ( - - Learn how to set that up - - )} + + Read docs + } />