Stefano Magni
I'm a passionate Front-end Engineer, a speaker, and an instructor. I love creating high-quality products, testing and automating everything, learning and sharing my knowledge, helping people. I work remotely for Hasura.
Breaking the fear of
Front-end Testing
For testing newbies, testing-doubtful, or bug-haters devs.
Why should you test? 🤔
Because tests automate your manual checks
Because tests check at blazing speed
Because tests perform checks forever and ever 🔁
Because you don't need to change the code to reproduce edge cases 😅
So you can code safely
And then, you code with...
Few responsibility!
Trust me: testing is like using Git: you can't go back
Some testing perks:
• Confidence
• Refactoring made easy/possible
• Documentation
Documentation? 🤔
Yes! Take a look at these test descriptions!
• If the recovery submission goes well, the user should see a success feedback
• If the recovery has been submitted elsewhere, the user should see a success state
• If the quorum fails, the user should be able to restart the whole process
Where do I start?? 🙋♂🙋♀
Unit tests
Integration tests
UI tests
Conventional approach
Profitable approach
Unit Testing...
vs UI Testing!
Doubts? 🤔
Probably yes!
Testing is a hard topic...
#1
#1
Unit Tests are abstract
UI Tests are concrete
Terminal
Browser
😓
🤤
#2
It's hard to be familiar with the various kinds of tests
#2
• E2E Tests: automated front-end + back-end
• UI Integration Tests: automated front-end +
static back-end responses
UI Tests fall into two categories:
#3
I don't have time!
Testing perks are in the medium/long term only 🤧
#3
Safe refactoring while coding is too.
Working without a back-end is a short-term perk! 🎡
Automating manual checks is too.
#4
Tests are brittle, I need to update them every time 😡
#4
Users care about features, not tech details!
❌ Stores, internal states, frameworks, re-renders
✅ Login, buy, interactions, flows, features
#4
Testing like a programmer is the #1 reason for test failures
#5
I started testing... But bugs went to production anyway...
#5
Unit tests
Integration tests
UI tests
Conventional approach
That's the fault
#6
It's hard to understand what the app is doing while testing...
#6
The tools are mature, the debugging experience is way better 👍
#7
Tests fail with unclear reasons 💥
#7
Writing well-speaking tests is a skill too 😉
#8
If I don't TDD,
I don't test anything! 🤔
#8
TDD requires a particular context and clear specs.
Forget it for now 😉
#8
And if you do not trust me, at least trust Kent 🏆
#9
I don't want to face
code coverage...
#9
Remember that code coverage is just a tool!
It allows you to understand what you have tested and what you have not 😉
#9
Unit tests
Integration tests
UI tests
Low code coverage
High code coverage
#10
Tests increases the overhead 🤥
#10
Everything new increases the overhead! Git increased it, React increased it, testing does the same 😉
#10
Simply avoid to learn testing with something completely new.
Otherwise you don't know what is working and what isn't 😉
Last but not least...
... Sucks! 💩
... Your code...
... Usually...
And it's hard to test bad code!
(don't worry, mine sucks too 😁)
Unit tests
Integration tests
UI tests
Code testing
App testing
And allow you to refactor it 💎
UI Testing avoids you to face your code 💩👋
Starting from the top of the pyramid...
... Will drive you to understand why other tools exist and their pros and cons.
What does Cypress do?
It allows you to automate your UI tests through a controlled browser 🤖
Articles
-
New to front-end testing? Start from the top of the pyramid!
-
Front-end productivity boost: Cypress as your main development browser
Recommended courses
Extended sources
I'm Stefano Magni (@NoriSte)
I'm a passionate front-end developer, a testing lover, and an instructor.
I work for WorkWave, a Field Service Software company.
My recent OS contributions: github.com/NoriSte/all-my-contributions
(or just run $ npx noriste)
Thank you 🙏
(thanks goes to Matteo Ronchi too for the precious feedback ❤️)
These slides are publicly available
slides.com/noriste/breaking-the-fear-of-front-end-testing
or
cutt.ly/test-fear
Breaking the fear of front-end testing
By Stefano Magni
Breaking the fear of front-end testing
Writing tests is like using GIT: in a moment you wonder how you could work before discovering it. But how widespread is the practice of writing tests between us JavaScript developers? Is the entrance wall really insurmountable? I am going to give you some ideas to overcome the initial resistance by making you understand how and what to test and what NOT to test.
