Front End Testing

Front End Testing

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 to split 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.

A pre-commit git hook is run with ESLint (with Husky). If ESLint complains, it can't be committed.

Unit Tests and Integration Tests

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

---

End-To-End Tests

We would like to use Cypress.io.

It is a faster alternative to Selenium.

Tools used

• 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

Why we chose React-Testing-Library (RTL) over Enzyme

1. Fullchee couldn't get some basic tests working with Enzyme
2. React Testing Library encourages better testing practices

The more your tests resemble the way your software is used, the more confidence they can give you.

We decided on React Testing Library for the bulk of the work but decided to keep Enzyme as well for Snapshot testing, something we believe will be useful.

Mocking

js/setupTests.js is run before any jest test.

• overrides the request to the default graph (Computer Science) with the Test Graph
• the fake/test data received from the mocked fetch requests are found in /js/components/graph/__mocks__/

Location of Timers

• TimeOuts
  • Node mouseOut event
  • InfoBox mouseOut event
• Intervals
  • onButtonPress (eg: the directional and zoom/out buttons