Have you written tests for that ?

A presentation at Front End North in February 2020 in Sheffield, UK by Mike Smith

Slide 1

Slide 1

Have you written tests for that ? Mike Smith @mikerhyssmith

Slide 2

Slide 2

Slide 3

Slide 3

Slide 4

Slide 4

Slide 5

Slide 5

Slide 6

Slide 6

Slide 7

Slide 7

Slide 8

Slide 8

Slide 9

Slide 9

Have you written THE RIGHT tests for that ?

Slide 10

Slide 10

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

Slide 11

Slide 11

2012 (Martin Fowler) - https://martinfowler.com/bliki/TestPyramid.html

Slide 12

Slide 12

2018 (Kent Dodds) - https://testingjavascript.com/

Slide 13

Slide 13

What are the right tests ? ⚠ Opinions ⚠

Slide 14

Slide 14

The cheapest test which gives you 1. Confidence 2. Stability 3. Documentation

Slide 15

Slide 15

Cheapest ? 1. Quickest to write 2. Quickest to run 3. Simplest to write 4. Runs on the cheapest resources

Slide 16

Slide 16

Slide 17

Slide 17

Unit

Slide 18

Slide 18

Writing Unit tests Given When Then

Slide 19

Slide 19

Slide 20

Slide 20

Slide 21

Slide 21

Slide 22

Slide 22

Slide 23

Slide 23

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

Slide 24

Slide 24

Slide 25

Slide 25

Slide 26

Slide 26

Demo

Slide 27

Slide 27

Contract

Slide 28

Slide 28

https://docs.pact.io/

Slide 29

Slide 29

Demo

Slide 30

Slide 30

Integration

Slide 31

Slide 31

Writing Integration Tests ✅ - Happy Path ❌ - Error State ⏳ - Loading state

Slide 32

Slide 32

Writing Integration Tests 👍 Mocking 👍

Slide 33

Slide 33

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

Slide 34

Slide 34

Slide 35

Slide 35

Slide 36

Slide 36

Slide 37

Slide 37

Demo

Slide 38

Slide 38

Visual Regression

Slide 39

Slide 39

Demo

Slide 40

Slide 40

End 2 End Tests

Slide 41

Slide 41

E2E Test - Page Objects

Slide 42

Slide 42

E2E Test - data-test

Slide 43

Slide 43

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

Slide 44

Slide 44

E2E Test

Slide 45

E2E Test

Slide 46

Slide 47

Slide 47

Accessibility (With Paypal’s Automated Accessibility Testing Tool (AATT))

Slide 48

Slide 48

Slide 49

Slide 49

Demo

Slide 50

Slide 50

Mutation

Slide 51

Slide 51

Slide 52

Slide 52

Slide 53

Slide 53

https://stryker-mutator.io/

Slide 54

Slide 54

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

Slide 55

Slide 55

Thank you ! Mike Smith @mikerhyssmith