Build UI more confident using Component Testing
What if we can test UI components fast enough and as close as our users will use/see them? This is what component testing helps us to do.
UI testing is very important. In many projects we use a "fake" environment to test rendering and user behavior on our apps. This is great to decrease the overall time in which tests runs, but at what cost? Wouldn't we be testing components in a real environment to make sure our users don't suffer from broken apps and features?
Component testing means testing in real browser, but not based on a URL (that's E2E). Component testing means real events. Component testing means stop hacking around weird workarounds to reproduce user interactions. Component testing means total confidence in your UI.
In this talk, I will show you how we can increase the confidence of our code by testing UI in a real browser, making sure we are delivering high-quality experiences to our users. We will cover:
- What is component testing?
- What are the main benefits?
- Why should I care about Component testing?
- How can I get started
- a little refator demo
Component testing means testing in real browser, but not based on a URL (that's E2E). Component testing means real events. Component testing means stop hacking around weird workarounds to reproduce user interactions. Component testing means total confidence in your UI.
While finding ways to test Rich text editor experiences, I found that reliying on fake events was not an option. We needed to make sure our User Experience was met in all the browsers that we support without the big cost of creating E2E tests and the only way we found was with Component testing. I believe is the result of the marriage between E2E and Integration testing (the good parts of)
Designer, Developer & Coach from Panama living in Barcelona. I love to build products and help designers and developers learn from each other. Husband & Dad of Daniela and Rebeca. Currently Building mintter.com - P2P deliberation forum based on IPFS and Bitcoin ⚡
avatar: https://res.cloudinary.com/horacioh/image/upload/v1659230658/avatar.jpg
event | submit date | conf date | accepted? | reason? |
---|---|---|---|---|