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

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 ❀️)

Made with Slides.com