LocalisationsScreen.test.tsx

import React from 'react';
import { act, render, screen, userEvent } from '../../../../testUtils';
import { LocalisationsScreen } from './LocalisationsScreen';

/**
 * This test makes extensive use of `act` to ensure that hooks are rendered correctly.
 * @see https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning
 */
test('allows authors to create a localisation file', async () => {
  const handleCreateFileButtonClick = jest.fn();
  render(
    <LocalisationsScreen
      onCreateFileButtonClick={handleCreateFileButtonClick}
    />,
  );
  const addKeyButton = screen.getByRole('button', { name: 'Add key' });
  userEvent.click(addKeyButton);

  const keyNameInput = screen.getByLabelText('Key name');
  const copyInput = screen.getByLabelText('Copy');
  const createKeyButton = screen.getByRole('button', { name: 'Create key' });
  const closeDrawerButton = screen.getByRole('button', { name: 'Close' });

  await act(async () => {
    await userEvent.type(keyNameInput, 'test_key', { allAtOnce: true });
    await userEvent.type(copyInput, 'test copy', { allAtOnce: true });
    userEvent.click(createKeyButton);
  });

  userEvent.click(addKeyButton);
  await act(async () => {
    await userEvent.type(keyNameInput, 'another_key', { allAtOnce: true });
    await userEvent.type(copyInput, 'another test copy', { allAtOnce: true });
    userEvent.click(createKeyButton);
  });

  /**
   * We have to manually click the close button to hide the drawer in these tests.
   *
   * The `screen.getByRole` method is trying to find elements within the
   * drawer, which means it's failing to detect the Create file button on the screen.
   *
   * We've observed the following behaviour:
   * * The drawer is removed when calling the onClose method on its own.
   * * It does not get removed when also calling the setLocalisations method.
   *
   * This feels like something to do with needing to use `act` to ensure that
   * tests correctly render hooks.
   *
   * It's unclear whether the problem is caused by how we are calling multiple
   * hooks in succession or a bug with Chakra or React Testing Library.
   */
  await act(async () => {
    userEvent.click(closeDrawerButton);
  });
  const createFileButton = screen.getByRole('button', {
    name: 'Create localisation file',
  });
  userEvent.click(createFileButton);
  expect(handleCreateFileButtonClick).toHaveBeenCalledWith([
    {
      keyName: 'another_key',
      copy: 'another test copy',
    },
    {
      keyName: 'test_key',
      copy: 'test copy',
    },
  ]);
});

describe('when there are no localisations', () => {
  test('does not render the Create file button', () => {
    render(<LocalisationsScreen />);

    const createFileButton = screen.queryByRole('button', {
      name: 'Create localisation file',
    });

    expect(createFileButton).not.toBeInTheDocument();
  });
});