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.4k
Storybook v7で取り組む フロントエンドテスト
Storybook v7で取り組む フロントエンドテスト
レバレジーズTechアカウント
June 30, 2023
Tweet
Share
More Decks by レバレジーズTechアカウント
See All by レバレジーズTechアカウント
デザインシステム基盤構築実践
leveragestech
1
1.9k
荒廃したテックブログの再生_技術広報LT大会
leveragestech
4
5.5k
文系大学生と学び考える開発生産性
leveragestech
1
27
「マイクロサービスアーキテクチャ」と「アーキテクチャ特性」で読み解くレバテックのこれまでとこれから
leveragestech
0
49
社内共通ルールを値オブジェクトにして社内ライブラリとして運用してみた話
leveragestech
7
2.9k
Effect-TSを利用した副作用を分離する設計について
leveragestech
0
760
マネジメント未経験の脳筋が開発チームのリーダーになって感じた苦悩と学び
leveragestech
0
79
モノリス改善史~運用改善とバージョンアップの軌跡~
leveragestech
0
28
CREって何? CREが生まれた背景と、自社の事例
leveragestech
0
54
Other Decks in Technology
See All in Technology
一生覚えておきたい「システム開発=コミュニケーション」〜初めての実務案件振り返りLT〜
maimyyym
2
320
R3のコードから見る実践LINQ実装最適化・コンカレントプログラミング実例
neuecc
3
2.5k
web-application-security
matsuihidetoshi
1
190
ルーターでプレゼンする
puhitaku
1
3.3k
Improve Your Development Workflow with Gemini Code Assist
meteatamel
0
130
データベース02: データベースの概念
trycycle
0
180
MixIT 2024 - Pulumi : Gérer son infra avec son langage de programmation préféré
ju_hnny5
1
120
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
15
35k
How to do well in consulting–Balkan Ruby 2024
irinanazarova
0
140
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
1k
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
4
610
One engineer company with Ruby on Rails
rstankov
2
430
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
30
6.4k
The Mythical Team-Month
searls
216
42k
For a Future-Friendly Web
brad_frost
172
9k
Building Applications with DynamoDB
mza
88
5.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
Designing Experiences People Love
moore
136
23k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Docker and Python
trallard
35
2.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Code Review Best Practice
trishagee
56
15k
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を書くモチベーション向上につながっていたら嬉しい です。
ご清聴ありがとうございました。