Upgrade to Pro — share decks privately, control downloads, hide ads and more …

寫出不管地震怎麼搖 網站都不會壞的前端測試

LINE Developers Taiwan
PRO
June 19, 2024
Technology
0
1.1k

寫出不管地震怎麼搖 網站都不會壞的前端測試

Speaker: YU Chen
Event: LINE TECH FRESH 畢業分享會

LINE Developers Taiwan
PRO

June 19, 2024
Tweet

More Decks by LINE Developers Taiwan

See All by LINE Developers Taiwan
如何在團隊發揮數據影響力: 以電商資料科學家為例
line_developers_tw
PRO
1
27
做Data超讚的 誰懂？
line_developers_tw
PRO
0
14
iOS Live Activity: Opportunities & Challenges
line_developers_tw
PRO
1
84
掌握 Feature Toggle 與 OpenFeature 規範
line_developers_tw
PRO
0
160
用 AI 和 LINE Bot 簡化生活： 讓圖片告訴你何時該忙！-- LINE 工作坊
line_developers_tw
PRO
0
620
Scaling The E-Commerce Recommendation System
line_developers_tw
PRO
0
28
Enhanced EC Recommendations: Trustworthy Validation with Large Language Models for Two-Tower Model
line_developers_tw
PRO
0
12
揭秘LLMOps: 讓LLM服務像火箭 般穩定高效的祕密!
line_developers_tw
PRO
0
69
ML Life Cycle for LINE SHOPPING Recommender
line_developers_tw
PRO
0
17

Other Decks in Technology

See All in Technology
ハイパーパラメータチューニングって何をしているの
toridori_dev
0
140
【若手エンジニア応援LT会】ソフトウェアを学んできた私がインフラエンジニアを目指した理由
kazushi_ohata
0
150
CysharpのOSS群から見るModern C#の現在地
neuecc
2
3.2k
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
310
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
dev 補講: プロダクトセキュリティ / Product security overview
wa6sn
1
2.3k
SREによる隣接領域への越境とその先の信頼性
shonansurvivors
2
520
Why App Signing Matters for Your Android Apps - Android Bangkok Conference 2024
akexorcist
0
120
OCI Security サービス 概要
oracle4engineer
PRO
0
6.5k
安心してください、日本語使えますよ―Ubuntu日本語Remix提供休止に寄せて― 2024-11-17
nobutomurata
1
990
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
0
110
TanStack Routerに移行するのかい しないのかい、どっちなんだい！ / Are you going to migrate to TanStack Router or not? Which one is it?
kaminashi
0
580

Featured

See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Gamification - CAS2011
davidbonilla
80
5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Designing the Hi-DPI Web
ddemaree
280
34k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
The World Runs on Bad Software
bkeepers
PRO
65
11k
How to Ace a Technical Interview
jacobian
276
23k
We Have a Design System, Now What?
morganepeng
50
7.2k

Transcript

  1. 寫出不管地震怎麼搖 網站都不會壞的前端測試

  2. YU Content Dev TECH FRESH 北科資⼯ 圖片來源：LINE CREATIVE、LINE SPOT

  3. 越⾼的 Code Coverage 越好的 程式碼品質 === ?

  4. 什麼是 Code Coverage？

  5. 什麼是 Code Coverage？

  6. 什麼是 Code Coverage？

  7. 什麼是 Code Coverage？

  8. 什麼是 Code Coverage？

  9. 100% 的 Coverage !== 沒有 Bug

  10. 100% 的 Coverage !== 沒有 Bug

  11. 100% 的 Coverage !== 沒有 Bug

  12. 只看 Coverage 想要測什麼不好嗎？

  13. 1 不會涵蓋到 所有的 Use case 只看 Coverage 想要測什麼不好嗎？ 2 會變成在測實作

    ⽽不是在測功能

  14. 那我們應該要怎麼決定要測什麼呢？

  15. 那我們應該要怎麼決定要測什麼呢？ ⽤使⽤者會遇到的 使⽤情境（Use Cases）去想要寫哪些測試 當測試的⽅式越接近使⽤者使⽤的⽅式 就能讓我們對程式的正確性越有信⼼

  16. 程式會遇到的兩種使⽤者

  17. 1 Developer User 程式會遇到的兩種使⽤者 2 End User

  18. Developer User 會有的使⽤情境 l 傳入對應的參數時程式應該怎麼運作 l 當不同的 Side Effect 產⽣時程式應該

    怎麼運作

  19. End User 會有的使⽤情境 l 應該看到什麼樣的 UI l 跟某個 UI 互動後會看到什麼結果

  20. 可以幫助我們想出 Use Case 的⽅法

  21. 1 設計稿中的 User Flow & 需求⽅開的需求 可以幫助我們想出 Use Case 的⽅法

    2 從寫 E2E 測試 的⾓度去想 3 看 Code Coverage 沒有覆蓋到的地⽅

  22. Thank you! yu2001 @justYu2001 圖片來源：Discord、 WIKIPEDIA