Storybook v7で取り組む フロントエンドテスト
by
Tech Leverages
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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
ご清聴ありがとうございました。