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

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

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for LINE Developers Taiwan LINE Developers Taiwan PRO
June 19, 2024
Technology
2.6k
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
真理大學資工系企業參訪
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
6
Zona Hello World AIDD PPT
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
440
Evan 2026-09-12 國立臺中科技大學 x LINE PROTOSTAR 創新創業競賽- LINE 技術應用說明
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
420
Evan 2026-09-12 國立臺中科技大學 x LINE PROTOSTAR 創新創業競賽- LINE API應用介紹
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
400
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
410
台大資管營企業參訪-Bowen Chen
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
170
2026TECHFRESH畢業分享會 - AI 時代的人生存檔點
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
3.5k
2026TECHFRESH畢業分享會 - 原生還是跨平台? App 開發踩坑實錄
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
3.5k

Other Decks in Technology

See All in Technology
サボる子はいねぇがー！AgentCoreハーネスの脆弱性に学ぶ、エージェントの入力バリデーション
Avatar for iwamot iwamot
PRO
5
310
詳解 never 型 - ボトム型の性質を深掘り
Avatar for Nealle nealle
0
160
Gifu WordPress Meetup #200 に向けて、私たちには何ができるだろうか？/ 2026-11-07 Gifu WordPress Meetup
Avatar for Toro_Unit (Hiroshi Urabe) torounit
0
230
Kiro 入門 (1 つのエージェントを、どの画面からでも) | 目指せ Kiro マスター 01
Avatar for Riku INADA inariku
PRO
6
1.3k
レガシーコードに対する loop engineering的なAI開発プロセス導入について
Avatar for kubell kubell_hr
0
280
[JAWS Festa 2026]一番いい仕事は、請求書に現れない / jawsfesta2026
Avatar for sh_fk2 sh_fk2
2
410
TSKaigi Sendai 2026 - tsgo時代のTypeScript Playgroundはどう動くか
Avatar for teamLab teamlab
PRO
0
110
業務でAWSをあまり使っていない私が、AWSへのモチベを保つ方法
Avatar for Makky12 smt7174
0
180
Agent Harnessはどう作る？事例から学ぶAI Agentの設計思想
Avatar for sergicalsix sergicalsix
0
170
内製アプリとClaudeスキルのセキュリティチェック、 Backlogの課題で回しています。
Avatar for Ayaka ayaka_egaaa
0
160
プロダクションコードにおける encoding/json から encoding/json/v2 へのスムーズな移行
Avatar for SansanTech sansantech
PRO
1
200
AI時代に求められる優秀なTechLeadの振る舞い
Avatar for pospome pospome
11
15k

Featured

See All Featured
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
7.2k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
5
5.7M
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
3
3.9k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
800
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.7k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
460
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
250
1.3M
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
480
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
20k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
7.1k

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