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
40
菸酒生在 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
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
Avatar for ヤマダ（北野） yamada_r
2
120
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
Avatar for JaeSoon Jeong jeongjaesoon
0
240
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
8.8k
現場で効くClaude Code ─ 最新動向と企業導入
Avatar for TakaakiKakei takaakikakei
1
260
テストを軸にした生き残り術
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
210
プラットフォーム転換期におけるGitHub Copilot活用〜Coding agentがそれを加速するか〜 / Leveraging GitHub Copilot During Platform Transition Periods
Avatar for AEON aeonpeople
1
230
新アイテムをどう使っていくか？みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
Avatar for Akira Ouchi akkiesoft
0
340
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
Avatar for shinaps shinaps
2
470
下手な強制、ダメ！絶対！ 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは？
Avatar for Masataka Tsukamoto tsukaman
2
460
Snowflake Intelligence × Document AIで“使いにくいデータ”を“使えるデータ”に
Avatar for Kosaku Ono kevinrobot34
1
120
Django's GeneratedField by example - DjangoCon US 2025
Avatar for Paolo Melchiorre pauloxnet
0
160
エンジニアリングマネージャーの成長の道筋とキャリア / Developers Summit 2025 KANSAI
Avatar for KASUYA, Daisuke daiksy
3
1k

Featured

See All Featured
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
127
53k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.6k
Fireside Chat
Avatar for paigeccino paigeccino
39
3.6k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.8k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
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

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