-
-
Notifications
You must be signed in to change notification settings - Fork 9.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #26198 from storybookjs/jeppe/vue-pw-ct
Portable Stories: Add support for Playwright CT in Vue3
- Loading branch information
Showing
17 changed files
with
749 additions
and
678 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
46 changes: 40 additions & 6 deletions
46
test-storybooks/portable-stories-kitchen-sink/vue3/stories/Button.playwright.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,45 @@ | ||
| import { test as base, expect } from '@playwright/experimental-ct-vue'; | ||
| import { createTest } from '@storybook/vue3/experimental-playwright'; | ||
| import { test as base } from '@playwright/experimental-ct-vue'; | ||
|
|
||
| import stories from './Button.stories.playwright'; | ||
| import stories, { SingleComposedStory, WithSpanishGlobal } from './Button.stories.portable'; | ||
|
|
||
| const test = createTest(base); | ||
|
|
||
| test.skip('renders primary button', async ({ mount }) => { | ||
| // TODO: this is not working, probably the translation that Playwright does not work with portable stories yet | ||
| await mount(stories.WithLoader); | ||
| test('renders with composeStories (plural)', async ({ mount }) => { | ||
| const component = await mount(<stories.CSF3Primary />); | ||
| await expect(component).toContainText('Global Decorator'); | ||
| await expect(component).toContainText('foo'); // default arg for the story | ||
| }); | ||
|
|
||
| test('renders with composeStory (singular)', async ({ mount }) => { | ||
| const component = await mount(<SingleComposedStory />); | ||
| await expect(component).toContainText('Global Decorator'); | ||
| await expect(component).toContainText('foo'); // default arg for the story | ||
| }); | ||
|
|
||
| test('renders story with props as second argument', async ({ mount }) => { | ||
| const component = await mount(<stories.CSF3Button primary={true} label="label from test" />); | ||
| await expect(component).toContainText('label from test'); | ||
| await expect(component.getByRole('button')).toHaveClass(/storybook-button--primary/); | ||
| }); | ||
|
|
||
| test('renders story with custom render', async ({ mount }) => { | ||
| const component = await mount(<stories.CSF3ButtonWithRender />); | ||
| await expect(component.getByTestId('custom-render')).toContainText('I am a custom render function'); | ||
| await expect(component.getByRole('button')).toHaveText('foo'); | ||
| }); | ||
|
|
||
| test('renders story with global annotations', async ({ mount }) => { | ||
| const component = await mount(<WithSpanishGlobal />); | ||
| await expect(component).toContainText('Hola!'); | ||
| }); | ||
|
|
||
| test('calls loaders', async ({ mount }) => { | ||
| const component = await mount(<stories.WithLoader />); | ||
| await expect(component.getByTestId('loaded-data')).toContainText('loaded data'); | ||
| await expect(component.getByTestId('mock-data')).toContainText('mockFn return value'); | ||
| }); | ||
|
|
||
| test('calls play', async ({ mount }) => { | ||
| const component = await mount(<stories.CSF3InputFieldFilled />); | ||
| await expect(component.getByTestId('input')).toHaveValue('Hello world!'); | ||
| }); |
4 changes: 0 additions & 4 deletions
4
test-storybooks/portable-stories-kitchen-sink/vue3/stories/Button.stories.playwright.ts
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.