Boost up your confidence while merging a (front-end) PR

Photo by Clark Young on Unsplash

In each (this time front-end) project, it is essential to be sure, that each feature we ship doesn’t break up any other parts of the app.

Ever heard of Storybook? Chances are you did if you are a front-end developer that doesn’t live under a stone. It’s not only a great tool to develop with but it can also watch for regression with community-driven addons.

I have recently come up across Loki; it was right in the middle of reviewing a PR that was introducing a huge set of CSS changes to the project. I got myself a cup of coffee, sat down in the chill room and I was ready to go over through a hundred files… But fortunately for me, the client, and the project itself, I found the solution with a visual regression testing tool designed for Storybook.

It fits exactly the product we develop as it’s entirely covered with Storybook’s stories.

Before I finished that cup of coffee I knew exactly what has changed (in a bad way) without staring and comparing the results with the Figma file.

What is Loki?

Loki makes it easy to test your Storybook project for visual regressions.

How does it work?

Loki goes over your project files tree and picks up “.stories” files. Then it spins up a headless Chrome browser (if you choose to run it locally) and takes up screengrabs that are being saved in a “current” directory. By comparing each current image against the one that is being versioned via GIT (“reference” directory) it generates a “difference” directory that contains only images that differ.

Example of a “difference” image of a story.

Supported platforms:
- Chrome in Docker
- Chrome in AWS Lambda
- Local Chrome application
- iOS simulator
- Android emulator

How to set it up to boost up your confidence?

I strongly recommend either running it locally before submitting a PR (easiest) or setup a GitHub Action to run these tests on each PR (Docker/AWS Lambda) if you work in a bigger team.

I'm using it in a mix with DOM storyshots based tests that run on each GIT push 🚀 and I must admit, it did save me a tremendous amount of dev-hours this year.




Lead Developer @TDSOFT

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Transcribing videos using Google’s Pre-trained Speech-to-text API

Install Hadoop on Ubuntu | explained

Error Budget Is All You Need - Part 1

Git -ing it.

Great Air Drop of EVIS

Getting the most out of OneDrive for Business

The 3 Musketeers: inline, block & inline-block

9 Best open source CSS frameworks for frontend web development

Web illustration image

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adrian Celczyński

Adrian Celczyński

Lead Developer @TDSOFT

More from Medium

Set of Rules to Standarize Software Versions: Semantic Versioning

Clean Code and Good Reviews

Good code vs bad code cartoon

Test Driven Development — React

What Are Responsive Images And Why You Should Use Them