ContactForm.test.tsx

import * as React from 'react';
import ContactForm from './ContactForm';
import { config as transitionConfig } from 'react-transition-group';
import userEvent from '@testing-library/user-event';
import { fireEvent, render, screen } from '@testing-library/react';
// Disable CSSTransitions to prevent them from messing with test conditions
transitionConfig.disabled = true;

const problem = ''; // for now makes no difference

const fillInContactForm = () => {
  const nameInput = screen.getByRole('textbox', { name: /name/i });
  const phoneInput = screen.getByRole('textbox', { name: /phone/i });
  const emailInput = screen.getByRole('textbox', { name: /e-?mail/i });
  const messageInput = screen.getByRole('textbox', { name: /message/i });

  expect(nameInput).toBeInTheDocument();
  expect(phoneInput).toBeInTheDocument();
  expect(emailInput).toBeInTheDocument();
  expect(messageInput).toBeInTheDocument();

  // Note, fields are checked server side so don't expect validation here.
  userEvent.type(nameInput, 'Maurice Moss');
  userEvent.type(phoneInput, '0118 999 881 99 9119 7253');
  userEvent.type(emailInput, 'moss@itcrowd.co.uk');
  userEvent.type(
    messageInput,
    'Dear sir/madam,\n\n' +
      'Fire! Fire! Help me!\n\n' +
      '123, Caladin road\n\n' +
      'Looking forward to hearing from you.\n\n' +
      'All the best,\n' +
      'Maurice Moss.',
  );
  // Let's have one check here..
  expect(nameInput).toHaveValue('Maurice Moss');
};

describe('<ContactForm problemGroup="%s"}>', () => {
  it.each([[''], ['administrative'], ['technical']])(
    'renders the contact form with problemGroup: %s',
    (problemGroup) => {
      const { getByRole, queryByRole, getByText } = render(
        <ContactForm formAction='' problem={problem} problemGroup={problemGroup} />,
      );
      const contactDetailFieldset = getByRole('group', {
        name: /Contact details/i,
      });
      const messageFieldset = getByRole('group', {
        name: /what do you want to tell us/i,
      });

      const urgencyCheckbox = queryByRole('checkbox', {
        name: /urgent request/i,
      });

      if (problemGroup == 'technical')
        expect(urgencyCheckbox).toBeInTheDocument();
      else expect(urgencyCheckbox).not.toBeInTheDocument();

      const regularSubmit = getByRole('button', { name: /submit request/i });
      expect(regularSubmit).toBeInTheDocument();

      expect(contactDetailFieldset).toBeInTheDocument();
      expect(messageFieldset).toBeInTheDocument();
    },
  );
  it.each([
    ['pressing key', '{esc}'],
    ['pressing key', '{enter}'],
    ['clicking button', 'Okay'],
    ['clicking button', 'close'],
  ])('confirmation modal closes on %s %s', (action, value) => {
    const problemGroup = 'technical';
    const { getByRole } = render(
      <ContactForm formAction='' problem={problem} problemGroup={problemGroup} />,
    );
    const regularSubmit = getByRole('button', { name: /submit request/i });

    userEvent.click(regularSubmit);

    const modal = getByRole('dialog', { name: /thank you/i });
    expect(modal).toBeInTheDocument();

    if (/clicking/.test(action)) {
      // Close modal by clicking a button..
      const button = getByRole('button', { name: value });
      userEvent.click(button);
    } else {
      // Close modal by pressing a key..
      const body = document.getElementsByTagName('body')[0];
      userEvent.type(body, value);
    }
    expect(modal).not.toBeInTheDocument();
  });

  it('has an option to make the request urgent', () => {
    const problemGroup = 'technical';
    const { getByText, getByRole } = render(
      <ContactForm formAction='' problem={problem} problemGroup={problemGroup} />,
    );
    const urgencyCheckbox = getByRole('checkbox', {
      name: /urgent request/i,
    });
    expect(urgencyCheckbox).toBeInTheDocument();

    const regularSubmit = getByRole('button', { name: /submit request/i });
    expect(regularSubmit).toBeInTheDocument();

    fillInContactForm();

    userEvent.click(urgencyCheckbox);

    const urgencyInput = getByRole('textbox', { name: /type urgent/i });
    userEvent.type(urgencyInput, 'URGENT');
    expect(regularSubmit).not.toBeInTheDocument();
    const urgentSubmit = getByRole('button', {
      name: /submit urgent request/i,
    });
    expect(urgentSubmit).toBeInTheDocument();
    userEvent.click(urgentSubmit);

    const dialogMain = getByText(/fire!/i);
    expect(dialogMain).toBeInTheDocument();
    // Close modal by pressing okay..
    const modal = getByRole('dialog', { name: /thank you/i });
    expect(modal).toBeInTheDocument();
    const okay = getByRole('button', { name: /okay/i });
    userEvent.click(okay);
    expect(modal).not.toBeInTheDocument();
  });
});