chromaui/actionは何をしているのか
nus3GitHub Actionsでchromaui/actionを使った時に何が実行されているのか調べる
- name: Publish to Chromatic
uses: chromaui/action
該当のリポジトリ
READMEに
⚠️ This repository is just a deployment target for the GitHub Action. Do not fork or create issues/PRs here.
と記載されており、ソースコードはこっち
nus3releaseがscripts/release.jsが実行される
scripts/release.jsの中でGitHub Actionsをデプロイする処理が定義されてそ
nus3actionとaction-src配下のファイルをデプロイしてる
action/register.jsはファイルの内容的にビルドされてそう
nus3ビルドにはtsup使ってる
ビルドの設定はtsup.config.tsに書いてあって、ビルド前のファイルはaction-src/register.js
nus3action-src/register.jsの本体はaction-src/main.tsなんだけどもこのファイルではGitHub Actionでのinputを取得して、取得した値とともに../node-srcのrunを実行してる
nus3node-src/index.tsのrunAllが後続処理で、
runAllではビルドとアップデートのチェックやってそう
nus3ビルドではnode-src/runBuild.tsでlistrを使ってgetTasksで取得したタスクを実行してる
ctxの中にgplのclientっぽいもの入れとる
chromaticはGraphQLから必要な情報を取得できるようになっとる？
nus3taskの内容はnode-src/tasks/index.tsで定義されてそう
これのverify部分が実行ログのVerifying your Storybook部分に当たるんかな？
nus3verifyの定義箇所はnode-src/tasks/verify.ts
こんなステップでタスクが実行されそ
verifyしてるのはverifyBuildかな
nus3verifyBuildではちゃんとビルドがスタートしたかどうかをまず確認して
その後にVerifyBuildQueryを投げてる
VerifyBuildQueryにはInteraction testsが落ちた数も取得できそう
nus3verifyBuildはGraphQLを使ってビルド情報をChromaticから取得し、ビルドが正しく行われたかどうかをチェックしてる
nus3Interaction testsが落ちた時のメッセージはここら辺で生成してる
nus3メッセージを生成しているbuildHasErrorsはnode-src/tasks/snapshot.tsで使われている
nus3snapshotは一番最後のやるタスク
この過程でinteractionTestFailuresCountの値もctxに格納されている
nus3snapshotのタスク実行時にbuildした際のステータスがBROKENだった場合は、interactionTestFailuresCountなどをみて、Interaction testsが落ちていた場合はchromaticのactionをfailedにして落ちたテストケースを伝える
nus3実行ログを見てみる
以下は実行ログを抜粋したもの
Run chromaui/action
Authenticating with Chromatic
→ Connecting to https://index.chromatic.com
Authenticated with Chromatic
Retrieving git information
Found 6 changed files:
Retrieved git information
→ Commit 'xxxx' on branch 'branch-name'; found 1 parent build and 6 changed files
Collecting Storybook metadata
Collected Storybook metadata
Initializing build
Initialized build
Building your Storybook
Storybook built in x minute x seconds
Publish your built Storybook
→ Validating Storybook files
Retrieving story files affected by recent changes
→ Traversing dependencies for 6 files that changed since the last build
Retrieved story files affected by recent changes
→ Found 5 story files affected by recent changes
Publishing your built Storybook
Publish complete in 28 seconds
Verifying your Storybook
Starting partial build
Capturing xx snapshots and skipping xxx snapshots.
Started build xxxx
Running xx tests affected by recent changes (skipping xxx tests)
✔ Build xxxx passed!
Build xxxx completed
→ Tested xxx stories across xx components; captured xx snapshots in xx seconds
実行ログみてる感じ
- tokenを使ってchromaticに認証してもらう
- gitから差分を検索
- Storybookをビルド
- gitの差分から影響のあるstroyファイルを検出
- ビルドしたStorybookをpublish
- Verifying your Storybook?する
- 影響があったstoryファイルだけ部分的にビルドして、スナップショットをキャプチャ
- 影響のあったstoryのtestを実行
- キャプチャしたスナップショットのビジュアルの差異がないか確認
みたいな感じかな