Front End Testing

Front End Testing

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

Usage

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

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.

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 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

Enzyme vs React-Testing-Library

1. I (Fullchee) couldn't get some basic tests working with Enzyme
2. 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.

Location of Timers

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

Resources Used

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