DEV Community

New to front-end testing? Start from the top of the pyramid!

Stefano Magni on October 09, 2019

An easier approach to get immediate results (and satisfaction) from the front-end testing world. I'm working on a big UI Testing Best Practices pr...

Read full post

Filippo Rivolta • Nov 25 '19

Great post! Just a question that I am encountering right now that fits the example in your first video, the signup form. What is the best practice here? Do you use a real dB and you clean it up after every test or you mock a registration? Keep it up!

Stefano Magni • Nov 25 '19

Hi Filippo! Speaking only about the E2E tests... there are two approaches that depend on the back-end architecture: are the back-end+DB created just for the sake of the tests/pipeline? Or are they the "staging" (but "common" and so reused) ones?

if the BE+DB are created on the fly just for the pipeline you can create the user in advance and then forget to delete them. The disadvantage is that you need to create in advance all the data that you need for every scenario (a new user, a new product, etc. it's called "data seeding")
if the BE+DB already exist you can create some entities in advance... but then you need to clear them before every test (on Cypress the "afterEach/afterAll" hooks are not granted to be called based on the success of the tests) and after every test (to avoid finding a lot of garbage data if you manually consume the staging environment). Anyway, you need some dedicated users, with some dedicated data, etc. but this is for E2E testing, usually, you NEED to have some E2E tests because they're the only ones that guarantee you that everything works... but you're going to spend most of your front-end development time with UI Integration tests and everything stubbed 😉but they're different kind of tests that live close to each other

Filippo Rivolta • Nov 29 '19

Crystal clear, as always! Thanks for your work 😉

felix lueth • Oct 10 '19

Such a nice article! I work with e2e-tests a lot and it helped me and my team several times finding bugs that unit- and integration tests didn't discover.
The more I work with UI-/e2e-tests, the more I use this top-bottom approach.

Stefano Magni • Oct 10 '19

Thank you so much!! 🙌

Guillermo Prandi • Oct 11 '19

I've just joined DEV to tell you that I love your article. Very well written, relevant and interesting. Neither shallow or obscure. Kudos!

Stefano Magni • Oct 11 '19

Thank you soooo much 🙏♥️

Aurelio • Oct 14 '19

Super, really nice idea to include the videos 👍

Celso Soares • Apr 21 '20

Awesome POST. I was asking myself several times, "why do i need this?" And i was delaying the day to start to learn front-end testing approaches until now.
Thank you for the push :)