Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for LINE Developers Taiwan LINE Developers Taiwan PRO
June 19, 2024
Technology
2.5k
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
Zona Hello World AIDD PPT
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
340
Evan 2026-09-12 國立臺中科技大學 x LINE PROTOSTAR 創新創業競賽- LINE 技術應用說明
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
350
Evan 2026-09-12 國立臺中科技大學 x LINE PROTOSTAR 創新創業競賽- LINE API應用介紹
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
330
Zona Codex Community Meetup 分享
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
1.4k
Evan & Zona COSCUP 2026 分享
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
340
台大資管營企業參訪-Bowen Chen
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
140
2026TECHFRESH畢業分享會 - AI 時代的人生存檔點
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
3.4k
2026TECHFRESH畢業分享會 - 原生還是跨平台? App 開發踩坑實錄
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
3.4k
2026TECHFRESH畢業分享會 - 葬送的通靈師：化系統與用戶雜訊成行動訊號
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
3.2k

Other Decks in Technology

See All in Technology
AIカンパニーへの転換を支えた、エンジニアの仕事の再定義
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
2
1.2k
Webの常識が通じないHTMLメールのダークモード
Avatar for teamLab teamlab
PRO
0
120
1つのリクエストを追って理解する - llm-dのP/D分離
Avatar for akhino akhino
1
160
Kiro Crewをはじめよう
Avatar for t.kizawa kizawa2020
1
160
PagerDuty Tech Hub-鳴らすけれど、人は動かない
Avatar for shinji ezaki ezaki
0
170
AI時代のPRレビューにどう向き合うか？
Avatar for KairiM kairim0
1
240
V8のArray.prototype.flatを最大約20倍速くするまでと、巨大OSSへの大規模コミットの道のり
Avatar for Riya Amemiya riyaamemiya
0
290
今さら理解するウェブフォントver.2026
Avatar for takanorip takanorip
3
810
Temporal 最高!でも改めて「日付」について調べたら人類の負債すぎる件
Avatar for Riya Amemiya riyaamemiya
0
150
DWH の限界突破！ AI エージェント向け爆速リアルタイムデータ基盤 ClickHouse
Avatar for jozono jozono
1
480
OptunaHub: ブラックボックス最適化のためのプラットフォーム
Avatar for Preferred Networks pfn
PRO
0
140
二歩目のフロントエンド・ウェブアクセシビリティ
Avatar for KAMIHARA Takumi camiha
2
620

Featured

See All Featured
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
410
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
360
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
brightonSEO & MeasureFest 2025 - Winning Strategies for Black Friday CRO & PPC - Christian Goodrich
Avatar for Christian Goodrich cargoodrich
3
870
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
2
720
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
540
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
600
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.9k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.8k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
630
Test your architecture with Archunit
Avatar for Yoan thirion
2
2.4k

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