Giter VIP home page Giter VIP logo

loki's Introduction

Loki

Visual Regression Testing for Storybook

GitHub license Tests npm version npm downloads

Loki

Rationale

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.

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.

Supported platforms

  • Chrome in docker (recommended)
  • Chrome in AWS Lambda
  • Local Chrome application
  • iOS simulator
  • Android emulator

Prerequisites

Optional dependencies

  • GraphicsMagick for gm diffing engine, brew install graphicsmagick
  • Docker for the chrome.docker target.
  • Chrome 59+ for the chrome.app target, brew cask install google-chrome-canary.

Installation

yarn add loki --dev
yarn loki init

Workflow

Loki will not start any servers for you, so ensure storybook and any simulator/emulator is up and running before running tests.

  1. Start storybook server yarn storybook
  2. Add first set of reference files yarn loki update
  3. Do some changes to your components
  4. Test against references yarn loki test
  5. Review changes in diff folder
  6. Approve changes and update references yarn loki approve

Documentation

Examples

Development

# Install dependencies
yarn
# Start example storybook
yarn workspace @loki/example-react run storybook
# Run example visual tests
yarn workspace @loki/example-react run test
# Run unit tests
yarn test
# Run cli integration tests
cd test/cli && yarn test

Maintainers


Joel Arvidsson

Author

Tomas Echeverri Valencia

Maintainer

License

MIT License. ยฉ Joel Arvidsson 2017-present

loki's People

Contributors

oblador avatar nuc avatar techeverri avatar levibuzolic avatar raulmt avatar nowells avatar missing1984 avatar wakeless avatar johannespfeiffer avatar gidztech avatar lindesvard avatar rafal2228 avatar pawelk avatar pavelkeyzik avatar pirelenito avatar ndonovic avatar emkis avatar su-narthur avatar mikeduminy avatar crazymax11 avatar matchilling avatar martinschoeler avatar markbrockhoff avatar aarongarciah avatar sergeyevstifeev avatar priomsrb avatar shanez avatar thiagodmont avatar geigerzaehler avatar tjenkinson avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.