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
Testing JavaScript
Search
Irfan Maulana
May 24, 2022
Programming
0
110
Testing JavaScript
Intro to JavaScript testing
Irfan Maulana
May 24, 2022
Tweet
Share
More Decks by Irfan Maulana
See All by Irfan Maulana
Mengukur dan meningkatkan performa website
mazipan
1
150
Membuat Website Zaman Sekarang
mazipan
0
380
Kinerja Web 101 - Edisi 2022
mazipan
1
310
Layout Repaint & The Lessons Learned
mazipan
0
280
Bagaimana implementasi mockup design
mazipan
0
320
Memulai karir sebagai web programmer
mazipan
0
590
Membuat laporan kecepatan web untuk blog
mazipan
0
400
Bongkar Dapur Webnya #PHPID-OL
mazipan
0
370
Menjadi web developer di masa pandemi
mazipan
0
440
Other Decks in Programming
See All in Programming
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
850
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
640
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
250
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
"config" ってなんだ? / What is "config"?
okashoi
0
240
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
Site Reliability Engineering for GMO
pyama86
7
1k
PostmanでAPIの動作確認が楽になった話
h455h1
0
160
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
190
Milestoner
bkuhlmann
1
410
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
23
15k
try! Swift Tokyo 2024のLT枠に採択されたプロポーザルを出すときに考えていたこと
ski
0
350
Featured
See All Featured
Gamification - CAS2011
davidbonilla
76
4.6k
YesSQL, Process and Tooling at Scale
rocio
163
13k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Building Better People: How to give real-time feedback that sticks.
wjessup
354
18k
Making Projects Easy
brettharned
108
5.5k
Web Components: a chance to create the future
zenorocha
305
41k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
Docker and Python
trallard
33
2.7k
4 Signs Your Business is Dying
shpigford
175
21k
Transcript
Testing JavaScript By Irfan Maulana
Hi, I am Irfan Working at Tokopedia as Principal Engineer
for Web Platform Team. mazipan.space @Maz_Ipan
A process to verifying the correctness & validating the functional
features of the app being developed APPLICATION TESTING
Software Development Life Cycle
JAVASCRIPT APPLICATION Frontend Backend Handling UI functionality: web, apps, desktop
Handling business logic, data store connection A B We will focus on the Frontend for this session.
PERFORM APP TESTING MANUAL AUTOMATED
WHY DO WE NEED? Bugs are bad, and who gets
blamed? The developer. You know humans are bad at complex, repetitive tasks. Computers are very, very good at complex, repetitive tasks. A professional ships working code. Code that works. Code that is well tested.
Focused on input & output. Not interested about the things
happening inside. Involve testing of the internal structure, code, design & implementation. METHODOLOGIES BLACKBOX WHITEBOX
TESTING PROCESS 1. PLANNING 2. PREPARATION 3. EXECUTION 4. REPORTING
THE TESTING TYPES
PROVEN METHOD FOR TESTING APP
STATIC TEST To catch typos, errors, possible bugs as you
write the code. Tools: • ESLint + Prettier • CodeQL, Snyk, SonarQube
Very fast feedback Can not reproduce functional bugs faced by
users STATIC TEST: PRO & CONS We can mark it as mandatory Very beneficial in the development phase
UNIT TEST To verify that individual, isolated and smallest part
works as expected. Tools: • TestingLibrary.com
Fast feedback Need an extra effort to write UT UNIT
TEST: PRO & CONS Verify the correctness of the function Can not represent the bug when the unit integrated Can not represent real user interaction
INTEGRATION TEST To verify that several units work together in
harmony. Tools: • TestingLibrary.com
Verify most of user interactions Slower feedback than UT More
effort than UT INTEGRATION TEST: PRO & CONS Can not represent device variant Can not replicate using the real data
END-TO-END TEST A robot that behaves like a user to
click around the app and verify that it functions correctly. Tools: • Cypress • Nightwatch • TestCafe
Can use multiple device Very slow to executed Need the
biggest effort E2E TEST: PRO & CONS Can use real data Replicate real user
COMPARISON Static Test Unit Test Integration E2E Test 🚀 Speed
🟢 🟢 🟢 🟢 🟢 🟢 🟢 🟢 🟢 ⏰ Development time 🟢 🟢 🟢 🟢 🟢 🟢 🟢 🟢 🟢 🟢 💰 Cost 🟢 🟢 🟢 🟢 🟢 🟢 🟢 🟢 🟢 🟢 😎 Confidence 🟢 🟢 🟢 🟢 🟢 🟢 🟢 🟢 🟢 🟢 Read more on https://kentcdodds.com/blog/static-vs-unit-vs-integration-vs-e2e-tests
BEST ROI https://twitter.com/kentcdodds/status/960723172591992832
DEMO TIME!
CHECK THE CODE https://github.com/mazipan/react-testing-workshop Prerequisites: • Node.js
ASK ME!
CREDITS: This presentation template was created by Slidesgo, including icons
by Flaticon, and infographics & images by Freepik and illustrations by Stories. THANK YOU Please keep this slide for attribution.