-
Notifications
You must be signed in to change notification settings - Fork 65
Front End Testing
Front-end testing is currently under development on the react-draw branch
yarn test
yarn test "fileName"
for example
yarn test "Graph.test.js"
I've used the Testing Trophy idea to segregate my testing into
- Static code analysis
- Unit Tests
- Integration Tests
- End-to-end testing.
More information on formatting and style can be found on the JavaScript Code Etiquette Page
We use ESLint to avoid issues which can be caught by a linter.
The tests use the following small graph.
Here is the structure of the Unit and Integration Tests. Tests that end with "*.test.js" will be detected by Jest
Jest will also create and compare snapshots it generates and place them in a __snapshots__
folder
./js/components/graph
└── __tests__
├── BoolGroup.test.js
├── Bool.test.js
├── Button.test.js
├── EdgeGroup.test.js
├── Edge.test.js
├── Graph.test.js
├── InfoBox.test.js
├── NodeGroup.test.js
├── Node.test.js
├── RegionGroup.test.js
└── __snapshots__
├── BoolGroup.test.js.snap
├── Button.test.js.snap
├── Edge.test.js.snap
├── InfoBox.test.js.snap
├── NodeGroup.test.js.snap
└── RegionGroup.test.js.snap
We would like to use Cypress.io
.
It is a faster alternative to Selenium.
There's a ton of resources online. The simplest component testing is in Button.test.js
.
-
Jest
- Test runner, Mocking library and Assertion library (all in one)
- Snapshot testing (saves rendered HTML)
- Enzyme
- Testing Utility
- key feature: shallow rendering for snapshot testing
- Enzyme-to-json
- makes the stored snapshots a lot more human readable
- when a snapshot test fails, it's easier to figure out the difference
- fetch-mock
- mock the fetch() API call used to get the graph data
-
React Testing Library
- Helper library for writing React integration tests
- I (Fullchee) couldn't get some basic tests working with Enzyme
- React Testing Library encourages better testing practices. (https://testing-library.com/docs/guiding-principles#docsNav)
The more your tests resemble the way your software is used, the more confidence they can give you.
In the end we decided on React Testing Library but decided to keep Enzyme as well for Snapshot testing, something we believe will be useful.
- TimeOuts
- Node mouseOut event
- InfoBox mouseOut event
- Intervals
- onButtonPress (eg: the directional and zoom/out buttons