Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Storybook v7で取り組む フロントエンドテスト
Search
Tech Leverages
June 30, 2023
Technology
0
4.1k
Storybook v7で取り組む フロントエンドテスト
Storybook v7で取り組む フロントエンドテスト
Tech Leverages
June 30, 2023
Tweet
Share
More Decks by Tech Leverages
See All by Tech Leverages
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
640
FourKeysだけで開発生産性 は測れないと気付くまでの話
leveragestech
1
64
経営層を開発者体験向上にコミットさせる方法論 ~ Developer eXperience Day 2024 ~
leveragestech
2
150
いつPlatform Engineeringを始めるべきか?〜レバテックのケーススタディ〜 Platform Engineering Kaigi 2024
leveragestech
4
1.4k
TiDBは銀の弾丸になるのか? ~ レバテックの課題と新たな挑戦 ~ TiDB User Day 2024
leveragestech
2
520
大規模なORMバージョンアップ作業を 乗り越えた話
leveragestech
1
820
ももくり3年レコメンドエンジン5年
leveragestech
1
950
膨大なデータ活用のためのAmazon QuickSightを使った 技術構成
leveragestech
1
690
『VoLT』レバテックの デザインシステム ~電光石火の構築プロセスと目指す未来~
leveragestech
2
820
Other Decks in Technology
See All in Technology
20240724_cm_odyssey_hibiyatech
hiashisan
0
110
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
160
What if...? 처음부터 다시 LLM 어플리케이션을 개발한다면
huffon
0
1k
How to Think Like a Performance Engineer
csswizardry
4
590
AWSで”最小権限の原則”を実現するための考え方 /20240722-ssmjp-aws-least-privilege
opelab
10
4.4k
AIエージェントを現場に導入する目線とは
masahiro_nishimi
1
1.5k
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
Android研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
100
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
Azure AI ことはじめ
tsubakimoto_s
0
130
エンジニア向け会社紹介資料
caddi_eng
14
230k
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Documentation Writing (for coders)
carmenintech
63
4.2k
How GitHub (no longer) Works
holman
305
140k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Atom: Resistance is Futile
akmur
261
25k
Visualization
eitanlees
139
14k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
The World Runs on Bad Software
bkeepers
PRO
63
11k
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
How to train your dragon (web standard)
notwaldorf
79
5.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Transcript
Storybook v7で取り組む フロントエンドテスト NALYSYSグループ 松本悠太郎
発表の目的? Storybook ・・・ ・・・・・・ Storybook書きたい!!!
Storybookとテスト • VRT(Visual Regression Testing、画像回帰テスト) ◦ UIの品質 • インタラクションテスト ◦
ユーザーとシステムの双方向性の品質 • アクセシビリティテスト ◦ どんな特徴を持った人でも同等に利用可能かの品質
VRT(Visual Regression Testing) • UIの予期せぬ変化は検知しづらい • 実装によるUIの差分を検出してくれる ◦ 予期しないUIの変更に気付ける
インタラクションテスト ・入力 ・ボタンクリック
Play functionを利用したインタラクションテスト • Story単位でplay関数を定義
Test runner • Storyをテストとして実行 • play関数がない場合、Storyがエラーなくレンダリングされるかを検証 • play関数がある場合、play関数にエラーがないか(テストがpassするか)を 検証
カバレッジレポート • Stmts:命令網羅率 • Branch:分岐網羅率 • Funcs:関数網羅率 • Lines:行網羅率
アクセシビリティテスト(勉強中) • 日本でもアクセシビリティが義務化される?? ◦ 障害者差別解消法の改正( 2021年)と、施行(2024年4月)
最後に • 今回発表するためにstorybookについて調べてみて、学習時間を投資する 価値は十分にあるのではと思いました。 • 誰か一人のstorybookを書くモチベーション向上につながっていたら嬉しい です。
ご清聴ありがとうございました。