Need help with react-styleguidist-visual?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

unindented
126 Stars 25 Forks MIT License 86 Commits 12 Opened issues

Description

Automated visual testing for React Styleguidist, using Puppeteer and pixelmatch.

Services available

!
?

Need anything else?

Contributors list

# 19,154
Redux
nsis
Electro...
Deno
43 commits
# 354,079
CSS
code-co...
ava
Node.js
12 commits
# 486,695
JavaScr...
HTML
Shell
web-sta...
4 commits
# 92,250
React
reactjs
Shell
D
2 commits
# 672,263
JavaScr...
1 commit
# 279,289
HTML
CSS
1 commit
# 314,300
hot-rel...
hmr
Webpack
Sass
1 commit

Visual Testing for React Styleguidist Version Build Status

Allows you to do easy visual diffing of your React Styleguidist examples.

Demo of `react-styleguidist-visual`

Installation

Add the dependency to your project:

$ npm install --save-dev react-styleguidist-visual

Usage

Point the tool to your styleguide:

$ npx styleguidist-visual test --url "https://react-styleguidist.js.org/examples/basic/"

You can also test against your local style guide. The following command will first build the style guide and then run the visual test.

$ npx styleguidist build && styleguidist-visual test --url \"file://$(pwd)/styleguide/index.html\"

The first time you run the tool, it will create reference screenshots for all examples in your styleguide, and store them in the

styleguide-visual
folder. If you run the same command again, it will take new screenshots, compare them to the reference ones, and show you the differences between them.

If the new screenshots look good, you can promote them to be the new reference files by running:

$ npx styleguidist-visual approve

Options

You can see all possible options by appending the

--help
argument to any command:
$ npx styleguidist-visual --help
$ npx styleguidist-visual test --help
$ npx styleguidist-visual approve --help

Action States

You can capture screenshots after simulating an action, by providing a

JSON.stringify
ed list of actions as props to the component wrapper like this:
```js { "props": { "data-action-states": "[{\"action\":\"none\"},{\"action\":\"hover\",\"selector\":\".my-button\",\"wait\":\"1000\"},{\"action\":\"focus\",\"selector\":\".my-button\"},{\"action\":\"keyPress\",\"key\":\"Tab\"}]" } }

Available actions are:

  • none - Capture the component without performing an action.
  • hover - Provide a selector to hover over.
  • focus - Provide a selector to focus on.
  • click - Provide a selector to click on.
  • mouseDown - Provide a selector to mouse down on.
  • keyPress - Provide a key to press.
  • wait - An optional time in ms to wait between performing the action and snapping the screenshot.

Debugging

Use the DEBUG environment variable to see debugging statements:

$ DEBUG=react-styleguidist-visual npx styleguidist-visual test --url "https://react-styleguidist.js.org/examples/basic/" ```

Meta

Contributors

License

Copyright (c) 2018 Daniel Perez Alvarez (unindented.org). This is free software, and may be redistributed under the terms specified in the LICENSE file.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.