LocalisationsScreen.test.tsx

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

test('allows authors to add new keys for a draft localisation file', async () => {
  render(<LocalisationsScreen />);
  const addKeyButton = screen.getByRole('button', { name: 'Add key' });
  userEvent.click(addKeyButton);

  const keyNameInput = screen.getByLabelText('Key name');
  const copyInput = screen.getByLabelText('Copy');
  const submitButton = screen.getByRole('button', { name: 'Create key' });
  await act(async () => {
    await userEvent.type(keyNameInput, 'test_key');
    await userEvent.type(copyInput, 'test copy');

    return userEvent.click(submitButton);
  });
  userEvent.click(addKeyButton);
  await act(async () => {
    await userEvent.type(keyNameInput, 'another_key');
    await userEvent.type(copyInput, 'another test copy');

    return userEvent.click(submitButton);
  });

  const localisationsListing = screen.getByTestId('localisations-listing');
  expect(localisationsListing).toHaveTextContent(/test_key/);
  expect(localisationsListing).toHaveTextContent(/test copy/);
  expect(localisationsListing).toHaveTextContent(/another_key/);
  expect(localisationsListing).toHaveTextContent(/another test copy/);
});