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

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

Avatar for LINE Developers Taiwan LINE Developers Taiwan PRO
June 19, 2024
Technology
2.2k
0

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

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

Avatar for LINE Developers Taiwan

LINE Developers Taiwan PRO

June 19, 2024

More Decks by LINE Developers Taiwan

See All by LINE Developers Taiwan
20260514 - build with ai 2026 - build LINE Bot with Gemini CLI
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
150
2026.04.09_台灣客服協會_從資料重新理解客服_ Charlie Wang
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
35
Zona 台北大學 GDG 分享
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
55k
台大資料分析與決策社 機器學習的商業應用＿Rei
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
23
政大數據分析社 機器學習的商業應用_Rei
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
51
Gemini 2025 新功能回顧 LINE Bot 完美結合
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
600
NTUAI企業參訪
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
19k
Data TECH FRESH企業參訪- Amber
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
42k
Data Team 實習分享
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
34k

Other Decks in Technology

See All in Technology
GitHub Copilot CLI と VS Code Agent Mode の使い分け
Avatar for tomokusaba tomokusaba
0
140
データモデリング通り #5オンライン勉強会： AIに『ビジネスの文脈』を教え込むデータモデリング
Avatar for データ横丁 datayokocho
0
170
巨大プラットフォームを進化させる「第3のROI」
Avatar for Recruit recruitengineers
PRO
2
2.5k
雑談は、センサーだった
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
2
200
20260428_Product Management Summit_tadokoroyoshiro
Avatar for tadokoro_yoshiro tadokoro_yoshiro
15
18k
自動テストだけで
リリース判断できるチームへ - 鍵はテストの量ではなくリリース判断基準の再設計にあった / Redesigning Release Criteria for Lightweight Releases
Avatar for えわ ewa
7
3.5k
AI時代の品質はテストプロセスの作り直し #scrumniigata
Avatar for kyonmm kyonmm
PRO
4
1.4k
ServiceによるKubernetes通信制御ーClusterIPを例に
Avatar for 周学勤（Zhou Xueqin） miku01
1
150
サービスの信頼性を高めるため、形骸化した「プロダクションミーティング」を立て直すまでの取り組み
Avatar for すてにゃん stefafafan
1
250
AIエージェントの支払い基盤　AgentCore Payments概要
Avatar for たけのこ kmiya84377
1
130
AIと乗り切った1,500ページ超のヘルプサイト基盤刷新とさらにその先の話
Avatar for mugi / Hajime Mugishima mugi_uno
2
310
Forget technical debt
Avatar for Uwe Friedrichsen ufried
0
170

Featured

See All Featured
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.4k
Design in an AI World
Avatar for tapps tapps
1
210
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.7k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
52k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.4k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
190
Designing for Performance
Avatar for Lara Hogan lara
611
70k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k

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