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
AX時代の自治体支援リソース再配分と役割分担の再構成：戦略とロードマップ（概要）
Avatar for Sayaka Isizuka sishi2026
0
200
コードレビューをなくして見えたもの
Avatar for henteko henteko
0
140
Kiro IDE 入門 (画面の各部から、頼み方、任せ方、戻し方まで) | 目指せ Kiro マスター 02
Avatar for Riku INADA inariku
PRO
4
140
Kiro Crew の Bot (続く役目を任せる窓口) | 目指せ Kiro マスター 12
Avatar for Riku INADA inariku
PRO
2
320
プロダクションコードにおける encoding/json から encoding/json/v2 へのスムーズな移行
Avatar for SansanTech sansantech
PRO
1
200
IoTとは〜？ 数字で見るSORACOM UG【SORACOM UG Explorer 2026】
Avatar for SORACOM（ソラコム） soracom
PRO
0
330
AWS Quick 入門 | 目指せ Quick マスター 01
Avatar for Riku INADA inariku
PRO
2
210
AIコーディングはじめました
Avatar for 田中みそ miso
0
160
DBTS2026 盛り上がってますか！？Databricksが実現するAI時代のデータ基盤
Avatar for Akihiro Kuwano akuwano
1
190
GCASアップデート（202607-202610）
Avatar for 高橋広和 techniczna
1
240
Microsoft Entra Kerberos で実現するクラウド デバイス管理
Avatar for tamaiyutaro tamaiyutaro
2
650
長い仕事を任せる (Workflows、クラウドセッション、Kiro Web) | 目指せ Kiro マスター 10
Avatar for Riku INADA inariku
PRO
3
130

Featured

See All Featured
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
409
67k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
203
77k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
7.1k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
1
600
BBQ
Avatar for Matthew Crist matthewcrist
90
10k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
380
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.8k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2.2k
[Rails World 2026] Durable orchestration on Rails: from continuation to workflow
Avatar for Vladimir Dementyev palkan
3
1.2k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k

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