diff --git a/docs/api/portable-stories-playwright.md b/docs/api/portable-stories-playwright.md index f4b3b423e9fe..d043ca7abd59 100644 --- a/docs/api/portable-stories-playwright.md +++ b/docs/api/portable-stories-playwright.md @@ -10,8 +10,6 @@ export const SUPPORTED_RENDERERS = ['react', 'vue']; -The portable stories API for Playwright CT is experimental. Playwright CT itself is also experimental. Breaking changes might occur on either libraries in upcoming releases. - Portable stories are currently only supported in [React](?renderer=react) and [Vue](?renderer=vue) projects. @@ -22,6 +20,12 @@ Portable stories are currently only supported in [React](?renderer=react) and [V + + +The portable stories API for Playwright CT is experimental. Playwright CT itself is also experimental. Breaking changes might occur in either library in upcoming releases. + + + Portable stories are Storybook [stories](../writing-stories/index.md) which can be used in external environments, such as [Playwright Component Tests (CT)](https://playwright.dev/docs/test-components). Normally, Storybok composes a story and its [annotations](#annotations) automatically, as part of the [story pipeline](#story-pipeline). When using stories in Playwright CT, you can use the [`createTest`](#createtest) function, which extends Playwright's test functionality to add a custom `mount` mechanism, to take care of the story pipeline for you. @@ -175,8 +179,6 @@ export default composeStories(stories); You can then import the composed stories in your Playwright test file, as in the [example above](#createtest). -## createTest - [Read more about Playwright's component testing](https://playwright.dev/docs/test-components#test-stories). diff --git a/docs/snippets/react/portable-stories-jest-compose-stories.ts.mdx b/docs/snippets/react/portable-stories-jest-compose-stories.ts.mdx index 31e77a5bf979..0def520867b3 100644 --- a/docs/snippets/react/portable-stories-jest-compose-stories.ts.mdx +++ b/docs/snippets/react/portable-stories-jest-compose-stories.ts.mdx @@ -18,7 +18,7 @@ test('renders primary button with default args', () => { expect(buttonElement).not.toBeNull(); }); -test('renders primary button with overriden props', () => { +test('renders primary button with overridden props', () => { // You can override props and they will get merged with values from the story's args render(Hello world); const buttonElement = screen.getByText(/Hello world/i); diff --git a/docs/snippets/react/portable-stories-playwright-ct.ts.mdx b/docs/snippets/react/portable-stories-playwright-ct.ts.mdx index 40552ea42d5d..775008553e81 100644 --- a/docs/snippets/react/portable-stories-playwright-ct.ts.mdx +++ b/docs/snippets/react/portable-stories-playwright-ct.ts.mdx @@ -13,7 +13,7 @@ test('renders primary button', async ({ mount }) => { await mount(); }); -test('renders primary button with overriden props', async ({ mount }) => { +test('renders primary button with overridden props', async ({ mount }) => { // You can pass custom props to your component via JSX const component = await mount(); await expect(component).toContainText('label from test'); diff --git a/docs/snippets/react/portable-stories-vitest-compose-stories.ts.mdx b/docs/snippets/react/portable-stories-vitest-compose-stories.ts.mdx index 2e4c6b22d81d..d876298105a3 100644 --- a/docs/snippets/react/portable-stories-vitest-compose-stories.ts.mdx +++ b/docs/snippets/react/portable-stories-vitest-compose-stories.ts.mdx @@ -17,7 +17,7 @@ test('renders primary button with default args', () => { expect(buttonElement).not.toBeNull(); }); -test('renders primary button with overriden props', () => { +test('renders primary button with overridden props', () => { // You can override props and they will get merged with values from the story's args render(Hello world); const buttonElement = screen.getByText(/Hello world/i); diff --git a/docs/snippets/vue/portable-stories-jest-compose-stories.ts.mdx b/docs/snippets/vue/portable-stories-jest-compose-stories.ts.mdx index 62e40bc5cc35..1bd57fff0783 100644 --- a/docs/snippets/vue/portable-stories-jest-compose-stories.ts.mdx +++ b/docs/snippets/vue/portable-stories-jest-compose-stories.ts.mdx @@ -17,7 +17,7 @@ test('renders primary button with default args', () => { expect(buttonElement).not.toBeNull(); }); -test('renders primary button with overriden props', () => { +test('renders primary button with overridden props', () => { // You can override props and they will get merged with values from the story's args render(Primary, { props: { label: 'Hello world' } }); const buttonElement = screen.getByText(/Hello world/i); diff --git a/docs/snippets/vue/portable-stories-playwright-ct.ts.mdx b/docs/snippets/vue/portable-stories-playwright-ct.ts.mdx index 252b3de70f5d..fc4b1a36ffd3 100644 --- a/docs/snippets/vue/portable-stories-playwright-ct.ts.mdx +++ b/docs/snippets/vue/portable-stories-playwright-ct.ts.mdx @@ -15,7 +15,7 @@ test('renders primary button', async ({ mount }) => { await mount(); }); -test('renders primary button with overriden props', async ({ mount }) => { +test('renders primary button with overridden props', async ({ mount }) => { // You can pass custom props to your component via JSX const component = await mount(); await expect(component).toContainText('label from test'); diff --git a/docs/snippets/vue/portable-stories-vitest-compose-stories.ts.mdx b/docs/snippets/vue/portable-stories-vitest-compose-stories.ts.mdx index 7a518d2198a7..a9d31745cd17 100644 --- a/docs/snippets/vue/portable-stories-vitest-compose-stories.ts.mdx +++ b/docs/snippets/vue/portable-stories-vitest-compose-stories.ts.mdx @@ -17,7 +17,7 @@ test('renders primary button with default args', () => { expect(buttonElement).not.toBeNull(); }); -test('renders primary button with overriden props', () => { +test('renders primary button with overridden props', () => { // You can override props and they will get merged with values from the story's args render(Primary, { props: { label: 'Hello world' } }); const buttonElement = screen.getByText(/Hello world/i);