Slide 1
Slide 1 text
寫出不管地震怎麼搖
網站都不會壞的前端測試
Slide 2
Slide 2 text
YU
Content Dev TECH FRESH
北科資⼯
圖片來源：LINE CREATIVE、LINE SPOT
Slide 3
Slide 3 text
越⾼的
Code Coverage
越好的
程式碼品質
===
?
Slide 4
Slide 4 text
什麼是 Code Coverage？
Slide 5
Slide 5 text
什麼是 Code Coverage？
Slide 6
Slide 6 text
什麼是 Code Coverage？
Slide 7
Slide 7 text
什麼是 Code Coverage？
Slide 8
Slide 8 text
什麼是 Code Coverage？
Slide 9
Slide 9 text
100% 的 Coverage !== 沒有 Bug
Slide 10
Slide 10 text
100% 的 Coverage !== 沒有 Bug
Slide 11
Slide 11 text
100% 的 Coverage !== 沒有 Bug
Slide 12
Slide 12 text
只看 Coverage 想要測什麼不好嗎？
Slide 13
Slide 13 text
1
不會涵蓋到
所有的 Use case
只看 Coverage 想要測什麼不好嗎？
2
會變成在測實作
⽽不是在測功能
Slide 14
Slide 14 text
那我們應該要怎麼決定要測什麼呢？
Slide 15
Slide 15 text
那我們應該要怎麼決定要測什麼呢？
⽤使⽤者會遇到的
使⽤情境（Use Cases）去想要寫哪些測試
當測試的⽅式越接近使⽤者使⽤的⽅式
就能讓我們對程式的正確性越有信⼼
Slide 16
Slide 16 text
程式會遇到的兩種使⽤者
Slide 17
Slide 17 text
1
Developer User
程式會遇到的兩種使⽤者
2
End User
Slide 18
Slide 18 text
Developer User 會有的使⽤情境
l 傳入對應的參數時程式應該怎麼運作
l 當不同的 Side Effect 產⽣時程式應該
怎麼運作
Slide 19
Slide 19 text
End User 會有的使⽤情境
l 應該看到什麼樣的 UI
l 跟某個 UI 互動後會看到什麼結果
Slide 20
Slide 20 text
可以幫助我們想出 Use Case 的⽅法
Slide 21
Slide 21 text
1
設計稿中的 User Flow
&
需求⽅開的需求
可以幫助我們想出 Use Case 的⽅法
2
從寫 E2E 測試
的⾓度去想
3
看 Code Coverage
沒有覆蓋到的地⽅
Slide 22
Slide 22 text
Thank you!
yu2001 @justYu2001
圖片來源：Discord、 WIKIPEDIA