Front End Testing

Table of Contents

• Running the tests
• Integration Tests
  • Writing your first test!
  • Mocking (and why don't you cleanup?)
    • How do I get the test data on localhost?
    • Timer Mocking
  • Snapshot Testing
    • Why we chose React-Testing-Library (RTL) over Enzyme
    • End-To-End Tests

Running the tests

yarn test

Under the hood, we use Jest

Integration Tests

The tests use the following small graph:

We use React-Testing-Library for writing integration tests.

Writing your first test!

import React from "react";
import Node from "../Node";
import TestGraph from "./TestGraph";

test("a Node should have the 'node' class", async () => {
  const graph = await TestGraph.build();
  const aaa100 = graph.getNodeByText("AAA100");
  expect(aaa100.classList.contains("node")).toBe(true);
});

1. Call the async builder which gives you a static TestGraph (a wrapper around the graph DOM element)
2. Call helper TestGraph helper functions.
   • File Location: `js/components/graph/tests/TestGraph.

State Definitions

Course, Boolean and Hybrid nodes have CSS states.

Here are some images as to how they transition from each other.

Only Clicking

Only Mouse Over Event

Only Mouse Out Event

Debugging a test with Visual Studio Code

TODO: should this be added to the repo?

Place the following code in a file called courseography/.vscode/launch.json

{
    "configurations": [{
        "type": "node",
        "request": "launch",
        "name": "Courseography Tests",
        "program": "${workspaceRoot}/node_modules/.bin/jest",
        "args": [
            "-i"
        ],
        "disableOptimisticBPs": true,
        "skipFiles": [
            "<node_internals>/**",
            "${workspaceFolder}/node_modules/**/*.js"
        ]
    }]
}

Mocking (and why don't you cleanup?)

Our jest configuration is in package.json. Here are the jest config docs.

setupTests.js

• 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__/

cleanup-after-each.js

Uses React Testing Library's cleanup and clears localStorage.

How do I get the test data on localhost?

Add the following code to the top of Graph.js.

Open localhost:8000/graph in incognito mode.

import fetchMock from "fetch-mock";
import testData from "./__mocks__/testData";

fetchMock.get("http://localhost:8000/get-json-data?graphName=Computer+Science",
 testData
);

Timer Mocking

Jest Timer Mocking Docs

Location of timers in the repo

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

Snapshot Testing

Tutorial

We use Enzyme under the hood for snapshot testing.

---

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

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. Snapshot testing is great for preventing accidental changes to DOM elements.

End-To-End Tests

Cypress.io Start Cypress with

yarn run cypress open

Why Cypress over Selenium? https://www.cypress.io/how-it-works/