Skip to content

Commit 7c2d3b9

Browse files
esanuandraesanuandra
committed
fix tests
1 parent 25412d0 commit 7c2d3b9

18 files changed

+3225
-1066
lines changed

‎src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,12 +210,14 @@ exports[`Results Table Should match snapshot 1`] = `
210210
>
211211
<div
212212
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1tlcqt-MuiAutocomplete-root"
213+
data-testid="autocomplete"
213214
>
214215
<div
215216
class="MuiFormControl-root MuiFormControl-fullWidth f7lnopv css-ytlejw-MuiFormControl-root"
216217
>
217218
<div
218219
class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root search-text-field base css-cmpglg-MuiFormControl-root-MuiTextField-root"
220+
role="textbox"
219221
>
220222
<div
221223
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-1e4fo0f-MuiInputBase-root-MuiOutlinedInput-root"
@@ -535,12 +537,14 @@ exports[`Results Table Should match snapshot 1`] = `
535537
>
536538
<div
537539
class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1tlcqt-MuiAutocomplete-root"
540+
data-testid="autocomplete"
538541
>
539542
<div
540543
class="MuiFormControl-root MuiFormControl-fullWidth f7lnopv css-ytlejw-MuiFormControl-root"
541544
>
542545
<div
543546
class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root search-text-field new css-cmpglg-MuiFormControl-root-MuiTextField-root"
547+
role="textbox"
544548
>
545549
<div
546550
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedStart MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-1e4fo0f-MuiInputBase-root-MuiOutlinedInput-root"

‎src/__tests__/Search/CompareOverTime.test.tsx‎

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@ import {
1919
waitFor,
2020
} from '../utils/test-utils';
2121

22+
const searchRevisionPlaceholder =
23+
Strings.components.searchDefault.base.collapsed.base.inputPlaceholder;
24+
2225
function setUpTestData() {
2326
const { testData } = getTestData();
2427
fetchMock
@@ -259,7 +262,11 @@ describe('Compare Over Time', () => {
259262
const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
260263

261264
// Click inside the input box to show search results.
262-
const searchInput = screen.getByRole('textbox');
265+
266+
// focus input to show results
267+
const searchInput = screen.getAllByPlaceholderText(
268+
searchRevisionPlaceholder,
269+
)[2];
263270
await user.click(searchInput);
264271

265272
const comment = await screen.findAllByText("you've got no arms left!");
@@ -281,7 +288,9 @@ describe('Compare Over Time', () => {
281288

282289
expect(within(formElement).getByText(/Time range/)).toBeInTheDocument();
283290

284-
const searchInput = screen.getByRole('textbox');
291+
const searchInput = screen.getAllByPlaceholderText(
292+
searchRevisionPlaceholder,
293+
)[2];
285294
await user.click(searchInput);
286295
const checkbox = await screen.findByTestId('checkbox-0');
287296
await user.click(checkbox);
@@ -310,7 +319,10 @@ describe('Compare Over Time', () => {
310319
const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
311320

312321
// focus input to show results
313-
const searchInput = screen.getByRole('textbox');
322+
const searchInput = screen.getAllByPlaceholderText(
323+
searchRevisionPlaceholder,
324+
)[2];
325+
314326
await user.click(searchInput);
315327

316328
const noArmsLeft = await screen.findByText(/no arms left/);
@@ -368,8 +380,10 @@ describe('Compare Over Time', () => {
368380
).toBeInTheDocument();
369381

370382
// focus first input to show results
371-
const inputs = screen.getAllByRole('textbox');
372-
await user.click(inputs[0]);
383+
const searchInputs = screen.getAllByPlaceholderText(
384+
searchRevisionPlaceholder,
385+
);
386+
await user.click(searchInputs[2]);
373387

374388
// Select a rev
375389
const items = await screen.findAllByText("you've got no arms left!");
@@ -534,14 +548,17 @@ describe('Compare Over Time', () => {
534548
expect(formElement).toMatchSnapshot('After clicking edit button');
535549
expect(editButton).not.toBeVisible();
536550

537-
//add a new revision
538-
const searchInput = within(formElement).getByRole('textbox');
551+
// add a new revision
552+
const searchInput = screen.getAllByPlaceholderText(
553+
searchRevisionPlaceholder,
554+
)[0];
555+
539556
await user.click(searchInput);
540557
const alvesOfCoconut = await screen.findByText(/alves of coconuts/);
541558
await user.click(alvesOfCoconut);
542559
expect(checkboxForText(alvesOfCoconut)).toHaveClass('Mui-checked');
543560

544-
//change time range
561+
// change time range
545562
const timeRangeDropdown = screen.getByRole('combobox', {
546563
name: /Time range/i,
547564
});

‎src/__tests__/Search/CompareWithBase.test.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ import { Strings } from '../../resources/Strings';
1111
import getTestData from '../utils/fixtures';
1212
import { screen, renderWithRouter, within, waitFor } from '../utils/test-utils';
1313

14+
const searchRevisionPlaceholder =
15+
Strings.components.searchDefault.base.collapsed.base.inputPlaceholder;
16+
1417
function setUpTestData() {
1518
const { testData } = getTestData();
1619
fetchMock
@@ -165,7 +168,10 @@ describe('Compare With Base', () => {
165168
// set delay to null to prevent test time-out due to useFakeTimers
166169
const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
167170

168-
const searchInput = screen.getAllByRole('textbox')[0];
171+
// focus input to show results
172+
const searchInput = screen.getAllByPlaceholderText(
173+
searchRevisionPlaceholder,
174+
)[1];
169175
await user.click(searchInput);
170176
const checkbox = (await screen.findAllByTestId('checkbox-0'))[0];
171177
await user.click(checkbox);

‎src/__tests__/Search/SearchResultsList.test.tsx‎

Lines changed: 58 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { loader } from '../../components/Search/loader';
55
import SearchView from '../../components/Search/SearchView';
66
import { Strings } from '../../resources/Strings';
77
import getTestData from '../utils/fixtures';
8-
import { screen, within, renderWithRouter } from '../utils/test-utils';
8+
import { screen, renderWithRouter, fireEvent } from '../utils/test-utils';
99

1010
async function renderComponent() {
1111
renderWithRouter(<SearchView title={Strings.metaData.pageTitle.search} />, {
@@ -32,8 +32,12 @@ describe('SearchResultsList', () => {
3232
const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
3333

3434
await renderComponent();
35+
36+
const placeholder =
37+
Strings.components.searchDefault.base.collapsed.base.inputPlaceholder;
38+
3539
// focus input to show results
36-
const searchInput = screen.getAllByRole('textbox')[0];
40+
const searchInput = screen.getAllByPlaceholderText(placeholder)[0];
3741
await user.click(searchInput);
3842
await screen.findByText(/flesh wound/);
3943
expect(document.body).toMatchSnapshot();
@@ -44,11 +48,20 @@ describe('SearchResultsList', () => {
4448
const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
4549

4650
await renderComponent();
47-
// focus input to show results
48-
const searchInput = screen.getAllByRole('textbox')[0];
49-
await user.click(searchInput);
5051

51-
const fleshWound = await screen.findAllByText("it's just a flesh wound");
52+
const autocomplete = screen.getAllByTestId('autocomplete')[0];
53+
54+
// open dropdown using keyboard arrow down
55+
fireEvent.keyDown(autocomplete, {
56+
key: 'ArrowDown',
57+
code: 'ArrowDown',
58+
charCode: 40,
59+
});
60+
61+
// Wait for the dropdown to open and results to load
62+
await screen.findAllByRole('textbox');
63+
64+
const fleshWound = await screen.findAllByText(/it's just a flesh wound/);
5265

5366
await user.click(fleshWound[0]);
5467
expect(screen.getAllByTestId('checkbox-1')[0]).toHaveClass('Mui-checked');
@@ -60,23 +73,29 @@ describe('SearchResultsList', () => {
6073

6174
await renderComponent();
6275

63-
// focus input to show results
64-
const searchInput = screen.getAllByRole('textbox')[0];
65-
await user.click(searchInput);
76+
const autocomplete = screen.getAllByTestId('autocomplete')[0];
6677

67-
const fleshWound = await screen.findByRole('button', {
68-
name: /it's just a flesh wound/,
78+
// open dropdown using keyboard arrow down
79+
fireEvent.keyDown(autocomplete, {
80+
key: 'ArrowDown',
81+
code: 'ArrowDown',
82+
charCode: 40,
6983
});
70-
const fleshWoundCheckbox = within(fleshWound).getByRole('radio');
84+
85+
// Wait for the dropdown to open and results to load
86+
await screen.findAllByRole('textbox');
87+
88+
const autocompleteOptions = await screen.findAllByTestId(
89+
'autocomplete-option',
90+
);
91+
const fleshWound = autocompleteOptions[0];
7192

7293
await user.click(fleshWound);
7394
expect(fleshWound).toHaveClass('item-selected');
74-
expect(fleshWoundCheckbox).toBeChecked();
7595
expect(fleshWound.querySelector('.Mui-checked')).toBeInTheDocument();
7696

7797
await user.click(fleshWound);
7898
expect(fleshWound).not.toHaveClass('item-selected');
79-
expect(fleshWoundCheckbox).not.toBeChecked();
8099
expect(fleshWound.querySelector('.Mui-checked')).toBeNull();
81100
});
82101

@@ -85,9 +104,15 @@ describe('SearchResultsList', () => {
85104
const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
86105

87106
await renderComponent();
88-
// focus input to show results
89-
const searchInput = screen.getAllByRole('textbox')[0];
90-
await user.click(searchInput);
107+
const autocomplete = screen.getAllByTestId('autocomplete')[0];
108+
109+
// open dropdown using keyboard arrow down
110+
fireEvent.keyDown(autocomplete, {
111+
key: 'ArrowDown',
112+
code: 'ArrowDown',
113+
charCode: 40,
114+
});
115+
91116
await user.click((await screen.findAllByTestId('checkbox-0'))[0]);
92117
await user.click(screen.getAllByTestId('checkbox-1')[0]);
93118

@@ -111,8 +136,12 @@ describe('SearchResultsList', () => {
111136
const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
112137

113138
await renderComponent();
139+
140+
const placeholder =
141+
Strings.components.searchDefault.base.collapsed.base.inputPlaceholder;
142+
114143
// focus input to show results
115-
const searchInput = screen.getAllByRole('textbox')[1];
144+
const searchInput = screen.getAllByPlaceholderText(placeholder)[1];
116145
await user.click(searchInput);
117146

118147
const noArmsLeft = await screen.findByText(/no arms left/);
@@ -146,10 +175,17 @@ describe('SearchResultsList', () => {
146175

147176
await user.click(darkModeToggle);
148177
expect(screen.getByLabelText('Light mode')).toBeInTheDocument();
149-
const searchInput = screen.getAllByRole('textbox')[0];
150-
await user.click(searchInput);
151-
const resultsList = screen.getByTestId('list-mode');
152-
expect(resultsList).toMatchSnapshot('after toggling dark mode');
178+
const autocomplete = screen.getAllByTestId('autocomplete')[0];
179+
180+
// open dropdown using keyboard arrow down
181+
fireEvent.keyDown(autocomplete, {
182+
key: 'ArrowDown',
183+
code: 'ArrowDown',
184+
charCode: 40,
185+
});
186+
187+
const resultsList = screen.getByRole('listbox');
188+
expect(resultsList).toMatchSnapshot('after toggling dark mode 1');
153189
expect(resultsList).toHaveClass('results-list-dark');
154190
});
155191
});

‎src/__tests__/Search/SearchView.test.tsx‎

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ import {
1818
} from '../utils/test-utils';
1919

2020
const baseTitle = Strings.components.searchDefault.base.title;
21+
const searchRevisionPlaceholder =
22+
Strings.components.searchDefault.base.collapsed.base.inputPlaceholder;
2123

2224
function setupTestData() {
2325
const { testData } = getTestData();
@@ -191,7 +193,9 @@ describe('Base and OverTime Search', () => {
191193
await renderComponent();
192194

193195
// Click inside the input box to show search results.
194-
const searchInput = screen.getAllByRole('textbox')[0];
196+
const searchInput = screen.getAllByPlaceholderText(
197+
searchRevisionPlaceholder,
198+
)[0];
195199
await user.click(searchInput);
196200

197201
const comment = await screen.findAllByText("you've got no arms left!");
@@ -210,7 +214,9 @@ describe('Base and OverTime Search', () => {
210214

211215
// Click inside the input box to show search results.
212216

213-
const searchInput = screen.getAllByRole('textbox')[0];
217+
const searchInput = screen.getAllByPlaceholderText(
218+
searchRevisionPlaceholder,
219+
)[0];
214220
await user.click(searchInput);
215221

216222
const comment = await screen.findAllByText("you've got no arms left!");
@@ -227,7 +233,9 @@ describe('Base and OverTime Search', () => {
227233
const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
228234
await renderComponent();
229235

230-
const searchInput = screen.getAllByRole('textbox')[0];
236+
const searchInput = screen.getAllByPlaceholderText(
237+
searchRevisionPlaceholder,
238+
)[0];
231239

232240
// We're running fake timers after each user action, because the input
233241
// normally waits 500ms before doing requests. Because we want to test the
@@ -242,11 +250,10 @@ describe('Base and OverTime Search', () => {
242250
await user.type(searchInput, 'sp');
243251
act(() => void jest.runAllTimers());
244252

245-
expect(
246-
await screen.findByText(
247-
'The search input must be at least three characters.',
248-
),
249-
).toBeInTheDocument();
253+
const messages = await screen.findAllByText(
254+
'The search input must be at least three characters.',
255+
);
256+
expect(messages[0]).toBeInTheDocument();
250257

251258
// fetch is called 6 times:
252259
// - 3 times on initial load: one for each input, that is 2 in "compare with
@@ -265,7 +272,9 @@ describe('Base and OverTime Search', () => {
265272
const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
266273
await renderComponent();
267274

268-
const searchInput = screen.getAllByRole('textbox')[0];
275+
const searchInput = screen.getAllByPlaceholderText(
276+
searchRevisionPlaceholder,
277+
)[0];
269278
await user.click(searchInput);
270279

271280
// Wait until the dropdown appears as the result of the focus.
@@ -278,11 +287,10 @@ describe('Base and OverTime Search', () => {
278287
).not.toBeInTheDocument();
279288

280289
// But this appears after a while.
281-
expect(
282-
await screen.findByText(
283-
'The search input must be at least three characters.',
284-
),
285-
).toBeInTheDocument();
290+
const messages = await screen.findAllByText(
291+
'The search input must be at least three characters.',
292+
);
293+
expect(messages[0]).toBeInTheDocument();
286294
await user.type(searchInput, 'hncleese');
287295
await user.type(searchInput, '@python.co');
288296
await user.type(searchInput, 'm');
@@ -317,7 +325,9 @@ describe('Base and OverTime Search', () => {
317325
const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
318326
await renderComponent();
319327

320-
const searchInput = screen.getAllByRole('textbox')[0];
328+
const searchInput = screen.getAllByPlaceholderText(
329+
searchRevisionPlaceholder,
330+
)[0];
321331
await user.type(searchInput, '[email protected]');
322332
act(() => void jest.runAllTimers());
323333

@@ -341,7 +351,9 @@ describe('Base and OverTime Search', () => {
341351
await renderComponent();
342352

343353
// focus input to show results
344-
const searchInput = screen.getAllByRole('textbox')[0];
354+
const searchInput = screen.getAllByPlaceholderText(
355+
searchRevisionPlaceholder,
356+
)[0];
345357
await user.click(searchInput);
346358

347359
await screen.findAllByText("you've got no arms left!");
@@ -416,7 +428,7 @@ describe('Base and OverTime Search', () => {
416428
).toBeInTheDocument();
417429

418430
// focus first input to show results
419-
const inputs = screen.getAllByRole('textbox');
431+
const inputs = screen.getAllByPlaceholderText(searchRevisionPlaceholder);
420432
await user.click(inputs[0]);
421433

422434
// Select a base rev

0 commit comments

Comments
 (0)