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
160
Membuat Website Zaman Sekarang
mazipan
0
430
Kinerja Web 101 - Edisi 2022
mazipan
1
380
Layout Repaint & The Lessons Learned
mazipan
0
340
Bagaimana implementasi mockup design
mazipan
0
400
Memulai karir sebagai web programmer
mazipan
0
670
Membuat laporan kecepatan web untuk blog
mazipan
0
470
Bongkar Dapur Webnya #PHPID-OL
mazipan
0
450
Menjadi web developer di masa pandemi
mazipan
0
490
Other Decks in Programming
See All in Programming
外部システム連携先が10を超えるシステムでのアーキテクチャ設計・実装事例
kiwasaki
1
230
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
580
go.mod、DockerfileやCI設定に分散しがちなGoのバージョンをまとめて管理する / Go Connect #3
arthur1
10
2.4k
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
3.1k
Nuxtベースの「WXT」でChrome拡張を作成する | Vue Fes 2024 ランチセッション
moshi1121
1
520
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
2
1.7k
JaSST 24 九州:ワークショップ(は除く)実践!マインドマップを活用したソフトウェアテスト+活用事例
satohiroyuki
0
260
gopls を改造したら開発生産性が高まった
satorunooshie
8
240
WEBエンジニア向けAI活用入門
sutetotanuki
0
300
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
23k
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
1.3k
PagerDuty を軸にした On-Call 構築と運用課題の解決 / PagerDuty Japan Community Meetup 4
horimislime
1
110
Featured
See All Featured
Being A Developer After 40
akosma
86
590k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
Speed Design
sergeychernyshev
24
570
How to Think Like a Performance Engineer
csswizardry
19
1.1k
Code Reviewing Like a Champion
maltzj
519
39k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Building Your Own Lightsaber
phodgson
102
6.1k
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
Git: the NoSQL Database
bkeepers
PRO
425
64k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
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.