UrgentRequest.test.tsx

import * as React from 'react';
import { render } from '@testing-library/react';
import UrgentRequest from './UrgentRequest';
import userEvent from '@testing-library/user-event';

const mockSubmit: React.MouseEventHandler<HTMLButtonElement> = jest.fn().mockImplementation((e) => e.preventDefault());

describe('<UrgentRequest>', () => {
  it('renders the option to make a contact request urgent', () => {
    const { getByRole } = render(
      <UrgentRequest
        submit={mockSubmit}
      />,
    );
    const urgentFieldset = getByRole('group');
    const urgentInput = getByRole('textbox');
    const urgentSubmit = getByRole('button');

    // See expected elements
    expect(document.body.contains(urgentFieldset));

    // Expected default values
    expect(urgentInput).toHaveValue('');
    expect(urgentSubmit).toBeDisabled();

    // Try typing something that doesn't change the urgent status
    userEvent.type(urgentInput, 'NOT URGENT');
    expect(urgentInput).toHaveValue('NOT URGENT');
    expect(urgentSubmit).toBeDisabled();

    // Fill in URGENT to change the urgent status
    userEvent.clear(urgentInput);
    userEvent.type(urgentInput, 'URGENT');
    // State was updated..
    expect(urgentInput).toHaveValue('URGENT');
    expect(urgentSubmit).toBeEnabled();

    // Can submit now..
    userEvent.click(urgentSubmit);
    // Triggers a message sent up the hierarchy..
    expect(mockSubmit).toBeCalled();
  });
});