A presentation at Decoupled Days in in New York, NY, USA by Bassam Ismail
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
Building a decoupled application is one half of the story before you can deploy it to production. To make sure you have a sturdy application you will have to test it on multiple fronts. You will have to tests various types of components, async operations, integration between multiple components, and a lot more.
In this example-driven session, you will learn how to drive an application from no tests to multiple unit, snapshot, and integration tests without breaking a sweat.
In this session, you will learn:
various ways to test your components. We will be using React as an example here.
how snapshot testing can help you keep looking at the UI every time you make a change.
writing integration tests to make sure all the components are working with each other.
Bonus: how type checking can help you refactor and find problems at compile time.
Attendees should have experience with ES2015 JavaScript. Familiarity with a JavaScript framework, such as React or Vue, may also be helpful.
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.