-
-
Notifications
You must be signed in to change notification settings - Fork 658
/
SelectProjectInput.test.tsx
169 lines (143 loc) · 5.4 KB
/
SelectProjectInput.test.tsx
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
import { vi } from 'vitest';
import { screen, waitFor, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { render } from 'utils/testRenderer';
import {
type ISelectProjectInputProps,
SelectProjectInput,
} from './SelectProjectInput';
import { testServerRoute, testServerSetup } from 'utils/testServer';
const onChange = vi.fn();
const onFocus = vi.fn();
const mockProps: ISelectProjectInputProps = {
options: [
{ label: 'Project1', value: 'project1' },
{ label: 'Project2', value: 'project2' },
{ label: 'Project3', value: 'project3' },
],
defaultValue: ['*'],
onChange,
onFocus,
};
const server = testServerSetup();
describe('SelectProjectInput', () => {
beforeEach(() => {
onChange.mockClear();
onFocus.mockClear();
testServerRoute(server, '/api/admin/ui-config', {});
});
it('renders with default state', () => {
render(<SelectProjectInput {...mockProps} />);
const checkbox = screen.getByLabelText(
/all current and future projects/i,
);
expect(checkbox).toBeChecked();
const selectInputContainer = screen.getByTestId('select-input');
const input = within(selectInputContainer).getByRole('combobox');
expect(input).toBeDisabled();
});
it('can toggle "ALL" checkbox', async () => {
const user = userEvent.setup();
render(<SelectProjectInput {...mockProps} />);
await user.click(screen.getByTestId('select-all-projects'));
expect(
screen.getByLabelText(/all current and future projects/i),
).not.toBeChecked();
expect(screen.getByLabelText('Projects')).toBeEnabled();
await user.click(screen.getByTestId('select-all-projects'));
expect(
screen.getByLabelText(/all current and future projects/i),
).toBeChecked();
expect(screen.getByLabelText('Projects')).toBeDisabled();
});
it('renders with autocomplete enabled if default value is not a wildcard', () => {
render(
<SelectProjectInput {...mockProps} defaultValue={['project1']} />,
);
const checkbox = screen.getByLabelText(
/all current and future projects/i,
);
expect(checkbox).not.toBeChecked();
const selectInputContainer = screen.getByTestId('select-input');
const input = within(selectInputContainer).getByRole('combobox');
expect(input).toBeEnabled();
});
describe('Select/Deselect projects in dropdown', () => {
it('selects and deselects all options', async () => {
const user = userEvent.setup();
render(<SelectProjectInput {...mockProps} defaultValue={[]} />);
await user.click(screen.getByLabelText('Projects'));
let button = screen.getByRole('button', {
name: /select all/i,
});
expect(button).toBeInTheDocument();
await user.click(button);
expect(onChange).toHaveBeenCalledWith([
'project1',
'project2',
'project3',
]);
button = screen.getByRole('button', {
name: /deselect all/i,
});
expect(button).toBeInTheDocument();
await user.click(button);
expect(onChange).toHaveBeenCalledWith([]);
});
it("doesn't show up for less than 3 options", async () => {
const user = userEvent.setup();
render(
<SelectProjectInput
{...mockProps}
defaultValue={[]}
options={[
{ label: 'Project1', value: 'project1' },
{ label: 'Project2', value: 'project2' },
]}
/>,
);
await user.click(screen.getByLabelText('Projects'));
const button = screen.queryByRole('button', {
name: /select all/i,
});
expect(button).not.toBeInTheDocument();
});
});
it('can filter options', async () => {
const user = userEvent.setup();
render(
<SelectProjectInput
{...mockProps}
defaultValue={[]}
options={[
{ label: 'Alpha', value: 'alpha' },
{ label: 'Bravo', value: 'bravo' },
{ label: 'Charlie', value: 'charlie' },
{ label: 'Alpaca', value: 'alpaca' },
]}
/>,
);
const input = await screen.findByLabelText('Projects');
await user.type(input, 'alp');
await waitFor(() => {
expect(screen.getByText('Alpha')).toBeVisible();
});
await waitFor(() => {
expect(screen.queryByText('Bravo')).not.toBeInTheDocument();
});
await waitFor(() => {
expect(screen.queryByText('Charlie')).not.toBeInTheDocument();
});
await waitFor(() => {
expect(screen.getByText('Alpaca')).toBeVisible();
});
await user.clear(input);
await user.type(input, 'bravo');
await waitFor(() => {
expect(screen.getByText('Bravo')).toBeVisible();
});
await waitFor(() => {
expect(screen.queryByText('Alpha')).not.toBeInTheDocument();
});
});
});