Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updating css-style testing docs to mention StoryShots image snapshots feature #2767

Merged
merged 9 commits into from
Jan 18, 2018
Merged

Updating css-style testing docs to mention StoryShots image snapshots feature #2767

Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
728cad8
mention StoryShots integration with jest-image-snapshots in css-style…
anescobar1991 Jan 17, 2018
522f4e6
Add back references to other visual regression tools in css-style doc
anescobar1991 Jan 17, 2018
f222e6b
Missed capitalization of a word in css-style testing doc
anescobar1991 Jan 17, 2018
8e82df0
Merge branch 'master' into patch-1
ndelangen Jan 17, 2018
b0e8b6e
Merge branch 'master' into patch-1
anescobar1991 Jan 17, 2018
844d147
Merge branch 'master' into patch-1
anescobar1991 Jan 18, 2018
1d7b528
Add to list of visual regression tools with Storybooks integration
anescobar1991 Jan 18, 2018
932a67a
Merge branch 'master' into patch-1
anescobar1991 Jan 18, 2018
e2ff103
Add Chromatic to list of supported visual testing frameworks
anescobar1991 Jan 18, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions docs/src/pages/testing/css-style-testing/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,14 @@ Then, we can see the above story using the following URL:

![Storybook Iframe Screenshot](../static/storybook-iframe-screenshot.png)

Just like that, you can access all of the stories in your Storybook.
Just like that, you can access all of the stories in your Storybook and use them as a base for visual regression testing.

## Supported CSS/Style Testing Frameworks

It will be hard to use all the frameworks we've [mentioned](/testing/react-ui-testing#3-css-style-testing), but we'll be able to use frameworks which are based on URL as the input source. (Such as [BackstopJS](https://github.com/garris/BackstopJS) and [Gemini](https://github.com/gemini-testing/gemini))
There are several frameworks that have out of the box Storybook integrations:
- [StoryShots](https://github.com/storybooks/storybook/tree/master/addons/storyshots) with its [seamless integration](https://github.com/storybooks/storybook/tree/master/addons/storyshots#configure-storyshots-for-image-snapshots) with [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot)
- [Loki](https://loki.js.org/)
- [Perci](https://percy.io/docs/clients/javascript/react-storybook)
- [Screener](https://screener.io/v2/docs)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And also Chromatic


- [Loki](https://loki.js.org/): Is a great tool for visual regression testing.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think all those tools are still worth mentioning


> In the future we are also planning to smooth this process with the help of [StoryShots](https://github.com/storybooks/storybook/tree/master/addons/storyshots).
Additionally frameworks which are based on URL as the input source such as [BackstopJS](https://github.com/garris/BackstopJS) or [Gemini](https://github.com/gemini-testing/gemini) can be used.