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
140
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
110
Mengukur dan meningkatkan performa website
mazipan
1
210
Membuat Website Zaman Sekarang
mazipan
0
500
Kinerja Web 101 - Edisi 2022
mazipan
1
450
Layout Repaint & The Lessons Learned
mazipan
0
410
Bagaimana implementasi mockup design
mazipan
0
490
Memulai karir sebagai web programmer
mazipan
0
730
Membuat laporan kecepatan web untuk blog
mazipan
0
530
Bongkar Dapur Webnya #PHPID-OL
mazipan
0
510
Other Decks in Programming
See All in Programming
AI Ramen Fight
yusukebe
0
120
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
11
2.8k
一人でAIプロダクトを作るならAIにはもっと働いてもらいたい / I want AI to work harder
rkaga
3
260
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
16
9.3k
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
260
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
2
740
JetBrainsのAI機能の紹介 #jjug
yusuke
0
180
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
36
11k
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
110
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
7
1.7k
MCPで実現できる、Webサービス利用体験について
syumai
7
2.4k
AIのメモリー
watany
12
1.2k
Featured
See All Featured
Writing Fast Ruby
sferik
628
62k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
4 Signs Your Business is Dying
shpigford
184
22k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
Code Review Best Practice
trishagee
69
19k
Raft: Consensus for Rubyists
vanstee
140
7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
Designing for humans not robots
tammielis
253
25k
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.