-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Storybook] Add ability to take snapshots during Storybook
play int…
…eractions (#168) Co-authored-by: Logan Graham <[email protected]>
- Loading branch information
1 parent
7d3f733
commit 2036ba4
Showing
9 changed files
with
193 additions
and
24 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| "@saucelabs/visual-storybook": minor | ||
| --- | ||
|
|
||
| add play interaction snapshot testing | ||
| re-add storybook 6 support |
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,4 +1,5 @@ | ||
| .work | ||
| build/ | ||
| coverage/ | ||
| .parent/ | ||
| .parent/ | ||
| play.* |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,3 @@ | ||
| export { postRender, postVisit } from './api'; | ||
| export { postRender, postVisit, preVisit } from './api'; | ||
| export { getVisualTestConfig } from './config'; | ||
| export type { SauceVisualParams, ArgsTypes, StoryVariation } from './types'; |
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 |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import type { SauceVisualParams as PlaywrightParams } from '@saucelabs/visual-playwright'; | ||
| import { instrument } from '@storybook/instrumenter'; | ||
|
|
||
| const _takeVisualSnapshot = async ( | ||
| name: string, | ||
| params?: PlaywrightParams, | ||
| ): Promise<void> => { | ||
| /** | ||
| * @see https://github.com/storybookjs/test-runner?tab=readme-ov-file#storybooktestrunner-user-agent | ||
| */ | ||
| const isTestRunner = window.navigator.userAgent.match(/StorybookTestRunner/); | ||
|
|
||
| if (!isTestRunner) { | ||
| console.info( | ||
| 'Skipping Sauce Visual snapshot -- not in test runner context.', | ||
| ); | ||
| return; | ||
| } | ||
| if (!window.takeVisualSnapshot) { | ||
| throw new Error( | ||
| '`takeVisualSnapshot` is not available. Did you setup your `preVisit` hook for Sauce Labs in your Storybook test-runner.js/ts configuration file?', | ||
| ); | ||
| } | ||
| await window.takeVisualSnapshot(name, params); | ||
| }; | ||
|
|
||
| export const { | ||
| /** | ||
| * Takes a screenshot with Sauce Visual. Designed to be used only within the Storybook Test Runner | ||
| * execution. Is noop when not in the test runner. | ||
| * @param name | ||
| * @param params | ||
| */ | ||
| takeVisualSnapshot, | ||
| } = instrument( | ||
| { | ||
| takeVisualSnapshot: _takeVisualSnapshot, | ||
| }, | ||
| { | ||
| intercept: true, | ||
| }, | ||
| ); |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,14 @@ | ||
| /* eslint-disable no-var */ | ||
| import { getApi } from '@saucelabs/visual'; | ||
| import type { getApi } from '@saucelabs/visual'; | ||
| import type { SauceVisualParams as PlaywrightParams } from '@saucelabs/visual-playwright'; | ||
|
|
||
| declare global { | ||
| var visualApi: ReturnType<typeof getApi>; | ||
| var buildId: string; | ||
| interface Window { | ||
| takeVisualSnapshot?: ( | ||
| name: string, | ||
| opts?: PlaywrightParams, | ||
| ) => Promise<void>; | ||
| } | ||
| } |
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