A presentation at Front End North in in Sheffield, UK by Mike Smith
Have you written tests for that ? Mike Smith @mikerhyssmith
Have you written THE RIGHT tests for that ?
Pen-testing t i n U Smoke g e t In n o i rat l ion a s u M utation s s i e V gr e R y t i l i b i s s Acce Stati c End 2 En d t c a r t Performance n o C Fuzzy
2012 (Martin Fowler) - https://martinfowler.com/bliki/TestPyramid.html
2018 (Kent Dodds) - https://testingjavascript.com/
What are the right tests ? ⚠ Opinions ⚠
The cheapest test which gives you 1. Confidence 2. Stability 3. Documentation
Cheapest ? 1. Quickest to write 2. Quickest to run 3. Simplest to write 4. Runs on the cheapest resources
Unit
Writing Unit tests Given When Then
Writing Unit tests Given I want to search for a stock When I search for apple stock Then It should request apple stock from the search endpoint
Demo
Contract
https://docs.pact.io/
Demo
Integration
Writing Integration Tests ✅ - Happy Path ❌ - Error State ⏳ - Loading state
Writing Integration Tests 👍 Mocking 👍
Integration Test Given We have price data for a given stock When The search result is rendered Then The price and daily data is rendered
Demo
Visual Regression
Demo
End 2 End Tests
E2E Test - Page Objects
E2E Test - data-test
E2E Test As a user I want to be able to search for a given stock view its price data and navigate to a page to find all of its data
E2E Test
E2E Test
Accessibility (With Paypal’s Automated Accessibility Testing Tool (AATT))
Demo
Mutation
https://stryker-mutator.io/
Summary 1. Divide and conquer with tests the same way you do with code 2. Try and find the cheapests tests possible to give you the confidence to ship your work 3. If you have very specialist requirements there is always something out there to help gain that confidence
Thank you ! Mike Smith @mikerhyssmith
“Have you written tests for that?” is a question sometimes feared by developers. There are so many approaches, libraries and methodologies that it can be hard to know where to even start.
We’ll build and test a real web application to cut through the breadth of testing options to understand how we can test each component of our application in isolation and as an end to end product.
Once we know how to test our functionality, it’s time to make sure our user experience and design are also tested! We will learn how to ensure our apps work in every browser, responsively and pixel perfect.
Finally, we need to answer the original question and to do that we will learn how exterminating mutants can guarantee that we have written good tests for our web application.
The following resources were mentioned during the presentation or are useful additional information.
Video showing the screen reader struggling to access the example site
Video of the E2E testing framework using the example site
for free. You
can too.