@sutech_jp/ui-lib

SuTech UI Library

jestによる単体テスト

起動方法

すべての単体テスト実行

npm run test

CI上で実行可能なテストのみ実行

npm run test -- -t '^CI:'

テストレポート

Jestテストレポート

./test-report/test-report.html

カバレッジ

```./coverage/lconv-report/index.html`

StorybookによるUIテスト

https://storybook.js.org/

起動方法

npm run storybook

コマンド実行時にURLが表示されるのでそれにアクセス可能。

Test-runner

Storyの描画結果、またはInteraction testの実行結果にエラーがないかを確認するために、Test runnerの仕組みが用意されている。

手順

1. Storybookのstatic版の出力

npm run build-storybook

2. Test runnerの実行(4分以上かかります)

npm run test-storybook:ci

3. カバレッジレポートの作成

npm run test-storybook:coverage-report

レポートの確認

• テストレポート
  • test-report/test-report.html
• カバレッジレポート
  • coverage/storybook/lcov-report/index.html

Visual test

https://storybook.js.org/docs/react/writing-tests/visual-testing

Storybookでコンポーネントの各Storyをブラウザで描画した際のスクリーンショット画像をImageSnapshotと呼ぶ。 コンポーネントに修正を加えた際に、前バージョンのImageSnapshotと比較し描画結果に差分がないかを確認するテストをVisual testと呼ぶ。

Visual testの手順と実行するスクリプトは以下の通り。

※以下の手順ではDockerが必要。

1: ベースラインの作成

コンポーネントの現時点のレンダリング結果を正としてImageSnapshotを生成する。 こちらのImageSnapshotはgitリポジトリにコミットし、今後のVisual testで比較対象として扱う。

1. Storybookのstatic版を出力する

npm run build-storybook

2. 現時点の全てのStoryについてImageSnapshotを作成
   • ImageSnapshotは src/stories/__image_snapshots__/[コンポーネントのStory上のパス]/以下に出力される

./docker-scripts/visual-update.sh

3. ImageSnapshotをコミットする。これをベースラインとして扱う

Step1とStep2は以下のコマンドで実行可能

npm run visual-update

2: Visual testの実行

※事前にvisual-testディレクトリを削除しておいてください。

1. コンポーネントに修正を行う
2. Storybookのstatic版を出力する

npm run build-storybook

3. その修正が入ったImageSnapshotをコミット済みのImageSnapshotと比較し、差分があればテストエラーが発生する
   • ImageSnapshotの差分は visual-test/diff以下に出力される

./docker-scripts/visual-test.sh

差分に関してはvisual-test/report/report.htmlを開くことで詳細を確認できる。 4. 差分が不正なものであればVisual testが成功するまでコンポーネントを修正する。差分が正当なものであれば、新たなベースラインとしてImageSnapshotを作成する。

npm run build-storybook
./dockerscripts/visual-update.sh

5. ImageSnapshotをコミットする

Step2とStep3は以下のコマンドで実行可能

npm run visual-test

差分検知について

現状、比較対象画像と0.1%以上のピクセルの差が見られた場合に画像に差が発生したとみなしている。 差分検知のしきい値の指定は、visual-test.shにあるreg-cliの-Tオプションで指定している。

npx -y reg-cli /opt/work/visual-test/screenshots /opt/work/src/stories/screenshots /opt/work/visual-test/diff -R /opt/work/visual-test/report/report.html --json /opt/work/visual-test/report/reg.json -T 0.001

その他のしきい値指定方法はこちらを参照。

CircleCIによるテスト実行

設定ファイル

.circleci/config.ymlを参照してください。 ビルドジョブとして以下の3つが設定されています。

• unit-test
  • Jest単体テスト（CI実行可能なテストのみ）
• storybook-test
  • StorybookのTest-runnerの実行
• visual-test
  • StorybookのVisual Testの実行

パイプライン

https://app.circleci.com/pipelines/bb/sutech-jp/ui-lib

テスト結果のSlack通知

#notification_sutechにcircle-ciアプリから通知が届きます。 それぞれのビルドジョブごとに結果を通知し、CircleCIのOrganizationのsutech-jpに所属していればそれぞれのレポートファイルが閲覧できます。