UrgentRequest.test.tsx

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


const mockSendUrgent = jest.fn();

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

    const urgentFold = getByText('Urgent request?');
    // Folded urgent form has invisible content
    expect(urgentFieldset).not.toHaveClass('open');

    // Unfolding the urgency form
    userEvent.click(urgentFold);
    expect(urgentFieldset).toHaveClass(styles.open);

    // 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();

    // Close the fold again.. this should clear the input field too.
    userEvent.click(urgentFold);
    expect(urgentFieldset).not.toHaveClass('open');
    userEvent.click(urgentFold);
    expect(urgentInput).toHaveValue('');
    
    // Fill in URGENT to change the urgent status
    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(mockSendUrgent).toBeCalled();
  });
});