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.7k

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

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
#Rookie’s Adventure: A 0 to 1 Dev Journey
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
11
LINE 購物幕後推手
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
510
從校園到職場 我的實習旅程
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
110
探索數據未來
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
16
MLE 的修煉之路
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
87
LINE 實習分享 & 國際黑客松參賽分享
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
46
在 GCP 運用 Parse 全家餐 管理那堆 AI 應用的資料
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
39
40歲的我會給20歲的自己，關於軟體開發的7個建議
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
9.6k
從零到一： 轉碼仔的實習攻略
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
71

Other Decks in Technology

See All in Technology
既存の開発資産を活かしながら、 《新規開発コスト抑制》と《開発体験向上》 を両立する拡張アーキテクチャ事例
Avatar for kubell kubell_hr
0
190
正式リリースされた Semantic Kernel の Agent Framework 全部紹介！
Avatar for Kazuki okazuki
1
1.1k
MCP でモノが動くとおもしろい/It is interesting when things move with MCP
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
2
520
問 1：以下のコンパイラを証明せよ（予告編） #kernelvm / Kernel VM Study Kansai 11th
Avatar for y_taka_23 ytaka23
3
540
Computer Use〜OpenAIとAnthropicの比較と将来の展望〜
Avatar for PharmaX（旧YOJO Technologies）開発チーム pharma_x_tech
6
1k
続・やっぱり余白が大切だった話
Avatar for KAKEHASHI kakehashi
PRO
3
320
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
7
64k
TanStack Start 技術選定の裏側 / Findy-Lunch-LT-TanStack-Start
Avatar for Takahiro Ikeuchi iktakahiro
1
130
Асинхронная коммуникация в Go: от понятного к душному. Дима Некрасов, Otello, 2ГИС
Avatar for Lamoda Tech lamodatech
0
2.1k
技術選定を突き詰める 懇親会LT
Avatar for Kaoru okaru
1
520
Ninno LT
Avatar for Yasunobu Kawaguchi kawaguti
PRO
1
120
Coding Agentに値札を付けろ
Avatar for watany watany
3
490

Featured

See All Featured
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
368
19k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
47
2.7k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
54
5.5k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
800
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
81
9k
Fireside Chat
Avatar for paigeccino paigeccino
37
3.4k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
120
52k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
271
27k

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