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

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 πŸ™

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.

  • 2,622