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
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.
(or just run $ npx noriste)
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 from?? 🙋♂🙋♀
Unit tests
Integration tests
UI tests
Conventional approach
Profitable approach
Unit Testing...
vs UI Testing!
Doubts? 🤔
Probably yes!
It's hard to be familiar with the various kinds of tests
• E2E Tests: automated front-end + back-end
• UI Integration Tests: automated front-end +
static back-end responses
UI Tests fall into two categories:
I don't have time!
Testing perks are in the medium/long term only 🤧
Safe refactoring while coding is too.
Working without a back-end is a short-term perk! 🎡
Automating manual checks is too.
Tests are brittle, I must update them every time 😡
Users care about features, not tech details!
❌ Stores, internal states, frameworks, re-renders
✅ Login, buy, interactions, flows, features
Testing like a programmer is the #1 reason for test failures
I started testing... But bugs went to production anyway...
That's the fault
Unit tests
Integration tests
UI tests
Conventional approach
It's hard to understand what the app is doing while testing...
Unit tests
Integration tests
UI tests
Hard debugging
Easy debugging
If I don't TDD,
I don't test anything! 🤔
TDD requires a particular context and clear specs.
Forget it for now 😉
And if you do not trust me, at least trust Kent 🏆
I don't want to face
code coverage...
Remember that code coverage is just a tool!
It allows you to understand what you have tested and what you have not 😉
Unit tests
Integration tests
UI tests
Low code coverage
High code coverage
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 💩👋
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
Thank you 🙏
These slides are publicly available
slides.com/noriste/breaking-the-fear-of-front-end-testing-vertical
or
cutt.ly/test-fear
Breaking the fear of front-end testing (vertical)
By Stefano Magni
Breaking the fear of front-end testing (vertical)
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.
