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
120
Testing JavaScript
Intro to JavaScript testing
Irfan Maulana
May 24, 2022
Tweet
Share
More Decks by Irfan Maulana
See All by Irfan Maulana
Panduan untuk mempublikasikan kode ke publik
mazipan
0
60
Mengukur dan meningkatkan performa website
mazipan
1
180
Membuat Website Zaman Sekarang
mazipan
0
450
Kinerja Web 101 - Edisi 2022
mazipan
1
410
Layout Repaint & The Lessons Learned
mazipan
0
360
Bagaimana implementasi mockup design
mazipan
0
430
Memulai karir sebagai web programmer
mazipan
0
690
Membuat laporan kecepatan web untuk blog
mazipan
0
490
Bongkar Dapur Webnya #PHPID-OL
mazipan
0
470
Other Decks in Programming
See All in Programming
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
130
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
4
1.1k
20241217 競争力強化とビジネス価値創出への挑戦:モノタロウのシステムモダナイズ、開発組織の進化と今後の展望
monotaro
PRO
0
280
php-conference-japan-2024
tasuku43
0
430
見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
kentaroutakeda
0
940
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
180
watsonx.ai Dojo #6 継続的なAIアプリ開発と展開
oniak3ibm
PRO
0
170
Fibonacci Function Gallery - Part 2
philipschwarz
PRO
0
210
20年もののレガシープロダクトに 0からPHPStanを入れるまで / phpcon2024
hirobe1999
0
1k
『改訂新版 良いコード/悪いコードで学ぶ設計入門』活用方法−爆速でスキルアップする!効果的な学習アプローチ / effective-learning-of-good-code
minodriven
28
4.2k
ESLintプラグインを使用してCDKのセオリーを適用する
yamanashi_ren01
2
240
PSR-15 はあなたのための ものではない? - phpcon2024
myamagishi
0
400
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
Bash Introduction
62gerente
610
210k
Speed Design
sergeychernyshev
25
740
Unsuck your backbone
ammeep
669
57k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Docker and Python
trallard
43
3.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Building Your Own Lightsaber
phodgson
104
6.2k
Code Review Best Practice
trishagee
65
17k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
Practical Orchestrator
shlominoach
186
10k
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.