kobotoolbox / kpi / 15181398340

81%

master: 76%

push

github

ci(chromatic): run tests daily DEV-103 (#5781)

### 📣 Summary

Once a day run Chromatic visual tests to verify we don't have unwanted
changes.

### 💭 Notes

Changes here:
- Added CI file for daily run of Chromatic
- Changed npm scripts for Chromatic usage

The `actions/checkout@v4` is forced to use `main` branch (and its latest
commit), so that we can obtain commit title and sha correctly. The
chromatic build fails ATM because it lacks npm script (added in this PR,
not present on `main`). It will work (🤞) as soon as we merge the PR :)

The workflow with Chromatic is:
1. Push some commit
2. See CI fails on Chromatic
3. Go to https://www.chromatic.com/builds?appId=682744cb1774e12b2cb1b0a2
4. Review changes
   1. If the changes are good (e.g. improving a component)
      1. **accept** them in Chromatic UI
      2. re-run failed CI job
      3. see that it succeeded
   2. If the changes are bad (e.g. introduced unwanted visual change)
      1. **deny** them in Chromatic UI
      2. fix the issue
      3. push a commit
      4. see that CI job suceeded

### 👀 Preview steps

To test it fully comment out `ref: "main"` from "Run Chromatic test"
job. Then the commit title and url would come from `main` branch, and
the chromatic build would be done on the PR branch.

Testing:
1. add `on: pull_request` to `.github/workflows/ci-daily.yml`
6. push a commit
7. 🟢 notice that the CI passes
8. change one of the components with stories so that it would look
different (e.g. add some padding)
9. push a commit
10. 🟢 notice that the CI fails
11. see failed build at
https://www.chromatic.com/builds?appId=682744cb1774e12b2cb1b0a2

---------

Co-authored-by: Akuukis <Akuukis@users.noreply.github.com>

6255 of 9922 branches covered (63.04%)

23847 of 29442 relevant lines covered (81.0%)

1.6 hits per line