🎨
reg-cliをmonorepo, Fork運用のRepositoryで動かすTips
前書き
Visual Regression Testing（以下VRT）で使われるreg-cliの導入を行った際に、
MonorepoやFork運用であると、一般的な導入手順では動かない問題があり、
起き得る問題やその解決方法について記します。
前提
- Github CI上で動かすことを想定しています。
一般的な導入手順
- 調べてすぐに出てくる内容ではあるので、該当する記事の紹介のみで詳細は割愛致します。
- 主にこの記事で関わってくるのは、導入手順としてよく紹介される以下のpluginたちになります。
-
reg-keygen-git-hash-plugin： GitHub上のどのコミットでのスナップショットを比較するかを決定 -
reg-notify-github-plugin: GitHub PRのコメントで比較情報を通知
-
Monorepo
reg-keygen-git-hash-pluginでは参照commitの比較が期待通りに動かない
- 一部のpackageのみを検知対象としたい場合に、こちらのライブラリでの比較検出ロジックですと期待通りに比較されない事象が発生してしまいます。
解決策
-
reg-simple-keygen-pluginを使用し、比較対象のkeyを独自に設定する
- keyの算出ロジックは参考1の記事を参考にしており、差分となりうるディレクトリ or ファイル群のhash値をkeyを取得する形としています。
github-action-example.yml
# 一部抜粋
steps:
# /packageA のソース群のみを比較したい
- name: set up base branch
uses: actions/checkout@v4
with:
ref: ${{ github.base_ref }}
- name: set base branch env
run: |
echo "EXPECTED_KEY=$KEY" >> $GITHUB_ENV
env:
KEY: ${{ hashFiles('./packageA/**') }}
- name: set up head branch
uses: actions/checkout@v4
with:
ref: ${{ github.ref }}
- name: set head branch env
run: |
echo "ACTUAL_KEY=$KEY" >> $GITHUB_ENV
env:
KEY: ${{ hashFiles('./packageA/**') }}
# --- ここまでがreg-cliへのkeyの設定 ---
# 以下、一般的なreg-cliの実行ステップが続く
regconfig.json
// 一部抜粋
"plugins": {
"reg-simple-keygen-plugin": {
"expectedKey": "${EXPECTED_KEY}",
"actualKey": "${ACTUAL_KEY}"
},
///
}
Fork運用
- 不用意に本番運用のブランチにpushさせないように、開発メンバーには管理RepositoryをForkしてもらい、そちらで開発を進めてもらう運用をしているチームもあるかと思います。
reg-notify-github-pluginによるPRへのコメントが行えない
通常reg-notify-github-pluginを使用すると、reg-cliでのテスト結果を自動的にPRコメントとして出力してくれます。
しかし、Fork branch -> Origin branchなPRにおいては正常に動いてくれません。
シンプルにライブラリ側で対応しきれていない部分のようです。
※issueとしても挙がっておりますが対応される気配は見えません・・・
解決策
- 自前でコメントを出力するスクリプトを用意する
必須のステップとしては以下です。スクリプトの書き方自体はお好みや環境に合わせてで問題ないです。
-
reg-cliの結果を取得する。 - それらをPRコメントとして出力する。
reg-cliの結果を取得する。
こちらについては、reg-cli実行後に.reg/out.jsonというファイルが作成されるので、そちらの中身を取得することで解決しています。
以下、一例です。
取得先やメッセージについては参考2の記事を参考にしております。
余談: 適切なpermissionsの割り当てをしないとコメントを送信できません。
github-action-example.yml
# 一部抜粋
- name: Create a comment to result
uses: actions/github-script@v7
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
script: |
const { ACTUAL_KEY } = process.env;
const fs = require('fs');
const path = require('path');
const regOutJsonStr = fs.readFileSync('packageA/.reg/out.json', 'utf-8')
const regOutJson = JSON.parse(regOutJsonStr)
const newItemCount = regOutJson.newItems.length
const diffItemCount = regOutJson.diffItems.length
const deletedItemCount = regOutJson.deletedItems.length
const passedItemCount = regOutJson.passedItems.length
const regBaseUrl = '<<reg-cli結果のhosting先のURL>>'
let comment = '';
if(newItemCount === 0 && diffItemCount === 0 && deletedItemCount === 0) {
comment = `[Visual Regression Test]
Storybook スクリーンショットに差分はありません :sparkles:
| :red_circle: Changed | :white_circle: New | :black_circle: Deleted | :large_blue_circle: Passing |
| --- | --- | --- | --- |
| ${diffItemCount} | ${newItemCount} | ${deletedItemCount} | ${passedItemCount} |
[レポート](${regBaseUrl}/${ACTUAL_KEY}/index.html)を確認してください。`
} else {
comment = `[Visual Regression Test]
Storybook スクリーンショットに差分があります :warning:
| :red_circle: Changed | :white_circle: New | :black_circle: Deleted | :large_blue_circle: Passing |
| --- | --- | --- | --- |
| ${diffItemCount} | ${newItemCount} | ${deletedItemCount} | ${passedItemCount} |
[レポート](${regBaseUrl}/${ACTUAL_KEY}/index.html)を確認してください。
- [ ] 差分に問題ないことを確認しました`
}
github.rest.issues.createComment({
owner: context.repo.owner,
repo: context.repo.repo,
issue_number: context.issue.number,
body: comment
});
後書き
- VRT自体は大変有用なものかと思うので、各現場での導入の際の一助になれば幸いです。
Discussion