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
26

Other Decks in Technology

See All in Technology
[TechNight #90-1] 本当に使える？ ZDMの 新機能を実践検証してみた
Avatar for oracle4engineer oracle4engineer
PRO
3
160
CI/CD/IaC 久々に0から環境を作ったらこうなりました
Avatar for Kaz Watanabe kaz29
1
150
Javaで作る RAGを活用した Q＆Aアプリケーション
Avatar for Recruit recruitengineers
PRO
1
100
GitHub Copilot の概要
Avatar for tomokusaba tomokusaba
1
130
ハノーバーメッセ2025座談会.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
160
UIテスト自動化サポート- Testbed for XCUIAutomation practice
Avatar for notoroid notoroid
0
130
生成AIでwebアプリケーションを作ってみた
Avatar for tajimon tajimon
2
140
_第3回__AIxIoTビジネス共創ラボ紹介資料_20250617.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
150
TechLION vol.41～MySQLユーザ会のほうから来ました / techlion41_mysql
Avatar for sakaik sakaik
0
170
20250623 Findy Lunch LT Brown
Avatar for Brown 3150
0
840
Navigation3でViewModelにデータを渡す方法
Avatar for mikan mikanichinose
0
220
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
Avatar for Masatoshi Shimada smdmts
5
610

Featured

See All Featured
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
69
11k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.1k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
233
17k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
2.9k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
16
940
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
8
670
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
35
2.3k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k

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