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) [![Tests](https://github.com/oblador/loki/workflows/Tests/badge.svg)](https://github.com/oblador/loki/actions?query=workflow%3ATests) [![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 | ## Prerequisites
|
24 |
|
25 | - [Node](https://nodejs.org/)
|
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 | ## Development
|
68 |
|
69 | ```bash
|
70 | # Install dependencies
|
71 | yarn
|
72 | # Start example storybook
|
73 | yarn workspace @loki/example-react run storybook
|
74 | # Run example visual tests
|
75 | yarn workspace @loki/example-react run test
|
76 | # Run unit tests
|
77 | yarn test
|
78 | # Run cli integration tests
|
79 | cd test/cli && yarn test
|
80 | ```
|
81 |
|
82 | ## Maintainers
|
83 |
|
84 | <table>
|
85 | <tbody>
|
86 | <tr>
|
87 | <td align="center">
|
88 | <a href="https://github.com/oblador">
|
89 | <img width="150" height="150" src="https://github.com/oblador.png?v=3&s=150">
|
90 | <br />
|
91 | <strong>Joel Arvidsson</strong>
|
92 | </a>
|
93 | <br />
|
94 | Author
|
95 | </td>
|
96 | <td align="center">
|
97 | <a href="https://github.com/techeverri">
|
98 | <img width="150" height="150" src="https://github.com/techeverri.png?v=3&s=150">
|
99 | <br />
|
100 | <strong>Tomas Echeverri Valencia</strong>
|
101 | </a>
|
102 | <br />
|
103 | Maintainer
|
104 | </td>
|
105 | </tr>
|
106 | <tbody>
|
107 | </table>
|
108 |
|
109 | ## License
|
110 |
|
111 | [MIT License](http://opensource.org/licenses/mit-license.html). © Joel Arvidsson 2017-present
|