mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-06-21 22:31:46 +00:00
test(front): add test suite frontend (WIP)
This commit is contained in:
jubnl
@@ -0,0 +1,221 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { useTripStore } from '../../../src/store/tripStore';
|
||||
import { resetAllStores, seedStore } from '../../helpers/store';
|
||||
import { buildPlace, buildAssignment } 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(),
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
resetAllStores();
|
||||
});
|
||||
|
||||
describe('assignmentsSlice', () => {
|
||||
describe('assignPlaceToDay', () => {
|
||||
it('FE-ASSIGN-001: assignPlaceToDay adds optimistic temp ID (negative) immediately', async () => {
|
||||
const place = buildPlace({ id: 10, trip_id: 1 });
|
||||
seedStore(useTripStore, {
|
||||
places: [place],
|
||||
assignments: { '1': [] },
|
||||
});
|
||||
|
||||
// Don't await — check state mid-flight
|
||||
let tempAdded = false;
|
||||
server.use(
|
||||
http.post('/api/trips/1/days/1/assignments', async () => {
|
||||
const state = useTripStore.getState();
|
||||
const dayAssignments = state.assignments['1'];
|
||||
if (dayAssignments.some(a => a.id < 0)) {
|
||||
tempAdded = true;
|
||||
}
|
||||
const result = buildAssignment({ day_id: 1, place_id: 10, place });
|
||||
return HttpResponse.json({ assignment: result });
|
||||
}),
|
||||
);
|
||||
|
||||
await useTripStore.getState().assignPlaceToDay(1, 1, 10);
|
||||
expect(tempAdded).toBe(true);
|
||||
});
|
||||
|
||||
it('FE-ASSIGN-002: after API success, temp ID is replaced with real assignment', async () => {
|
||||
const place = buildPlace({ id: 10, trip_id: 1 });
|
||||
seedStore(useTripStore, {
|
||||
places: [place],
|
||||
assignments: { '1': [] },
|
||||
});
|
||||
|
||||
const realAssignment = buildAssignment({ id: 999, day_id: 1, place_id: 10, place });
|
||||
server.use(
|
||||
http.post('/api/trips/1/days/1/assignments', () =>
|
||||
HttpResponse.json({ assignment: realAssignment })
|
||||
),
|
||||
);
|
||||
|
||||
await useTripStore.getState().assignPlaceToDay(1, 1, 10);
|
||||
|
||||
const dayAssignments = useTripStore.getState().assignments['1'];
|
||||
expect(dayAssignments).toHaveLength(1);
|
||||
expect(dayAssignments[0].id).toBe(999);
|
||||
expect(dayAssignments.every(a => a.id > 0)).toBe(true);
|
||||
});
|
||||
|
||||
it('FE-ASSIGN-003: on API failure, temp assignment is removed (rollback)', async () => {
|
||||
const place = buildPlace({ id: 10, trip_id: 1 });
|
||||
seedStore(useTripStore, {
|
||||
places: [place],
|
||||
assignments: { '1': [] },
|
||||
});
|
||||
|
||||
server.use(
|
||||
http.post('/api/trips/1/days/1/assignments', () =>
|
||||
HttpResponse.json({ message: 'Error' }, { status: 500 })
|
||||
),
|
||||
);
|
||||
|
||||
await expect(useTripStore.getState().assignPlaceToDay(1, 1, 10)).rejects.toThrow();
|
||||
|
||||
const dayAssignments = useTripStore.getState().assignments['1'];
|
||||
expect(dayAssignments).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('FE-ASSIGN-001b: returns undefined if place not found in store', async () => {
|
||||
seedStore(useTripStore, {
|
||||
places: [], // no places seeded
|
||||
assignments: { '1': [] },
|
||||
});
|
||||
|
||||
const result = await useTripStore.getState().assignPlaceToDay(1, 1, 999);
|
||||
expect(result).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe('removeAssignment', () => {
|
||||
it('FE-ASSIGN-004: removeAssignment is optimistically removed, re-added on failure', async () => {
|
||||
const place = buildPlace({ id: 10, trip_id: 1 });
|
||||
const assignment = buildAssignment({ id: 100, day_id: 1, place });
|
||||
seedStore(useTripStore, {
|
||||
assignments: { '1': [assignment] },
|
||||
});
|
||||
|
||||
server.use(
|
||||
http.delete('/api/trips/1/days/1/assignments/100', () =>
|
||||
HttpResponse.json({ message: 'Error' }, { status: 500 })
|
||||
),
|
||||
);
|
||||
|
||||
await expect(useTripStore.getState().removeAssignment(1, 1, 100)).rejects.toThrow();
|
||||
|
||||
// Should be rolled back
|
||||
const dayAssignments = useTripStore.getState().assignments['1'];
|
||||
expect(dayAssignments).toHaveLength(1);
|
||||
expect(dayAssignments[0].id).toBe(100);
|
||||
});
|
||||
|
||||
it('FE-ASSIGN-004b: removeAssignment success removes from store', async () => {
|
||||
const place = buildPlace({ id: 10, trip_id: 1 });
|
||||
const assignment = buildAssignment({ id: 100, day_id: 1, place });
|
||||
seedStore(useTripStore, {
|
||||
assignments: { '1': [assignment] },
|
||||
});
|
||||
|
||||
await useTripStore.getState().removeAssignment(1, 1, 100);
|
||||
|
||||
expect(useTripStore.getState().assignments['1']).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('reorderAssignments', () => {
|
||||
it('FE-ASSIGN-005: reorderAssignments updates order_index of assignments', async () => {
|
||||
const place1 = buildPlace({ id: 10 });
|
||||
const place2 = buildPlace({ id: 20 });
|
||||
const a1 = buildAssignment({ id: 1, day_id: 5, order_index: 0, place: place1 });
|
||||
const a2 = buildAssignment({ id: 2, day_id: 5, order_index: 1, place: place2 });
|
||||
seedStore(useTripStore, {
|
||||
assignments: { '5': [a1, a2] },
|
||||
});
|
||||
|
||||
await useTripStore.getState().reorderAssignments(1, 5, [2, 1]);
|
||||
|
||||
const dayAssignments = useTripStore.getState().assignments['5'];
|
||||
const reorderedA2 = dayAssignments.find(a => a.id === 2);
|
||||
const reorderedA1 = dayAssignments.find(a => a.id === 1);
|
||||
expect(reorderedA2?.order_index).toBe(0);
|
||||
expect(reorderedA1?.order_index).toBe(1);
|
||||
});
|
||||
|
||||
it('FE-ASSIGN-005b: reorderAssignments rolls back on failure', async () => {
|
||||
const place1 = buildPlace({ id: 10 });
|
||||
const place2 = buildPlace({ id: 20 });
|
||||
const a1 = buildAssignment({ id: 1, day_id: 5, order_index: 0, place: place1 });
|
||||
const a2 = buildAssignment({ id: 2, day_id: 5, order_index: 1, place: place2 });
|
||||
seedStore(useTripStore, {
|
||||
assignments: { '5': [a1, a2] },
|
||||
});
|
||||
|
||||
server.use(
|
||||
http.put('/api/trips/1/days/5/assignments/reorder', () =>
|
||||
HttpResponse.json({ message: 'Error' }, { status: 500 })
|
||||
),
|
||||
);
|
||||
|
||||
await expect(useTripStore.getState().reorderAssignments(1, 5, [2, 1])).rejects.toThrow();
|
||||
|
||||
const dayAssignments = useTripStore.getState().assignments['5'];
|
||||
expect(dayAssignments.find(a => a.id === 1)?.order_index).toBe(0);
|
||||
expect(dayAssignments.find(a => a.id === 2)?.order_index).toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('moveAssignment', () => {
|
||||
it('FE-ASSIGN-006: moveAssignment removes from source day and adds to target day', async () => {
|
||||
const place = buildPlace({ id: 10 });
|
||||
const assignment = buildAssignment({ id: 50, day_id: 1, order_index: 0, place });
|
||||
seedStore(useTripStore, {
|
||||
assignments: {
|
||||
'1': [assignment],
|
||||
'2': [],
|
||||
},
|
||||
});
|
||||
|
||||
await useTripStore.getState().moveAssignment(1, 50, 1, 2);
|
||||
|
||||
expect(useTripStore.getState().assignments['1']).toHaveLength(0);
|
||||
expect(useTripStore.getState().assignments['2']).toHaveLength(1);
|
||||
expect(useTripStore.getState().assignments['2'][0].id).toBe(50);
|
||||
});
|
||||
|
||||
it('FE-ASSIGN-007: moveAssignment rolls back on failure', async () => {
|
||||
const place = buildPlace({ id: 10 });
|
||||
const assignment = buildAssignment({ id: 50, day_id: 1, order_index: 0, place });
|
||||
seedStore(useTripStore, {
|
||||
assignments: {
|
||||
'1': [assignment],
|
||||
'2': [],
|
||||
},
|
||||
});
|
||||
|
||||
server.use(
|
||||
http.put('/api/trips/1/assignments/50/move', () =>
|
||||
HttpResponse.json({ message: 'Error' }, { status: 500 })
|
||||
),
|
||||
);
|
||||
|
||||
await expect(useTripStore.getState().moveAssignment(1, 50, 1, 2)).rejects.toThrow();
|
||||
|
||||
// Rolled back: assignment back in day 1
|
||||
expect(useTripStore.getState().assignments['1']).toHaveLength(1);
|
||||
expect(useTripStore.getState().assignments['1'][0].id).toBe(50);
|
||||
expect(useTripStore.getState().assignments['2']).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,175 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { useTripStore } from '../../../src/store/tripStore';
|
||||
import { resetAllStores, seedStore } from '../../helpers/store';
|
||||
import { buildBudgetItem, buildReservation } 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(),
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
resetAllStores();
|
||||
});
|
||||
|
||||
describe('budgetSlice', () => {
|
||||
describe('loadBudgetItems', () => {
|
||||
it('FE-BUDGET-001: loadBudgetItems fetches and replaces budgetItems', async () => {
|
||||
seedStore(useTripStore, { budgetItems: [] });
|
||||
|
||||
const item = buildBudgetItem({ trip_id: 1 });
|
||||
server.use(
|
||||
http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] })),
|
||||
);
|
||||
|
||||
await useTripStore.getState().loadBudgetItems(1);
|
||||
|
||||
expect(useTripStore.getState().budgetItems).toHaveLength(1);
|
||||
expect(useTripStore.getState().budgetItems[0].id).toBe(item.id);
|
||||
});
|
||||
});
|
||||
|
||||
describe('addBudgetItem', () => {
|
||||
it('FE-BUDGET-002: addBudgetItem appends to budgetItems', async () => {
|
||||
const existing = buildBudgetItem({ trip_id: 1 });
|
||||
seedStore(useTripStore, { budgetItems: [existing] });
|
||||
|
||||
const result = await useTripStore.getState().addBudgetItem(1, { name: 'Hotel', amount: 200 });
|
||||
|
||||
expect(result.name).toBe('Hotel');
|
||||
expect(useTripStore.getState().budgetItems).toHaveLength(2);
|
||||
});
|
||||
|
||||
it('FE-BUDGET-003: addBudgetItem on failure throws', async () => {
|
||||
server.use(
|
||||
http.post('/api/trips/1/budget', () =>
|
||||
HttpResponse.json({ message: 'Error' }, { status: 500 })
|
||||
),
|
||||
);
|
||||
|
||||
await expect(
|
||||
useTripStore.getState().addBudgetItem(1, { name: 'Fail' })
|
||||
).rejects.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
describe('updateBudgetItem', () => {
|
||||
it('FE-BUDGET-004: updateBudgetItem replaces item in array', async () => {
|
||||
const item = buildBudgetItem({ id: 10, trip_id: 1, name: 'Old', amount: 100 });
|
||||
seedStore(useTripStore, { budgetItems: [item] });
|
||||
|
||||
server.use(
|
||||
http.put('/api/trips/1/budget/10', async ({ request }) => {
|
||||
const body = await request.json() as Record<string, unknown>;
|
||||
return HttpResponse.json({ item: { ...item, ...body } });
|
||||
}),
|
||||
);
|
||||
|
||||
const result = await useTripStore.getState().updateBudgetItem(1, 10, { name: 'Updated', amount: 150 });
|
||||
|
||||
expect(result.name).toBe('Updated');
|
||||
expect(useTripStore.getState().budgetItems[0].name).toBe('Updated');
|
||||
});
|
||||
|
||||
it('FE-BUDGET-005: updateBudgetItem with total_price triggers loadReservations when reservation_id present', async () => {
|
||||
const item = buildBudgetItem({ id: 10, trip_id: 1, amount: 100 });
|
||||
const initialReservation = buildReservation({ trip_id: 1 });
|
||||
const newReservation = buildReservation({ trip_id: 1, name: 'Refreshed Reservation' });
|
||||
seedStore(useTripStore, {
|
||||
budgetItems: [item],
|
||||
reservations: [initialReservation],
|
||||
});
|
||||
|
||||
server.use(
|
||||
http.put('/api/trips/1/budget/10', async ({ request }) => {
|
||||
const body = await request.json() as Record<string, unknown>;
|
||||
// Return item with reservation_id to trigger loadReservations
|
||||
return HttpResponse.json({ item: { ...item, ...body, reservation_id: 42 } });
|
||||
}),
|
||||
http.get('/api/trips/1/reservations', () =>
|
||||
HttpResponse.json({ reservations: [newReservation] })
|
||||
),
|
||||
);
|
||||
|
||||
await useTripStore.getState().updateBudgetItem(1, 10, { total_price: 200 } as Record<string, unknown>);
|
||||
|
||||
// Wait for the async loadReservations to complete
|
||||
await new Promise(resolve => setTimeout(resolve, 50));
|
||||
|
||||
expect(useTripStore.getState().reservations).toHaveLength(1);
|
||||
expect(useTripStore.getState().reservations[0].name).toBe('Refreshed Reservation');
|
||||
});
|
||||
});
|
||||
|
||||
describe('deleteBudgetItem', () => {
|
||||
it('FE-BUDGET-006: deleteBudgetItem optimistically removes item, rolls back on failure', async () => {
|
||||
const item = buildBudgetItem({ id: 10, trip_id: 1 });
|
||||
seedStore(useTripStore, { budgetItems: [item] });
|
||||
|
||||
server.use(
|
||||
http.delete('/api/trips/1/budget/10', () =>
|
||||
HttpResponse.json({ message: 'Error' }, { status: 500 })
|
||||
),
|
||||
);
|
||||
|
||||
await expect(useTripStore.getState().deleteBudgetItem(1, 10)).rejects.toThrow();
|
||||
|
||||
expect(useTripStore.getState().budgetItems).toHaveLength(1);
|
||||
expect(useTripStore.getState().budgetItems[0].id).toBe(10);
|
||||
});
|
||||
|
||||
it('FE-BUDGET-006b: deleteBudgetItem success removes item', async () => {
|
||||
const item1 = buildBudgetItem({ id: 10, trip_id: 1 });
|
||||
const item2 = buildBudgetItem({ id: 20, trip_id: 1 });
|
||||
seedStore(useTripStore, { budgetItems: [item1, item2] });
|
||||
|
||||
await useTripStore.getState().deleteBudgetItem(1, 10);
|
||||
|
||||
expect(useTripStore.getState().budgetItems).toHaveLength(1);
|
||||
expect(useTripStore.getState().budgetItems[0].id).toBe(20);
|
||||
});
|
||||
});
|
||||
|
||||
describe('setBudgetItemMembers', () => {
|
||||
it('FE-BUDGET-007: setBudgetItemMembers updates members array on item', async () => {
|
||||
const item = buildBudgetItem({ id: 10, trip_id: 1, members: [] });
|
||||
seedStore(useTripStore, { budgetItems: [item] });
|
||||
|
||||
const members = [{ user_id: 1, paid: false }, { user_id: 2, paid: false }];
|
||||
server.use(
|
||||
http.put('/api/trips/1/budget/10/members', () =>
|
||||
HttpResponse.json({ members, item: { ...item, persons: 2, members } })
|
||||
),
|
||||
);
|
||||
|
||||
const result = await useTripStore.getState().setBudgetItemMembers(1, 10, [1, 2]);
|
||||
|
||||
expect(result.members).toHaveLength(2);
|
||||
const updatedItem = useTripStore.getState().budgetItems.find(i => i.id === 10);
|
||||
expect(updatedItem?.members).toHaveLength(2);
|
||||
expect(updatedItem?.persons).toBe(2);
|
||||
});
|
||||
});
|
||||
|
||||
describe('toggleBudgetMemberPaid', () => {
|
||||
it('FE-BUDGET-008: toggleBudgetMemberPaid updates paid status after API success', async () => {
|
||||
const member = { user_id: 5, paid: false };
|
||||
const item = buildBudgetItem({ id: 10, trip_id: 1, members: [member] });
|
||||
seedStore(useTripStore, { budgetItems: [item] });
|
||||
|
||||
await useTripStore.getState().toggleBudgetMemberPaid(1, 10, 5, true);
|
||||
|
||||
const updatedItem = useTripStore.getState().budgetItems.find(i => i.id === 10);
|
||||
const updatedMember = updatedItem?.members.find(m => m.user_id === 5);
|
||||
expect(updatedMember?.paid).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,176 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { useTripStore } from '../../../src/store/tripStore';
|
||||
import { resetAllStores, seedStore } from '../../helpers/store';
|
||||
import { buildDay, buildDayNote } 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(),
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
resetAllStores();
|
||||
});
|
||||
|
||||
describe('dayNotesSlice', () => {
|
||||
describe('addDayNote', () => {
|
||||
it('FE-DAYNOTES-001: addDayNote inserts temp note immediately, replaces on success', async () => {
|
||||
seedStore(useTripStore, { dayNotes: { '1': [] } });
|
||||
|
||||
let tempAdded = false;
|
||||
const realNote = buildDayNote({ id: 500, day_id: 1, text: 'New note' });
|
||||
|
||||
server.use(
|
||||
http.post('/api/trips/1/days/1/notes', async () => {
|
||||
const state = useTripStore.getState();
|
||||
const notes = state.dayNotes['1'];
|
||||
if (notes.some(n => n.id < 0)) {
|
||||
tempAdded = true;
|
||||
}
|
||||
return HttpResponse.json({ note: realNote });
|
||||
}),
|
||||
);
|
||||
|
||||
const result = await useTripStore.getState().addDayNote(1, 1, { text: 'New note', sort_order: 0 });
|
||||
|
||||
expect(tempAdded).toBe(true);
|
||||
expect(result.id).toBe(500);
|
||||
const notes = useTripStore.getState().dayNotes['1'];
|
||||
expect(notes).toHaveLength(1);
|
||||
expect(notes[0].id).toBe(500);
|
||||
});
|
||||
|
||||
it('FE-DAYNOTES-002: addDayNote on failure rolls back — temp note removed', async () => {
|
||||
seedStore(useTripStore, { dayNotes: { '1': [] } });
|
||||
|
||||
server.use(
|
||||
http.post('/api/trips/1/days/1/notes', () =>
|
||||
HttpResponse.json({ message: 'Error' }, { status: 500 })
|
||||
),
|
||||
);
|
||||
|
||||
await expect(
|
||||
useTripStore.getState().addDayNote(1, 1, { text: 'Fail note', sort_order: 0 })
|
||||
).rejects.toThrow();
|
||||
|
||||
expect(useTripStore.getState().dayNotes['1']).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('updateDayNote', () => {
|
||||
it('FE-DAYNOTES-003: updateDayNote replaces note in map by id', async () => {
|
||||
const note = buildDayNote({ id: 10, day_id: 1, text: 'Old text' });
|
||||
seedStore(useTripStore, { dayNotes: { '1': [note] } });
|
||||
|
||||
const updated = { ...note, text: 'Updated text' };
|
||||
server.use(
|
||||
http.put('/api/trips/1/days/1/notes/10', () =>
|
||||
HttpResponse.json({ note: updated })
|
||||
),
|
||||
);
|
||||
|
||||
const result = await useTripStore.getState().updateDayNote(1, 1, 10, { text: 'Updated text' });
|
||||
|
||||
expect(result.text).toBe('Updated text');
|
||||
expect(useTripStore.getState().dayNotes['1'][0].text).toBe('Updated text');
|
||||
});
|
||||
});
|
||||
|
||||
describe('deleteDayNote', () => {
|
||||
it('FE-DAYNOTES-004: deleteDayNote optimistically removes note, restores on failure', async () => {
|
||||
const note = buildDayNote({ id: 10, day_id: 1 });
|
||||
seedStore(useTripStore, { dayNotes: { '1': [note] } });
|
||||
|
||||
server.use(
|
||||
http.delete('/api/trips/1/days/1/notes/10', () =>
|
||||
HttpResponse.json({ message: 'Error' }, { status: 500 })
|
||||
),
|
||||
);
|
||||
|
||||
await expect(useTripStore.getState().deleteDayNote(1, 1, 10)).rejects.toThrow();
|
||||
|
||||
// Rolled back
|
||||
expect(useTripStore.getState().dayNotes['1']).toHaveLength(1);
|
||||
expect(useTripStore.getState().dayNotes['1'][0].id).toBe(10);
|
||||
});
|
||||
|
||||
it('FE-DAYNOTES-004b: deleteDayNote success removes note from correct day', async () => {
|
||||
const note1 = buildDayNote({ id: 10, day_id: 1 });
|
||||
const note2 = buildDayNote({ id: 20, day_id: 1 });
|
||||
seedStore(useTripStore, { dayNotes: { '1': [note1, note2] } });
|
||||
|
||||
await useTripStore.getState().deleteDayNote(1, 1, 10);
|
||||
|
||||
const notes = useTripStore.getState().dayNotes['1'];
|
||||
expect(notes).toHaveLength(1);
|
||||
expect(notes[0].id).toBe(20);
|
||||
});
|
||||
});
|
||||
|
||||
describe('moveDayNote', () => {
|
||||
it('FE-DAYNOTES-005: moveDayNote removes from source, adds to target (delete+create)', async () => {
|
||||
const note = buildDayNote({ id: 10, day_id: 1, text: 'Move me' });
|
||||
const newNote = buildDayNote({ id: 99, day_id: 2, text: 'Move me' });
|
||||
seedStore(useTripStore, { dayNotes: { '1': [note], '2': [] } });
|
||||
|
||||
server.use(
|
||||
http.delete('/api/trips/1/days/1/notes/10', () => HttpResponse.json({ success: true })),
|
||||
http.post('/api/trips/1/days/2/notes', () => HttpResponse.json({ note: newNote })),
|
||||
);
|
||||
|
||||
await useTripStore.getState().moveDayNote(1, 1, 2, 10);
|
||||
|
||||
expect(useTripStore.getState().dayNotes['1']).toHaveLength(0);
|
||||
expect(useTripStore.getState().dayNotes['2']).toHaveLength(1);
|
||||
expect(useTripStore.getState().dayNotes['2'][0].id).toBe(99);
|
||||
});
|
||||
|
||||
it('FE-DAYNOTES-006: moveDayNote rolls back to source day on failure', async () => {
|
||||
const note = buildDayNote({ id: 10, day_id: 1, text: 'Move me' });
|
||||
seedStore(useTripStore, { dayNotes: { '1': [note], '2': [] } });
|
||||
|
||||
server.use(
|
||||
http.delete('/api/trips/1/days/1/notes/10', () =>
|
||||
HttpResponse.json({ message: 'Error' }, { status: 500 })
|
||||
),
|
||||
);
|
||||
|
||||
await expect(useTripStore.getState().moveDayNote(1, 1, 2, 10)).rejects.toThrow();
|
||||
|
||||
expect(useTripStore.getState().dayNotes['1']).toHaveLength(1);
|
||||
expect(useTripStore.getState().dayNotes['1'][0].id).toBe(10);
|
||||
});
|
||||
});
|
||||
|
||||
describe('updateDayNotes', () => {
|
||||
it('FE-DAYNOTES-007: updateDayNotes persists notes text and updates days array', async () => {
|
||||
const day = buildDay({ id: 1, trip_id: 1, notes: null });
|
||||
seedStore(useTripStore, { days: [day] });
|
||||
|
||||
await useTripStore.getState().updateDayNotes(1, 1, 'My travel notes');
|
||||
|
||||
const updatedDay = useTripStore.getState().days.find(d => d.id === 1);
|
||||
expect(updatedDay?.notes).toBe('My travel notes');
|
||||
});
|
||||
});
|
||||
|
||||
describe('updateDayTitle', () => {
|
||||
it('FE-DAYNOTES-008: updateDayTitle persists title and updates days array', async () => {
|
||||
const day = buildDay({ id: 1, trip_id: 1, title: null });
|
||||
seedStore(useTripStore, { days: [day] });
|
||||
|
||||
await useTripStore.getState().updateDayTitle(1, 1, 'Day at the Beach');
|
||||
|
||||
const updatedDay = useTripStore.getState().days.find(d => d.id === 1);
|
||||
expect(updatedDay?.title).toBe('Day at the Beach');
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,117 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { useTripStore } from '../../../src/store/tripStore';
|
||||
import { resetAllStores, seedStore } from '../../helpers/store';
|
||||
import { 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(),
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
resetAllStores();
|
||||
});
|
||||
|
||||
describe('filesSlice', () => {
|
||||
describe('loadFiles', () => {
|
||||
it('FE-FILES-001: loadFiles fetches and replaces files array', async () => {
|
||||
const staleFile = buildTripFile({ trip_id: 1, filename: 'stale.pdf' });
|
||||
seedStore(useTripStore, { files: [staleFile] });
|
||||
|
||||
const freshFile = buildTripFile({ trip_id: 1, filename: 'fresh.pdf' });
|
||||
server.use(
|
||||
http.get('/api/trips/1/files', () => HttpResponse.json({ files: [freshFile] })),
|
||||
);
|
||||
|
||||
await useTripStore.getState().loadFiles(1);
|
||||
|
||||
const files = useTripStore.getState().files;
|
||||
expect(files).toHaveLength(1);
|
||||
expect(files[0].filename).toBe('fresh.pdf');
|
||||
});
|
||||
|
||||
it('FE-FILES-002: loadFiles silently catches errors', async () => {
|
||||
server.use(
|
||||
http.get('/api/trips/1/files', () =>
|
||||
HttpResponse.json({ message: 'Error' }, { status: 500 })
|
||||
),
|
||||
);
|
||||
|
||||
// Should not throw
|
||||
await useTripStore.getState().loadFiles(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('addFile', () => {
|
||||
it('FE-FILES-003: addFile uploads and prepends file to files array', async () => {
|
||||
const existing = buildTripFile({ trip_id: 1, filename: 'existing.pdf' });
|
||||
seedStore(useTripStore, { files: [existing] });
|
||||
|
||||
const uploaded = buildTripFile({ trip_id: 1, filename: 'new-upload.pdf' });
|
||||
server.use(
|
||||
http.post('/api/trips/1/files', () => HttpResponse.json({ file: uploaded })),
|
||||
);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', new Blob(['content'], { type: 'application/pdf' }), 'new-upload.pdf');
|
||||
|
||||
const result = await useTripStore.getState().addFile(1, formData);
|
||||
|
||||
expect(result.filename).toBe('new-upload.pdf');
|
||||
const files = useTripStore.getState().files;
|
||||
expect(files).toHaveLength(2);
|
||||
// prepends
|
||||
expect(files[0].filename).toBe('new-upload.pdf');
|
||||
});
|
||||
|
||||
it('FE-FILES-004: addFile on failure throws', async () => {
|
||||
server.use(
|
||||
http.post('/api/trips/1/files', () =>
|
||||
HttpResponse.json({ message: 'Error' }, { status: 500 })
|
||||
),
|
||||
);
|
||||
|
||||
const formData = new FormData();
|
||||
|
||||
await expect(useTripStore.getState().addFile(1, formData)).rejects.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
describe('deleteFile', () => {
|
||||
it('FE-FILES-005: deleteFile removes file from array after API success', async () => {
|
||||
const file1 = buildTripFile({ id: 10, trip_id: 1 });
|
||||
const file2 = buildTripFile({ id: 20, trip_id: 1 });
|
||||
seedStore(useTripStore, { files: [file1, file2] });
|
||||
|
||||
await useTripStore.getState().deleteFile(1, 10);
|
||||
|
||||
const files = useTripStore.getState().files;
|
||||
expect(files).toHaveLength(1);
|
||||
expect(files[0].id).toBe(20);
|
||||
});
|
||||
|
||||
it('FE-FILES-006: deleteFile on failure throws', async () => {
|
||||
const file = buildTripFile({ id: 10, trip_id: 1 });
|
||||
seedStore(useTripStore, { files: [file] });
|
||||
|
||||
server.use(
|
||||
http.delete('/api/trips/1/files/10', () =>
|
||||
HttpResponse.json({ message: 'Error' }, { status: 500 })
|
||||
),
|
||||
);
|
||||
|
||||
await expect(useTripStore.getState().deleteFile(1, 10)).rejects.toThrow();
|
||||
|
||||
// File remains since server-first (only removes after success)
|
||||
expect(useTripStore.getState().files).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,134 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { useTripStore } from '../../../src/store/tripStore';
|
||||
import { resetAllStores, seedStore } from '../../helpers/store';
|
||||
import { buildPackingItem } 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(),
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
resetAllStores();
|
||||
});
|
||||
|
||||
describe('packingSlice', () => {
|
||||
describe('addPackingItem', () => {
|
||||
it('FE-PACKING-001: addPackingItem calls API and appends item to packingItems', async () => {
|
||||
const existing = buildPackingItem({ trip_id: 1, name: 'Existing' });
|
||||
seedStore(useTripStore, { packingItems: [existing] });
|
||||
|
||||
const result = await useTripStore.getState().addPackingItem(1, { name: 'Toothbrush', quantity: 1 });
|
||||
|
||||
expect(result.name).toBe('Toothbrush');
|
||||
const items = useTripStore.getState().packingItems;
|
||||
expect(items).toHaveLength(2);
|
||||
// addPackingItem appends (not prepends)
|
||||
expect(items[items.length - 1].name).toBe('Toothbrush');
|
||||
});
|
||||
|
||||
it('FE-PACKING-002: addPackingItem on failure throws', async () => {
|
||||
server.use(
|
||||
http.post('/api/trips/1/packing', () =>
|
||||
HttpResponse.json({ message: 'Error' }, { status: 500 })
|
||||
),
|
||||
);
|
||||
|
||||
await expect(
|
||||
useTripStore.getState().addPackingItem(1, { name: 'Fail item' })
|
||||
).rejects.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
describe('updatePackingItem', () => {
|
||||
it('FE-PACKING-003: updatePackingItem replaces item in array by id', async () => {
|
||||
const item = buildPackingItem({ id: 10, trip_id: 1, name: 'Old name', quantity: 1 });
|
||||
seedStore(useTripStore, { packingItems: [item] });
|
||||
|
||||
server.use(
|
||||
http.put('/api/trips/1/packing/10', async ({ request }) => {
|
||||
const body = await request.json() as Record<string, unknown>;
|
||||
return HttpResponse.json({ item: { ...item, ...body } });
|
||||
}),
|
||||
);
|
||||
|
||||
const result = await useTripStore.getState().updatePackingItem(1, 10, { name: 'New name' });
|
||||
|
||||
expect(result.name).toBe('New name');
|
||||
expect(useTripStore.getState().packingItems[0].name).toBe('New name');
|
||||
});
|
||||
});
|
||||
|
||||
describe('deletePackingItem', () => {
|
||||
it('FE-PACKING-004: deletePackingItem optimistically removes item, rollback on failure', async () => {
|
||||
const item = buildPackingItem({ id: 10, trip_id: 1 });
|
||||
seedStore(useTripStore, { packingItems: [item] });
|
||||
|
||||
server.use(
|
||||
http.delete('/api/trips/1/packing/10', () =>
|
||||
HttpResponse.json({ message: 'Error' }, { status: 500 })
|
||||
),
|
||||
);
|
||||
|
||||
await expect(useTripStore.getState().deletePackingItem(1, 10)).rejects.toThrow();
|
||||
|
||||
expect(useTripStore.getState().packingItems).toHaveLength(1);
|
||||
expect(useTripStore.getState().packingItems[0].id).toBe(10);
|
||||
});
|
||||
|
||||
it('FE-PACKING-004b: deletePackingItem success removes item', async () => {
|
||||
const item1 = buildPackingItem({ id: 10, trip_id: 1 });
|
||||
const item2 = buildPackingItem({ id: 20, trip_id: 1 });
|
||||
seedStore(useTripStore, { packingItems: [item1, item2] });
|
||||
|
||||
await useTripStore.getState().deletePackingItem(1, 10);
|
||||
|
||||
const items = useTripStore.getState().packingItems;
|
||||
expect(items).toHaveLength(1);
|
||||
expect(items[0].id).toBe(20);
|
||||
});
|
||||
});
|
||||
|
||||
describe('togglePackingItem', () => {
|
||||
it('FE-PACKING-005: togglePackingItem sets checked optimistically', async () => {
|
||||
const item = buildPackingItem({ id: 10, trip_id: 1, checked: 0 });
|
||||
seedStore(useTripStore, { packingItems: [item] });
|
||||
|
||||
server.use(
|
||||
http.put('/api/trips/1/packing/10', async ({ request }) => {
|
||||
const body = await request.json() as Record<string, unknown>;
|
||||
return HttpResponse.json({ item: { ...item, ...body } });
|
||||
}),
|
||||
);
|
||||
|
||||
await useTripStore.getState().togglePackingItem(1, 10, true);
|
||||
|
||||
expect(useTripStore.getState().packingItems[0].checked).toBe(1);
|
||||
});
|
||||
|
||||
it('FE-PACKING-006: togglePackingItem rolls back checked on API failure', async () => {
|
||||
const item = buildPackingItem({ id: 10, trip_id: 1, checked: 0 });
|
||||
seedStore(useTripStore, { packingItems: [item] });
|
||||
|
||||
server.use(
|
||||
http.put('/api/trips/1/packing/10', () =>
|
||||
HttpResponse.json({ message: 'Error' }, { status: 500 })
|
||||
),
|
||||
);
|
||||
|
||||
// toggle does NOT throw on error (silent rollback)
|
||||
await useTripStore.getState().togglePackingItem(1, 10, true);
|
||||
|
||||
// Should be rolled back to original value
|
||||
expect(useTripStore.getState().packingItems[0].checked).toBe(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,150 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { useTripStore } from '../../../src/store/tripStore';
|
||||
import { resetAllStores, seedStore } from '../../helpers/store';
|
||||
import { buildPlace, buildAssignment } 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(),
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
resetAllStores();
|
||||
});
|
||||
|
||||
describe('placesSlice', () => {
|
||||
describe('addPlace', () => {
|
||||
it('FE-PLACES-001: addPlace calls API and prepends place to places array', async () => {
|
||||
const existing = buildPlace({ trip_id: 1 });
|
||||
seedStore(useTripStore, { places: [existing] });
|
||||
|
||||
const result = await useTripStore.getState().addPlace(1, { name: 'New Place' });
|
||||
|
||||
expect(result.name).toBe('New Place');
|
||||
const places = useTripStore.getState().places;
|
||||
expect(places).toHaveLength(2);
|
||||
expect(places[0].name).toBe('New Place'); // prepended
|
||||
});
|
||||
|
||||
it('FE-PLACES-002: addPlace on failure throws and places remain unchanged', async () => {
|
||||
const existing = buildPlace({ trip_id: 1 });
|
||||
seedStore(useTripStore, { places: [existing] });
|
||||
|
||||
server.use(
|
||||
http.post('/api/trips/:id/places', () =>
|
||||
HttpResponse.json({ message: 'Server error' }, { status: 500 })
|
||||
),
|
||||
);
|
||||
|
||||
await expect(useTripStore.getState().addPlace(1, { name: 'Fail' })).rejects.toThrow();
|
||||
expect(useTripStore.getState().places).toEqual([existing]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('updatePlace', () => {
|
||||
it('FE-PLACES-003: updatePlace calls API and updates place in array', async () => {
|
||||
const place = buildPlace({ id: 10, trip_id: 1, name: 'Old Name' });
|
||||
seedStore(useTripStore, { places: [place] });
|
||||
|
||||
server.use(
|
||||
http.put('/api/trips/:id/places/:placeId', async ({ params, request }) => {
|
||||
const body = await request.json() as Record<string, unknown>;
|
||||
return HttpResponse.json({ place: { ...place, ...body, id: Number(params.placeId) } });
|
||||
}),
|
||||
);
|
||||
|
||||
const result = await useTripStore.getState().updatePlace(1, 10, { name: 'New Name' });
|
||||
|
||||
expect(result.name).toBe('New Name');
|
||||
const updated = useTripStore.getState().places.find(p => p.id === 10);
|
||||
expect(updated?.name).toBe('New Name');
|
||||
});
|
||||
|
||||
it('FE-PLACES-004: updatePlace cascades to assignments map — assignment place field updated', async () => {
|
||||
const place = buildPlace({ id: 10, trip_id: 1, name: 'Old Place' });
|
||||
const assignment = buildAssignment({ id: 100, day_id: 1, place });
|
||||
seedStore(useTripStore, {
|
||||
places: [place],
|
||||
assignments: { '1': [assignment] },
|
||||
});
|
||||
|
||||
server.use(
|
||||
http.put('/api/trips/1/places/10', async ({ request }) => {
|
||||
const body = await request.json() as Record<string, unknown>;
|
||||
return HttpResponse.json({ place: { ...place, ...body } });
|
||||
}),
|
||||
);
|
||||
|
||||
await useTripStore.getState().updatePlace(1, 10, { name: 'Updated Place' });
|
||||
|
||||
const updatedAssignments = useTripStore.getState().assignments['1'];
|
||||
expect(updatedAssignments[0].place.name).toBe('Updated Place');
|
||||
});
|
||||
});
|
||||
|
||||
describe('deletePlace', () => {
|
||||
it('FE-PLACES-005: deletePlace removes place from places array', async () => {
|
||||
const place1 = buildPlace({ id: 10, trip_id: 1 });
|
||||
const place2 = buildPlace({ id: 20, trip_id: 1 });
|
||||
seedStore(useTripStore, { places: [place1, place2], assignments: {} });
|
||||
|
||||
server.use(
|
||||
http.delete('/api/trips/1/places/10', () => HttpResponse.json({ success: true })),
|
||||
);
|
||||
|
||||
await useTripStore.getState().deletePlace(1, 10);
|
||||
|
||||
const places = useTripStore.getState().places;
|
||||
expect(places).toHaveLength(1);
|
||||
expect(places[0].id).toBe(20);
|
||||
});
|
||||
|
||||
it('FE-PLACES-006: deletePlace cascades — assignments referencing the place are removed', async () => {
|
||||
const place = buildPlace({ id: 10, trip_id: 1 });
|
||||
const otherPlace = buildPlace({ id: 20, trip_id: 1 });
|
||||
const assignmentWithPlace = buildAssignment({ id: 100, day_id: 1, place });
|
||||
const assignmentOther = buildAssignment({ id: 200, day_id: 1, place: otherPlace });
|
||||
|
||||
seedStore(useTripStore, {
|
||||
places: [place, otherPlace],
|
||||
assignments: { '1': [assignmentWithPlace, assignmentOther] },
|
||||
});
|
||||
|
||||
server.use(
|
||||
http.delete('/api/trips/1/places/10', () => HttpResponse.json({ success: true })),
|
||||
);
|
||||
|
||||
await useTripStore.getState().deletePlace(1, 10);
|
||||
|
||||
const dayAssignments = useTripStore.getState().assignments['1'];
|
||||
expect(dayAssignments).toHaveLength(1);
|
||||
expect(dayAssignments[0].id).toBe(200);
|
||||
});
|
||||
});
|
||||
|
||||
describe('refreshPlaces', () => {
|
||||
it('FE-PLACES-007: refreshPlaces re-fetches and replaces places array', async () => {
|
||||
const stale = buildPlace({ id: 99, trip_id: 1, name: 'Stale' });
|
||||
seedStore(useTripStore, { places: [stale] });
|
||||
|
||||
const fresh = buildPlace({ trip_id: 1, name: 'Fresh' });
|
||||
server.use(
|
||||
http.get('/api/trips/1/places', () => HttpResponse.json({ places: [fresh] })),
|
||||
);
|
||||
|
||||
await useTripStore.getState().refreshPlaces(1);
|
||||
|
||||
const places = useTripStore.getState().places;
|
||||
expect(places).toHaveLength(1);
|
||||
expect(places[0].name).toBe('Fresh');
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,180 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { useTripStore } from '../../../src/store/tripStore';
|
||||
import { resetAllStores, seedStore } from '../../helpers/store';
|
||||
import { buildReservation } 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(),
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
resetAllStores();
|
||||
});
|
||||
|
||||
describe('reservationsSlice', () => {
|
||||
describe('loadReservations', () => {
|
||||
it('FE-RESERV-001: loadReservations fetches and replaces reservations', async () => {
|
||||
seedStore(useTripStore, { reservations: [] });
|
||||
|
||||
const reservation = buildReservation({ trip_id: 1 });
|
||||
server.use(
|
||||
http.get('/api/trips/1/reservations', () =>
|
||||
HttpResponse.json({ reservations: [reservation] })
|
||||
),
|
||||
);
|
||||
|
||||
await useTripStore.getState().loadReservations(1);
|
||||
|
||||
expect(useTripStore.getState().reservations).toHaveLength(1);
|
||||
expect(useTripStore.getState().reservations[0].id).toBe(reservation.id);
|
||||
});
|
||||
});
|
||||
|
||||
describe('addReservation', () => {
|
||||
it('FE-RESERV-002: addReservation prepends to reservations array', async () => {
|
||||
const existing = buildReservation({ trip_id: 1, name: 'Existing' });
|
||||
seedStore(useTripStore, { reservations: [existing] });
|
||||
|
||||
const result = await useTripStore.getState().addReservation(1, {
|
||||
name: 'New Hotel',
|
||||
type: 'hotel',
|
||||
status: 'pending',
|
||||
});
|
||||
|
||||
expect(result.name).toBe('New Hotel');
|
||||
const reservations = useTripStore.getState().reservations;
|
||||
expect(reservations).toHaveLength(2);
|
||||
// addReservation prepends
|
||||
expect(reservations[0].name).toBe('New Hotel');
|
||||
});
|
||||
|
||||
it('FE-RESERV-003: addReservation on failure throws', async () => {
|
||||
server.use(
|
||||
http.post('/api/trips/1/reservations', () =>
|
||||
HttpResponse.json({ message: 'Error' }, { status: 500 })
|
||||
),
|
||||
);
|
||||
|
||||
await expect(
|
||||
useTripStore.getState().addReservation(1, { name: 'Fail' })
|
||||
).rejects.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
describe('updateReservation', () => {
|
||||
it('FE-RESERV-004: updateReservation replaces item in array by id', async () => {
|
||||
const reservation = buildReservation({ id: 10, trip_id: 1, name: 'Old', status: 'pending' });
|
||||
seedStore(useTripStore, { reservations: [reservation] });
|
||||
|
||||
server.use(
|
||||
http.put('/api/trips/1/reservations/10', async ({ request }) => {
|
||||
const body = await request.json() as Record<string, unknown>;
|
||||
return HttpResponse.json({ reservation: { ...reservation, ...body } });
|
||||
}),
|
||||
);
|
||||
|
||||
const result = await useTripStore.getState().updateReservation(1, 10, { name: 'Updated Hotel' });
|
||||
|
||||
expect(result.name).toBe('Updated Hotel');
|
||||
expect(useTripStore.getState().reservations[0].name).toBe('Updated Hotel');
|
||||
});
|
||||
});
|
||||
|
||||
describe('toggleReservationStatus', () => {
|
||||
it('FE-RESERV-005: toggleReservationStatus flips confirmed to pending optimistically', async () => {
|
||||
const reservation = buildReservation({ id: 10, trip_id: 1, status: 'confirmed' });
|
||||
seedStore(useTripStore, { reservations: [reservation] });
|
||||
|
||||
server.use(
|
||||
http.put('/api/trips/1/reservations/10', async ({ request }) => {
|
||||
const body = await request.json() as Record<string, unknown>;
|
||||
return HttpResponse.json({ reservation: { ...reservation, ...body } });
|
||||
}),
|
||||
);
|
||||
|
||||
await useTripStore.getState().toggleReservationStatus(1, 10);
|
||||
|
||||
expect(useTripStore.getState().reservations[0].status).toBe('pending');
|
||||
});
|
||||
|
||||
it('FE-RESERV-006: toggleReservationStatus flips pending to confirmed optimistically', async () => {
|
||||
const reservation = buildReservation({ id: 10, trip_id: 1, status: 'pending' });
|
||||
seedStore(useTripStore, { reservations: [reservation] });
|
||||
|
||||
server.use(
|
||||
http.put('/api/trips/1/reservations/10', async ({ request }) => {
|
||||
const body = await request.json() as Record<string, unknown>;
|
||||
return HttpResponse.json({ reservation: { ...reservation, ...body } });
|
||||
}),
|
||||
);
|
||||
|
||||
await useTripStore.getState().toggleReservationStatus(1, 10);
|
||||
|
||||
expect(useTripStore.getState().reservations[0].status).toBe('confirmed');
|
||||
});
|
||||
|
||||
it('FE-RESERV-007: toggleReservationStatus rolls back on API failure (silent)', async () => {
|
||||
const reservation = buildReservation({ id: 10, trip_id: 1, status: 'confirmed' });
|
||||
seedStore(useTripStore, { reservations: [reservation] });
|
||||
|
||||
server.use(
|
||||
http.put('/api/trips/1/reservations/10', () =>
|
||||
HttpResponse.json({ message: 'Error' }, { status: 500 })
|
||||
),
|
||||
);
|
||||
|
||||
// Does NOT throw (silent rollback)
|
||||
await useTripStore.getState().toggleReservationStatus(1, 10);
|
||||
|
||||
expect(useTripStore.getState().reservations[0].status).toBe('confirmed');
|
||||
});
|
||||
|
||||
it('FE-RESERV-008: toggleReservationStatus does nothing if reservation not found', async () => {
|
||||
seedStore(useTripStore, { reservations: [] });
|
||||
|
||||
// Should not throw
|
||||
await useTripStore.getState().toggleReservationStatus(1, 999);
|
||||
|
||||
expect(useTripStore.getState().reservations).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('deleteReservation', () => {
|
||||
it('FE-RESERV-009: deleteReservation removes from reservations after API success', async () => {
|
||||
const r1 = buildReservation({ id: 10, trip_id: 1 });
|
||||
const r2 = buildReservation({ id: 20, trip_id: 1 });
|
||||
seedStore(useTripStore, { reservations: [r1, r2] });
|
||||
|
||||
await useTripStore.getState().deleteReservation(1, 10);
|
||||
|
||||
const reservations = useTripStore.getState().reservations;
|
||||
expect(reservations).toHaveLength(1);
|
||||
expect(reservations[0].id).toBe(20);
|
||||
});
|
||||
|
||||
it('FE-RESERV-010: deleteReservation on failure throws (no optimistic, server-first)', async () => {
|
||||
const reservation = buildReservation({ id: 10, trip_id: 1 });
|
||||
seedStore(useTripStore, { reservations: [reservation] });
|
||||
|
||||
server.use(
|
||||
http.delete('/api/trips/1/reservations/10', () =>
|
||||
HttpResponse.json({ message: 'Error' }, { status: 500 })
|
||||
),
|
||||
);
|
||||
|
||||
await expect(useTripStore.getState().deleteReservation(1, 10)).rejects.toThrow();
|
||||
|
||||
// Still in state since server-first (only removes after success)
|
||||
expect(useTripStore.getState().reservations).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,149 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||
import { http, HttpResponse } from 'msw';
|
||||
import { useTripStore } from '../../../src/store/tripStore';
|
||||
import { resetAllStores, seedStore } from '../../helpers/store';
|
||||
import { buildTodoItem } 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(),
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
resetAllStores();
|
||||
});
|
||||
|
||||
describe('todoSlice', () => {
|
||||
describe('addTodoItem', () => {
|
||||
it('FE-TODO-001: addTodoItem calls API and appends item to todoItems', async () => {
|
||||
const existing = buildTodoItem({ trip_id: 1 });
|
||||
seedStore(useTripStore, { todoItems: [existing] });
|
||||
|
||||
const result = await useTripStore.getState().addTodoItem(1, { name: 'Buy sunscreen', priority: 1 });
|
||||
|
||||
expect(result.name).toBe('Buy sunscreen');
|
||||
const items = useTripStore.getState().todoItems;
|
||||
expect(items).toHaveLength(2);
|
||||
});
|
||||
|
||||
it('FE-TODO-002: addTodoItem on failure throws', async () => {
|
||||
server.use(
|
||||
http.post('/api/trips/1/todo', () =>
|
||||
HttpResponse.json({ message: 'Error' }, { status: 500 })
|
||||
),
|
||||
);
|
||||
|
||||
await expect(
|
||||
useTripStore.getState().addTodoItem(1, { name: 'Fail' })
|
||||
).rejects.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
describe('updateTodoItem', () => {
|
||||
it('FE-TODO-003: updateTodoItem replaces item and preserves priority field', async () => {
|
||||
const item = buildTodoItem({ id: 10, trip_id: 1, name: 'Old', priority: 2, sort_order: 5 });
|
||||
seedStore(useTripStore, { todoItems: [item] });
|
||||
|
||||
server.use(
|
||||
http.put('/api/trips/1/todo/10', async ({ request }) => {
|
||||
const body = await request.json() as Record<string, unknown>;
|
||||
return HttpResponse.json({ item: { ...item, ...body } });
|
||||
}),
|
||||
);
|
||||
|
||||
const result = await useTripStore.getState().updateTodoItem(1, 10, { name: 'Updated', priority: 2 });
|
||||
|
||||
expect(result.name).toBe('Updated');
|
||||
expect(result.priority).toBe(2);
|
||||
expect(useTripStore.getState().todoItems[0].name).toBe('Updated');
|
||||
expect(useTripStore.getState().todoItems[0].priority).toBe(2);
|
||||
});
|
||||
});
|
||||
|
||||
describe('deleteTodoItem', () => {
|
||||
it('FE-TODO-004: deleteTodoItem optimistically removes item, rollback on failure', async () => {
|
||||
const item = buildTodoItem({ id: 10, trip_id: 1 });
|
||||
seedStore(useTripStore, { todoItems: [item] });
|
||||
|
||||
server.use(
|
||||
http.delete('/api/trips/1/todo/10', () =>
|
||||
HttpResponse.json({ message: 'Error' }, { status: 500 })
|
||||
),
|
||||
);
|
||||
|
||||
await expect(useTripStore.getState().deleteTodoItem(1, 10)).rejects.toThrow();
|
||||
|
||||
expect(useTripStore.getState().todoItems).toHaveLength(1);
|
||||
expect(useTripStore.getState().todoItems[0].id).toBe(10);
|
||||
});
|
||||
|
||||
it('FE-TODO-004b: deleteTodoItem success removes item from array', async () => {
|
||||
const item1 = buildTodoItem({ id: 10, trip_id: 1 });
|
||||
const item2 = buildTodoItem({ id: 20, trip_id: 1 });
|
||||
seedStore(useTripStore, { todoItems: [item1, item2] });
|
||||
|
||||
await useTripStore.getState().deleteTodoItem(1, 10);
|
||||
|
||||
const items = useTripStore.getState().todoItems;
|
||||
expect(items).toHaveLength(1);
|
||||
expect(items[0].id).toBe(20);
|
||||
});
|
||||
});
|
||||
|
||||
describe('toggleTodoItem', () => {
|
||||
it('FE-TODO-005: toggleTodoItem sets checked optimistically to 1', async () => {
|
||||
const item = buildTodoItem({ id: 10, trip_id: 1, checked: 0 });
|
||||
seedStore(useTripStore, { todoItems: [item] });
|
||||
|
||||
server.use(
|
||||
http.put('/api/trips/1/todo/10', async ({ request }) => {
|
||||
const body = await request.json() as Record<string, unknown>;
|
||||
return HttpResponse.json({ item: { ...item, ...body } });
|
||||
}),
|
||||
);
|
||||
|
||||
await useTripStore.getState().toggleTodoItem(1, 10, true);
|
||||
|
||||
expect(useTripStore.getState().todoItems[0].checked).toBe(1);
|
||||
});
|
||||
|
||||
it('FE-TODO-006: toggleTodoItem rolls back checked on API failure (silent)', async () => {
|
||||
const item = buildTodoItem({ id: 10, trip_id: 1, checked: 0 });
|
||||
seedStore(useTripStore, { todoItems: [item] });
|
||||
|
||||
server.use(
|
||||
http.put('/api/trips/1/todo/10', () =>
|
||||
HttpResponse.json({ message: 'Error' }, { status: 500 })
|
||||
),
|
||||
);
|
||||
|
||||
// Does NOT throw
|
||||
await useTripStore.getState().toggleTodoItem(1, 10, true);
|
||||
|
||||
expect(useTripStore.getState().todoItems[0].checked).toBe(0);
|
||||
});
|
||||
|
||||
it('FE-TODO-007: toggleTodoItem preserves sort_order field', async () => {
|
||||
const item = buildTodoItem({ id: 10, trip_id: 1, checked: 0, sort_order: 3 });
|
||||
seedStore(useTripStore, { todoItems: [item] });
|
||||
|
||||
server.use(
|
||||
http.put('/api/trips/1/todo/10', async ({ request }) => {
|
||||
const body = await request.json() as Record<string, unknown>;
|
||||
return HttpResponse.json({ item: { ...item, ...body } });
|
||||
}),
|
||||
);
|
||||
|
||||
await useTripStore.getState().toggleTodoItem(1, 10, true);
|
||||
|
||||
expect(useTripStore.getState().todoItems[0].sort_order).toBe(3);
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user