Files
TREK/client/tests/unit/tripStore.test.ts
T
jubnl 1eb2cb8eb2 fix(store): reset and uniformly hydrate trip-scoped slices in loadTrip (H4, H5) (#1180)
loadTrip only replaced the first slice group, so budget/reservations/files
from a previous trip stayed visible after switching trips (data exposure on a
shared screen). Those three also loaded via separate tab-gated effects, so they
never hydrated offline for an unopened tab.

- resetTrip() clears every trip-scoped slice (keeps global tags/categories) and
  runs at the top of loadTrip, so a switch can't leak the prior trip's data
- loadTrip now hydrates budget/reservations/files through their repos alongside
  the rest (non-fatal catches), making offline hydration uniform
- useTripPlanner drops the redundant loadFiles + reservations/budget effects;
  tab-gated lazy reloads stay as on-demand refresh
- tests: cross-trip no-leak, uniform hydration, resetTrip
2026-06-15 09:25:28 +02:00

339 lines
14 KiB
TypeScript

import { describe, it, expect, beforeEach, vi } from 'vitest';
import { http, HttpResponse } from 'msw';
import { useTripStore } from '../../src/store/tripStore';
import { resetAllStores } from '../helpers/store';
import { buildTrip, buildDay, buildPlace, buildPackingItem, buildTodoItem, buildTag, buildCategory, buildAssignment, buildDayNote, buildBudgetItem, buildReservation, buildTripFile } from '../helpers/factories';
import { server } from '../helpers/msw/server';
vi.mock('../../src/api/websocket', () => ({
connect: vi.fn(),
disconnect: vi.fn(),
getSocketId: vi.fn(() => null),
joinTrip: vi.fn(),
leaveTrip: vi.fn(),
addListener: vi.fn(),
removeListener: vi.fn(),
setRefetchCallback: vi.fn(),
setPreReconnectHook: vi.fn(),
}));
beforeEach(() => {
resetAllStores();
});
/** Full set of MSW handlers for one trip's loadTrip fan-out. */
function tripHandlers(
id: number,
data: {
budget?: unknown[]; reservations?: unknown[]; files?: unknown[];
tags?: unknown[]; categories?: unknown[];
},
) {
return [
http.get(`/api/trips/${id}`, () => HttpResponse.json({ trip: buildTrip({ id }) })),
http.get(`/api/trips/${id}/days`, () => HttpResponse.json({ days: [] })),
http.get(`/api/trips/${id}/places`, () => HttpResponse.json({ places: [] })),
http.get(`/api/trips/${id}/packing`, () => HttpResponse.json({ items: [] })),
http.get(`/api/trips/${id}/todo`, () => HttpResponse.json({ items: [] })),
http.get(`/api/trips/${id}/budget`, () => HttpResponse.json({ items: data.budget ?? [] })),
http.get(`/api/trips/${id}/reservations`, () => HttpResponse.json({ reservations: data.reservations ?? [] })),
http.get(`/api/trips/${id}/files`, () => HttpResponse.json({ files: data.files ?? [] })),
http.get('/api/tags', () => HttpResponse.json({ tags: data.tags ?? [] })),
http.get('/api/categories', () => HttpResponse.json({ categories: data.categories ?? [] })),
];
}
describe('tripStore', () => {
describe('loadTrip', () => {
it('FE-TRIP-001: fires parallel API calls for trips, days, places, packing, todo, tags, categories', async () => {
const calledUrls: string[] = [];
server.use(
http.get('/api/trips/:id', ({ params }) => {
calledUrls.push(`/api/trips/${params.id}`);
return HttpResponse.json({ trip: buildTrip({ id: Number(params.id) }) });
}),
http.get('/api/trips/:id/days', ({ params }) => {
calledUrls.push(`/api/trips/${params.id}/days`);
return HttpResponse.json({ days: [] });
}),
http.get('/api/trips/:id/places', ({ params }) => {
calledUrls.push(`/api/trips/${params.id}/places`);
return HttpResponse.json({ places: [] });
}),
http.get('/api/trips/:id/packing', ({ params }) => {
calledUrls.push(`/api/trips/${params.id}/packing`);
return HttpResponse.json({ items: [] });
}),
http.get('/api/trips/:id/todo', ({ params }) => {
calledUrls.push(`/api/trips/${params.id}/todo`);
return HttpResponse.json({ items: [] });
}),
http.get('/api/tags', () => {
calledUrls.push('/api/tags');
return HttpResponse.json({ tags: [] });
}),
http.get('/api/categories', () => {
calledUrls.push('/api/categories');
return HttpResponse.json({ categories: [] });
}),
);
await useTripStore.getState().loadTrip(1);
expect(calledUrls).toContain('/api/trips/1');
expect(calledUrls).toContain('/api/trips/1/days');
expect(calledUrls).toContain('/api/trips/1/places');
expect(calledUrls).toContain('/api/trips/1/packing');
expect(calledUrls).toContain('/api/trips/1/todo');
expect(calledUrls).toContain('/api/tags');
expect(calledUrls).toContain('/api/categories');
});
it('FE-TRIP-002: after loadTrip, all store fields are populated', async () => {
const trip = buildTrip({ id: 1 });
const place = buildPlace({ trip_id: 1 });
const packingItem = buildPackingItem({ trip_id: 1 });
const todoItem = buildTodoItem({ trip_id: 1 });
const tag = buildTag();
const category = buildCategory();
server.use(
http.get('/api/trips/1', () => HttpResponse.json({ trip })),
http.get('/api/trips/1/days', () => HttpResponse.json({ days: [] })),
http.get('/api/trips/1/places', () => HttpResponse.json({ places: [place] })),
http.get('/api/trips/1/packing', () => HttpResponse.json({ items: [packingItem] })),
http.get('/api/trips/1/todo', () => HttpResponse.json({ items: [todoItem] })),
http.get('/api/tags', () => HttpResponse.json({ tags: [tag] })),
http.get('/api/categories', () => HttpResponse.json({ categories: [category] })),
);
await useTripStore.getState().loadTrip(1);
const state = useTripStore.getState();
expect(state.trip).toEqual(trip);
expect(state.places).toEqual([place]);
expect(state.packingItems).toEqual([packingItem]);
expect(state.todoItems).toEqual([todoItem]);
expect(state.tags).toEqual([tag]);
expect(state.categories).toEqual([category]);
});
it('FE-TRIP-003: loadTrip extracts assignments map from days response', async () => {
const assignment = buildAssignment({ day_id: 10, order_index: 0 });
const day = buildDay({ id: 10, assignments: [assignment], notes_items: [] });
server.use(
http.get('/api/trips/1', () => HttpResponse.json({ trip: buildTrip({ id: 1 }) })),
http.get('/api/trips/1/days', () => HttpResponse.json({ days: [day] })),
http.get('/api/trips/1/places', () => HttpResponse.json({ places: [] })),
http.get('/api/trips/1/packing', () => HttpResponse.json({ items: [] })),
http.get('/api/trips/1/todo', () => HttpResponse.json({ items: [] })),
http.get('/api/tags', () => HttpResponse.json({ tags: [] })),
http.get('/api/categories', () => HttpResponse.json({ categories: [] })),
);
await useTripStore.getState().loadTrip(1);
const { assignments } = useTripStore.getState();
expect(assignments['10']).toBeDefined();
expect(assignments['10']).toEqual([assignment]);
});
it('FE-TRIP-004: loadTrip extracts dayNotes map from days response', async () => {
const note = buildDayNote({ day_id: 10 });
const day = buildDay({ id: 10, assignments: [], notes_items: [note] });
server.use(
http.get('/api/trips/1', () => HttpResponse.json({ trip: buildTrip({ id: 1 }) })),
http.get('/api/trips/1/days', () => HttpResponse.json({ days: [day] })),
http.get('/api/trips/1/places', () => HttpResponse.json({ places: [] })),
http.get('/api/trips/1/packing', () => HttpResponse.json({ items: [] })),
http.get('/api/trips/1/todo', () => HttpResponse.json({ items: [] })),
http.get('/api/tags', () => HttpResponse.json({ tags: [] })),
http.get('/api/categories', () => HttpResponse.json({ categories: [] })),
);
await useTripStore.getState().loadTrip(1);
const { dayNotes } = useTripStore.getState();
expect(dayNotes['10']).toBeDefined();
expect(dayNotes['10']).toEqual([note]);
});
it('FE-TRIP-005: loadTrip sets isLoading true during, false after', async () => {
let wasLoadingDuringFetch = false;
server.use(
http.get('/api/trips/1', () => {
wasLoadingDuringFetch = useTripStore.getState().isLoading;
return HttpResponse.json({ trip: buildTrip({ id: 1 }) });
}),
http.get('/api/trips/1/days', () => HttpResponse.json({ days: [] })),
http.get('/api/trips/1/places', () => HttpResponse.json({ places: [] })),
http.get('/api/trips/1/packing', () => HttpResponse.json({ items: [] })),
http.get('/api/trips/1/todo', () => HttpResponse.json({ items: [] })),
http.get('/api/tags', () => HttpResponse.json({ tags: [] })),
http.get('/api/categories', () => HttpResponse.json({ categories: [] })),
);
const promise = useTripStore.getState().loadTrip(1);
expect(useTripStore.getState().isLoading).toBe(true);
await promise;
expect(wasLoadingDuringFetch).toBe(true);
expect(useTripStore.getState().isLoading).toBe(false);
});
it('FE-TRIP-006: loadTrip on API failure sets error and isLoading: false', async () => {
server.use(
http.get('/api/trips/1', () => HttpResponse.json({ message: 'Not found' }, { status: 404 })),
http.get('/api/trips/1/days', () => HttpResponse.json({ days: [] })),
http.get('/api/trips/1/places', () => HttpResponse.json({ places: [] })),
http.get('/api/trips/1/packing', () => HttpResponse.json({ items: [] })),
http.get('/api/trips/1/todo', () => HttpResponse.json({ items: [] })),
http.get('/api/tags', () => HttpResponse.json({ tags: [] })),
http.get('/api/categories', () => HttpResponse.json({ categories: [] })),
);
await expect(useTripStore.getState().loadTrip(1)).rejects.toThrow();
const state = useTripStore.getState();
expect(state.isLoading).toBe(false);
expect(state.error).not.toBeNull();
});
it('FE-TRIP-H5: loadTrip uniformly hydrates budget, reservations and files', async () => {
const budgetItem = buildBudgetItem({ trip_id: 1 });
const reservation = buildReservation({ trip_id: 1 });
const file = buildTripFile({ trip_id: 1 });
server.use(...tripHandlers(1, { budget: [budgetItem], reservations: [reservation], files: [file] }));
await useTripStore.getState().loadTrip(1);
const state = useTripStore.getState();
expect(state.budgetItems).toEqual([budgetItem]);
expect(state.reservations).toEqual([reservation]);
expect(state.files).toEqual([file]);
});
it('FE-TRIP-H4: switching trips does not leak budget/reservations/files from the previous trip', async () => {
// Trip 1 has budget/reservations/files; trip 2 has none.
server.use(...tripHandlers(1, {
budget: [buildBudgetItem({ trip_id: 1 })],
reservations: [buildReservation({ trip_id: 1 })],
files: [buildTripFile({ trip_id: 1 })],
}));
await useTripStore.getState().loadTrip(1);
expect(useTripStore.getState().budgetItems).toHaveLength(1);
server.use(...tripHandlers(2, {}));
await useTripStore.getState().loadTrip(2);
const state = useTripStore.getState();
expect(state.trip!.id).toBe(2);
expect(state.budgetItems).toEqual([]);
expect(state.reservations).toEqual([]);
expect(state.files).toEqual([]);
});
it('FE-TRIP-H4b: resetTrip clears every trip-scoped slice but keeps tags/categories', async () => {
server.use(...tripHandlers(1, {
budget: [buildBudgetItem({ trip_id: 1 })],
reservations: [buildReservation({ trip_id: 1 })],
files: [buildTripFile({ trip_id: 1 })],
tags: [buildTag()],
}));
await useTripStore.getState().loadTrip(1);
expect(useTripStore.getState().budgetItems).toHaveLength(1);
useTripStore.getState().resetTrip();
const state = useTripStore.getState();
expect(state.trip).toBeNull();
expect(state.places).toEqual([]);
expect(state.budgetItems).toEqual([]);
expect(state.reservations).toEqual([]);
expect(state.files).toEqual([]);
expect(state.selectedDayId).toBeNull();
// Global lookups survive a trip reset.
expect(state.tags).toHaveLength(1);
});
});
describe('refreshDays', () => {
it('FE-TRIP-007: refreshDays re-fetches days and rebuilds assignments/dayNotes maps', async () => {
const assignment = buildAssignment({ day_id: 20, order_index: 0 });
const note = buildDayNote({ day_id: 20 });
const day = buildDay({ id: 20, assignments: [assignment], notes_items: [note] });
server.use(
http.get('/api/trips/1/days', () => HttpResponse.json({ days: [day] })),
);
await useTripStore.getState().refreshDays(1);
const state = useTripStore.getState();
expect(state.days).toHaveLength(1);
expect(state.assignments['20']).toEqual([assignment]);
expect(state.dayNotes['20']).toEqual([note]);
});
});
describe('updateTrip', () => {
it('FE-TRIP-008: updateTrip persists and refreshes trip + days', async () => {
const updatedTrip = buildTrip({ id: 1, title: 'Updated Trip' });
server.use(
http.put('/api/trips/1', () => HttpResponse.json({ trip: updatedTrip })),
http.get('/api/trips/1/days', () => HttpResponse.json({ days: [] })),
);
const result = await useTripStore.getState().updateTrip(1, { title: 'Updated Trip' });
expect(result).toEqual(updatedTrip);
expect(useTripStore.getState().trip).toEqual(updatedTrip);
});
});
describe('setSelectedDay', () => {
it('FE-TRIP-009: setSelectedDay updates selectedDayId', () => {
useTripStore.getState().setSelectedDay(42);
expect(useTripStore.getState().selectedDayId).toBe(42);
useTripStore.getState().setSelectedDay(null);
expect(useTripStore.getState().selectedDayId).toBeNull();
});
});
describe('addTag', () => {
it('FE-TRIP-010: addTag creates tag and appends to tags', async () => {
const existingTag = buildTag();
useTripStore.setState({ tags: [existingTag] });
const newTagData = { name: 'New Tag', color: '#00ff00' };
const result = await useTripStore.getState().addTag(newTagData);
expect(result.name).toBe('New Tag');
const tags = useTripStore.getState().tags;
expect(tags).toHaveLength(2);
expect(tags[tags.length - 1].name).toBe('New Tag');
});
});
describe('addCategory', () => {
it('FE-TRIP-011: addCategory creates category and appends to categories', async () => {
const existingCategory = buildCategory();
useTripStore.setState({ categories: [existingCategory] });
const newCategoryData = { name: 'New Category', icon: 'hotel' };
const result = await useTripStore.getState().addCategory(newCategoryData);
expect(result.name).toBe('New Category');
const categories = useTripStore.getState().categories;
expect(categories).toHaveLength(2);
expect(categories[categories.length - 1].name).toBe('New Category');
});
});
});