Front End Testing

Front End Testing

Front-end testing is currently under development on the react-draw branch

Running the tests

yarn test

Running a specific file

yarn test "fileName"

for example yarn test "Graph.test.js"

Break down of tests

I've used the Testing Trophy idea to segregate my testing into

• Static code analysis
• Unit Tests
• Integration Tests
• End-to-end testing.

Static Code Analysis

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.

Unit Tests and Integration Tests

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

---

End-To-End Tests

• Cypress.io

Getting Started Writing Tests

There's a ton of resources online. The simplest component testing is in Button.test.js.

Tools used

• Jest
  • Test runner, Mocking library and Assertion library (all in one)
  • Snapshot testing (saves rendered HTML)
• Enzyme
  • Testing Utility
  • key feature: shallow and deep rendering
• 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

Resources Used

• Testing Trophy (Blog Post)
• Testing React with Jest and Enzyme (Blog Post)