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
寫出不管地震怎麼搖網站都不會壞的前端測試
Search
LINE Developers Taiwan
PRO
June 19, 2024
Technology
0
1.3k
寫出不管地震怎麼搖 網站都不會壞的前端測試
Speaker: YU Chen
Event: LINE TECH FRESH 畢業分享會
LINE Developers Taiwan
PRO
June 19, 2024
Tweet
Share
More Decks by LINE Developers Taiwan
See All by LINE Developers Taiwan
LINE 實習分享 & 國際黑客松參賽分享
line_developers_tw
PRO
0
21
在 GCP 運用 Parse 全家餐管理那堆 AI 應用的資料
line_developers_tw
PRO
0
24
40歲的我會給20歲的自己,關於軟體開發的7個建議
line_developers_tw
PRO
0
7.7k
從零到一:轉碼仔的實習攻略
line_developers_tw
PRO
0
39
如何在團隊發揮數據影響力: 以電商資料科學家為例
line_developers_tw
PRO
1
47
做Data超讚的 誰懂?
line_developers_tw
PRO
0
36
iOS Live Activity: Opportunities & Challenges
line_developers_tw
PRO
1
120
掌握 Feature Toggle 與 OpenFeature 規範
line_developers_tw
PRO
0
240
用 AI 和 LINE Bot 簡化生活:讓圖片告訴你何時該忙!-- LINE 工作坊
line_developers_tw
PRO
0
770
Other Decks in Technology
See All in Technology
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
1.5k
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
2
120
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
170
一度 Expo の採用を断念したけど、 再度 Expo の導入を検討している話
ichiki1023
1
250
表現を育てる
kiyou77
1
230
エンジニアが加速させるプロダクトディスカバリー 〜最速で価値ある機能を見つける方法〜 / product discovery accelerated by engineers
rince
4
510
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
110
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
実は強い 非ViTな画像認識モデル
tattaka
1
810
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
4
1.5k
株式会社EventHub・エンジニア採用資料
eventhub
0
4.3k
プロダクトエンジニア 360°フィードバックを実施した話
hacomono
PRO
0
130
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
How GitHub (no longer) Works
holman
314
140k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
500
Side Projects
sachag
452
42k
Docker and Python
trallard
44
3.3k
A better future with KSS
kneath
238
17k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
980
Transcript
寫出不管地震怎麼搖 網站都不會壞的前端測試
YU Content Dev TECH FRESH 北科資⼯ 圖片來源:LINE CREATIVE、LINE SPOT
越⾼的 Code Coverage 越好的 程式碼品質 === ?
什麼是 Code Coverage?
什麼是 Code Coverage?
什麼是 Code Coverage?
什麼是 Code Coverage?
什麼是 Code Coverage?
100% 的 Coverage !== 沒有 Bug
100% 的 Coverage !== 沒有 Bug
100% 的 Coverage !== 沒有 Bug
只看 Coverage 想要測什麼不好嗎?
1 不會涵蓋到 所有的 Use case 只看 Coverage 想要測什麼不好嗎? 2 會變成在測實作
⽽不是在測功能
那我們應該要怎麼決定要測什麼呢?
那我們應該要怎麼決定要測什麼呢? ⽤使⽤者會遇到的 使⽤情境(Use Cases)去想要寫哪些測試 當測試的⽅式越接近使⽤者使⽤的⽅式 就能讓我們對程式的正確性越有信⼼
程式會遇到的兩種使⽤者
1 Developer User 程式會遇到的兩種使⽤者 2 End User
Developer User 會有的使⽤情境 l 傳入對應的參數時程式應該怎麼運作 l 當不同的 Side Effect 產⽣時程式應該
怎麼運作
End User 會有的使⽤情境 l 應該看到什麼樣的 UI l 跟某個 UI 互動後會看到什麼結果
可以幫助我們想出 Use Case 的⽅法
1 設計稿中的 User Flow & 需求⽅開的需求 可以幫助我們想出 Use Case 的⽅法
2 從寫 E2E 測試 的⾓度去想 3 看 Code Coverage 沒有覆蓋到的地⽅
Thank you! yu2001 @justYu2001 圖片來源:Discord、 WIKIPEDIA