mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-06-22 06:41:46 +00:00
fix(tests): mock FormData uploads at API boundary to fix CI timeouts
jsdom's FormData is incompatible with undici's ReadableStream serialisation used by MSW 2.x — requests hang under CI resource constraints but pass locally. Replace server.use() + implicit HTTP roundtrip with vi.spyOn().mockResolvedValueOnce() for all five FormData POST tests (uploadAvatar, uploadRestore, addFile, importGpx).
This commit is contained in:
@@ -5,6 +5,7 @@ import { http, HttpResponse } from 'msw';
|
|||||||
import { useAuthStore } from '../../store/authStore';
|
import { useAuthStore } from '../../store/authStore';
|
||||||
import { useTripStore } from '../../store/tripStore';
|
import { useTripStore } from '../../store/tripStore';
|
||||||
import { usePermissionsStore } from '../../store/permissionsStore';
|
import { usePermissionsStore } from '../../store/permissionsStore';
|
||||||
|
import { placesApi } from '../../api/client';
|
||||||
import { resetAllStores, seedStore } from '../../../tests/helpers/store';
|
import { resetAllStores, seedStore } from '../../../tests/helpers/store';
|
||||||
import { buildUser, buildTrip, buildPlace, buildCategory, buildDay, buildAssignment } from '../../../tests/helpers/factories';
|
import { buildUser, buildTrip, buildPlace, buildCategory, buildDay, buildAssignment } from '../../../tests/helpers/factories';
|
||||||
import { server } from '../../../tests/helpers/msw/server';
|
import { server } from '../../../tests/helpers/msw/server';
|
||||||
@@ -443,11 +444,8 @@ describe('GPX import', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
it('FE-PLANNER-SIDEBAR-039: successful GPX import shows success toast', async () => {
|
it('FE-PLANNER-SIDEBAR-039: successful GPX import shows success toast', async () => {
|
||||||
server.use(
|
// FormData POST hangs on CI — mock at the API boundary instead of MSW.
|
||||||
http.post('/api/trips/1/places/import/gpx', () =>
|
const importSpy = vi.spyOn(placesApi, 'importGpx').mockResolvedValueOnce({ count: 2, places: [{ id: 10 }, { id: 11 }] });
|
||||||
HttpResponse.json({ count: 2, places: [{ id: 10 }, { id: 11 }] })
|
|
||||||
),
|
|
||||||
);
|
|
||||||
const loadTrip = vi.fn().mockResolvedValue(undefined);
|
const loadTrip = vi.fn().mockResolvedValue(undefined);
|
||||||
seedStore(useTripStore, { loadTrip });
|
seedStore(useTripStore, { loadTrip });
|
||||||
const addToast = vi.fn();
|
const addToast = vi.fn();
|
||||||
@@ -465,6 +463,7 @@ describe('GPX import', () => {
|
|||||||
undefined,
|
undefined,
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
importSpy.mockRestore();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -466,18 +466,10 @@ describe('API client interceptors', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
it('FE-API-022: authApi.uploadAvatar sends multipart/form-data', async () => {
|
it('FE-API-022: authApi.uploadAvatar sends multipart/form-data', async () => {
|
||||||
// jsdom's FormData ≠ undici's FormData, so Node.js's Request always
|
// jsdom's FormData ≠ undici's FormData — MSW body serialisation of FormData
|
||||||
// serialises it as text/plain — Content-Type header checks are unreliable.
|
// hangs under CI resource constraints. Spy + mock at the axios level to verify
|
||||||
// MSW wraps XHR in a Proxy, so XHR prototype spies never fire. axios.create()
|
// the correct args are passed without going through the network stack.
|
||||||
// copies prototype methods onto the instance as bound functions, so prototype
|
const postSpy = vi.spyOn(apiClient, 'post').mockResolvedValueOnce({ data: { avatar_url: '/uploads/avatar.jpg' } } as any);
|
||||||
// spies don't fire either. Spy on the exported apiClient instance directly.
|
|
||||||
server.use(
|
|
||||||
http.post('/api/auth/avatar', () => {
|
|
||||||
return HttpResponse.json({ avatar_url: '/uploads/avatar.jpg' });
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
const postSpy = vi.spyOn(apiClient, 'post');
|
|
||||||
|
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
formData.append('avatar', new Blob(['img'], { type: 'image/jpeg' }), 'avatar.jpg');
|
formData.append('avatar', new Blob(['img'], { type: 'image/jpeg' }), 'avatar.jpg');
|
||||||
@@ -894,9 +886,11 @@ describe('API namespace smoke tests', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
it('backupApi.uploadRestore uploads and restores a backup', async () => {
|
it('backupApi.uploadRestore uploads and restores a backup', async () => {
|
||||||
server.use(http.post('/api/backup/upload-restore', () => HttpResponse.json({ ok: true })));
|
// FormData POST hangs on CI — mock at the axios level (see FE-API-022 comment).
|
||||||
|
const postSpy = vi.spyOn(apiClient, 'post').mockResolvedValueOnce({ data: { ok: true } } as any);
|
||||||
const file = new File(['data'], 'backup.zip', { type: 'application/zip' });
|
const file = new File(['data'], 'backup.zip', { type: 'application/zip' });
|
||||||
await expect(backupApi.uploadRestore(file)).resolves.toMatchObject({ ok: true });
|
await expect(backupApi.uploadRestore(file)).resolves.toMatchObject({ ok: true });
|
||||||
|
postSpy.mockRestore();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('backupApi.restore restores a named backup', async () => {
|
it('backupApi.restore restores a named backup', async () => {
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||||
import { http, HttpResponse } from 'msw';
|
import { http, HttpResponse } from 'msw';
|
||||||
import { useTripStore } from '../../../src/store/tripStore';
|
import { useTripStore } from '../../../src/store/tripStore';
|
||||||
|
import { filesApi } from '../../../src/api/client';
|
||||||
import { resetAllStores, seedStore } from '../../helpers/store';
|
import { resetAllStores, seedStore } from '../../helpers/store';
|
||||||
import { buildTripFile } from '../../helpers/factories';
|
import { buildTripFile } from '../../helpers/factories';
|
||||||
import { server } from '../../helpers/msw/server';
|
import { server } from '../../helpers/msw/server';
|
||||||
@@ -56,14 +57,14 @@ describe('filesSlice', () => {
|
|||||||
seedStore(useTripStore, { files: [existing] });
|
seedStore(useTripStore, { files: [existing] });
|
||||||
|
|
||||||
const uploaded = buildTripFile({ trip_id: 1, filename: 'new-upload.pdf' });
|
const uploaded = buildTripFile({ trip_id: 1, filename: 'new-upload.pdf' });
|
||||||
server.use(
|
// FormData POST hangs on CI — mock at the API boundary instead of MSW.
|
||||||
http.post('/api/trips/1/files', () => HttpResponse.json({ file: uploaded })),
|
const uploadSpy = vi.spyOn(filesApi, 'upload').mockResolvedValueOnce({ file: uploaded });
|
||||||
);
|
|
||||||
|
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
formData.append('file', new Blob(['content'], { type: 'application/pdf' }), 'new-upload.pdf');
|
formData.append('file', new Blob(['content'], { type: 'application/pdf' }), 'new-upload.pdf');
|
||||||
|
|
||||||
const result = await useTripStore.getState().addFile(1, formData);
|
const result = await useTripStore.getState().addFile(1, formData);
|
||||||
|
uploadSpy.mockRestore();
|
||||||
|
|
||||||
expect(result.filename).toBe('new-upload.pdf');
|
expect(result.filename).toBe('new-upload.pdf');
|
||||||
const files = useTripStore.getState().files;
|
const files = useTripStore.getState().files;
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ import { describe, it, expect, beforeEach, vi } from 'vitest';
|
|||||||
import { http, HttpResponse } from 'msw';
|
import { http, HttpResponse } from 'msw';
|
||||||
import { server } from '../../helpers/msw/server';
|
import { server } from '../../helpers/msw/server';
|
||||||
import { useAuthStore } from '../../../src/store/authStore';
|
import { useAuthStore } from '../../../src/store/authStore';
|
||||||
|
import { authApi } from '../../../src/api/client';
|
||||||
import { resetAllStores } from '../../helpers/store';
|
import { resetAllStores } from '../../helpers/store';
|
||||||
import { buildUser } from '../../helpers/factories';
|
import { buildUser } from '../../helpers/factories';
|
||||||
|
|
||||||
@@ -425,11 +426,8 @@ describe('authStore', () => {
|
|||||||
|
|
||||||
describe('FE-STORE-AUTH-UPLOAD: uploadAvatar', () => {
|
describe('FE-STORE-AUTH-UPLOAD: uploadAvatar', () => {
|
||||||
it('updates avatar_url from response', async () => {
|
it('updates avatar_url from response', async () => {
|
||||||
server.use(
|
// FormData POST hangs on CI — mock at the API boundary instead of MSW.
|
||||||
http.post('/api/auth/avatar', () =>
|
const uploadSpy = vi.spyOn(authApi, 'uploadAvatar').mockResolvedValueOnce({ avatar_url: '/uploads/avatar-new.png' });
|
||||||
HttpResponse.json({ avatar_url: '/uploads/avatar-new.png' })
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
useAuthStore.setState({ user: buildUser() });
|
useAuthStore.setState({ user: buildUser() });
|
||||||
|
|
||||||
@@ -438,6 +436,7 @@ describe('authStore', () => {
|
|||||||
|
|
||||||
expect(result.avatar_url).toBe('/uploads/avatar-new.png');
|
expect(result.avatar_url).toBe('/uploads/avatar-new.png');
|
||||||
expect(useAuthStore.getState().user?.avatar_url).toBe('/uploads/avatar-new.png');
|
expect(useAuthStore.getState().user?.avatar_url).toBe('/uploads/avatar-new.png');
|
||||||
|
uploadSpy.mockRestore();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user