DEV Community

loading...
Cover image for New to front-end testing? Start from the top of the pyramid!

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...
pic
Editor guide
Collapse
frivolta profile image
Filippo Rivolta

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!

Collapse
noriste profile image
Stefano Magni Author

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
Collapse
frivolta profile image
Filippo Rivolta

Crystal clear, as always! Thanks for your work 😉

Collapse
felixlueth profile image
felix lueth

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.

Collapse
noriste profile image
Stefano Magni Author

Thank you so much!! 🙌

Collapse
guillep2k profile image
guillep2k

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

Collapse
noriste profile image
Stefano Magni Author

Thank you soooo much 🙏♥️

Collapse
aurelio profile image
Aurelio

Super, really nice idea to include the videos 👍

Collapse
acelsosoares profile image
Celso Soares

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 :)