Slide 1

Slide 1 text

Storybook v7で取り組む フロントエンドテスト NALYSYSグループ 松本悠太郎

Slide 2

Slide 2 text

発表の目的? Storybook ・・・ ・・・・・・ Storybook書きたい!!!

Slide 3

Slide 3 text

Storybookとテスト ● VRT(Visual Regression Testing、画像回帰テスト) ○ UIの品質 ● インタラクションテスト ○ ユーザーとシステムの双方向性の品質 ● アクセシビリティテスト ○ どんな特徴を持った人でも同等に利用可能かの品質

Slide 4

Slide 4 text

VRT(Visual Regression Testing) ● UIの予期せぬ変化は検知しづらい ● 実装によるUIの差分を検出してくれる ○ 予期しないUIの変更に気付ける

Slide 5

Slide 5 text

インタラクションテスト ・入力 ・ボタンクリック

Slide 6

Slide 6 text

Play functionを利用したインタラクションテスト ● Story単位でplay関数を定義

Slide 7

Slide 7 text

Test runner ● Storyをテストとして実行 ● play関数がない場合、Storyがエラーなくレンダリングされるかを検証 ● play関数がある場合、play関数にエラーがないか(テストがpassするか)を 検証

Slide 8

Slide 8 text

カバレッジレポート ● Stmts:命令網羅率 ● Branch:分岐網羅率 ● Funcs:関数網羅率 ● Lines:行網羅率

Slide 9

Slide 9 text

アクセシビリティテスト(勉強中) ● 日本でもアクセシビリティが義務化される?? ○ 障害者差別解消法の改正( 2021年)と、施行(2024年4月)

Slide 10

Slide 10 text

最後に ● 今回発表するためにstorybookについて調べてみて、学習時間を投資する 価値は十分にあるのではと思いました。 ● 誰か一人のstorybookを書くモチベーション向上につながっていたら嬉しい です。

Slide 11

Slide 11 text

ご清聴ありがとうございました。