SpaceStation, WeWork, 2018

1. Intro to
front-end testing
SpaceStation
2018
by @kangax

2. Current stack
React
Redux
redux-thunk
CSS components
Radium
Chrome-only

4. Majority of tests
in SpaceStation
* React
components
* Basic structural
correctness
* Simple behaviour
correctness
* Non-visual style
correctness

6. Assertions library

7. Assertions library
Test runner

8. Assertions library
Test runner
React test utils

9. Assertions library
Test runner
React test utils
Mocking utils

10. Assertions library
Test runner
React test utils
Mocking utils

11. Assertions library
Test runner
React test utils
Mocking utils

12. Assertions library
Test runner
React test utils
Mocking utils

13. Assertions library
Test runner
React test utils
Mocking utils

14. Structural testing
minMaxInput.jsx

15. Structural testing
minMaxInput-test.jsx
Enzyme renderer
Source file
Fake props
Render component

16. Structural testing
minMaxInput-test.jsx
Test case (jasmine)
Expectation (jasmine)
Test content (enzyme)

17. Behavioural testing
minMaxInput.jsx
Validates value
Ensures min < max
Calls onChange prop

18. Behavioural testing
minMaxInput-test.jsx
Find input
Simulate change event
with a specific value
Check onChange prop was called
Check correct values were set

19. Jest snapshots
Avatar component

20. Jest snapshots
Check text contains
user initials
Before

21. Jest snapshots
Check text contains
user initials
Before
After

22. Jest snapshots
Structural correctness
avatar-test.jsx.snap

23. Jest snapshots
Style correctness
avatar-test.jsx.snap

24. Jest snapshots
Props correctness
avatar-test.jsx.snap

25. Choose your poison
Renders in virtual DOM Renders in a real browser
Faster (~30sec) Slower (~100sec)
No virtual display req. Needs virtual display
Snapshot support No snapshot support

26. Testing Redux

27. Testing Redux
Abstraction.
Connects props to store
via selectors
Abstraction.
Connects props to actions
(potentially thunks)
Abstraction.
Checks auth in store, uses
router
Problem

28. Testing Redux
Our abstraction for testing
connected components
Middleware
Fake props w. spies
Actual mounting of
component w. middleware,
props, and store
Solution

29. Testing Redux
Mount component w.
specific "store" values
Ensure deeply nested
component is rendered
Check prop value
Mini redux store
Solution

30. Testing Redux
Passes in mocked store
A sprinkle of Formsy
Creates wrappers for
enzyme methods and
injects the above
concoction
Some localisation "magic"
A bit more router "magic",
for good measure
Solution

31. Unit test coverage
Istanbul
coveralls.io
Jest + lcov

32. Acceptance tests

33. Acceptance tests
* Actual browser launched
* Can test entire workflows
* Naturally slow
* Flakey tests; data inconsistency
* Currently non-maintained
* Very important to have

34. Acceptance tests

35. Acceptance tests

36. Acceptance tests

37. Visual regression testing
screener.io

38. Visual regression testing
Percy

39. Visual regression testing
Percy

40. Later instalments
* Testing connected components vs. reducers & actions
independently
* Working w. spies, mocks, stubs (Sinon, Jest)
* Working w. Faker for generating random data
* Making snapshots of connected components
TBD
* Faking timers and promises w. Sinon & Jest

41. Further reading
Testing in Spacestation
https://github.com/WeConnect/spacestation-v2/blob/master/TESTING.md
Getting started with Jest
https://facebook.github.io/jest/docs/en/getting-started.html
Puppeteer
https://github.com/GoogleChrome/puppeteer
Cypress
https://github.com/cypress-io/cypress
Unit testing redux connected components
https://hackernoon.com/unit-testing-redux-connected-components-692fa3c4441c
Sinon (mocks, stubs, spies)
https://github.com/sinonjs/sinon
Enzyme
http://airbnb.io/enzyme/