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 🔁
So you can 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!
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 need to 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...
Unit tests
Integration tests
UI tests
Conventional approach
That's the fault
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
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 🙏
These slides are publicly available
slides.com/noriste/breaking-the-fear-of-front-end-testing-20m
or cutt.ly/test-fear-20m
I'm working on a "UI Testing Best Practices" book on GitHub,
check it out! ❤️
Breaking the fear of front-end testing - 20m
By Stefano Magni
Breaking the fear of front-end testing - 20m
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.
