Deve opment
is fun
🐱 💻
https://xkcd.com/1739/
@sendi kumarn
Slide 5
Slide 5 text
Testing
is
boring!
@sendi kumarn
Slide 6
Slide 6 text
Testing
requires a ot
of time &
effort
@sendi kumarn
Slide 7
Slide 7 text
But...
@sendi kumarn
Slide 8
Slide 8 text
Testing
gives
confidence
to ship
@sendi kumarn
Slide 9
Slide 9 text
Testing
guarantees
user experience
@sendi kumarn
Slide 10
Slide 10 text
Testing
enhances
deve oper experience
@sendi kumarn
Slide 11
Slide 11 text
Testing is essentia .
How to do it ?
@sendi kumarn
Slide 12
Slide 12 text
Frontend Testing
Unit Testing
Component Testing
Visua Testing
@sendi kumarn
Slide 13
Slide 13 text
Frontend Testing
Unit Testing Component Testing Visua Testing
# of tests High Medium Low
@sendi kumarn
Slide 14
Slide 14 text
Frontend Testing
Unit Testing Component Testing Visua Testing
# of tests High Medium Low
Time to write Low Medium High
@sendi kumarn
Slide 15
Slide 15 text
Frontend Testing
Unit Testing Component Testing Visua Testing
# of tests High Medium Low
Time to write Low Medium High
Confidence to ship Low Medium High
@sendi kumarn
Slide 16
Slide 16 text
Frontend Testing
Unit Testing Component Testing Visua Testing
# of tests High Medium Low
Time to write Low Medium High
Confidence to ship Low Medium High
Time to execute Low Medium High
@sendi kumarn
Slide 17
Slide 17 text
Unit Testing
@sendi kumarn
Slide 18
Slide 18 text
Unit Testing
Component Testing Uti Testing
@sendi kumarn
Slide 19
Slide 19 text
Component Testing
Test the functiona ity of the component
@sendi kumarn
Slide 20
Slide 20 text
Component Testing
Test the functiona ity of the component
@sendi kumarn
Slide 21
Slide 21 text
Component Testing
Test the functiona ity of the component
Load the
component
@sendi kumarn
Slide 22
Slide 22 text
Component Testing
Test the functiona ity of the component
Manua y va idate
the functiona ity
@sendi kumarn
Slide 23
Slide 23 text
Component Testing
Test the functiona ity of the component
Changes!!
@sendi kumarn
Slide 24
Slide 24 text
Snapshot Testing
Test how the component renders.
@sendi kumarn
Slide 25
Slide 25 text
Snapshot Testing
Test how the component renders.
Load the
component
@sendi kumarn
Slide 26
Slide 26 text
Snapshot Testing
Test how the component renders.
match it with the
snapshot object
@sendi kumarn
Slide 27
Slide 27 text
Snapshot Testing - How it works?
> npm run test
For the first time, it renders the component and automagica y creates a text
b ob in a fi e ca ed .snap.
> npm run test u
Wi update the snapshot
@sendi kumarn
Slide 28
Slide 28 text
Snapshot Testing
•
It is super easy to maintain testing code
•
It makes tests consistent (no browsers invo ved)
•
It is magica
✨
•
It enormous y reduces time to write/update tests
@sendi kumarn
Slide 29
Slide 29 text
Snapshot Testing
@sendi kumarn
Slide 30
Slide 30 text
But...
@sendi kumarn
Slide 31
Slide 31 text
B oats Code base
Source Code
Testing Code
Snapshots
Con guration
22
28
47
3
approximate on few open source projects
Based on Lines of code
@sendi kumarn
Slide 32
Slide 32 text
B oats Pu Requests
more ines of code - ess effective the code review is @sendi kumarn
Slide 33
Slide 33 text
Easy to ose context
•
Test names shou d be exp icit
•
Stricter ru es when writing
•
Do not b ind y update snapshots
@sendi kumarn
Slide 34
Slide 34 text
As with many other things, they are
awesome too s when used correct y
@sendi kumarn
Slide 35
Slide 35 text
Don't over do it
Do not write snapshot testing
everywhere, use it on y for presentationa
components (without much ogic).
@sendi kumarn
Slide 36
Slide 36 text
Use mount/sha ow correct y
•
sha ow
•
do not render chi d.
•
tests constructor / render
•
mount
•
renders chi d.
•
tests componentDidMount
@sendi kumarn
Slide 37
Slide 37 text
Snapshot is code.
When reviewing code make sure the
snapshots are given equa importance and
it is code (even though it is
autogenerated).
@sendi kumarn
Slide 38
Slide 38 text
Sing e Responsibi ity
In genera your tests in snapshot shou d
have a sing e responsibi ity. Do not
over oad snapshot tests.
@sendi kumarn
Slide 39
Slide 39 text
Periodica y revise
Revise and update tests when you add more
features into the component.
@sendi kumarn
Slide 40
Slide 40 text
Unit Testing with snapshot
•
Faster and easier to write / maintain
•
Takes ess time to run
•
Can run oca y
•
Setup is fast and easy
@sendi kumarn
Slide 41
Slide 41 text
Visua Testing
He o Ha o
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 1.782 s
Ran all test suites.
@sendi kumarn
Slide 42
Slide 42 text
Goto page
@sendi kumarn
Slide 43
Slide 43 text
Puppeteer provides a high-level API to control
headless Chrome or Chromium over the
DevTools Protocol.
Puppeteer
@sendi kumarn
Slide 44
Slide 44 text
jest
yarn add --dev jest-puppeteer
{ "preset": "jest-puppeteer"}
@sendi kumarn
Slide 45
Slide 45 text
Load the browser
(new tab)
@sendi kumarn
Slide 46
Slide 46 text
Go to page
@sendi kumarn
Slide 47
Slide 47 text
Take a
screenshot
@sendi kumarn
Slide 48
Slide 48 text
Take a
screenshot
@sendi kumarn
Slide 49
Slide 49 text
Save
the image He o
he o.png
@sendi kumarn
Slide 50
Slide 50 text
Verify
the image He o
he o.png
@sendi kumarn
Slide 51
Slide 51 text
Match it with
snapshot@sendi kumarn
Slide 52
Slide 52 text
Pixe Match
@sendi kumarn
Slide 53
Slide 53 text
Visua Testing
•
It provides visua confirmation
•
It increases confidence over what we ship
•
It is magica
✨
•
It reduces time to write tests
@sendi kumarn
Slide 54
Slide 54 text
Visua Testing
@sendi kumarn
Slide 55
Slide 55 text
B oats Code base
Source Code
Testing Code
Screenshots
Other
13
28
56
3
approximate va ue based on few open source projects
Based on Fi e size
@sendi kumarn
Slide 56
Slide 56 text
Increases CI time
~23%
increase in the CI time
@sendi kumarn
Slide 57
Slide 57 text
Screenshot!!!
🤯
@sendi kumarn
Slide 58
Slide 58 text
Screenshot dependencies
Rendering differs based on OS / Browser /
aspect ratio
@sendi kumarn
Slide 59
Slide 59 text
Screenshot dependencies
Rendering differs based on OS / Browser / aspect ratio
Fixes:
- Docker Image
- CI on different OS
- Fixing image size
@sendi kumarn
Slide 60
Slide 60 text
Page State
Maintaining the state of page when taking
screenshots
@sendi kumarn
Slide 61
Slide 61 text
Page State
Maintaining the state of page when taking screenshots
Fixes:
- Storybook
- Components
- Generates static page
- Mock the response
@sendi kumarn
Slide 62
Slide 62 text
UI Changes
Updating the Screenshot is tedious and
time consuming.
@sendi kumarn
Slide 63
Slide 63 text
UI Changes
Updating the Screenshot is tedious and time consuming.
Fixes:
- Introduce Screenshot testing on y for
the re eased features
@sendi kumarn
Slide 64
Slide 64 text
Others..
Keep the screenshot in the same repo if
the repo is sma er. Move out when the
source code grows.
@sendi kumarn
Slide 65
Slide 65 text
Others..
hand e animations / b inking cursor /
spinner / progress bar and other motion
@sendi kumarn
Slide 66
Slide 66 text
So far...
• Use it for components
with ogics
• Use proper name for the
tests.
Unit Testing
• Use it for
presentationa
components.
• Keep it simp e
• Use proper name for the
tests.
• Treat snapshots as a
code.
Snapshot Testing
• Use it for user facing UI.
• Test them for various
form-factor / devices /
Operating Systems
• Use a separate repo if
needed.
• Run / Test them as a
part of dep oyment
process.
Visua Testing
@sendi kumarn
Slide 67
Slide 67 text
Testing
@sendi kumarn
Slide 68
Slide 68 text
Testing
Use inters / types effective y.
@sendi kumarn
Slide 69
Slide 69 text
A ways remember, tests shou d increase
the confidence to re ease and ensure things
are working. It shou d not be a burden.
Testing
@sendi kumarn
Slide 70
Slide 70 text
Do not over-engineer and over-use too s
Use it wise y.
Testing
@sendi kumarn