Implement frontend testing

[campb303]

Currently there is no testing implemented for the frontend which could allow for a change to inadvertently break things until discovered manually. Tests should be written to confirm that one change doesn't break other functionality.

Jest seems to be the testing framework included with create-react-app.

[campb303]

As a proof of concept, make a list of possible tests using Jest then apply appropriate tests to the ItemViewAppBar component.

[campb303]

The begin with, start by writing tests for the ItemViewAppBar component. The tests should include but may not be limited to:

• Rendering tests to confirm props.title is passed and loads.
• Event tests to confirm state changes on setSidebarOpen

Its not immediately clear how to test for a theme being passed. Perhaps the component should be edited to assume a sane default (the default MUI theme) when one isn't present and the useStyles() hook can then be tested with a rendering test.

Some useful resources:

• React Testing Overview
• React Testing Recipes

[campb303]

@celfreic is working through ReactJS intro material and will resume work on this after that.

[celfreic]

Helpful Resources on getting started:

• Intro to React Testing: Demonstrates the 'why should I use this?' of the react testing library and Jest. Also provides elegant examples of scaling up through levels of abstraction and provides a concrete example of asynchronous code testing. Gives the viewer an in depth understanding of types of test and why/how to use them. Also provides an interesting note on testing that verifies for screen reader compatibility.

• React unit testing Provides quick and easy examples of using Jest and react testing library to write simple high level tests. Also provides a great explanation of snapshot tests and why they are important.

[celfreic]

Intro to React Testing (cont.):

For an example: Suppose you have a form with basic html structure inside a rendered react App

<div>
      <h1>TODOS</h1>

      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>

      <form onSubmit={handleSubmit}>
        <label htmlFor="new-todo">What needs to be done?</label>
        <br />
        <input id="new-todo" value={text} onChange={handleChange} />
        <button>Add #{items.length + 1}</button>
      </form>
</div>

You can implement a test via raw javascript and the react dom that verifies the text via query selectors from the document and then pulling the text content:

import React from "react";
import ReactDOM from "react-dom";

import { App } from "./App";

test("it works", () => {
  const root = document.createElement("div");
  ReactDOM.render(<App />, root);

  expect(root.querySelector("h1").textContent).toBe("TODOS");
  expect(root.querySelector("label").textContent).toBe(
    "What needs to be done?"
  );
  expect(root.querySelector("button").textContent).toBe("Add todo");
});

Abstracting this a layer away via the dom testing library allows for more elegant code and queried selectors that are labels will verify properties automatically like having an htmlFor tag:

import React from "react";
import ReactDOM from "react-dom";
import { within } from "@testing-library/dom";

import { App } from "./App";

test("it works", () => {
  const root = document.createElement("div");
  ReactDOM.render(<App />, root);

  const { getByText, getByLabelText } = within(root);

  // expect(getByText("TODOS")).not.toBeNull();
  // expect(getByLabelText("What needs to be done?")).not.toBeNull();
  // expect(getByText("Add #1")).not.toBeNull();

  // Above code can be shortend to
  getByText("TODOS");
  getByLabelText("What needs to be done?");
  getByText("Add #1");
});

Furthermore, adding the react testing library will make rendering abstracted away and reduce our code as it encapsulates the dom testing within:

import React from "react";
import { App } from "./App";
import { render } from "@testing-library/react";

test("it works", () => {
  const { getByText, getByLabelText } = render(<App />);

  getByText("TODOS");
  getByLabelText("What needs to be done?");
  getByText("Add #1");
});

The tutorial also provides a useful sandbox example for simulating user clicks and interaction here
And another example of an asynchronous test here