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
從混亂到優雅，讓專案不再失控：ATDD 與 Clean Architecture 的後端實戰之路
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
7
2049智能共存：透過LINE Bot Agent迎接後人類時代
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
35
菸酒生在 LINE Taiwan 的後端雙刀流
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
1.4k
讓測試不再 BB！ 從 BDD 到 CI/CD， 不靠人力也能 MVP
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
1.4k
DB 醬，嗨！哪泥嘎斯基？
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
1.4k
比起獨自升級 我更喜歡 DevOps 文化 <3
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
1.4k
工具人的一生: 開發很多 AI 工具讓我 慵懶過一生
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
1.4k
從四件事帶你見識見識 事件驅動架構設計 (EDA)
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
1.3k
TODAY 看世界(?) 是我們在看扣啦！
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
1.4k

Other Decks in Technology

See All in Technology
AIエージェント就活入門 - MCPが履歴書になる未来
Avatar for Ikko Eltociear Ashimine eltociear
0
240
第64回コンピュータビジョン勉強会@関東(後編)
Avatar for TSUKAMOTO Kenji tsukamotokenji
0
220
新卒(ほぼ)専業Kagglerという選択肢
Avatar for Ryota nocchi1
1
1.8k
Android Studio の 新しいAI機能を試してみよう / Try out the new AI features in Android Studio
Avatar for Yuki Anzai yanzm
0
240
Goでマークダウンの独自記法を実装する
Avatar for lag129 lag129
0
210
AIは変更差分からユニットテスト_結合テスト_システムテストでテストすべきことが出せるのか？
Avatar for Matsu mineo_matsuya
5
3.2k
夢の印税生活 / Life on Royalties
Avatar for とみたまさひろ tmtms
0
280
イオン店舗一覧ページのパフォーマンスチューニング事例 / Performance tuning example for AEON store list page
Avatar for AEON aeonpeople
1
200
[CVPR2025論文読み会] Linguistics-aware Masked Image Modeling for Self-supervised Scene Text Recognition
Avatar for So Uchida s_aiueo32
0
210
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
8.5k
kintone開発チームの紹介
Avatar for Cybozu cybozuinsideout
PRO
0
73k
AIとTDDによるNext.js「隙間ツール」開発の実践
Avatar for Makoto Tateno makotot
4
170

Featured

See All Featured
Embracing the Ebb and Flow
Avatar for Simon Collison colly
87
4.8k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
251
21k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
55
13k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
59
9.5k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
695
190k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.7k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
302
21k
Faster Mobile Websites
Avatar for Dean Hume deanohume
309
31k

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