storybookのVRTでChromaticを試す
始めに
VRTは色々なやり方があると思いますが、storybookのVRTはstorybookで勧められているものを使った方が楽に設定できるかなと思い、公式で勧められているChromaticを試してみました。
導入
詳細は公式に譲りますが、書かれていた通りにしたらさくっとできました。
CIの設定も丁寧に書かれているので、特につまづくことなくできました。
ただ個人的には差分があった時はfailになっていた方が良さそうなので以下のようにexitZeroOnChanges: falseをつけています。
name: 'Chromatic'
on: push
jobs:
chromatic-deployment:
runs-on: ubuntu-18.04
timeout-minutes: 10
steps:
- uses: actions/checkout@v2
with:
fetch-depth: 0
- uses: actions/setup-node@v2
with:
node-version: '16.15.1'
cache: yarn
- name: Install dependencies
run: yarn install
- name: Publish to Chromatic
uses: chromaui/action@v1
id: chromatic
with:
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+ exitZeroOnChanges: false
運用のイメージ
上記のGitHub Actionsが動いた後に、ChromaticのCIも動き出し、以下の3つのステータスが出てきます。
- UI Review
- UI変更についてのレビュー
- Storybook Publish
- storybookがpublishされたか
- UI Tests
- UIが変更されたか確認（UI Reviewと結構被っており、実装者側確認用？）
上記のようなステータスが出るため、以下のような運用が良いのかなと思っています。
レビューイ側
普段通り開発し、差分が出た時にGitHub Actionsでエラーになります。
Detailsに飛んで確認URLに飛びます。
Review Changesに飛びます。
Diffを見ながらAcceptを押していきます（誤った変更であればコードを修正してください）
全てAcceptしたらGitHub Actionsを再度実行してください。
GitHub ActionsがPassして、かつChromaticのUI TestsもPassされていたらOKです（UI ReviewはPending状態にしてレビュワーに見てもらいます）
レビュワー側
差分が出ている場合、ChromaticのUI Reviewがpending状態になっているのでDetailsに飛びます。
Changesetに飛びます。
diffを確認して問題なかったらApproveします。
PRページで全てPassになっていたらOKです。コードも問題なければGitHub PullRequestの方もApproveしてください。
使って見て気になったところ
実際に運用までできていませんが、軽く試してみて気になったところをいくつか挙げます。
PendingステータスがCI稼働中と勘違いしそう
Chromaticが出すステータスはApproveが出ない限りPendingステータスになります。したがってタブのステータスやコミットのステータスはPendingのままになり、「まだCIが終わっていないのかな？」という勘違いをしてしまいそうだなと思いました。なので少しでも対応が必要になっていることが気づくようにexitZeroOnChanges: falseをつけてfailedになるようにしました。
PR上のステータスをよくよくみるとアイコンは稼働中は周りがクルクル回って、progressという文言に対し、ChromaticのPendingはクルクル回っておらず、文言もpendingになってはいて違いは一応ありますが、まぁ気づかないですよね(汗)
フローが若干複雑
運用イメージを見てわかるかと思いますが、意外といろんなところに飛んでApproveする必要があります。Chromatic側でもコメントできますが、逆にGitHub上のコメントと分散してしまうのでオーバーな感じがしました。
その他検証
差分検出時にPR上にコメント出す
以下の記事のようにChromaticに関する情報をPR上にコメントを出すことができるようです。
ただプレビューURLはStorybook PublishのDetailsのところを飛べば見れますし、労力に合っていないように感じました。
何件diffがあったかコメントで見れるなら良いかなと思ったのですが、残念ながらその情報は取得できなそうなので、特に対応しませんでした。
まとめ
以上がChromaticを試してみた内容です。pendingステータスのままになってしまうのが結構ネックだなと僕は感じていて、他の方法を探そうかなと思っています。サービスなしだとjest-image-snapshotを使うやり方があるようなので、今度そちらの方も検証したいと思います。
最後に今回の検証では以下のレポジトリで試しており、他の検証でも使ってコードが色々混じっていますが、興味ある方はご参照ください。
Discussion