Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
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();
});
});