Front end testing

This pages describes the guidelines to follow when writing tests.

When to test?

Tests should be added for all new components and functions in tzcontrol.

What to test?

Functions

Functions should be tested using Jest unit tests.

Example
Simple function with corresponding tests asserting on various input values.

export function isPalindrome(value: string): boolean {
    const reversed = value.split('').reverse().join('');
    return value === reversed;
}

import { isPalindrome } from '../isSpecial';

describe('isPalindrome', () => {
    describe('should return true if passed with', () => {
        it('ABBA', () => {
            const result = isPalindrome('ABBA');
            expect(result).toBe(true);
        });
        it('12321', () => {
            const result = isPalindrome('12321');
            expect(result).toBe(true);
        });
    });
    describe('should return false if passed with', () => {
        it('John Doe', () => {
            const result = isPalindrome('John Doe');
            expect(result).toBe(false);
        });
        it('1337', () => {
            const result = isPalindrome('1337');
            expect(result).toBe(false);
        });
    });
});

Dumb components

Dumb components are also called ‘presentational’ components because their only responsibility is to present something to the DOM. Once that is done, the component is done with it. No keeping tabs on it, no checking in once in a while to see how things are going. Nope. Put the info on the page and move on. – Jason Arnold

Tests for dumb components should include assertions for the different rendered states of the components. The tests are written using Jest and React Testing Library.

Consider the following example component, MyComponent, which switches state based on the props.active boolean value.

import React, { ReactElement } from 'react';

export const MyComponent = (props: { active: boolean }): ReactElement => {
    return (
        <button type="button" disabled={!props.active}>
            Click me!
        </button>
    );
};

For the component we add the following tests verifying the button’s label and disabled state.

import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { MyComponent } from '../index.jsx';

describe('MyComponent', () => {
    it('Button text should be "Click me!"', () => {
        render(<MyComponent />);
        expect(screen.getByRole('button')).toBeInTheDocument();
        expect(screen.getByRole('button')).toHaveTextContent('Click me!');
    });
    it('Button should be enabled if active is truthy', () => {
        render(<MyComponent active />);
        expect(screen.getByRole('button')).not.toBeDisabled();
    });
    it('Button should be disabled if active is falsey', () => {
        render(<MyComponent />);
        expect(screen.getByRole('button')).toBeDisabled();
    });
});

Structure

Tests should be defined/bundled closely to the source code of the component or function.
Tests should be added in the __tests__ directory, which should be adjacent to the component.
Tests for components should have the same name as the component e.g. MyComponent.test.jsx

MyComponent/
├── index.jsx
├── utils/
│   ├── myFunction.js
│   └── __tests__/
│       └── myFunction.test.js
└── __tests__/
    └── MyComponent.test.jsx

More specific information about implementation details you could find in our related wiki article