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
0
1.9k

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

Speaker: YU Chen
Event: LINE TECH FRESH 畢業分享會
Avatar for LINE Developers Taiwan

LINE Developers Taiwan
PRO

June 19, 2024
Tweet

More Decks by LINE Developers Taiwan

See All by LINE Developers Taiwan
菸酒生在 LINE Taiwan 的後端雙刀流
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
1.1k
讓測試不再 BB！ 從 BDD 到 CI/CD， 不靠人力也能 MVP
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
1.1k
DB 醬，嗨！哪泥嘎斯基？
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
1.1k
比起獨自升級 我更喜歡 DevOps 文化 <3
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
1.1k
工具人的一生: 開發很多 AI 工具讓我 慵懶過一生
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
1.1k
從四件事帶你見識見識 事件驅動架構設計 (EDA)
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
1k
TODAY 看世界(?) 是我們在看扣啦！
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
1.1k
你想成為什麼樣的開發者？
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
25
研究生的 LINER生活
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
27

Other Decks in Technology

See All in Technology
Model Mondays S2E02: Model Context Protocol
Avatar for Nitya Narasimhan, PhD nitya
0
220
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
Avatar for K.Osawa kkuv
1
310
Amazon Bedrockで実現する 新たな学習体験
Avatar for Kazuki Maeda kzkmaeda
2
580
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
Avatar for Shun Yoshie syoshie
2
1.1k
フィンテック養成勉強会#54
Avatar for フィンテック養成コミュニティ finengine
0
180
あなたの声を届けよう！ 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
Avatar for kondoyuko kondoyuko
4
460
エンジニア向け技術スタック情報
Avatar for 株式会社カウシェ kauche
1
260
セキュリティの民主化は何故必要なのか_AWS WAF 運用の 10 の苦悩から学ぶ
Avatar for Yoichi Satake (Yoh) yoh
1
170
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
Avatar for hiro-torii hiro_torii
0
130
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
Avatar for Masatoshi Shimada smdmts
5
640
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
Avatar for nwiizo nwiizo
4
2k
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
Avatar for k.goto gotok365
6
770

Featured

See All Featured
Scaling GitHub
Avatar for Zach Holman holman
459
140k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
8
670
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.6k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.4k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
207
24k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
357
30k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.7k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.3k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.6k

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