Testing your front-end application to production

A presentation at Decoupled Days in July 2019 in New York, NY, USA by Bassam Ismail

Slide 1

Slide 1

Testing your front-end application to production

Slide 2

Slide 2

πŸ‘‹ 󾓦

Slide 3

Slide 3

Smoke Test πŸ”₯πŸ”₯

Slide 4

Slide 4

Slide 5

Slide 5

Bassam Ismail Engineering Manager at Axelerant 🌎 skippednote

Slide 6

Slide 6

Slide 7

Slide 7

dd.skippednote.dev

Slide 8

Slide 8

Why should we test our code?

Slide 9

Slide 9

οΏ½οΏ½

Slide 10

Slide 10

To catch πŸ› before our users can

Slide 11

Slide 11

Makes refactoring possible

Slide 12

Slide 12

Helps write cleaner code

Slide 13

Slide 13

Acts as executable documentation

Slide 14

Slide 14

Because all of us aren’t a 10x engineer

Slide 15

Slide 15

What should we test in our code?

Slide 16

Slide 16

Slide 17

Slide 17

Slide 18

Slide 18

Slide 19

Slide 19

Slide 20

Slide 20

Manual Tests Automated Test

Slide 21

Slide 21

🧟 πŸ§Ÿβ€β™‚

Slide 22

Slide 22

πŸ’°πŸ’° πŸ’° πŸ’° 🐒 πŸ‡

Slide 23

Slide 23

Jargon πŸ“’

Slide 24

Slide 24

Test

Slide 25

Slide 25

Slide 26

Slide 26

Test Suite

Slide 27

Slide 27

Slide 28

Slide 28

Dummy / Fake

Slide 29

Slide 29

Slide 30

Slide 30

Mocks

Slide 31

Slide 31

Slide 32

Slide 32

Slide 33

Slide 33

πŸ’°πŸ’° πŸ’° πŸ’° 🐒 πŸ‡

Slide 34

Slide 34

Static Code Analysis

Slide 35

Slide 35

Slide 36

Slide 36

Slide 37

Slide 37

Static Code Analysis ● easy to achieve 100% coverage ● runs automatically in your IDE/Editor ● helps reduce language grammar and syntax error

Slide 38

Slide 38

Type Checking

Slide 39

Slide 39

Slide 40

Slide 40

Slide 41

Slide 41

Type Checking ● helps prevent JavaScript gotchas ● provides great tooling and IDE support ● static code analysis beyond ESLint/TSLint

Slide 42

Slide 42

Unit Testing

Slide 43

Slide 43

RED Refactor* Green

Slide 44

Slide 44

Unit Testing ● lets us test in isolation ● easy to write and fast to run ● helps improve code design

Slide 45

Slide 45

πŸ’‘ use test specific attributes for querying

Slide 46

Slide 46

Slide 47

Slide 47

πŸ’‘ use regex when querying text

Slide 48

Slide 48

Slide 49

Slide 49

Snapshot Testing

Slide 50

Slide 50

Slide 51

Slide 51

Snapshot Testing ● easy to write and run ● warn against markup changes ● help capture current state of our application ● prevent UI bugs*

Slide 52

Slide 52

Integration Testing

Slide 53

Slide 53

2 Unit 0 Integration

Slide 54

Slide 54

Slide 55

Slide 55

Slide 56

Slide 56

Integration Testing ● Same benefits as Unit Testing β—‹ comparatively easy to write fast to run β—‹ helps improve code design ● Helps test components together ● Faster than E2E

Slide 57

Slide 57

E2E Testing

Slide 58

Slide 58

οΏ½οΏ½ οΏ½οΏ½ οΏ½οΏ½ οΏ½οΏ½

Slide 59

Slide 59

Slide 60

Slide 60

E2E Testing ● Tests like a real user ● Exposes browser inconsistencies ● Covers the whole application stack ● Slower than integration, however, no mock

Slide 61

Slide 61

πŸ’‘ extract repeating step to commands

Slide 62

Slide 62

Slide 63

Slide 63

a11y Testing

Slide 64

Slide 64

Slide 65

Slide 65

Slide 66

Slide 66

a11y Testing ● makes application accessible ● meet legal implications πŸ’ƒ ● write good and semantic HTML code ● become a better human being

Slide 67

Slide 67

Visual Regression Testing

Slide 68

Slide 68

Slide 69

Slide 69

Slide 70

Slide 70

Slide 71

Slide 71

Visual Regression Testing ● Helps verify the UI isn’t broken ● Find cross browser compatibility bugs

Slide 72

Slide 72

Monitoring

Slide 73

Slide 73

Slide 74

Slide 74

Slide 75

Slide 75

Monitoring ● quick turn over between bug detection and fix ● prevent revenue loss

Slide 76

Slide 76

⚠

Slide 77

Slide 77

πŸ’‘ More πŸ’ͺ === Less 😟

Slide 78

Slide 78

Refactoring Cleanup

Slide 79

Slide 79

Questions?

Slide 80

Slide 80

Thank you dd.skippdenote.dev @skippednote