Skip to content

Commit 2270406

Browse files
weaverryanweaverryan
committed
Switching to vitest-fetch-mock
1 parent 9043da3 commit 2270406

File tree

3 files changed

+46
-42
lines changed

3 files changed

+46
-42
lines changed

‎src/Autocomplete/assets/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
},
3030
"devDependencies": {
3131
"@hotwired/stimulus": "^3.0.0",
32-
"fetch-mock-jest": "^1.5.1",
33-
"tom-select": "^2.2.2"
32+
"tom-select": "^2.2.2",
33+
"vitest-fetch-mock": "^0.2.2"
3434
}
3535
}

‎src/Autocomplete/assets/test/controller.test.ts

Lines changed: 44 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,10 @@ import AutocompleteController, {
1515
AutocompleteConnectOptions,
1616
AutocompletePreConnectOptions,
1717
} from '../src/controller';
18-
import fetchMock from 'fetch-mock-jest';
1918
import userEvent from '@testing-library/user-event';
2019
import TomSelect from 'tom-select';
20+
import createFetchMock from 'vitest-fetch-mock';
21+
import { vi } from 'vitest';
2122

2223
const shortDelay = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));
2324

@@ -50,19 +51,21 @@ const startAutocompleteTest = async (html: string): Promise<{ container: HTMLEle
5051
return { container, tomSelect };
5152
}
5253

54+
const fetchMocker = createFetchMock(vi);
5355
describe('AutocompleteController', () => {
5456
beforeAll(() => {
5557
const application = Application.start();
5658
application.register('autocomplete', AutocompleteController);
59+
60+
fetchMocker.enableMocks();
61+
});
62+
63+
beforeEach(() => {
64+
fetchMocker.resetMocks();
5765
});
5866

5967
afterEach(() => {
6068
document.body.innerHTML = '';
61-
62-
if (!fetchMock.done()) {
63-
throw new Error('Mocked requests did not match');
64-
}
65-
fetchMock.reset();
6669
});
6770

6871
it('connect without options', async () => {
@@ -74,6 +77,7 @@ describe('AutocompleteController', () => {
7477
`);
7578

7679
expect(tomSelect.input).toBe(getByTestId(container, 'main-element'));
80+
expect(fetchMock.requests().length).toEqual(0);
7781
});
7882

7983
it('connect with ajax URL on a select element', async () => {
@@ -88,8 +92,7 @@ describe('AutocompleteController', () => {
8892
`);
8993

9094
// initial Ajax request on focus
91-
fetchMock.mock(
92-
'/path/to/autocomplete?query=',
95+
fetchMock.mockResponseOnce(
9396
JSON.stringify({
9497
results: [
9598
{
@@ -100,8 +103,7 @@ describe('AutocompleteController', () => {
100103
}),
101104
);
102105

103-
fetchMock.mock(
104-
'/path/to/autocomplete?query=foo',
106+
fetchMock.mockResponseOnce(
105107
JSON.stringify({
106108
results: [
107109
{
@@ -132,6 +134,10 @@ describe('AutocompleteController', () => {
132134
await waitFor(() => {
133135
expect(container.querySelectorAll('.option[data-selectable]')).toHaveLength(2);
134136
});
137+
138+
expect(fetchMock.requests().length).toEqual(2);
139+
expect(fetchMock.requests()[0].url).toEqual('/path/to/autocomplete?query=');
140+
expect(fetchMock.requests()[1].url).toEqual('/path/to/autocomplete?query=foo');
135141
});
136142

137143
it('connect with ajax URL on an input element', async () => {
@@ -146,8 +152,7 @@ describe('AutocompleteController', () => {
146152
`);
147153

148154
// initial Ajax request on focus
149-
fetchMock.mock(
150-
'/path/to/autocomplete?query=',
155+
fetchMock.mockResponseOnce(
151156
JSON.stringify({
152157
results: [
153158
{
@@ -158,8 +163,7 @@ describe('AutocompleteController', () => {
158163
}),
159164
);
160165

161-
fetchMock.mock(
162-
'/path/to/autocomplete?query=foo',
166+
fetchMock.mockResponseOnce(
163167
JSON.stringify({
164168
results: [
165169
{
@@ -190,6 +194,10 @@ describe('AutocompleteController', () => {
190194
await waitFor(() => {
191195
expect(container.querySelectorAll('.option[data-selectable]')).toHaveLength(2);
192196
});
197+
198+
expect(fetchMock.requests().length).toEqual(2);
199+
expect(fetchMock.requests()[0].url).toEqual('/path/to/autocomplete?query=');
200+
expect(fetchMock.requests()[1].url).toEqual('/path/to/autocomplete?query=foo');
193201
});
194202

195203
it('limits updates when min-characters', async () => {
@@ -212,6 +220,8 @@ describe('AutocompleteController', () => {
212220
await waitFor(() => {
213221
expect(container.querySelectorAll('.option[data-selectable]')).toHaveLength(0);
214222
});
223+
224+
expect(fetchMock.requests().length).toEqual(0);
215225
});
216226

217227
it('min-characters can be a falsy value', async () => {
@@ -241,8 +251,7 @@ describe('AutocompleteController', () => {
241251
const controlInput = tomSelect.control_input;
242252

243253
// ajax call from initial focus
244-
fetchMock.mock(
245-
'/path/to/autocomplete?query=',
254+
fetchMock.mockResponseOnce(
246255
JSON.stringify({
247256
results: [
248257
{
@@ -267,8 +276,7 @@ describe('AutocompleteController', () => {
267276
});
268277

269278
// now trigger a load
270-
fetchMock.mock(
271-
'/path/to/autocomplete?query=foo',
279+
fetchMock.mockResponseOnce(
272280
JSON.stringify({
273281
results: [
274282
{
@@ -290,8 +298,7 @@ describe('AutocompleteController', () => {
290298
});
291299

292300
// now go below the min characters, but it should still load
293-
fetchMock.mock(
294-
'/path/to/autocomplete?query=fo',
301+
fetchMock.mockResponseOnce(
295302
JSON.stringify({
296303
results: [
297304
{
@@ -315,6 +322,11 @@ describe('AutocompleteController', () => {
315322
await waitFor(() => {
316323
expect(container.querySelectorAll('.option[data-selectable]')).toHaveLength(3);
317324
});
325+
326+
expect(fetchMock.requests().length).toEqual(3);
327+
expect(fetchMock.requests()[0].url).toEqual('/path/to/autocomplete?query=');
328+
expect(fetchMock.requests()[1].url).toEqual('/path/to/autocomplete?query=foo');
329+
expect(fetchMock.requests()[2].url).toEqual('/path/to/autocomplete?query=fo');
318330
});
319331

320332
it('adds work-around for live-component & multiple select', async () => {
@@ -359,8 +371,7 @@ describe('AutocompleteController', () => {
359371
`);
360372

361373
// initial Ajax request on focus
362-
fetchMock.mock(
363-
'/path/to/autocomplete?query=',
374+
fetchMock.mockResponseOnce(
364375
JSON.stringify({
365376
results: [
366377
{value: 1, text: 'dog1'},
@@ -390,8 +401,7 @@ describe('AutocompleteController', () => {
390401
throw new Error('cannot find dropdown content element');
391402
}
392403

393-
fetchMock.mock(
394-
'/path/to/autocomplete?query=&page=2',
404+
fetchMock.mockResponseOnce(
395405
JSON.stringify({
396406
results: [
397407
{value: 11, text: 'dog11'},
@@ -407,6 +417,10 @@ describe('AutocompleteController', () => {
407417
await waitFor(() => {
408418
expect(container.querySelectorAll('.option[data-selectable]')).toHaveLength(12);
409419
});
420+
421+
expect(fetchMock.requests().length).toEqual(2);
422+
expect(fetchMock.requests()[0].url).toEqual('/path/to/autocomplete?query=');
423+
expect(fetchMock.requests()[1].url).toEqual('/path/to/autocomplete?query=&page=2');
410424
});
411425

412426
it('continues working even if options html rearranges', async () => {
@@ -625,8 +639,7 @@ describe('AutocompleteController', () => {
625639
`);
626640

627641
// initial Ajax request on focus with group_by options
628-
fetchMock.mock(
629-
'/path/to/autocomplete?query=',
642+
fetchMock.mockResponseOnce(
630643
JSON.stringify({
631644
results: {
632645
options: [
@@ -665,8 +678,7 @@ describe('AutocompleteController', () => {
665678
}),
666679
);
667680

668-
fetchMock.mock(
669-
'/path/to/autocomplete?query=foo',
681+
fetchMock.mockResponseOnce(
670682
JSON.stringify({
671683
results: {
672684
options: [
@@ -709,5 +721,9 @@ describe('AutocompleteController', () => {
709721
expect(container.querySelectorAll('.option[data-selectable]')).toHaveLength(2);
710722
expect(container.querySelectorAll('.optgroup-header')).toHaveLength(1);
711723
});
724+
725+
expect(fetchMock.requests().length).toEqual(2);
726+
expect(fetchMock.requests()[0].url).toEqual('/path/to/autocomplete?query=');
727+
expect(fetchMock.requests()[1].url).toEqual('/path/to/autocomplete?query=foo');
712728
});
713729
});

‎src/Autocomplete/assets/test/setup.js

Lines changed: 0 additions & 12 deletions
This file was deleted.

0 commit comments

Comments
 (0)