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
1k
寫出不管地震怎麼搖 網站都不會壞的前端測試
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
iOS Live Activity: Opportunities & Challenges
line_developers_tw
PRO
0
2
掌握 Feature Toggle 與 OpenFeature 規範
line_developers_tw
PRO
0
100
用 AI 和 LINE Bot 簡化生活:讓圖片告訴你何時該忙!-- LINE 工作坊
line_developers_tw
PRO
0
490
Scaling The E-Commerce Recommendation System
line_developers_tw
PRO
0
20
Enhanced EC Recommendations: Trustworthy Validation with Large Language Models for Two-Tower Model
line_developers_tw
PRO
0
10
揭秘LLMOps: 讓LLM服務像火箭 般穩定高效的祕密!
line_developers_tw
PRO
0
52
ML Life Cycle for LINE SHOPPING Recommender
line_developers_tw
PRO
0
13
Review AI from LINE EC NLP
line_developers_tw
PRO
0
9
LINE購物 App x ATDD: 利用 ATDD 改善開發流程
line_developers_tw
PRO
0
33
Other Decks in Technology
See All in Technology
Brakeman を欺く - Kashiwa.rb #4
kozy4324
1
120
WebRTC と Wasm の関係を振り返ってみた
tetter27
0
230
インシデント対応の 実践と品質文化の醸成
____rina____
2
1.4k
日経ビジュアルデータにおける スクロールテリングと地図/nikkei-tech-talk-26
nikkei_engineer_recruiting
0
150
S3上のログを分析したいだけなのに
mitsuo_sys
1
150
WINTICKETアプリで実現した高可用性と高速リリースを支えるエコシステム / winticket-eco-system
cyberagentdevelopers
PRO
1
130
Aurora_BlueGreenDeploymentsやってみた
tsukasa_ishimaru
1
110
Databricksワークショップ - 生成AIとDWH
taka_aki
2
4.5k
Mobbing Practices
kawaguti
PRO
2
290
Data Migration on Rails
ohbarye
6
3.4k
API開発健全性 〜 持続可能で高品質なAPIのためのアプローチ 〜
nagix
2
210
Emacs x Nostr
hakkadaikon
1
110
Featured
See All Featured
It's Worth the Effort
3n
183
27k
Optimising Largest Contentful Paint
csswizardry
32
2.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
13
1.9k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
4 Signs Your Business is Dying
shpigford
180
21k
Designing for Performance
lara
604
68k
Designing for humans not robots
tammielis
249
25k
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