UI Visual testing with Storybook and Chromatic
Tags: react, storybook, chromatic, frontend
Published: 2021-12-15 10:50:18

Hi everybody, today we are going to mess up with Storybook and UI visual testing, which in this case will be [Chromatic](https://www.chromatic.com/).

Summary of what we are going to do:
1. Use an existing repository with already added storybook and atleast one React component and couple of stories.
2. Integrate the repository with visual testing.
3. Create a GitHub action for automate workflow.

If you have a repository with Storybook you can use it, if not you can create one, or fork or copy the one I'm using in this post.
[https://github.com/ozaytsev86/visual-testing](https://github.com/ozaytsev86/visual-testing)
Just one thing, if you are going to use a forked repo then you will have to change one thing, please check: [https://www.chromatic.com/docs/github-actions#forked-repositories](https://www.chromatic.com/docs/github-actions#forked-repositories)

#Let's start
Once you signup in [https://www.chromatic.com/](https://www.chromatic.com/) go to "Projects" and add a new one by clicking on the "Add project" blue button, then "Choose from GitHub" and select your project.

Now on the left side menu go to "Manage" section and copy token number to clipboard. Then go to your GitHub repository -> Settings -> Secrets and create a new secret `CHROMATIC_PROJECT_TOKEN` with the token value.

In the root of your project create a folder `.github/workflows`   with `chromatic.yml` file. 
```yaml
name: Deploy to Chromatic

on: push

jobs:
  chromatic-deployment:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Install dependencies
        run: yarn
      - name: Publish to Chromatic
        uses: chromaui/action@v1
        # Options required for Chromatic's GitHub Action
        with:
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          token: ${{ secrets.GITHUB_TOKEN }}
```

Basically this action, on push, will trigger a deploy of our Storybook to Chromatic. So let's do a commit and push on our main branch.

Check the `Actions` tab that `Deploy to Chromatic` action was triggered and then go to your Chromatic profile and from the left side menu select "Setup", you should see that your project is connected with your repository.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxr78q2nnf62tsvw5b70.png)

Now change the style or something visually remarkable and do a push again. Go back to Chromatic profile and you will see something like this:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/scre2cryfo7cqg26igd8.png)
 
Click next, next, next... till you get to this screen:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/evdraxwv6r2bhj9u6ils.png)

Here you can check the changes. You or anyone of your team can review it and accept or deny. 
Great, sounds good! We are almost done!

#Let's do some improvements
Now we are going to trigger everything on pull request create instead of on push.

Go to Chromatic and click on "PRs" on the left side menu. You will see something like this:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/et7ugvqhxrq23hiwy6dc.png)

Click "Install Chromatic on GitHub" to give permissions, it will request your GitHub's password and at the next screen add the repository we are working on (it could be already added) and click "Approve and Install".

Now let's modify our action to run on pull request instead of on push, so we will save some time and resources ;)

**Create a new branch**

Update `chromatic.yml` and replace 
```yaml
on: push
```
with 
```yaml
on:
  pull_request:
      branches:
        - main
```
And do some visually remarkable changes in your component, push the changes and create a pull request to your `main` branch and see the magic happen :)

In the pull request you will see the status of Chromatic deploy
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5mk3husxn6xqpaj4vuo.png)

If you click on "Details" you will see the progress and at "Publish to Chromatic" log section you will find a link to your Storybook if you wanna share it with someone.

Once deployed, you will see statuses of UI Review.
Now play around with the Chromatic's interface, check the build, check the changes, accept or deny and the status will be updated in your GitHubs pull request. Once you finish with the build go back to PRs page and mark pull request as approved.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ipo10qi9h0mgp72wj1uo.png)

And here we are, all our statuses in the GitHub's pull request are green, so it is ready to be merged.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9unz7oir311o42ym3g7.png)

That's it! Happy coding!