CreateNewKeyForm.test.tsx

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

test('renders a form to create a new key', async () => {
  render(<CreateNewKeyForm />);
  const keyNameInput = screen.getByLabelText('Key name');
  const copyInput = screen.getByLabelText('Copy');
  const submitButton = screen.getByRole('button', { name: 'Create key' });

  expect(keyNameInput).toBeInTheDocument();
  expect(copyInput).toBeInTheDocument();
  expect(submitButton).toBeInTheDocument();
});

test('renders error messages when validations fail', async () => {
  render(<CreateNewKeyForm />);
  const form = screen.getByTestId('create-key-form');
  await act(() => {
    fireEvent.submit(form);

    return Promise.resolve();
  });

  const keyNameErrorMessage = screen.getByText(
    'Please enter a name for the key',
  );
  expect(keyNameErrorMessage).toBeInTheDocument();
  const copyErrorMessage = screen.getByText('Please enter some copy');
  expect(copyErrorMessage).toBeInTheDocument();
});

test('shows an error message when the key name already exists', async () => {
  render(<CreateNewKeyForm existingKeys={['test_key']} />);
  const form = screen.getByTestId('create-key-form');
  const keyNameInput = screen.getByLabelText('Key name');
  const copyInput = screen.getByLabelText('Copy');
  await userEvent.type(keyNameInput, 'test_key');
  await userEvent.type(copyInput, 'test copy');
  await act(() => {
    fireEvent.submit(form);

    return Promise.resolve();
  });

  const keyNameErrorMessage = screen.getByText('This key name already exists');
  expect(keyNameErrorMessage).toBeInTheDocument();
});