Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
寫出不管地震怎麼搖網站都不會壞的前端測試
Search
LINE Developers Taiwan
PRO
June 19, 2024
Technology
0
2k
寫出不管地震怎麼搖 網站都不會壞的前端測試
Speaker: YU Chen
Event: LINE TECH FRESH 畢業分享會
LINE Developers Taiwan
PRO
June 19, 2024
Tweet
Share
More Decks by LINE Developers Taiwan
See All by LINE Developers Taiwan
LINE 與 AI 機器人技術應用現況
line_developers_tw
PRO
0
4
QA Testing
line_developers_tw
PRO
0
1
jcconf_datadev_prod
line_developers_tw
PRO
0
5
jcconf_SPM_prod
line_developers_tw
PRO
0
3
jcconf_LINEPay_prod
line_developers_tw
PRO
0
4
Live Activities in LINE
line_developers_tw
PRO
0
13
Neumorphism x Liquid Glass
line_developers_tw
PRO
0
12
猜你喜歡 – 打造高度擴展的個人化電商推薦
line_developers_tw
PRO
0
33
打造新電商搜尋體驗- 搜尋意圖辨識
line_developers_tw
PRO
0
17
Other Decks in Technology
See All in Technology
データ戦略部門 紹介資料
sansan33
PRO
1
3.7k
AI Agent Dojo #2 watsonx Orchestrateフローの作成
oniak3ibm
PRO
0
120
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
43k
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
0
150
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
14k
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
korodroid
2
510
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
1
160
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
620
エンタメとAIのための3Dパラレルワールド構築(GPU UNITE 2025 特別講演)
pfn
PRO
0
280
プレーリーカードを活用しよう❗❗デジタル名刺交換からはじまるイベント会場交流のススメ
tsukaman
0
120
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
300
サイバーエージェント流クラウドコスト削減施策「みんなで金塊堀太郎」
kurochan
2
870
Featured
See All Featured
A better future with KSS
kneath
239
18k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
For a Future-Friendly Web
brad_frost
180
9.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Gamification - CAS2011
davidbonilla
81
5.5k
Raft: Consensus for Rubyists
vanstee
139
7.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
20
1.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Transcript
寫出不管地震怎麼搖 網站都不會壞的前端測試
YU Content Dev TECH FRESH 北科資⼯ 圖片來源:LINE CREATIVE、LINE SPOT
越⾼的 Code Coverage 越好的 程式碼品質 === ?
什麼是 Code Coverage?
什麼是 Code Coverage?
什麼是 Code Coverage?
什麼是 Code Coverage?
什麼是 Code Coverage?
100% 的 Coverage !== 沒有 Bug
100% 的 Coverage !== 沒有 Bug
100% 的 Coverage !== 沒有 Bug
只看 Coverage 想要測什麼不好嗎?
1 不會涵蓋到 所有的 Use case 只看 Coverage 想要測什麼不好嗎? 2 會變成在測實作
⽽不是在測功能
那我們應該要怎麼決定要測什麼呢?
那我們應該要怎麼決定要測什麼呢? ⽤使⽤者會遇到的 使⽤情境(Use Cases)去想要寫哪些測試 當測試的⽅式越接近使⽤者使⽤的⽅式 就能讓我們對程式的正確性越有信⼼
程式會遇到的兩種使⽤者
1 Developer User 程式會遇到的兩種使⽤者 2 End User
Developer User 會有的使⽤情境 l 傳入對應的參數時程式應該怎麼運作 l 當不同的 Side Effect 產⽣時程式應該
怎麼運作
End User 會有的使⽤情境 l 應該看到什麼樣的 UI l 跟某個 UI 互動後會看到什麼結果
可以幫助我們想出 Use Case 的⽅法
1 設計稿中的 User Flow & 需求⽅開的需求 可以幫助我們想出 Use Case 的⽅法
2 從寫 E2E 測試 的⾓度去想 3 看 Code Coverage 沒有覆蓋到的地⽅
Thank you! yu2001 @justYu2001 圖片來源:Discord、 WIKIPEDIA