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
5.2k
Storybook v7で取り組む フロントエンドテスト
Storybook v7で取り組む フロントエンドテスト
Tech Leverages
June 30, 2023
Tweet
Share
More Decks by Tech Leverages
See All by Tech Leverages
古き良き Laravel のシステムは関数型スタイルでリファクタできるのか
leveragestech
1
870
リファクタリングいつやるの? 〜依存の整理〜
leveragestech
0
73
ディメンショナルモデリングを軽く語る
leveragestech
1
3.4k
アクターモデルによる効率的な分散システム設計
leveragestech
0
3.3k
Terraform による運用効率化の取り組みと最新のテストアプローチの紹介
leveragestech
0
3.3k
OpenFGAで拓く次世代認可基盤 〜予告編〜
leveragestech
0
3.3k
リソース・管理効率の向上だけでない、分散システムとしてのTiDBの魅力
leveragestech
0
3.3k
作ってわかる!非同期ランタイム
leveragestech
0
3.3k
レバテック開発部 技術広報 これまでとこれから
leveragestech
0
170
Other Decks in Technology
See All in Technology
AI とペアプロしてわかった 3 つのヒューマンエラー
takahiroikegawa
1
630
Tenstorrent 開発者プログラム
tenstorrent_japan
0
290
ゆるSRE #11 LT
okaru
1
550
やさしい認証認可
minorun365
PRO
29
11k
データベースの引越しを Ora2Pg でスマートにやろう
jri_narita
0
190
OpenTelemetry Collector internals
ymotongpoo
5
500
AWS と定理証明 〜ポリシー言語 Cedar 開発の舞台裏〜 #fp_matsuri / FP Matsuri 2025
ytaka23
8
2.1k
脅威をモデリングしてMCPのセキュリティ対策を考えよう
flatt_security
4
920
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
48
33k
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.3k
kotlin-lsp を Emacs で使えるようにしてみた / use kotlin-lsp in Emacs
nabeo
0
120
vLLM meetup Tokyo
jpishikawa
1
130
Featured
See All Featured
KATA
mclloyd
29
14k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Code Reviewing Like a Champion
maltzj
524
40k
Why Our Code Smells
bkeepers
PRO
337
57k
A better future with KSS
kneath
239
17k
The Language of Interfaces
destraynor
158
25k
Code Review Best Practice
trishagee
68
18k
Practical Orchestrator
shlominoach
188
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
A designer walks into a library…
pauljervisheath
206
24k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
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を書くモチベーション向上につながっていたら嬉しい です。
ご清聴ありがとうございました。