Skip to content

Commit a542362

Browse files
followynnefollowynne
committed
tests: search
1 parent a100ed3 commit a542362

File tree

1 file changed

+173
-87
lines changed

1 file changed

+173
-87
lines changed

‎src/Serilog.Ui.Web/src/__tests__/components/Search/Search.spec.tsx‎

Lines changed: 173 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { dbKeysMock } from '__tests__/_setup/mocks/samples';
22
import {
3+
act,
34
fireEvent,
45
render,
56
screen,
@@ -8,12 +9,13 @@ import {
89
within,
910
} from '__tests__/_setup/testing-utils';
1011
import Search from 'app/components/Search/Search';
12+
import { searchFormInitialValues } from 'app/hooks/useSearchForm';
1113
import * as logs from 'app/queries/logs';
1214
import { IAuthPropertiesStorageKeys } from 'app/util/auth';
1315
import dayjs from 'dayjs';
1416
import objectSupport from 'dayjs/plugin/objectSupport';
1517
import { byLabelText, byRole } from 'testing-library-selector';
16-
import { AuthType } from 'types/types';
18+
import { AuthType, DispatchedCustomEvents } from 'types/types';
1719
import { beforeAll, describe, expect, it, vi } from 'vitest';
1820

1921
dayjs.extend(objectSupport);
@@ -73,147 +75,229 @@ describe('Search', () => {
7375
expect(screen.getByRole('form', { name: 'search-logs-form' })).toBeInTheDocument();
7476
});
7577

76-
it('fetch with selected table', async () => {
77-
const spy = vi.spyOn(logs, 'fetchLogs');
78+
describe('fields', () => {
79+
it('fetch with selected table', async () => {
80+
const spy = vi.spyOn(logs, 'fetchLogs');
7881

79-
render(<Search onRefetch={vi.fn()} />, AuthType.Jwt);
82+
render(<Search onRefetch={vi.fn()} />, AuthType.Jwt);
8083

81-
await selectTable();
84+
await selectTable();
8285

83-
expect(spy).toHaveBeenLastCalledWith(
84-
expect.objectContaining({
85-
table: dbKeysMock[0],
86-
}),
87-
expect.any(Object),
88-
'',
89-
);
90-
});
86+
expect(spy).toHaveBeenLastCalledWith(
87+
expect.objectContaining({
88+
table: dbKeysMock[0],
89+
}),
90+
expect.any(Object),
91+
'',
92+
);
93+
});
9194

92-
it('fetch with selected level', async () => {
93-
const spy = vi.spyOn(logs, 'fetchLogs');
95+
it('fetch with selected level', async () => {
96+
const spy = vi.spyOn(logs, 'fetchLogs');
9497

95-
render(<Search onRefetch={vi.fn()} />, AuthType.Jwt);
98+
render(<Search onRefetch={vi.fn()} />, AuthType.Jwt);
9699

97-
await selectTable();
100+
await selectTable();
98101

99-
const levelInput = ui.textbox('Level').get();
102+
const levelInput = ui.textbox('Level').get();
100103

101-
await userEvent.click(levelInput);
104+
await userEvent.click(levelInput);
102105

103-
const selectOption = ui.options(ui.listbox)[2];
106+
const selectOption = ui.options(ui.listbox)[2];
104107

105-
await userEvent.selectOptions(ui.listbox.get(), selectOption);
108+
await userEvent.selectOptions(ui.listbox.get(), selectOption);
106109

107-
await userEvent.click(ui.submit.get());
110+
await userEvent.click(ui.submit.get());
108111

109-
expect(spy).toHaveBeenLastCalledWith(
110-
expect.objectContaining({
111-
table: dbKeysMock[0],
112-
level: selectOption.getAttribute('value'),
113-
}),
114-
expect.any(Object),
115-
'',
116-
);
112+
expect(spy).toHaveBeenLastCalledWith(
113+
expect.objectContaining({
114+
table: dbKeysMock[0],
115+
level: selectOption.getAttribute('value'),
116+
}),
117+
expect.any(Object),
118+
'',
119+
);
120+
});
121+
122+
it('fetch with selected text search', async () => {
123+
const spy = vi.spyOn(logs, 'fetchLogs');
124+
125+
render(<Search onRefetch={vi.fn()} />, AuthType.Jwt);
126+
127+
await selectTable();
128+
129+
const levelInput = ui.textbox('Search').get();
130+
131+
await userEvent.type(levelInput, 'my search');
132+
133+
await userEvent.click(ui.submit.get());
134+
135+
expect(spy).toHaveBeenLastCalledWith(
136+
expect.objectContaining({
137+
table: dbKeysMock[0],
138+
search: 'my search',
139+
}),
140+
expect.any(Object),
141+
'',
142+
);
143+
});
144+
145+
it('fetch with selected start date', async () => {
146+
const spy = vi.spyOn(logs, 'fetchLogs');
147+
148+
render(<Search onRefetch={vi.fn()} />, AuthType.Jwt);
149+
150+
await selectTable();
151+
152+
// open end date modal
153+
await userEvent.click(ui.start_date.get());
154+
155+
// click sample day button
156+
await userEvent.click(ui.day_btn(sampleDate.format('DD MMMM YYYY')).get());
157+
// click sample time button
158+
// using fireEvent due to userEvent.type not supporting seconds
159+
// ref https://github.com/testing-library/user-event/blob/d0362796a33c2d39713998f82ae309020c37b385/tests/event/input.ts#L298
160+
fireEvent.change(ui.time_btn('start-time-input').get(), {
161+
target: { value: '15:15:30' },
162+
});
163+
164+
// click submit date button
165+
const submitBtn = within(screen.getByRole('dialog'))
166+
.getAllByRole('button')
167+
.slice(-1);
168+
await userEvent.click(submitBtn[0]);
169+
await waitForElementToBeRemoved(screen.queryByRole('dialog'));
170+
171+
// submit request
172+
await userEvent.click(ui.submit.get());
173+
174+
expect(spy).toHaveBeenLastCalledWith(
175+
expect.objectContaining({
176+
table: dbKeysMock[0],
177+
startDate: expect.toBeSameDate(sampleDate, { unit: 'seconds' }),
178+
}),
179+
expect.any(Object),
180+
'',
181+
);
182+
});
183+
184+
it('fetch with selected end date', async () => {
185+
const spy = vi.spyOn(logs, 'fetchLogs');
186+
187+
render(<Search onRefetch={vi.fn()} />, AuthType.Jwt);
188+
189+
await selectTable();
190+
191+
// open end date modal
192+
await userEvent.click(ui.end_date.get());
193+
194+
// click sample day button
195+
await userEvent.click(ui.day_btn(sampleDate.format('DD MMMM YYYY')).get());
196+
// click sample time button
197+
// using fireEvent due to userEvent.type not supporting seconds
198+
// ref https://github.com/testing-library/user-event/blob/d0362796a33c2d39713998f82ae309020c37b385/tests/event/input.ts#L298
199+
fireEvent.change(ui.time_btn('end-time-input').get(), {
200+
target: { value: '15:15:30' },
201+
});
202+
203+
// click submit date button
204+
const submitBtn = within(screen.getByRole('dialog'))
205+
.getAllByRole('button')
206+
.slice(-1);
207+
await userEvent.click(submitBtn[0]);
208+
await waitForElementToBeRemoved(screen.queryByRole('dialog'));
209+
210+
// submit request
211+
await userEvent.click(ui.submit.get());
212+
213+
expect(spy).toHaveBeenCalledWith(
214+
expect.objectContaining({
215+
table: dbKeysMock[0],
216+
endDate: expect.toBeSameDate(sampleDate, { unit: 'seconds' }),
217+
}),
218+
expect.any(Object),
219+
'',
220+
);
221+
});
117222
});
118223

119-
it('fetch with selected text search', async () => {
224+
it('refetches automatically when page is more than one', async () => {
120225
const spy = vi.spyOn(logs, 'fetchLogs');
226+
searchFormInitialValues.page = 2;
121227

122228
render(<Search onRefetch={vi.fn()} />, AuthType.Jwt);
123229

124230
await selectTable();
125-
126231
const levelInput = ui.textbox('Search').get();
127-
128232
await userEvent.type(levelInput, 'my search');
129-
130233
await userEvent.click(ui.submit.get());
131234

132-
expect(spy).toHaveBeenLastCalledWith(
235+
expect(spy).toHaveBeenNthCalledWith(
236+
1,
237+
expect.objectContaining({
238+
table: dbKeysMock[0],
239+
search: '',
240+
page: 2,
241+
}),
242+
expect.any(Object),
243+
'',
244+
);
245+
expect(spy).toHaveBeenNthCalledWith(
246+
2,
133247
expect.objectContaining({
134248
table: dbKeysMock[0],
135249
search: 'my search',
250+
level: null,
251+
page: 1,
136252
}),
137253
expect.any(Object),
138254
'',
139255
);
256+
searchFormInitialValues.page = 1;
140257
});
141258

142-
it('fetch with selected start date', async () => {
259+
it('invokes onRefetch on submit', async () => {
143260
const spy = vi.spyOn(logs, 'fetchLogs');
144261

145-
render(<Search onRefetch={vi.fn()} />, AuthType.Jwt);
262+
const onRefetchMock = vi.fn();
263+
render(<Search onRefetch={onRefetchMock} />, AuthType.Jwt);
146264

147265
await selectTable();
148266

149-
// open end date modal
150-
await userEvent.click(ui.start_date.get());
151-
152-
// click sample day button
153-
await userEvent.click(ui.day_btn(sampleDate.format('DD MMMM YYYY')).get());
154-
// click sample time button
155-
// using fireEvent due to userEvent.type not supporting seconds
156-
// ref https://github.com/testing-library/user-event/blob/d0362796a33c2d39713998f82ae309020c37b385/tests/event/input.ts#L298
157-
fireEvent.change(ui.time_btn('start-time-input').get(), {
158-
target: { value: '15:15:30' },
159-
});
267+
const levelInput = ui.textbox('Search').get();
160268

161-
// click submit date button
162-
const submitBtn = within(screen.getByRole('dialog')).getAllByRole('button').slice(-1);
163-
await userEvent.click(submitBtn[0]);
164-
await waitForElementToBeRemoved(screen.queryByRole('dialog'));
269+
await userEvent.type(levelInput, 'my search');
165270

166-
// submit request
167271
await userEvent.click(ui.submit.get());
168272

169-
expect(spy).toHaveBeenLastCalledWith(
273+
expect(spy).toHaveBeenNthCalledWith(
274+
2,
170275
expect.objectContaining({
171276
table: dbKeysMock[0],
172-
startDate: expect.toBeSameDate(sampleDate, { unit: 'seconds' }),
277+
search: 'my search',
278+
level: null,
173279
}),
174280
expect.any(Object),
175281
'',
176282
);
283+
expect(onRefetchMock).toHaveBeenCalledOnce();
177284
});
178285

179-
it('fetch with selected end date', async () => {
180-
const spy = vi.spyOn(logs, 'fetchLogs');
181-
286+
it('invokes reset on RemoveTableKey event, removing the table value', async () => {
287+
const tableInput = ui.textbox('Table').get;
182288
render(<Search onRefetch={vi.fn()} />, AuthType.Jwt);
183289

184290
await selectTable();
291+
expect(tableInput()).toHaveValue(dbKeysMock[0]);
185292

186-
// open end date modal
187-
await userEvent.click(ui.end_date.get());
188-
189-
// click sample day button
190-
await userEvent.click(ui.day_btn(sampleDate.format('DD MMMM YYYY')).get());
191-
// click sample time button
192-
// using fireEvent due to userEvent.type not supporting seconds
193-
// ref https://github.com/testing-library/user-event/blob/d0362796a33c2d39713998f82ae309020c37b385/tests/event/input.ts#L298
194-
fireEvent.change(ui.time_btn('end-time-input').get(), {
195-
target: { value: '15:15:30' },
293+
act(() => {
294+
document.dispatchEvent(new CustomEvent(DispatchedCustomEvents.RemoveTableKey));
196295
});
197296

198-
// click submit date button
199-
const submitBtn = within(screen.getByRole('dialog')).getAllByRole('button').slice(-1);
200-
await userEvent.click(submitBtn[0]);
201-
await waitForElementToBeRemoved(screen.queryByRole('dialog'));
202-
203-
// submit request
204-
await userEvent.click(ui.submit.get());
205-
206-
expect(spy).toHaveBeenLastCalledWith(
207-
expect.objectContaining({
208-
table: dbKeysMock[0],
209-
endDate: expect.toBeSameDate(sampleDate, { unit: 'seconds' }),
210-
}),
211-
expect.any(Object),
212-
'',
213-
);
297+
expect(tableInput()).toHaveValue('');
214298
});
215299

216-
it('clean inputs', async () => {
300+
it('clean inputs calling refetch', async () => {
217301
const spy = vi.spyOn(logs, 'fetchLogs');
218302

219303
render(<Search onRefetch={vi.fn()} />, AuthType.Jwt);
@@ -226,7 +310,8 @@ describe('Search', () => {
226310

227311
await userEvent.click(ui.submit.get());
228312

229-
expect(spy).toHaveBeenLastCalledWith(
313+
expect(spy).toHaveBeenNthCalledWith(
314+
2,
230315
expect.objectContaining({
231316
table: dbKeysMock[0],
232317
search: 'my search',
@@ -238,7 +323,8 @@ describe('Search', () => {
238323

239324
await userEvent.click(ui.clear.get());
240325

241-
expect(spy).toHaveBeenLastCalledWith(
326+
expect(spy).toHaveBeenNthCalledWith(
327+
3,
242328
expect.objectContaining({
243329
table: dbKeysMock[0],
244330
search: '',

0 commit comments

Comments
 (0)