Testing your front-end application to production

πŸ‘‹ 󾓦

Smoke Test πŸ”₯πŸ”₯

Bassam Ismail Engineering Manager at Axelerant 🌎 skippednote

dd.skippednote.dev

Why should we test our code?

οΏ½οΏ½

To catch πŸ› before our users can

Makes refactoring possible

Helps write cleaner code

Acts as executable documentation

Because all of us aren’t a 10x engineer

What should we test in our code?

Manual Tests Automated Test

🧟 πŸ§Ÿβ€β™‚

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

Jargon πŸ“’

Test

Test Suite

Dummy / Fake

Mocks

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

Static Code Analysis

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

Type Checking

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

Unit Testing

RED Refactor* Green

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

πŸ’‘ use test specific attributes for querying

πŸ’‘ use regex when querying text

Snapshot Testing

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

Integration Testing

2 Unit 0 Integration

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

E2E Testing

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

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

πŸ’‘ extract repeating step to commands

a11y Testing

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

Visual Regression Testing

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

Monitoring

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

⚠

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

Refactoring Cleanup

Questions?

Thank you dd.skippdenote.dev @skippednote