BaseTable.test.tsx

import React from 'react';
import ReactDOM, { unmountComponentAtNode } from 'react-dom';
import { act } from '@testing-library/react';
import { TableCell, TableRow } from '@material-ui/core';
import BaseTable, { sortBy } from './index';
import { Order } from './TableHeaderCell';

const createData = () => [
  { key: 2, value: 'b' },
  { key: 1, value: 'a' },
  { key: 3, value: 'c' },
];

it('can sort numbers', () => {
  // Arrange
  const data = createData();

  // Act
  const sortedAsc = sortBy(data, 'key', Order.ASCENDING);
  const sortedDesc = sortBy(data, 'key', Order.DESCENDING);

  // Assert
  expect(sortedAsc[0].key).toEqual(1);
  expect(sortedDesc[0].key).toEqual(3);
});

it('can sort strings', () => {
  const data = createData();
  const sortedAsc = sortBy(data, 'value', Order.ASCENDING);
  const sortedDesc = sortBy(data, 'value', Order.DESCENDING);

  expect(sortedAsc[0].value).toEqual('a');
  expect(sortedDesc[0].value).toEqual('c');
});

let container: HTMLDivElement | null = null;
beforeEach(() => {
  container = document.createElement('div');
  document.body.appendChild(container);
});

afterEach(() => {
  unmountComponentAtNode(container!);
  container!.remove();
  container = null;
});

const createTable = () => <BaseTable
  headers={[
    { key: 'key', label: 'Key', sortable: true },
    { key: 'value', label: 'Value', sortable: true },
  ]}
  data={createData()}
  renderRow={(item) => <TableRow key={item.key}>
    <TableCell>{item.key}</TableCell>
    <TableCell>{item.value}</TableCell>
  </TableRow>}
/>;

it('doesn\'t crash during rendering', () => {
  const Table = createTable();
  act(() => {
    ReactDOM.render(Table, container);
  });
});

it('renders a header row', () => {
  const Table = createTable();
  act(() => {
    ReactDOM.render(Table, container);
  });

  const tbody = container!.getElementsByTagName('thead')[0];
  expect(tbody!.getElementsByTagName('tr').length).toEqual(1);
});

it('renders the correct amount of data rows', () => {
  const Table = createTable();
  act(() => {
    ReactDOM.render(Table, container);
  });

  const tbody = container!.getElementsByTagName('tbody')[0];
  expect(tbody!.getElementsByTagName('tr').length).toEqual(3);
});