-
Notifications
You must be signed in to change notification settings - Fork 65
Front End Testing
yarn test
Under the hood, we use Jest
The tests use the following small graph:
We primarily use React-Testing-Library for writing integration tests.
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);
});
- Call the async builder which gives you a static TestGraph (a wrapper around the graph DOM element)
- Call helper TestGraph helper functions.
- File Location: `js/components/graph/tests/TestGraph.
Course, Boolean and Hybrid nodes have CSS states.
Here are some images as to how they transition from each other.
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"
]
}]
}
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.
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
);
Location of timers in the repo
- TimeOuts
- Node mouseOut event
- InfoBox mouseOut event
- Intervals
- onButtonPress (eg: the directional and zoom/out buttons
We use Enzyme under the hood for snapshot testing.
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.
None yet.
We would like to use Cypress.io
.
It is a faster alternative to Selenium.