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 πŸ€–

Thank you πŸ™

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.

  • 2,168