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
Live Activities in LINE
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
9
Neumorphism x Liquid Glass
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
10
猜你喜歡 – 打造高度擴展的個人化電商推薦
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
22
打造新電商搜尋體驗- 搜尋意圖辨識
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
7
比價群組
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
11
從混亂到優雅，讓專案不再失控：ATDD 與 Clean Architecture 的後端實戰之路
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
10
2049智能共存：透過LINE Bot Agent迎接後人類時代
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
39
菸酒生在 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.5k

Other Decks in Technology

See All in Technology
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
Avatar for Yuto Osawa osawa
1
290
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
Avatar for nwiizo nwiizo
7
860
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの？
Avatar for Makky12 smt7174
4
190
なぜスクラムはこうなったのか？歴史が教えてくれたこと/Shall we explore the roots of Scrum
Avatar for Genki Sano sanogemaru
5
1.6k
roppongirb_20250911
Avatar for Kuniaki IGARASHI igaiga
1
240
共有と分離 - Compose Multiplatform "本番導入" の設計指針
Avatar for Ryo WATANABE error96num
2
730
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
Avatar for KoheiOgawa shisyu_gaku
0
300
【NoMapsTECH 2025】AI Edge Computing Workshop
Avatar for ITO Akihiro akit37
0
210
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
1
150
AWSを利用する上で知っておきたい名前解決のはなし（10分版）
Avatar for nagisa_53 nagisa53
10
3.2k
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
Avatar for TomoyaIwata iwatatomoya
1
1k
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
Avatar for 株式会社ログラス loglass2019
4
64k

Featured

See All Featured
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
279
23k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Visualization
Avatar for Eitan Lees eitanlees
148
16k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.6k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
352
21k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
66k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
358
30k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
70
4.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k

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