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アカウント
June 30, 2023
Technology
0
3.8k
Storybook v7で取り組む フロントエンドテスト
Storybook v7で取り組む フロントエンドテスト
レバレジーズTechアカウント
June 30, 2023
Tweet
Share
More Decks by レバレジーズTechアカウント
See All by レバレジーズTechアカウント
Step by Stepで学ぶ、ADT(代数的データ型)、モナドからEffect-TSまで
leveragestech
1
3.1k
TypescriptでのContextualな構造化ロギングと社内全体への導入
leveragestech
3
590
デザインシステム基盤構築実践
leveragestech
1
2.4k
荒廃したテックブログの再生_技術広報LT大会
leveragestech
5
5.6k
文系大学生と学び考える開発生産性
leveragestech
1
28
「マイクロサービスアーキテクチャ」と「アーキテクチャ特性」で読み解くレバテックのこれまでとこれから
leveragestech
0
58
社内共通ルールを値オブジェクトにして社内ライブラリとして運用してみた話
leveragestech
7
3.1k
Effect-TSを利用した副作用を分離する設計について
leveragestech
0
1.3k
マネジメント未経験の脳筋が開発チームのリーダーになって感じた苦悩と学び
leveragestech
0
91
Other Decks in Technology
See All in Technology
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
130
Domain-driven Design: A Complete Example
ewolff
2
260
能動学習のいろは:書籍「Human-in-the-Loop機械学習」3〜5章
hiroyoshiito
0
290
My road to OSEE Part1
yunolay
0
110
「できる!」を増やすGitHub Copilot活用法 / How to use GitHub Copilot to expand your possibilities
sansan_randd
1
240
5分で分かる(かもしれない) Vector engine for OpenSearch Serverless
tsukuboshi
1
410
Databricksの生成AI戦略
taka_aki
1
370
AWS CLIの起動が重くてつらいので aws-sdk-client-go を書いた / kamakura.go#6
fujiwara3
6
3.3k
[PyconUS 2024] Having fun with Pydantic and pattern matching
enforcerpl
0
180
開発スピードの維持向上を支える、テスト設計の 漸進的進化への取り組み / Continuous Test Design Development for Speed of Product Development
ropqa
0
180
エンジニアゼロの組織から内製開発の DX をどう実現したのか / How did we achieve DX in in-house development in an organization with zero engineers?
genkiogasawara
7
3k
CockroachDB はどのくらい「しぶとい」のか? / How tough is CockroachDB?
kota2and3kan
13
4.9k
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
306
41k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
Designing Experiences People Love
moore
136
23k
Designing with Data
zakiwarfel
96
4.8k
What the flash - Photography Introduction
edds
64
11k
Git: the NoSQL Database
bkeepers
PRO
423
63k
Writing Fast Ruby
sferik
622
60k
GitHub's CSS Performance
jonrohan
1025
450k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.3k
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を書くモチベーション向上につながっていたら嬉しい です。
ご清聴ありがとうございました。