Skip to content
Snippets Groups Projects
Commit d3ff7044 authored by Chris's avatar Chris
Browse files

Add provisional test for urgency form

parent c1569752
No related branches found
No related tags found
1 merge request!7Resolve "Create "urgent request" component"
import * as React from 'react';
import { render, screen } from '@testing-library/react';
import UrgentRequest, {
UrgentRequestProps,
} from './UrgentRequest';
import userEvent from '@testing-library/user-event';
const mockSetUrgent = jest.fn((urgen: boolean) => { });
describe('<UrgentRequest>', () => {
it('renders the option to make a contact request urgent', () => {
const { getByText, findAllByText } = render(
<UrgentRequest urgent={urgent} setUrgent={ mockSetUrgent } />
);
// Folded urgent box has invisible content
const urgentIntro = getByText(/CAUTION:/i);
const urgentInput = screen.getByRole('input');
const urgentSubmit = screen.getByRole('button');
const urgentFold = getByText(/Urgent request\?/i);
const noUrgentConfirmation = findAllByText(/Your request was marked urgent/i);
expect(urgentIntro).not.toBeVisible();
// Unfolfing the urgency form
userEvent.click(urgentFold);
expect(urgentIntro).toBeVisible();
// Not urgent initially
expect(noUrgentConfirmation).toBe([]);
// See expected elements
expect(document.body.contains(urgentIntro));
expect(urgentIntro).toHaveTextContent(/"URGENT"/)
// 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();
// Clear the input
userEvent.clear(urgentInput);
// Fill in URGENT to change the urgent status
userEvent.type(urgentInput, "URGENT");
// Can click submit now..
expect(urgentSubmit).not.toBeDisabled();
// Clicking it..
userEvent.click(urgentSubmit);
// Triggers a message sent up the hierarchy..
expect(mockSetUrgent).toBeCalledWith(true);
// Which changes the `urgent` prop passed down to it which changes the
// status to urgent.
const urgentConfirmation = getByText(/Your request was marked urgent/i);
expect(document.body.contains(urgentConfirmation));
// The urgent form is gone
expect(urgentSubmit).not.toBeVisible();
expect(urgentInput).not.toBeVisible();
// A new button apppears that allows the status to be not urgent again.
const notUrgentSubmit = screen.getByRole('button');
// Clicking it reverts everthing back to the original state.
userEvent.click(notUrgentSubmit);
expect(document.body.contains(urgentConfirmation)).not.toBeTruthy();
expect(urgentInput).toBeVisible();
expect(urgentInput).toHaveValue("");
expect(urgentSubmit).toBeVisible();
expect(notUrgentSubmit).not.toBeVisible();
});
});
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment