1 | <img src="https://user-images.githubusercontent.com/378279/27998811-43b9906e-6515-11e7-835a-6f596506cc46.png" width="300" height="130" alt="Loki" />
|
2 |
|
3 | # Visual Regression Testing for Storybook
|
4 |
|
5 | [![GitHub license](https://img.shields.io/npm/l/loki.svg)](https://github.com/oblador/loki/blob/master/LICENSE) [![Travis](https://img.shields.io/travis/oblador/loki.svg)](https://travis-ci.org/oblador/loki) [![Node.js version](https://img.shields.io/node/v/loki.svg)](https://npmjs.com/package/loki) [![npm version](https://img.shields.io/npm/v/loki.svg)](https://npmjs.com/package/loki) [![npm downloads](https://img.shields.io/npm/dm/loki.svg)](https://npmjs.com/package/loki)
|
6 |
|
7 | <img src="https://user-images.githubusercontent.com/378279/28074070-f0052fac-6657-11e7-8a9d-398a12d2d6a8.png" width="672" height="494" alt="Loki" />
|
8 |
|
9 | ## Rationale
|
10 |
|
11 | There are a few visual regression tools for the web, but most either cannot be run headless or use phantomjs which is deprecated and a browser nobody is _actually_ using. They usually also require you to maintain fixtures. With react-native it's now possible to target multiple platforms with a single code base, but there's no single tool to test all to my knowledge.
|
12 |
|
13 | Loki aims to have easy setup, no to low maintenance cost, reproducible tests independent of which OS they are run on, runnable on CI and support all platforms storybook does.
|
14 |
|
15 | ## Supported platforms
|
16 |
|
17 | - Chrome in docker (recommended)
|
18 | - Chrome in AWS Lambda
|
19 | - Local Chrome application
|
20 | - iOS simulator
|
21 | - Android emulator
|
22 |
|
23 | ## Prerequsites
|
24 |
|
25 | - Node 7.6 or higher
|
26 |
|
27 | ### Optional dependencies
|
28 |
|
29 | - [GraphicsMagick](http://www.graphicsmagick.org) for gm diffing engine, `brew install graphicsmagick`
|
30 | - [Docker](https://www.docker.com/community-edition#/download) for the `chrome.docker` target.
|
31 | - [Chrome 59+](https://www.google.se/chrome/browser/desktop/) for the `chrome.app` target, `brew cask install google-chrome-canary`.
|
32 |
|
33 | ## Installation
|
34 |
|
35 | ```
|
36 | yarn add loki --dev
|
37 | yarn loki init
|
38 | ```
|
39 |
|
40 | ## Workflow
|
41 |
|
42 | Loki will not start any servers for you, so ensure storybook and any simulator/emulator is up and running before running tests.
|
43 |
|
44 | 1. Start storybook server
|
45 | `yarn storybook`
|
46 | 2. Add first set of reference files
|
47 | `yarn loki update`
|
48 | 3. Do some changes to your components
|
49 | 4. Test against references
|
50 | `yarn loki test`
|
51 | 5. Review changes in diff folder
|
52 | 6. Approve changes and update references
|
53 | `yarn loki approve`
|
54 |
|
55 | ## Documentation
|
56 |
|
57 | - [Introduction](https://loki.js.org/)
|
58 | - [Getting started](https://loki.js.org/getting-started.html)
|
59 | - [Configuration](https://loki.js.org/configuration.html)
|
60 | - [Command line arguments](https://loki.js.org/command-line-arguments.html)
|
61 |
|
62 | ## Examples
|
63 |
|
64 | - [React example](https://github.com/oblador/loki/tree/master/examples/react)
|
65 | - [React Native example](https://github.com/oblador/loki/tree/master/examples/react-native)
|
66 |
|
67 | ## License
|
68 |
|
69 | [MIT License](http://opensource.org/licenses/mit-license.html). © Joel Arvidsson 2017-present
|