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
掌握 Feature Toggle 與 OpenFeature 規範
line_developers_tw
PRO
0
69
用 AI 和 LINE Bot 簡化生活:讓圖片告訴你何時該忙!-- LINE 工作坊
line_developers_tw
PRO
0
360
Scaling The E-Commerce Recommendation System
line_developers_tw
PRO
0
17
Enhanced EC Recommendations: Trustworthy Validation with Large Language Models for Two-Tower Model
line_developers_tw
PRO
0
8
揭秘LLMOps: 讓LLM服務像火箭 般穩定高效的祕密!
line_developers_tw
PRO
0
45
ML Life Cycle for LINE SHOPPING Recommender
line_developers_tw
PRO
0
12
Review AI from LINE EC NLP
line_developers_tw
PRO
0
7
LINE購物 App x ATDD: 利用 ATDD 改善開發流程
line_developers_tw
PRO
0
30
Grafana Alloy Best Practice
line_developers_tw
PRO
0
3.7k
Other Decks in Technology
See All in Technology
サーバレスで挑む IoT プロジェクトの現実解 / Real solutions for the IoT project using serverless service
genkiogasawara
1
130
人工衛星開発のための C2A フレームワークとその開発体験
sksat
0
110
v-modelの歩みを振り返る
bengo4com
5
2.4k
データ分析基盤のためにS3を深堀りする~アーキテクチャ設計の考え方のヒントに~
nrinetcom
PRO
1
770
Delta Commit…の最近...
akuwano
2
130
20241015 Toranomon Tech Hub#1 Service Catalog使ってみた
hiashisan
0
230
複数の外部サービスデータの統合と変換を実現する Railsのインポートアーキテクチャ / Rails import architecture for integration and transformation of multiple external service data
aiandrox
0
340
外部カンファレンスで登壇しよう! 〜「強い」エンジニアへの一歩を踏み出す〜
logica0419
4
140
JPOUG_10_20241018_OracleDB_AWS_v1.3.pdf
asahihidehiko
1
190
運営11年目タイトルを守る最強の盾の有効性と活用法
mixi_engineers
PRO
2
120
RAG: from dumb implementation to serious results
glaforge
0
670
寒冷地稲作の歴史にみるコミュニティ
miu_crescent
2
140
Featured
See All Featured
Visualization
eitanlees
143
15k
Being A Developer After 40
akosma
85
590k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
41
9.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
The Invisible Side of Design
smashingmag
297
50k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Making Projects Easy
brettharned
115
5.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
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