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

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

LINE Developers Taiwan
PRO
June 19, 2024
Technology
0
1.3k

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

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
LINE 實習分享 & 國際黑客松參賽分享
line_developers_tw
PRO
0
19
在 GCP 運用 Parse 全家餐 管理那堆 AI 應用的資料
line_developers_tw
PRO
0
22
40歲的我會給20歲的自己，關於軟體開發的7個建議
line_developers_tw
PRO
0
7.6k
從零到一： 轉碼仔的實習攻略
line_developers_tw
PRO
0
34
如何在團隊發揮數據影響力: 以電商資料科學家為例
line_developers_tw
PRO
1
45
做Data超讚的 誰懂？
line_developers_tw
PRO
0
33
iOS Live Activity: Opportunities & Challenges
line_developers_tw
PRO
1
120
掌握 Feature Toggle 與 OpenFeature 規範
line_developers_tw
PRO
0
240
用 AI 和 LINE Bot 簡化生活： 讓圖片告訴你何時該忙！-- LINE 工作坊
line_developers_tw
PRO
0
770

Other Decks in Technology

See All in Technology
株式会社EventHub・エンジニア採用資料
eventhub
0
4.3k
あれは良かった、あれは苦労したB2B2C型SaaSの新規開発におけるCloud Spanner
hirohito1108
2
590
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.3k
Building Products in the LLM Era
ymatsuwitter
10
5.4k
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1.3k
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
1.4k
OpenID BizDay#17 KYC WG活動報告（法人） / 20250219-BizDay17-KYC-legalidentity
oidfj
0
250
人はなぜISUCONに夢中になるのか
kakehashi
PRO
6
1.7k
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
370
目の前の仕事と向き合うことで成長できる - 仕事とスキルを広げる / Every little bit counts
soudai
24
7.1k
抽象化をするということ - 具体と抽象の往復を身につける / Abstraction and concretization
soudai
16
6.2k
The Future of SEO: The Impact of AI on Search
badams
0
200

Featured

See All Featured
Docker and Python
trallard
44
3.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
A better future with KSS
kneath
238
17k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Side Projects
sachag
452
42k
Making Projects Easy
brettharned
116
6k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Build your cross-platform service in a week with App Engine
jlugia
229
18k

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