Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

LINE Developers Taiwan
PRO
June 19, 2024
Technology
0
670

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

Speaker: YU Chen
Event: LINE TECH FRESH 畢業分享會

LINE Developers Taiwan
PRO

June 19, 2024
Tweet

More Decks by LINE Developers Taiwan

See All by LINE Developers Taiwan
Scaling The E-Commerce Recommendation System
line_developers_tw
PRO
0
9
Enhanced EC Recommendations: Trustworthy Validation with Large Language Models for Two-Tower Model
line_developers_tw
PRO
0
5
揭秘LLMOps: 讓LLM服務像火箭 般穩定高效的祕密!
line_developers_tw
PRO
0
16
ML Life Cycle for LINE SHOPPING Recommender
line_developers_tw
PRO
0
9
Review AI from LINE EC NLP
line_developers_tw
PRO
0
6
LINE購物 App x ATDD: 利用 ATDD 改善開發流程
line_developers_tw
PRO
0
17
Grafana Alloy Best Practice
line_developers_tw
PRO
0
900
Distributed Tracing in LINE Taiwan
line_developers_tw
PRO
0
28
只有 Status page 還不夠！ 講人話才知道 Infra 發生什麼事
line_developers_tw
PRO
2
260

Other Decks in Technology

See All in Technology
白金鉱業Meetup Vol.15 効果検証の怖い話_tomokazuABE_20240919
brainpadpr
4
790
生成 AI による新しい UI/UX 〜サーバーレスで実現する Generative UI の世界〜 / generative ui with serverless
gawa
6
2.5k
横断組織として考える共通DBの課題解決 〜 桃園の誓いアーキテクチャ 〜 / Addressing Shared Database Challenges as Cross-Team: “Peach Garden Oath” Architecture
4geru
1
490
人工衛星の開発体験向上のために、ソフトウェアからできること
sksat
2
390
誰でもできる！OpenAI Embedding API を活用して高度なレコメンド機能を実現してみよう - A story about implementing an advanced recommendation function using the OpenAI Embedding API
sugoikondo
2
170
Discovering AI Models
picardparis
4
3.9k
タイミーのレコメンドにおける ABテストの運用
ozeshun
2
300
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
46k
Walking the minefield of Service Mesh
drequena
0
170
Wasmコンテナを動かしてみた
stanaka26
0
150
HashHub会社案内「なぜ今、パブリックブロックチェーンに賭けるのか」
hashhub
3
75k
脆弱性を管理して、ビジネスリスクに備えよう 〜駆け出しエンジニアがCVEとSBOMを可視化してみた〜
ktgrryt
0
160

Featured

See All Featured
The Invisible Customer
myddelton
119
13k
Infographics Made Easy
chrislema
239
18k
A better future with KSS
kneath
235
17k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
How GitHub (no longer) Works
holman
310
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Principles of Awesome APIs and How to Build Them.
keavy
125
17k
Building Adaptive Systems
keathley
36
2.1k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
48k
A Modern Web Designer's Workflow
chriscoyier
692
190k
Building an army of robots
kneath
302
42k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
3
68

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