├── .eslintrc ├── .gitignore ├── .npmignore ├── .travis.yml ├── LICENSE ├── README.md ├── docs └── demo.gif ├── package-lock.json ├── package.json └── src ├── cli.js ├── commands ├── approve.js └── test.js ├── index.js └── utils ├── debug.js ├── image.js ├── options.js └── page.js /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["standard"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /styleguide-visual/ 3 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /docs/ 2 | /styleguide-visual/ 3 | /.eslintrc 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '8' 4 | 5 | cache: 6 | directories: 7 | - node_modules 8 | 9 | deploy: 10 | provider: npm 11 | email: unindented@gmail.com 12 | api_key: 13 | secure: Z9Gw3V5YzYQSzEmau6MN/Co+jXTY2lfyfpsrkXLRYfdJXZ+6Bae/gkJipOwJbEluW/fAp1xlxZaQo/bmabtc1buednAQq5nu5ElQac7OO90tcWAk8kUM6I1l6S1ZlnJXknHCO9dGFAGhd611sLLPbo2Z46UhyhHrQIFuqf4AKy9xpGeXUfYZu5vjO7FHRAT4Mhqa1bR45Z49vRrtMEj4WB7KsKKkAYH54OTcpvRLEKjaUy/019UL5bX3FAjD0T8rUzyUkharTpXVRa6KHoJkIXOFuwHmQl2wQ5WwoDAgrZgqNZ0YpKVDCo1WdO8JREMsL83DkoESG+H+swnnNCBgDbCEVzYNpNnIB4DdmoGjRXNfTv8oGdd878WWMzhMXza8LqLg9gLgDhVRVXAeRdokX3+9KwBgLffgmVuWJUXujh/6yOCc0fGQ1bODE747Gu9Nc5O6krhtwS7lFZzc4LwAFyaI6Z0hIU3AdOm0SvZnX2Rw/SrzWNZkz5JSSoSHySJKgVtkIY65mXaknEnunZlN9MKQc+Ba9v8BsMsYc6LOku3rZ8f2X9FpIjMfUfvyqTVnY/iTqmSmf79xTB62Cf9Zg6X/yXaJ1IatFNDeKjeUM54XYBqeaEdqi7JImLDQ9aEDEKte4GQe4+bAe3QDjY6LxJWpk/Ti5HuND0u8QZ7nbQM= 14 | on: 15 | tags: true 16 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2018 Daniel Perez Alvarez 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of 4 | this software and associated documentation files (the "Software"), to deal in 5 | the Software without restriction, including without limitation the rights to 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 7 | of the Software, and to permit persons to whom the Software is furnished to do 8 | so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Visual Testing for React Styleguidist [![Version](https://img.shields.io/npm/v/react-styleguidist-visual.svg)](https://www.npmjs.com/package/react-styleguidist-visual) [![Build Status](https://img.shields.io/travis/unindented/react-styleguidist-visual.svg)](http://travis-ci.org/unindented/react-styleguidist-visual) 2 | 3 | Allows you to do easy visual diffing of your [React Styleguidist](https://react-styleguidist.js.org/) examples. 4 | 5 | ![Demo of `react-styleguidist-visual`](docs/demo.gif) 6 | 7 | ## Installation 8 | 9 | Add the dependency to your project: 10 | 11 | ``` 12 | $ npm install --save-dev react-styleguidist-visual 13 | ``` 14 | 15 | ## Usage 16 | 17 | Point the tool to your styleguide: 18 | 19 | ``` 20 | $ npx styleguidist-visual test --url "https://react-styleguidist.js.org/examples/basic/" 21 | ``` 22 | 23 | You can also test against your local style guide. 24 | The following command will first build the style guide and then run the visual test. 25 | 26 | ``` 27 | $ npx styleguidist build && styleguidist-visual test --url \"file://$(pwd)/styleguide/index.html\" 28 | ``` 29 | 30 | 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. 31 | 32 | If the new screenshots look good, you can promote them to be the new reference files by running: 33 | 34 | ``` 35 | $ npx styleguidist-visual approve 36 | ``` 37 | 38 | ### Options 39 | 40 | You can see all possible options by appending the `--help` argument to any command: 41 | 42 | ``` 43 | $ npx styleguidist-visual --help 44 | $ npx styleguidist-visual test --help 45 | $ npx styleguidist-visual approve --help 46 | ``` 47 | 48 | ### Action States 49 | 50 | 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: 51 | 52 | ````md 53 | ```js { "props": { "data-action-states": "[{\"action\":\"none\"},{\"action\":\"hover\",\"selector\":\".my-button\",\"wait\":\"1000\"},{\"action\":\"focus\",\"selector\":\".my-button\"},{\"action\":\"keyPress\",\"key\":\"Tab\"}]" } } 54 |