, use regex to match partial text
+ await screen.findByText(/AAAA-1111/);
+ expect(screen.getByText(/BBBB-2222/)).toBeInTheDocument();
+ });
+
+ it('FE-COMP-ACCOUNT-028: backup codes are stored in sessionStorage on enable', async () => {
+ const user = userEvent.setup();
+ server.use(
+ http.post('/api/auth/mfa/setup', () =>
+ HttpResponse.json({ qr_svg: '', secret: 'ABCDEF123' })
+ ),
+ http.post('/api/auth/mfa/enable', () =>
+ HttpResponse.json({ backup_codes: ['AAAA-1111', 'BBBB-2222'] })
+ ),
+ http.get('/api/auth/me', () => HttpResponse.json({ user: buildUser({ mfa_enabled: true }) })),
+ );
+ render(; use regex
+ await waitFor(() => screen.getByText(/CODE1/));
+ await user.click(screen.getByText('OK'));
+ expect(screen.queryByText(/CODE1/)).not.toBeInTheDocument();
+ });
+
+ it('FE-COMP-ACCOUNT-030: copy backup codes calls clipboard.writeText', async () => {
+ const user = userEvent.setup();
+ sessionStorage.setItem('trek_mfa_backup_codes_pending', JSON.stringify(['AAAA-1111', 'BBBB-2222']));
+ seedStore(useAuthStore, { user: buildUser({ username: 'testuser', email: 'test@example.com', mfa_enabled: true }) });
+ const writeTextMock = vi.fn().mockResolvedValue(undefined);
+ Object.defineProperty(navigator, 'clipboard', {
+ value: { writeText: writeTextMock },
+ writable: true,
+ configurable: true,
+ });
+ render(<>content
content
Hello World
Save}>
+ body
+
+ );
+ expect(screen.getByRole('button', { name: 'Save' })).toBeTruthy();
+ });
+
+ it('FE-COMP-MODAL-006: close button calls onClose', async () => {
+ const user = userEvent.setup();
+ render(inner
inner content
[]) => void;
+ constructor(callback: (entries: Partial[]) => void) {
+ this.callback = callback;
+ }
+ observe = mockObserve;
+ disconnect = mockDisconnect;
+ unobserve = vi.fn();
+}
+
+beforeAll(() => {
+ (globalThis as any).IntersectionObserver = MockIntersectionObserver;
+});
+
+afterEach(() => {
+ mockDisconnect.mockClear();
+ mockObserve.mockClear();
+});
+
+import PlaceAvatar from './PlaceAvatar';
+
+const basePlaceNoImage = {
+ id: 1,
+ name: 'Eiffel Tower',
+ image_url: null,
+ google_place_id: null,
+ osm_id: null,
+ lat: 48.8584,
+ lng: 2.2945,
+};
+
+const basePlaceWithImage = {
+ ...basePlaceNoImage,
+ image_url: 'https://example.com/eiffel.jpg',
+};
+
+describe('PlaceAvatar', () => {
+ it('FE-COMP-AVATAR-001: renders an image when image_url is provided', () => {
+ render( | null = null;
+ server.use(
+ http.put('/api/auth/app-settings', async ({ request }) => {
+ capturedBody = await request.json() as Record;
+ return HttpResponse.json({});
+ }),
+ );
+
+ seedStore(useAuthStore, { isAuthenticated: true, user: buildAdmin() });
+ render( | null = null;
+ server.use(
+ http.put('/api/auth/app-settings', async ({ request }) => {
+ capturedBody = await request.json() as Record;
+ return HttpResponse.json({});
+ }),
+ );
+
+ seedStore(useAuthStore, { isAuthenticated: true, user: buildAdmin() });
+ render( | null = null;
+ server.use(
+ http.put('/api/auth/app-settings', async ({ request }) => {
+ capturedBody = await request.json() as Record;
+ return HttpResponse.json({});
+ }),
+ );
+
+ seedStore(useAuthStore, { isAuthenticated: true, user: buildAdmin() });
+ render( | null = null;
+ server.use(
+ http.put('/api/auth/app-settings', async ({ request }) => {
+ capturedBody = await request.json() as Record;
+ return HttpResponse.json({});
+ }),
+ );
+
+ seedStore(useAuthStore, { isAuthenticated: true, user: buildAdmin() });
+ render( | null = null;
+ server.use(
+ http.put('/api/auth/app-settings', async ({ request }) => {
+ capturedBody = await request.json() as Record;
+ return HttpResponse.json({});
+ }),
+ );
+
+ // Start with email enabled by seeding smtpValues
+ server.use(
+ http.get('/api/auth/app-settings', () => {
+ return HttpResponse.json({ notification_channels: 'email', smtp_host: 'mail.example.com' });
+ }),
+ );
+
+ seedStore(useAuthStore, { isAuthenticated: true, user: buildAdmin() });
+ render(
+ ,
+ { initialEntries: [`/shared/${token}`] },
+ );
+}
+
+beforeEach(() => {
+ // SharedTripPage does NOT require authentication — do NOT seed auth store
+ resetAllStores();
+});
+
+describe('SharedTripPage', () => {
+ describe('FE-PAGE-SHARED-001: Renders without authentication', () => {
+ it('renders loading spinner without any auth state', async () => {
+ // Use a token that will delay or we just check initial state before response
+ server.use(
+ http.get('/api/shared/:token', async () => {
+ await new Promise(resolve => setTimeout(resolve, 200));
+ return HttpResponse.json({ trips: [] });
+ }),
+ );
+
+ renderSharedTrip('test-token');
+
+ // While data is loading, shows a spinner (the loading div)
+ // The page shows a spinning div before data arrives
+ expect(document.body.textContent).toBeDefined();
+ });
+ });
+
+ describe('FE-PAGE-SHARED-002: Trip data loads from share token API', () => {
+ it('fetches shared trip from GET /api/shared/:token', async () => {
+ renderSharedTrip('test-token');
+
+ // After data loads, trip name appears
+ await waitFor(() => {
+ expect(screen.getByText('Shared Paris Trip')).toBeInTheDocument();
+ });
+ });
+ });
+
+ describe('FE-PAGE-SHARED-003: Trip details displayed', () => {
+ it('shows trip name after data loads', async () => {
+ renderSharedTrip('test-token');
+
+ await waitFor(() => {
+ expect(screen.getByText('Shared Paris Trip')).toBeInTheDocument();
+ });
+ });
+ });
+
+ describe('FE-PAGE-SHARED-004: Invalid token shows error', () => {
+ it('displays error message when token is invalid or expired', async () => {
+ renderSharedTrip('invalid-token');
+
+ await waitFor(() => {
+ expect(screen.getByText(/link expired or invalid/i)).toBeInTheDocument();
+ });
+ });
+ });
+
+ describe('FE-PAGE-SHARED-005: No edit controls shown (read-only)', () => {
+ it('shows the read-only indicator after data loads', async () => {
+ renderSharedTrip('test-token');
+
+ await waitFor(() => {
+ // The shared page renders "Read-only shared view" text
+ expect(screen.getByText(/read-only/i)).toBeInTheDocument();
+ });
+ });
+ });
+
+ describe('FE-PAGE-SHARED-006: Expired token hint is shown', () => {
+ it('shows hint text below the lock icon on error', async () => {
+ renderSharedTrip('expired-token');
+
+ await waitFor(() => {
+ expect(screen.getByText(/no longer active/i)).toBeInTheDocument();
+ });
+ });
+ });
+
+ describe('FE-PAGE-SHARED-007: Map is rendered', () => {
+ it('renders the map container for the shared trip', async () => {
+ renderSharedTrip('test-token');
+
+ await waitFor(() => {
+ expect(screen.getByText('Shared Paris Trip')).toBeInTheDocument();
+ });
+
+ // Map container should be rendered
+ expect(screen.getByTestId('map-container')).toBeInTheDocument();
+ });
+ });
+});
diff --git a/client/src/pages/TripPlannerPage.test.tsx b/client/src/pages/TripPlannerPage.test.tsx
new file mode 100644
index 00000000..f5a566dd
--- /dev/null
+++ b/client/src/pages/TripPlannerPage.test.tsx
@@ -0,0 +1,254 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import React from 'react';
+import { render, screen, waitFor, act } from '../../tests/helpers/render';
+import { Routes, Route } from 'react-router-dom';
+import { resetAllStores, seedStore } from '../../tests/helpers/store';
+import { buildUser, buildTrip, buildDay } from '../../tests/helpers/factories';
+import { useAuthStore } from '../store/authStore';
+import { useTripStore } from '../store/tripStore';
+import TripPlannerPage from './TripPlannerPage';
+
+// Mock Leaflet-dependent components
+vi.mock('../components/Map/MapView', () => ({
+ MapView: () => React.createElement('div', { 'data-testid': 'map-view' }),
+}));
+
+vi.mock('react-leaflet', () => ({
+ MapContainer: ({ children }: { children: React.ReactNode }) =>
+ React.createElement('div', { 'data-testid': 'map-container' }, children),
+ TileLayer: () => null,
+ Marker: ({ children }: { children?: React.ReactNode }) => React.createElement('div', null, children),
+ Tooltip: ({ children }: { children?: React.ReactNode }) => React.createElement('div', null, children),
+ Polyline: () => null,
+ CircleMarker: () => null,
+ Circle: () => null,
+ useMap: () => ({ fitBounds: vi.fn(), getCenter: vi.fn(() => ({ lat: 0, lng: 0 })) }),
+}));
+
+vi.mock('react-leaflet-cluster', () => ({
+ default: ({ children }: { children: React.ReactNode }) => React.createElement('div', null, children),
+}));
+
+vi.mock('leaflet', () => {
+ const L = {
+ divIcon: vi.fn(() => ({})),
+ latLngBounds: vi.fn(() => ({ extend: vi.fn(), isValid: vi.fn(() => true) })),
+ icon: vi.fn(() => ({})),
+ };
+ return { default: L, ...L };
+});
+
+// Mock the WebSocket hook so we can verify it's called
+const mockUseTripWebSocket = vi.fn();
+vi.mock('../hooks/useTripWebSocket', () => ({
+ useTripWebSocket: (...args: unknown[]) => mockUseTripWebSocket(...args),
+}));
+
+// Mock heavy sub-components
+vi.mock('../components/Planner/DayPlanSidebar', () => ({
+ default: () => React.createElement('div', { 'data-testid': 'day-plan-sidebar' }),
+}));
+
+vi.mock('../components/Planner/PlacesSidebar', () => ({
+ default: () => React.createElement('div', { 'data-testid': 'places-sidebar' }),
+}));
+
+vi.mock('../components/Planner/PlaceInspector', () => ({
+ default: () => null,
+}));
+
+vi.mock('../components/Planner/DayDetailPanel', () => ({
+ default: () => null,
+}));
+
+vi.mock('../components/Memories/MemoriesPanel', () => ({
+ default: () => React.createElement('div', { 'data-testid': 'memories-panel' }),
+}));
+
+vi.mock('../components/Collab/CollabPanel', () => ({
+ default: () => React.createElement('div', { 'data-testid': 'collab-panel' }),
+}));
+
+vi.mock('../components/Files/FileManager', () => ({
+ default: () => React.createElement('div', { 'data-testid': 'file-manager' }),
+}));
+
+// Helper to seed a complete trip store state with mocked actions
+function seedTripStore(overrides: { id?: number; tripName?: string; withMocks?: boolean } = {}) {
+ const { id = 42, tripName = 'Test Trip', withMocks = true } = overrides;
+ // Use `title` because TripPlannerPage reads trip.title
+ const trip = { ...buildTrip({ id }), title: tripName };
+ const day = buildDay({ trip_id: id });
+
+ const mockLoadTrip = withMocks ? vi.fn().mockResolvedValue(undefined) : undefined;
+ const mockLoadFiles = withMocks ? vi.fn().mockResolvedValue(undefined) : undefined;
+ const mockLoadReservations = withMocks ? vi.fn().mockResolvedValue(undefined) : undefined;
+
+ seedStore(useTripStore, {
+ trip,
+ isLoading: false,
+ days: [day],
+ places: [],
+ assignments: {},
+ packingItems: [],
+ todoItems: [],
+ categories: [],
+ reservations: [],
+ budgetItems: [],
+ files: [],
+ ...(withMocks && {
+ loadTrip: mockLoadTrip,
+ loadFiles: mockLoadFiles,
+ loadReservations: mockLoadReservations,
+ }),
+ } as any);
+
+ return { trip, day, mockLoadTrip, mockLoadFiles, mockLoadReservations };
+}
+
+// Helper to render TripPlannerPage with route params
+function renderPlannerPage(tripId: number | string) {
+ return render(
+
+ ,
+ { initialEntries: [`/trips/${tripId}`] },
+ );
+}
+
+beforeEach(() => {
+ resetAllStores();
+ mockUseTripWebSocket.mockReset();
+ seedStore(useAuthStore, { isAuthenticated: true, user: buildUser() });
+});
+
+afterEach(() => {
+ vi.useRealTimers();
+});
+
+describe('TripPlannerPage', () => {
+ describe('FE-PAGE-PLANNER-001: Calls loadTrip with route param on mount', () => {
+ it('calls loadTrip with the trip ID from URL params', async () => {
+ const { mockLoadTrip } = seedTripStore({ id: 42 });
+
+ renderPlannerPage(42);
+
+ await waitFor(() => {
+ expect(mockLoadTrip).toHaveBeenCalledWith('42');
+ });
+ });
+ });
+
+ describe('FE-PAGE-PLANNER-002: Loading state shown while loadTrip in progress', () => {
+ it('shows loading animation when isLoading is true', () => {
+ seedStore(useTripStore, {
+ trip: null,
+ isLoading: true,
+ days: [],
+ places: [],
+ assignments: {},
+ loadTrip: vi.fn().mockReturnValue(new Promise(() => {})),
+ loadFiles: vi.fn().mockResolvedValue(undefined),
+ loadReservations: vi.fn().mockResolvedValue(undefined),
+ } as any);
+
+ renderPlannerPage(99);
+
+ // Loading state: shows loading gif
+ const loadingImg = document.querySelector('img[alt="Loading"]');
+ expect(loadingImg).toBeInTheDocument();
+ });
+ });
+
+ describe('FE-PAGE-PLANNER-003: Error state shown if loadTrip fails', () => {
+ it('calls loadTrip and the action is called (even if it rejects)', async () => {
+ const mockLoadTrip = vi.fn().mockRejectedValue(new Error('Not found'));
+ const mockLoadFiles = vi.fn().mockResolvedValue(undefined);
+ const mockLoadReservations = vi.fn().mockResolvedValue(undefined);
+
+ seedStore(useTripStore, {
+ trip: null,
+ isLoading: false,
+ days: [],
+ places: [],
+ assignments: {},
+ loadTrip: mockLoadTrip,
+ loadFiles: mockLoadFiles,
+ loadReservations: mockLoadReservations,
+ } as any);
+
+ renderPlannerPage(999);
+
+ await waitFor(() => {
+ expect(mockLoadTrip).toHaveBeenCalledWith('999');
+ });
+ });
+ });
+
+ describe('FE-PAGE-PLANNER-004: Trip name in header after load', () => {
+ it('shows trip title in the Navbar after splash screen', async () => {
+ vi.useFakeTimers();
+
+ seedTripStore({ id: 7, tripName: 'Tokyo Adventure' });
+
+ renderPlannerPage(7);
+
+ // Run all pending timers (including the 1500ms splash timeout) synchronously
+ act(() => { vi.runAllTimers(); });
+
+ vi.useRealTimers();
+
+ await waitFor(() => {
+ expect(screen.getByText('Tokyo Adventure')).toBeInTheDocument();
+ });
+ });
+ });
+
+ describe('FE-PAGE-PLANNER-005: Day plan sidebar renders', () => {
+ it('renders the DayPlanSidebar component after splash', async () => {
+ vi.useFakeTimers();
+
+ seedTripStore({ id: 3, tripName: 'Day Tabs Trip' });
+
+ renderPlannerPage(3);
+
+ act(() => { vi.runAllTimers(); });
+
+ vi.useRealTimers();
+
+ await waitFor(() => {
+ expect(screen.getByTestId('day-plan-sidebar')).toBeInTheDocument();
+ });
+ });
+ });
+
+ describe('FE-PAGE-PLANNER-007: Places sidebar renders', () => {
+ it('renders the PlacesSidebar component after splash', async () => {
+ vi.useFakeTimers();
+
+ seedTripStore({ id: 5, tripName: 'Places Trip' });
+
+ renderPlannerPage(5);
+
+ act(() => { vi.runAllTimers(); });
+
+ vi.useRealTimers();
+
+ await waitFor(() => {
+ expect(screen.getByTestId('places-sidebar')).toBeInTheDocument();
+ });
+ });
+ });
+
+ describe('FE-PAGE-PLANNER-008: WebSocket hook mounted', () => {
+ it('calls useTripWebSocket with the trip ID string', async () => {
+ seedTripStore({ id: 15 });
+
+ renderPlannerPage(15);
+
+ await waitFor(() => {
+ expect(mockUseTripWebSocket).toHaveBeenCalledWith('15');
+ });
+ });
+ });
+});
diff --git a/client/tests/helpers/factories.ts b/client/tests/helpers/factories.ts
new file mode 100644
index 00000000..27d07f90
--- /dev/null
+++ b/client/tests/helpers/factories.ts
@@ -0,0 +1,288 @@
+/**
+ * Pure data builder functions for frontend tests.
+ * These return typed objects matching interfaces in src/types.ts.
+ * They do NOT touch a database.
+ */
+
+import type {
+ User,
+ Trip,
+ Day,
+ Place,
+ Assignment,
+ DayNote,
+ PackingItem,
+ TodoItem,
+ BudgetItem,
+ Reservation,
+ TripFile,
+ Tag,
+ Category,
+ Settings,
+ AppConfig,
+} from '../../src/types';
+
+// ── Counters ──────────────────────────────────────────────────────────────────
+
+let _seq = 0;
+function next(): number {
+ return ++_seq;
+}
+
+// ── InAppNotification (local interface, not in types.ts) ──────────────────────
+
+export interface InAppNotification {
+ id: number;
+ type: string;
+ message: string;
+ read: boolean;
+ created_at: string;
+ trip_id?: number | null;
+}
+
+// ── Builders ──────────────────────────────────────────────────────────────────
+
+export function buildUser(overrides: Partial = {}): User {
+ const id = next();
+ return {
+ id,
+ username: `user${id}`,
+ email: `user${id}@example.com`,
+ role: 'user',
+ avatar_url: null,
+ maps_api_key: null,
+ created_at: '2025-01-01T00:00:00.000Z',
+ mfa_enabled: false,
+ must_change_password: false,
+ ...overrides,
+ };
+}
+
+export function buildAdmin(overrides: Partial = {}): User {
+ return buildUser({ role: 'admin', ...overrides });
+}
+
+export function buildTrip(overrides: Partial = {}): Trip {
+ const id = next();
+ return {
+ id,
+ name: `Trip ${id}`,
+ description: null,
+ start_date: '2025-06-01',
+ end_date: '2025-06-05',
+ cover_url: null,
+ is_archived: false,
+ reminder_days: 7,
+ owner_id: 1,
+ created_at: '2025-01-01T00:00:00.000Z',
+ updated_at: '2025-01-01T00:00:00.000Z',
+ ...overrides,
+ };
+}
+
+export function buildDay(overrides: Partial = {}): Day {
+ const id = next();
+ return {
+ id,
+ trip_id: 1,
+ date: '2025-06-01',
+ title: null,
+ notes: null,
+ assignments: [],
+ notes_items: [],
+ ...overrides,
+ };
+}
+
+export function buildPlace(overrides: Partial = {}): Place {
+ const id = next();
+ return {
+ id,
+ trip_id: 1,
+ name: `Place ${id}`,
+ description: null,
+ lat: 48.8566,
+ lng: 2.3522,
+ address: null,
+ category_id: null,
+ icon: null,
+ price: null,
+ image_url: null,
+ google_place_id: null,
+ osm_id: null,
+ route_geometry: null,
+ place_time: null,
+ end_time: null,
+ created_at: '2025-01-01T00:00:00.000Z',
+ ...overrides,
+ };
+}
+
+export function buildAssignment(overrides: Partial = {}): Assignment {
+ const id = next();
+ const place = overrides.place ?? buildPlace();
+ return {
+ id,
+ day_id: 1,
+ place_id: place.id,
+ order_index: 0,
+ notes: null,
+ place,
+ ...overrides,
+ };
+}
+
+export function buildDayNote(overrides: Partial = {}): DayNote {
+ const id = next();
+ return {
+ id,
+ day_id: 1,
+ text: 'Test note',
+ time: null,
+ icon: null,
+ sort_order: 0,
+ created_at: '2025-01-01T00:00:00.000Z',
+ ...overrides,
+ };
+}
+
+export function buildPackingItem(overrides: Partial = {}): PackingItem {
+ const id = next();
+ return {
+ id,
+ trip_id: 1,
+ name: `Packing item ${id}`,
+ category: null,
+ checked: 0,
+ quantity: 1,
+ ...overrides,
+ };
+}
+
+export function buildTodoItem(overrides: Partial = {}): TodoItem {
+ const id = next();
+ return {
+ id,
+ trip_id: 1,
+ name: `Todo ${id}`,
+ category: null,
+ checked: 0,
+ sort_order: 0,
+ due_date: null,
+ description: null,
+ assigned_user_id: null,
+ priority: 0,
+ ...overrides,
+ };
+}
+
+export function buildBudgetItem(overrides: Partial = {}): BudgetItem {
+ const id = next();
+ return {
+ id,
+ trip_id: 1,
+ name: `Budget item ${id}`,
+ amount: 100,
+ currency: 'EUR',
+ category: null,
+ paid_by: null,
+ persons: 1,
+ members: [],
+ expense_date: null,
+ ...overrides,
+ };
+}
+
+export function buildReservation(overrides: Partial = {}): Reservation {
+ const id = next();
+ return {
+ id,
+ trip_id: 1,
+ name: `Reservation ${id}`,
+ type: 'restaurant',
+ status: 'confirmed',
+ date: null,
+ time: null,
+ confirmation_number: null,
+ notes: null,
+ url: null,
+ created_at: '2025-01-01T00:00:00.000Z',
+ ...overrides,
+ };
+}
+
+export function buildTripFile(overrides: Partial = {}): TripFile {
+ const id = next();
+ return {
+ id,
+ trip_id: 1,
+ filename: 'test.pdf',
+ original_name: 'test.pdf',
+ mime_type: 'application/pdf',
+ created_at: '2025-01-01T00:00:00.000Z',
+ ...overrides,
+ };
+}
+
+export function buildTag(overrides: Partial = {}): Tag {
+ const id = next();
+ return {
+ id,
+ name: `Tag ${id}`,
+ color: '#ff0000',
+ user_id: 1,
+ ...overrides,
+ };
+}
+
+export function buildCategory(overrides: Partial = {}): Category {
+ const id = next();
+ return {
+ id,
+ name: `Category ${id}`,
+ icon: 'restaurant',
+ user_id: 1,
+ ...overrides,
+ };
+}
+
+export function buildSettings(overrides: Partial = {}): Settings {
+ return {
+ map_tile_url: '',
+ default_lat: 48.8566,
+ default_lng: 2.3522,
+ default_zoom: 10,
+ dark_mode: false,
+ default_currency: 'USD',
+ language: 'en',
+ temperature_unit: 'fahrenheit',
+ time_format: '12h',
+ show_place_description: false,
+ route_calculation: false,
+ blur_booking_codes: false,
+ ...overrides,
+ };
+}
+
+export function buildInAppNotification(overrides: Partial = {}): InAppNotification {
+ const id = next();
+ return {
+ id,
+ type: 'trip_invite',
+ message: `Notification ${id}`,
+ read: false,
+ created_at: '2025-01-01T00:00:00.000Z',
+ trip_id: null,
+ ...overrides,
+ };
+}
+
+export function buildAppConfig(overrides: Partial = {}): AppConfig {
+ return {
+ has_users: true,
+ allow_registration: true,
+ demo_mode: false,
+ oidc_configured: false,
+ ...overrides,
+ };
+}
diff --git a/client/tests/helpers/msw/handlers/addons.ts b/client/tests/helpers/msw/handlers/addons.ts
new file mode 100644
index 00000000..6822829f
--- /dev/null
+++ b/client/tests/helpers/msw/handlers/addons.ts
@@ -0,0 +1,12 @@
+import { http, HttpResponse } from 'msw';
+
+export const addonHandlers = [
+ http.get('/api/addons', () => {
+ return HttpResponse.json({
+ addons: [
+ { id: 'vacay', name: 'Vacay', type: 'feature', icon: 'calendar', enabled: true },
+ { id: 'atlas', name: 'Atlas', type: 'feature', icon: 'map', enabled: true },
+ ],
+ });
+ }),
+];
diff --git a/client/tests/helpers/msw/handlers/admin.ts b/client/tests/helpers/msw/handlers/admin.ts
new file mode 100644
index 00000000..c7048362
--- /dev/null
+++ b/client/tests/helpers/msw/handlers/admin.ts
@@ -0,0 +1,125 @@
+import { http, HttpResponse } from 'msw';
+import { buildUser, buildAdmin } from '../../factories';
+
+export const adminHandlers = [
+ http.get('/api/admin/users', () => {
+ const user1 = buildUser({ username: 'alice', email: 'alice@example.com' });
+ const admin1 = buildAdmin({ username: 'admin', email: 'admin@example.com' });
+ return HttpResponse.json({ users: [admin1, user1] });
+ }),
+
+ http.post('/api/admin/users', async ({ request }) => {
+ const body = await request.json() as Record;
+ const user = buildUser({ ...body });
+ return HttpResponse.json({ user });
+ }),
+
+ http.put('/api/admin/users/:id', async ({ params, request }) => {
+ const body = await request.json() as Record;
+ const user = buildUser({ id: Number(params.id), ...body });
+ return HttpResponse.json({ user });
+ }),
+
+ http.delete('/api/admin/users/:id', () => {
+ return HttpResponse.json({ success: true });
+ }),
+
+ http.get('/api/admin/stats', () => {
+ return HttpResponse.json({
+ totalUsers: 2,
+ totalTrips: 5,
+ totalPlaces: 42,
+ totalFiles: 8,
+ });
+ }),
+
+ http.get('/api/admin/invites', () => {
+ return HttpResponse.json({ invites: [] });
+ }),
+
+ http.post('/api/admin/invites', async ({ request }) => {
+ const body = await request.json() as Record;
+ return HttpResponse.json({ invite: { id: 1, token: 'test-invite-token', ...body } });
+ }),
+
+ http.delete('/api/admin/invites/:id', () => {
+ return HttpResponse.json({ success: true });
+ }),
+
+ http.get('/api/admin/oidc', () => {
+ return HttpResponse.json({
+ issuer: '',
+ client_id: '',
+ client_secret: '',
+ client_secret_set: false,
+ display_name: '',
+ oidc_only: false,
+ discovery_url: '',
+ });
+ }),
+
+ http.put('/api/admin/oidc', async ({ request }) => {
+ const body = await request.json() as Record;
+ return HttpResponse.json({ ...body });
+ }),
+
+ http.get('/api/admin/version-check', () => {
+ return HttpResponse.json({ update_available: false, latest: '1.0.0', current: '1.0.0' });
+ }),
+
+ http.get('/api/admin/bag-tracking', () => {
+ return HttpResponse.json({ enabled: false });
+ }),
+
+ http.put('/api/admin/bag-tracking', async ({ request }) => {
+ const body = await request.json() as Record;
+ return HttpResponse.json({ enabled: body.enabled });
+ }),
+
+ http.get('/api/admin/addons', () => {
+ return HttpResponse.json({ addons: [] });
+ }),
+
+ http.get('/api/admin/packing-templates', () => {
+ return HttpResponse.json({ templates: [] });
+ }),
+
+ http.get('/api/admin/audit-log', () => {
+ return HttpResponse.json({ logs: [], total: 0 });
+ }),
+
+ http.get('/api/admin/mcp-tokens', () => {
+ return HttpResponse.json({ tokens: [] });
+ }),
+
+ http.get('/api/admin/permissions', () => {
+ return HttpResponse.json({ permissions: {} });
+ }),
+
+ http.get('/api/admin/notification-preferences', () => {
+ return HttpResponse.json({
+ event_types: [],
+ available_channels: {},
+ implemented_combos: {},
+ preferences: {},
+ });
+ }),
+
+ // Auth settings endpoints used by AdminPage
+ http.get('/api/auth/app-settings', () => {
+ return HttpResponse.json({});
+ }),
+
+ http.put('/api/auth/app-settings', async ({ request }) => {
+ const body = await request.json() as Record;
+ return HttpResponse.json({ ...body });
+ }),
+
+ http.get('/api/auth/me/settings', () => {
+ return HttpResponse.json({ settings: { maps_api_key: '', openweather_api_key: '' } });
+ }),
+
+ http.get('/api/auth/validate-keys', () => {
+ return HttpResponse.json({ maps: true, weather: true });
+ }),
+];
diff --git a/client/tests/helpers/msw/handlers/assignments.ts b/client/tests/helpers/msw/handlers/assignments.ts
new file mode 100644
index 00000000..62065bad
--- /dev/null
+++ b/client/tests/helpers/msw/handlers/assignments.ts
@@ -0,0 +1,28 @@
+import { http, HttpResponse } from 'msw';
+import { buildAssignment, buildPlace } from '../../factories';
+
+export const assignmentsHandlers = [
+ http.post('/api/trips/:id/days/:dayId/assignments', async ({ params, request }) => {
+ const body = await request.json() as { place_id: number };
+ const place = buildPlace({ id: body.place_id, trip_id: Number(params.id) });
+ const assignment = buildAssignment({
+ day_id: Number(params.dayId),
+ place_id: body.place_id,
+ place,
+ order_index: 0,
+ });
+ return HttpResponse.json({ assignment });
+ }),
+
+ http.delete('/api/trips/:id/days/:dayId/assignments/:assignmentId', () => {
+ return HttpResponse.json({ success: true });
+ }),
+
+ http.put('/api/trips/:id/days/:dayId/assignments/reorder', () => {
+ return HttpResponse.json({ success: true });
+ }),
+
+ http.put('/api/trips/:id/assignments/:assignmentId/move', () => {
+ return HttpResponse.json({ success: true });
+ }),
+];
diff --git a/client/tests/helpers/msw/handlers/auth.ts b/client/tests/helpers/msw/handlers/auth.ts
new file mode 100644
index 00000000..cb23efae
--- /dev/null
+++ b/client/tests/helpers/msw/handlers/auth.ts
@@ -0,0 +1,31 @@
+import { http, HttpResponse } from 'msw';
+import { buildUser, buildAppConfig } from '../../factories';
+
+export const authHandlers = [
+ http.post('/api/auth/login', () => {
+ const user = buildUser();
+ return HttpResponse.json({ user, token: 'mock-token' });
+ }),
+
+ http.get('/api/auth/me', () => {
+ const user = buildUser();
+ return HttpResponse.json({ user });
+ }),
+
+ http.post('/api/auth/register', () => {
+ const user = buildUser();
+ return HttpResponse.json({ user, token: 'mock-token' });
+ }),
+
+ http.get('/api/auth/app-config', () => {
+ return HttpResponse.json(buildAppConfig());
+ }),
+
+ http.post('/api/auth/ws-token', () => {
+ return HttpResponse.json({ token: 'mock-ws-token' });
+ }),
+
+ http.post('/api/auth/logout', () => {
+ return HttpResponse.json({ success: true });
+ }),
+];
diff --git a/client/tests/helpers/msw/handlers/budget.ts b/client/tests/helpers/msw/handlers/budget.ts
new file mode 100644
index 00000000..936e6862
--- /dev/null
+++ b/client/tests/helpers/msw/handlers/budget.ts
@@ -0,0 +1,38 @@
+import { http, HttpResponse } from 'msw';
+import { buildBudgetItem } from '../../factories';
+
+export const budgetHandlers = [
+ http.get('/api/trips/:id/budget', ({ params }) => {
+ return HttpResponse.json({
+ items: [buildBudgetItem({ trip_id: Number(params.id) })],
+ });
+ }),
+
+ http.post('/api/trips/:id/budget', async ({ params, request }) => {
+ const body = await request.json() as Record;
+ const item = buildBudgetItem({ trip_id: Number(params.id), ...body });
+ return HttpResponse.json({ item });
+ }),
+
+ http.put('/api/trips/:id/budget/:itemId', async ({ params, request }) => {
+ const body = await request.json() as Record;
+ const item = buildBudgetItem({ id: Number(params.itemId), trip_id: Number(params.id), ...body });
+ return HttpResponse.json({ item });
+ }),
+
+ http.delete('/api/trips/:id/budget/:itemId', () => {
+ return HttpResponse.json({ success: true });
+ }),
+
+ http.put('/api/trips/:id/budget/:itemId/members', async ({ params, request }) => {
+ const body = await request.json() as { user_ids: number[] };
+ const members = body.user_ids.map(uid => ({ user_id: uid, paid: false }));
+ const item = buildBudgetItem({ id: Number(params.itemId), trip_id: Number(params.id), persons: body.user_ids.length, members });
+ return HttpResponse.json({ members, item });
+ }),
+
+ http.put('/api/trips/:id/budget/:itemId/members/:userId/paid', async ({ params, request }) => {
+ const body = await request.json() as { paid: boolean };
+ return HttpResponse.json({ success: true, paid: body.paid });
+ }),
+];
diff --git a/client/tests/helpers/msw/handlers/dayNotes.ts b/client/tests/helpers/msw/handlers/dayNotes.ts
new file mode 100644
index 00000000..13a14276
--- /dev/null
+++ b/client/tests/helpers/msw/handlers/dayNotes.ts
@@ -0,0 +1,31 @@
+import { http, HttpResponse } from 'msw';
+import { buildDayNote } from '../../factories';
+
+export const dayNotesHandlers = [
+ http.get('/api/trips/:id/days/:dayId/notes', ({ params }) => {
+ return HttpResponse.json({
+ notes: [buildDayNote({ day_id: Number(params.dayId) })],
+ });
+ }),
+
+ http.post('/api/trips/:id/days/:dayId/notes', async ({ params, request }) => {
+ const body = await request.json() as Record;
+ const note = buildDayNote({ day_id: Number(params.dayId), ...body });
+ return HttpResponse.json({ note });
+ }),
+
+ http.put('/api/trips/:id/days/:dayId/notes/:noteId', async ({ params, request }) => {
+ const body = await request.json() as Record;
+ const note = buildDayNote({ id: Number(params.noteId), day_id: Number(params.dayId), ...body });
+ return HttpResponse.json({ note });
+ }),
+
+ http.delete('/api/trips/:id/days/:dayId/notes/:noteId', () => {
+ return HttpResponse.json({ success: true });
+ }),
+
+ http.put('/api/trips/:id/days/:dayId', async ({ params, request }) => {
+ const body = await request.json() as Record;
+ return HttpResponse.json({ day: { id: Number(params.dayId), trip_id: Number(params.id), ...body } });
+ }),
+];
diff --git a/client/tests/helpers/msw/handlers/files.ts b/client/tests/helpers/msw/handlers/files.ts
new file mode 100644
index 00000000..eb03d5fe
--- /dev/null
+++ b/client/tests/helpers/msw/handlers/files.ts
@@ -0,0 +1,19 @@
+import { http, HttpResponse } from 'msw';
+import { buildTripFile } from '../../factories';
+
+export const filesHandlers = [
+ http.get('/api/trips/:id/files', ({ params }) => {
+ return HttpResponse.json({
+ files: [buildTripFile({ trip_id: Number(params.id) })],
+ });
+ }),
+
+ http.post('/api/trips/:id/files', ({ params }) => {
+ const file = buildTripFile({ trip_id: Number(params.id) });
+ return HttpResponse.json({ file });
+ }),
+
+ http.delete('/api/trips/:id/files/:fileId', () => {
+ return HttpResponse.json({ success: true });
+ }),
+];
diff --git a/client/tests/helpers/msw/handlers/index.ts b/client/tests/helpers/msw/handlers/index.ts
new file mode 100644
index 00000000..3459b3b2
--- /dev/null
+++ b/client/tests/helpers/msw/handlers/index.ts
@@ -0,0 +1,37 @@
+import { authHandlers } from './auth';
+import { settingsHandlers } from './settings';
+import { addonHandlers } from './addons';
+import { notificationHandlers } from './notifications';
+import { vacayHandlers } from './vacay';
+import { tripsHandlers } from './trips';
+import { placesHandlers } from './places';
+import { assignmentsHandlers } from './assignments';
+import { packingHandlers } from './packing';
+import { todoHandlers } from './todo';
+import { budgetHandlers } from './budget';
+import { reservationsHandlers } from './reservations';
+import { filesHandlers } from './files';
+import { tagsHandlers } from './tags';
+import { dayNotesHandlers } from './dayNotes';
+import { adminHandlers } from './admin';
+import { sharedHandlers } from './shared';
+
+export const defaultHandlers = [
+ ...authHandlers,
+ ...settingsHandlers,
+ ...addonHandlers,
+ ...notificationHandlers,
+ ...vacayHandlers,
+ ...tripsHandlers,
+ ...placesHandlers,
+ ...assignmentsHandlers,
+ ...packingHandlers,
+ ...todoHandlers,
+ ...budgetHandlers,
+ ...reservationsHandlers,
+ ...filesHandlers,
+ ...tagsHandlers,
+ ...dayNotesHandlers,
+ ...adminHandlers,
+ ...sharedHandlers,
+];
diff --git a/client/tests/helpers/msw/handlers/notifications.ts b/client/tests/helpers/msw/handlers/notifications.ts
new file mode 100644
index 00000000..463f3e44
--- /dev/null
+++ b/client/tests/helpers/msw/handlers/notifications.ts
@@ -0,0 +1,90 @@
+import { http, HttpResponse } from 'msw';
+
+export const notificationHandlers = [
+ http.get('/api/notifications/in-app', ({ request }) => {
+ const url = new URL(request.url);
+ const offset = parseInt(url.searchParams.get('offset') || '0', 10);
+ const limit = parseInt(url.searchParams.get('limit') || '20', 10);
+
+ const allNotifications = Array.from({ length: 25 }, (_, i) => ({
+ id: i + 1,
+ type: 'simple',
+ scope: 'trip',
+ target: 1,
+ sender_id: 2,
+ sender_username: 'alice',
+ sender_avatar: null,
+ recipient_id: 1,
+ title_key: 'notif.title',
+ title_params: '{}',
+ text_key: 'notif.text',
+ text_params: '{}',
+ positive_text_key: null,
+ negative_text_key: null,
+ response: null,
+ navigate_text_key: null,
+ navigate_target: null,
+ is_read: i < 5 ? 0 : 1,
+ created_at: '2025-01-01T00:00:00.000Z',
+ }));
+
+ const page = allNotifications.slice(offset, offset + limit);
+
+ return HttpResponse.json({
+ notifications: page,
+ total: allNotifications.length,
+ unread_count: 5,
+ });
+ }),
+
+ http.get('/api/notifications/in-app/unread-count', () => {
+ return HttpResponse.json({ count: 5 });
+ }),
+
+ http.put('/api/notifications/in-app/:id/read', () => {
+ return HttpResponse.json({ success: true });
+ }),
+
+ http.put('/api/notifications/in-app/:id/unread', () => {
+ return HttpResponse.json({ success: true });
+ }),
+
+ http.put('/api/notifications/in-app/read-all', () => {
+ return HttpResponse.json({ success: true });
+ }),
+
+ http.delete('/api/notifications/in-app/:id', () => {
+ return HttpResponse.json({ success: true });
+ }),
+
+ http.delete('/api/notifications/in-app/all', () => {
+ return HttpResponse.json({ success: true });
+ }),
+
+ http.post('/api/notifications/in-app/:id/respond', async ({ request, params }) => {
+ const body = await request.json() as { response: string };
+ return HttpResponse.json({
+ notification: {
+ id: Number(params.id),
+ type: 'boolean',
+ scope: 'trip',
+ target: 1,
+ sender_id: 2,
+ sender_username: 'alice',
+ sender_avatar: null,
+ recipient_id: 1,
+ title_key: 'notif.title',
+ title_params: '{}',
+ text_key: 'notif.text',
+ text_params: '{}',
+ positive_text_key: 'accept',
+ negative_text_key: 'decline',
+ response: body.response,
+ navigate_text_key: null,
+ navigate_target: null,
+ is_read: 1,
+ created_at: '2025-01-01T00:00:00.000Z',
+ },
+ });
+ }),
+];
diff --git a/client/tests/helpers/msw/handlers/packing.ts b/client/tests/helpers/msw/handlers/packing.ts
new file mode 100644
index 00000000..c3b0ed62
--- /dev/null
+++ b/client/tests/helpers/msw/handlers/packing.ts
@@ -0,0 +1,26 @@
+import { http, HttpResponse } from 'msw';
+import { buildPackingItem } from '../../factories';
+
+export const packingHandlers = [
+ http.get('/api/trips/:id/packing', ({ params }) => {
+ return HttpResponse.json({
+ items: [buildPackingItem({ trip_id: Number(params.id) })],
+ });
+ }),
+
+ http.post('/api/trips/:id/packing', async ({ params, request }) => {
+ const body = await request.json() as Record;
+ const item = buildPackingItem({ trip_id: Number(params.id), ...body });
+ return HttpResponse.json({ item });
+ }),
+
+ http.put('/api/trips/:id/packing/:itemId', async ({ params, request }) => {
+ const body = await request.json() as Record;
+ const item = buildPackingItem({ id: Number(params.itemId), trip_id: Number(params.id), ...body });
+ return HttpResponse.json({ item });
+ }),
+
+ http.delete('/api/trips/:id/packing/:itemId', () => {
+ return HttpResponse.json({ success: true });
+ }),
+];
diff --git a/client/tests/helpers/msw/handlers/places.ts b/client/tests/helpers/msw/handlers/places.ts
new file mode 100644
index 00000000..45f65a12
--- /dev/null
+++ b/client/tests/helpers/msw/handlers/places.ts
@@ -0,0 +1,25 @@
+import { http, HttpResponse } from 'msw';
+import { buildPlace } from '../../factories';
+
+export const placesHandlers = [
+ http.get('/api/trips/:id/places', ({ params }) => {
+ const tripId = Number(params.id);
+ return HttpResponse.json({ places: [buildPlace({ trip_id: tripId }), buildPlace({ trip_id: tripId })] });
+ }),
+
+ http.post('/api/trips/:id/places', async ({ params, request }) => {
+ const body = await request.json() as Record;
+ const place = buildPlace({ trip_id: Number(params.id), ...body });
+ return HttpResponse.json({ place });
+ }),
+
+ http.put('/api/trips/:id/places/:placeId', async ({ params, request }) => {
+ const body = await request.json() as Record;
+ const place = buildPlace({ id: Number(params.placeId), trip_id: Number(params.id), ...body });
+ return HttpResponse.json({ place });
+ }),
+
+ http.delete('/api/trips/:id/places/:placeId', () => {
+ return HttpResponse.json({ success: true });
+ }),
+];
diff --git a/client/tests/helpers/msw/handlers/reservations.ts b/client/tests/helpers/msw/handlers/reservations.ts
new file mode 100644
index 00000000..d99a8834
--- /dev/null
+++ b/client/tests/helpers/msw/handlers/reservations.ts
@@ -0,0 +1,30 @@
+import { http, HttpResponse } from 'msw';
+import { buildReservation } from '../../factories';
+
+export const reservationsHandlers = [
+ http.get('/api/trips/:id/reservations', ({ params }) => {
+ return HttpResponse.json({
+ reservations: [buildReservation({ trip_id: Number(params.id) })],
+ });
+ }),
+
+ http.post('/api/trips/:id/reservations', async ({ params, request }) => {
+ const body = await request.json() as Record;
+ const reservation = buildReservation({ trip_id: Number(params.id), ...body });
+ return HttpResponse.json({ reservation });
+ }),
+
+ http.put('/api/trips/:id/reservations/:reservationId', async ({ params, request }) => {
+ const body = await request.json() as Record;
+ const reservation = buildReservation({
+ id: Number(params.reservationId),
+ trip_id: Number(params.id),
+ ...body,
+ });
+ return HttpResponse.json({ reservation });
+ }),
+
+ http.delete('/api/trips/:id/reservations/:reservationId', () => {
+ return HttpResponse.json({ success: true });
+ }),
+];
diff --git a/client/tests/helpers/msw/handlers/settings.ts b/client/tests/helpers/msw/handlers/settings.ts
new file mode 100644
index 00000000..99c02716
--- /dev/null
+++ b/client/tests/helpers/msw/handlers/settings.ts
@@ -0,0 +1,16 @@
+import { http, HttpResponse } from 'msw';
+import { buildSettings } from '../../factories';
+
+export const settingsHandlers = [
+ http.get('/api/settings', () => {
+ return HttpResponse.json({ settings: buildSettings() });
+ }),
+
+ http.put('/api/settings', () => {
+ return HttpResponse.json({ success: true });
+ }),
+
+ http.post('/api/settings/bulk', () => {
+ return HttpResponse.json({ success: true });
+ }),
+];
diff --git a/client/tests/helpers/msw/handlers/shared.ts b/client/tests/helpers/msw/handlers/shared.ts
new file mode 100644
index 00000000..891f6ebb
--- /dev/null
+++ b/client/tests/helpers/msw/handlers/shared.ts
@@ -0,0 +1,36 @@
+import { http, HttpResponse } from 'msw';
+import { buildTrip, buildDay, buildPlace } from '../../factories';
+
+export const sharedHandlers = [
+ http.get('/api/shared/:token', ({ params }) => {
+ const { token } = params;
+
+ if (token === 'invalid-token' || token === 'expired-token') {
+ return new HttpResponse(null, { status: 404 });
+ }
+
+ const trip = { ...buildTrip({ start_date: '2026-07-01', end_date: '2026-07-05' }), title: 'Shared Paris Trip' };
+ const day1 = buildDay({ trip_id: trip.id, date: '2026-07-01' });
+ const place1 = buildPlace({ trip_id: trip.id, name: 'Eiffel Tower', lat: 48.8584, lng: 2.2945 });
+
+ return HttpResponse.json({
+ trip,
+ days: [day1],
+ assignments: {},
+ dayNotes: {},
+ places: [place1],
+ reservations: [],
+ accommodations: [],
+ packing: [],
+ budget: [],
+ categories: [],
+ permissions: {
+ share_bookings: true,
+ share_packing: false,
+ share_budget: false,
+ share_collab: false,
+ },
+ collab: [],
+ });
+ }),
+];
diff --git a/client/tests/helpers/msw/handlers/tags.ts b/client/tests/helpers/msw/handlers/tags.ts
new file mode 100644
index 00000000..ab8aa941
--- /dev/null
+++ b/client/tests/helpers/msw/handlers/tags.ts
@@ -0,0 +1,24 @@
+import { http, HttpResponse } from 'msw';
+import { buildTag, buildCategory } from '../../factories';
+
+export const tagsHandlers = [
+ http.get('/api/tags', () => {
+ return HttpResponse.json({ tags: [buildTag(), buildTag()] });
+ }),
+
+ http.post('/api/tags', async ({ request }) => {
+ const body = await request.json() as Record;
+ const tag = buildTag(body);
+ return HttpResponse.json({ tag });
+ }),
+
+ http.get('/api/categories', () => {
+ return HttpResponse.json({ categories: [buildCategory(), buildCategory()] });
+ }),
+
+ http.post('/api/categories', async ({ request }) => {
+ const body = await request.json() as Record;
+ const category = buildCategory(body);
+ return HttpResponse.json({ category });
+ }),
+];
diff --git a/client/tests/helpers/msw/handlers/todo.ts b/client/tests/helpers/msw/handlers/todo.ts
new file mode 100644
index 00000000..e9ad6f03
--- /dev/null
+++ b/client/tests/helpers/msw/handlers/todo.ts
@@ -0,0 +1,26 @@
+import { http, HttpResponse } from 'msw';
+import { buildTodoItem } from '../../factories';
+
+export const todoHandlers = [
+ http.get('/api/trips/:id/todo', ({ params }) => {
+ return HttpResponse.json({
+ items: [buildTodoItem({ trip_id: Number(params.id) })],
+ });
+ }),
+
+ http.post('/api/trips/:id/todo', async ({ params, request }) => {
+ const body = await request.json() as Record;
+ const item = buildTodoItem({ trip_id: Number(params.id), ...body });
+ return HttpResponse.json({ item });
+ }),
+
+ http.put('/api/trips/:id/todo/:itemId', async ({ params, request }) => {
+ const body = await request.json() as Record;
+ const item = buildTodoItem({ id: Number(params.itemId), trip_id: Number(params.id), ...body });
+ return HttpResponse.json({ item });
+ }),
+
+ http.delete('/api/trips/:id/todo/:itemId', () => {
+ return HttpResponse.json({ success: true });
+ }),
+];
diff --git a/client/tests/helpers/msw/handlers/trips.ts b/client/tests/helpers/msw/handlers/trips.ts
new file mode 100644
index 00000000..82438de1
--- /dev/null
+++ b/client/tests/helpers/msw/handlers/trips.ts
@@ -0,0 +1,49 @@
+import { http, HttpResponse } from 'msw';
+import { buildTrip, buildDay, buildUser } from '../../factories';
+
+export const tripsHandlers = [
+ // List all trips (active or archived)
+ http.get('/api/trips', ({ request }) => {
+ const url = new URL(request.url);
+ const archived = url.searchParams.get('archived');
+ if (archived) {
+ return HttpResponse.json({ trips: [] });
+ }
+ const trip1 = buildTrip({ title: 'Paris Adventure', start_date: '2026-07-01', end_date: '2026-07-10' });
+ const trip2 = buildTrip({ title: 'Tokyo Trip', start_date: '2026-09-01', end_date: '2026-09-15' });
+ return HttpResponse.json({ trips: [trip1, trip2] });
+ }),
+
+ http.get('/api/trips/:id', ({ params }) => {
+ const trip = buildTrip({ id: Number(params.id) });
+ return HttpResponse.json({ trip });
+ }),
+
+ http.get('/api/trips/:id/days', ({ params }) => {
+ const tripId = Number(params.id);
+ const day1 = buildDay({ trip_id: tripId, assignments: [], notes_items: [] });
+ const day2 = buildDay({ trip_id: tripId, assignments: [], notes_items: [] });
+ return HttpResponse.json({ days: [day1, day2] });
+ }),
+
+ http.put('/api/trips/:id', async ({ params, request }) => {
+ const body = await request.json() as Record;
+ const trip = buildTrip({ id: Number(params.id), ...body });
+ return HttpResponse.json({ trip });
+ }),
+
+ http.post('/api/trips', async ({ request }) => {
+ const body = await request.json() as Record;
+ const trip = buildTrip({ ...body });
+ return HttpResponse.json({ trip });
+ }),
+
+ http.get('/api/trips/:id/members', ({ params }) => {
+ const owner = buildUser();
+ return HttpResponse.json({ owner, members: [] });
+ }),
+
+ http.get('/api/trips/:id/accommodations', () => {
+ return HttpResponse.json({ accommodations: [] });
+ }),
+];
diff --git a/client/tests/helpers/msw/handlers/vacay.ts b/client/tests/helpers/msw/handlers/vacay.ts
new file mode 100644
index 00000000..70506526
--- /dev/null
+++ b/client/tests/helpers/msw/handlers/vacay.ts
@@ -0,0 +1,127 @@
+import { http, HttpResponse } from 'msw';
+
+export const vacayHandlers = [
+ http.get('/api/addons/vacay/plan', () => {
+ return HttpResponse.json({
+ plan: {
+ id: 1,
+ holidays_enabled: false,
+ holidays_region: null,
+ holiday_calendars: [],
+ block_weekends: true,
+ carry_over_enabled: false,
+ company_holidays_enabled: false,
+ },
+ users: [{ id: 1, username: 'user1', color: '#3b82f6' }],
+ pendingInvites: [],
+ incomingInvites: [],
+ isOwner: true,
+ isFused: false,
+ });
+ }),
+
+ http.put('/api/addons/vacay/plan', () => {
+ return HttpResponse.json({
+ plan: {
+ id: 1,
+ holidays_enabled: true,
+ holidays_region: null,
+ holiday_calendars: [],
+ block_weekends: true,
+ carry_over_enabled: false,
+ company_holidays_enabled: false,
+ },
+ });
+ }),
+
+ http.get('/api/addons/vacay/years', () => {
+ return HttpResponse.json({ years: [2025, 2026] });
+ }),
+
+ http.post('/api/addons/vacay/years', () => {
+ return HttpResponse.json({ years: [2025, 2026, 2027] });
+ }),
+
+ http.delete('/api/addons/vacay/years/:year', () => {
+ return HttpResponse.json({ years: [2025] });
+ }),
+
+ http.get('/api/addons/vacay/entries/:year', () => {
+ return HttpResponse.json({
+ entries: [
+ { date: '2025-06-15', user_id: 1 },
+ { date: '2025-06-16', user_id: 1 },
+ ],
+ companyHolidays: [],
+ });
+ }),
+
+ http.post('/api/addons/vacay/entries/toggle', () => {
+ return HttpResponse.json({ success: true });
+ }),
+
+ http.post('/api/addons/vacay/entries/company-holiday', () => {
+ return HttpResponse.json({ success: true });
+ }),
+
+ http.get('/api/addons/vacay/stats/:year', () => {
+ return HttpResponse.json({
+ stats: [{ user_id: 1, vacation_days: 30, used: 2 }],
+ });
+ }),
+
+ http.put('/api/addons/vacay/stats/:year', () => {
+ return HttpResponse.json({ success: true });
+ }),
+
+ http.get('/api/addons/vacay/holidays/countries', () => {
+ return HttpResponse.json({ countries: ['DE', 'US', 'FR'] });
+ }),
+
+ http.get('/api/addons/vacay/holidays/:year/:country', () => {
+ return HttpResponse.json([
+ { date: '2025-12-25', name: 'Christmas', localName: 'Weihnachten', global: true, counties: null },
+ { date: '2025-01-01', name: 'New Year', localName: 'Neujahr', global: true, counties: null },
+ ]);
+ }),
+
+ http.put('/api/addons/vacay/color', () => {
+ return HttpResponse.json({ success: true });
+ }),
+
+ http.post('/api/addons/vacay/invite', () => {
+ return HttpResponse.json({ success: true });
+ }),
+
+ http.post('/api/addons/vacay/invite/accept', () => {
+ return HttpResponse.json({ success: true });
+ }),
+
+ http.post('/api/addons/vacay/invite/decline', () => {
+ return HttpResponse.json({ success: true });
+ }),
+
+ http.post('/api/addons/vacay/invite/cancel', () => {
+ return HttpResponse.json({ success: true });
+ }),
+
+ http.post('/api/addons/vacay/dissolve', () => {
+ return HttpResponse.json({ success: true });
+ }),
+
+ http.post('/api/addons/vacay/plan/holiday-calendars', () => {
+ return HttpResponse.json({
+ calendar: { id: 1, plan_id: 1, region: 'DE', label: null, color: '#ef4444', sort_order: 0 },
+ });
+ }),
+
+ http.put('/api/addons/vacay/plan/holiday-calendars/:id', () => {
+ return HttpResponse.json({
+ calendar: { id: 1, plan_id: 1, region: 'US', label: 'US Holidays', color: '#3b82f6', sort_order: 0 },
+ });
+ }),
+
+ http.delete('/api/addons/vacay/plan/holiday-calendars/:id', () => {
+ return HttpResponse.json({ success: true });
+ }),
+];
diff --git a/client/tests/helpers/msw/server.ts b/client/tests/helpers/msw/server.ts
new file mode 100644
index 00000000..6d0f50bd
--- /dev/null
+++ b/client/tests/helpers/msw/server.ts
@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node';
+import { defaultHandlers } from './handlers';
+
+export const server = setupServer(...defaultHandlers);
diff --git a/client/tests/helpers/render.tsx b/client/tests/helpers/render.tsx
new file mode 100644
index 00000000..0956ff53
--- /dev/null
+++ b/client/tests/helpers/render.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { render, type RenderOptions } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { TranslationProvider } from '../../src/i18n/TranslationContext';
+
+interface RenderWithProvidersOptions extends Omit {
+ initialEntries?: string[];
+}
+
+function renderWithProviders(
+ ui: React.ReactElement,
+ { initialEntries = ['/'], ...options }: RenderWithProvidersOptions = {},
+) {
+ function Wrapper({ children }: { children: React.ReactNode }) {
+ return (
+
+ {children}
+
+ );
+ }
+
+ return render(ui, { wrapper: Wrapper, ...options });
+}
+
+export * from '@testing-library/react';
+export { renderWithProviders as render };
diff --git a/client/tests/helpers/store.ts b/client/tests/helpers/store.ts
new file mode 100644
index 00000000..635caa8a
--- /dev/null
+++ b/client/tests/helpers/store.ts
@@ -0,0 +1,33 @@
+import { useAuthStore } from '../../src/store/authStore';
+import { useTripStore } from '../../src/store/tripStore';
+import { useSettingsStore } from '../../src/store/settingsStore';
+import { useVacayStore } from '../../src/store/vacayStore';
+import { useAddonStore } from '../../src/store/addonStore';
+import { useInAppNotificationStore } from '../../src/store/inAppNotificationStore';
+import { usePermissionsStore } from '../../src/store/permissionsStore';
+
+// Capture initial states at import time (before any test modifies them)
+const initialAuthState = useAuthStore.getState();
+const initialTripState = useTripStore.getState();
+const initialSettingsState = useSettingsStore.getState();
+const initialVacayState = useVacayStore.getState();
+const initialAddonState = useAddonStore.getState();
+const initialNotifState = useInAppNotificationStore.getState();
+const initialPermsState = usePermissionsStore.getState();
+
+export function resetAllStores(): void {
+ useAuthStore.setState(initialAuthState, true);
+ useTripStore.setState(initialTripState, true);
+ useSettingsStore.setState(initialSettingsState, true);
+ useVacayStore.setState(initialVacayState, true);
+ useAddonStore.setState(initialAddonState, true);
+ useInAppNotificationStore.setState(initialNotifState, true);
+ usePermissionsStore.setState(initialPermsState, true);
+}
+
+export function seedStore(
+ store: { setState: (partial: Partial, replace?: boolean) => void },
+ state: Partial,
+): void {
+ store.setState(state);
+}
diff --git a/client/tests/integration/api/client.test.ts b/client/tests/integration/api/client.test.ts
new file mode 100644
index 00000000..5e832363
--- /dev/null
+++ b/client/tests/integration/api/client.test.ts
@@ -0,0 +1,224 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../helpers/msw/server';
+import { buildUser } from '../../helpers/factories';
+
+// The global setup.ts mocks websocket with getSocketId returning null.
+// We need to be able to control what getSocketId returns per-test.
+// Re-mock here to get full control.
+vi.mock('../../../src/api/websocket', () => ({
+ connect: vi.fn(),
+ disconnect: vi.fn(),
+ getSocketId: vi.fn(() => 'mock-socket-id'),
+ setRefetchCallback: vi.fn(),
+ joinTrip: vi.fn(),
+ leaveTrip: vi.fn(),
+ addListener: vi.fn(),
+ removeListener: vi.fn(),
+}));
+
+const wsMock = await import('../../../src/api/websocket');
+
+// Import the API client AFTER the mock is set up so it picks up our getSocketId mock
+const { authApi } = await import('../../../src/api/client');
+
+describe('API client interceptors', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ // Default: socket ID available
+ (wsMock.getSocketId as ReturnType).mockReturnValue('mock-socket-id');
+ });
+
+ afterEach(() => {
+ // Reset window.location to a neutral path
+ Object.defineProperty(window, 'location', {
+ writable: true,
+ value: { href: 'http://localhost/', pathname: '/', search: '', hash: '' },
+ });
+ });
+
+ it('FE-API-001: requests include X-Socket-Id header when getSocketId returns a value', async () => {
+ let receivedSocketId: string | null = null;
+
+ server.use(
+ http.get('/api/auth/me', ({ request }) => {
+ receivedSocketId = request.headers.get('X-Socket-Id');
+ return HttpResponse.json({ user: buildUser() });
+ })
+ );
+
+ await authApi.me();
+
+ expect(receivedSocketId).toBe('mock-socket-id');
+ });
+
+ it('FE-API-002: X-Socket-Id header is absent when getSocketId returns null', async () => {
+ (wsMock.getSocketId as ReturnType).mockReturnValue(null);
+ let receivedSocketId: string | null = 'sentinel';
+
+ server.use(
+ http.get('/api/auth/me', ({ request }) => {
+ receivedSocketId = request.headers.get('X-Socket-Id');
+ return HttpResponse.json({ user: buildUser() });
+ })
+ );
+
+ await authApi.me();
+
+ expect(receivedSocketId).toBeNull();
+ });
+
+ it('FE-API-003: 401 with AUTH_REQUIRED → redirects to /login with redirect param', async () => {
+ Object.defineProperty(window, 'location', {
+ writable: true,
+ value: { href: 'http://localhost/', pathname: '/dashboard', search: '', hash: '' },
+ });
+
+ server.use(
+ http.get('/api/auth/me', () => {
+ return HttpResponse.json({ code: 'AUTH_REQUIRED' }, { status: 401 });
+ })
+ );
+
+ try {
+ await authApi.me();
+ } catch {
+ // Expected to reject
+ }
+
+ expect(window.location.href).toBe('/login?redirect=%2Fdashboard');
+ });
+
+ it('FE-API-003b: 401 without AUTH_REQUIRED code does not redirect', async () => {
+ Object.defineProperty(window, 'location', {
+ writable: true,
+ value: { href: 'http://localhost/dashboard', pathname: '/dashboard', search: '' },
+ });
+
+ const originalHref = window.location.href;
+
+ server.use(
+ http.get('/api/auth/me', () => {
+ return HttpResponse.json({ error: 'Unauthorized' }, { status: 401 });
+ })
+ );
+
+ try {
+ await authApi.me();
+ } catch {
+ // Expected to reject
+ }
+
+ expect(window.location.href).toBe(originalHref);
+ });
+
+ it('FE-API-003c: 401 on /login page does not redirect', async () => {
+ Object.defineProperty(window, 'location', {
+ writable: true,
+ value: { href: 'http://localhost/login', pathname: '/login', search: '' },
+ });
+
+ server.use(
+ http.get('/api/auth/me', () => {
+ return HttpResponse.json({ code: 'AUTH_REQUIRED' }, { status: 401 });
+ })
+ );
+
+ try {
+ await authApi.me();
+ } catch {
+ // Expected to reject
+ }
+
+ // href should NOT have been changed to /login?redirect=...
+ expect(window.location.href).toBe('http://localhost/login');
+ });
+
+ it('FE-API-004: 403 with MFA_REQUIRED → redirects to /settings?mfa=required', async () => {
+ Object.defineProperty(window, 'location', {
+ writable: true,
+ value: { href: 'http://localhost/', pathname: '/dashboard', search: '' },
+ });
+
+ server.use(
+ http.get('/api/auth/me', () => {
+ return HttpResponse.json({ code: 'MFA_REQUIRED' }, { status: 403 });
+ })
+ );
+
+ try {
+ await authApi.me();
+ } catch {
+ // Expected to reject
+ }
+
+ expect(window.location.href).toBe('/settings?mfa=required');
+ });
+
+ it('FE-API-004b: 403 with MFA_REQUIRED on /settings page does not redirect', async () => {
+ Object.defineProperty(window, 'location', {
+ writable: true,
+ value: { href: 'http://localhost/settings', pathname: '/settings', search: '' },
+ });
+
+ server.use(
+ http.get('/api/auth/me', () => {
+ return HttpResponse.json({ code: 'MFA_REQUIRED' }, { status: 403 });
+ })
+ );
+
+ try {
+ await authApi.me();
+ } catch {
+ // Expected to reject
+ }
+
+ // Should NOT redirect when already on /settings
+ expect(window.location.href).toBe('http://localhost/settings');
+ });
+
+ it('FE-API-005: successful API call returns response data', async () => {
+ const user = buildUser();
+
+ server.use(
+ http.get('/api/auth/me', () => {
+ return HttpResponse.json({ user });
+ })
+ );
+
+ const data = await authApi.me();
+
+ expect(data).toMatchObject({ user: { id: user.id, email: user.email } });
+ });
+
+ it('FE-API-006: socket ID header reflects current value from getSocketId at request time', async () => {
+ const headers: Array = [];
+
+ (wsMock.getSocketId as ReturnType)
+ .mockReturnValueOnce('socket-A')
+ .mockReturnValueOnce('socket-B');
+
+ server.use(
+ http.get('/api/auth/me', ({ request }) => {
+ headers.push(request.headers.get('X-Socket-Id'));
+ return HttpResponse.json({ user: buildUser() });
+ })
+ );
+
+ await authApi.me();
+ await authApi.me();
+
+ expect(headers[0]).toBe('socket-A');
+ expect(headers[1]).toBe('socket-B');
+ });
+
+ it('FE-API-007: non-401/403 errors are passed through as rejections', async () => {
+ server.use(
+ http.get('/api/auth/me', () => {
+ return HttpResponse.json({ error: 'Internal error' }, { status: 500 });
+ })
+ );
+
+ await expect(authApi.me()).rejects.toThrow();
+ });
+});
diff --git a/client/tests/integration/hooks/useDayNotes.test.ts b/client/tests/integration/hooks/useDayNotes.test.ts
new file mode 100644
index 00000000..67a87bdd
--- /dev/null
+++ b/client/tests/integration/hooks/useDayNotes.test.ts
@@ -0,0 +1,447 @@
+import React from 'react';
+import { renderHook, act } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { http, HttpResponse } from 'msw';
+import { useDayNotes } from '../../../src/hooks/useDayNotes';
+import { useTripStore } from '../../../src/store/tripStore';
+import { TranslationProvider } from '../../../src/i18n/TranslationContext';
+import { server } from '../../helpers/msw/server';
+import { buildDayNote } from '../../helpers/factories';
+import { resetAllStores } from '../../helpers/store';
+
+const wrapper = ({ children }: { children: React.ReactNode }) =>
+ React.createElement(TranslationProvider, null, children);
+
+const TRIP_ID = 1;
+const DAY_ID = 10;
+
+describe('useDayNotes', () => {
+ beforeEach(() => {
+ resetAllStores();
+ vi.clearAllMocks();
+ });
+
+ it('FE-HOOK-DAYNOTES-001: initial noteUi state is empty', () => {
+ const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+ expect(result.current.noteUi).toEqual({});
+ });
+
+ it('FE-HOOK-DAYNOTES-002: initial dayNotes comes from tripStore', () => {
+ const note = buildDayNote({ day_id: DAY_ID });
+ useTripStore.setState({ dayNotes: { [String(DAY_ID)]: [note] } });
+
+ const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+ expect(result.current.dayNotes[String(DAY_ID)]).toEqual([note]);
+ });
+
+ it('FE-HOOK-DAYNOTES-003: openAddNote sets mode=add and default sort order', () => {
+ const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+ act(() => {
+ result.current.openAddNote(DAY_ID, () => []);
+ });
+
+ expect(result.current.noteUi[DAY_ID]).toMatchObject({
+ mode: 'add',
+ text: '',
+ sortOrder: 0, // maxKey(-1) + 1 = 0
+ });
+ });
+
+ it('FE-HOOK-DAYNOTES-004: openAddNote calculates sortOrder as max(sortKey) + 1 from merged items', () => {
+ const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+ const getMergedItems = () => [
+ { type: 'note' as const, sortKey: 5, data: buildDayNote() },
+ { type: 'note' as const, sortKey: 10, data: buildDayNote() },
+ ];
+
+ act(() => {
+ result.current.openAddNote(DAY_ID, getMergedItems);
+ });
+
+ expect(result.current.noteUi[DAY_ID]).toMatchObject({
+ mode: 'add',
+ sortOrder: 11, // max(5,10) + 1
+ });
+ });
+
+ it('FE-HOOK-DAYNOTES-005: openEditNote sets mode=edit with note data', () => {
+ const note = buildDayNote({ id: 99, text: 'Hello', time: '10:00', icon: 'Star' });
+ const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+ act(() => {
+ result.current.openEditNote(DAY_ID, note);
+ });
+
+ expect(result.current.noteUi[DAY_ID]).toMatchObject({
+ mode: 'edit',
+ noteId: 99,
+ text: 'Hello',
+ time: '10:00',
+ icon: 'Star',
+ });
+ });
+
+ it('FE-HOOK-DAYNOTES-006: cancelNote removes the UI entry for that day', () => {
+ const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+ act(() => {
+ result.current.openAddNote(DAY_ID, () => []);
+ });
+ expect(result.current.noteUi[DAY_ID]).toBeDefined();
+
+ act(() => {
+ result.current.cancelNote(DAY_ID);
+ });
+ expect(result.current.noteUi[DAY_ID]).toBeUndefined();
+ });
+
+ it('FE-HOOK-DAYNOTES-007: saveNote with empty text is a no-op', async () => {
+ const spy = vi.fn();
+ server.use(
+ http.post('/api/trips/:id/days/:dayId/notes', () => {
+ spy();
+ return HttpResponse.json({ note: buildDayNote() });
+ })
+ );
+
+ const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+ act(() => {
+ result.current.setNoteUi({ [DAY_ID]: { mode: 'add', text: '', time: '', icon: 'FileText', sortOrder: 0 } });
+ });
+
+ await act(async () => {
+ await result.current.saveNote(DAY_ID);
+ });
+
+ expect(spy).not.toHaveBeenCalled();
+ // noteUi remains set (no cancelNote was called)
+ expect(result.current.noteUi[DAY_ID]).toBeDefined();
+ });
+
+ it('FE-HOOK-DAYNOTES-008: saveNote in add mode calls addDayNote and clears UI', async () => {
+ const createdNote = buildDayNote({ day_id: DAY_ID, text: 'New note' });
+ server.use(
+ http.post('/api/trips/:id/days/:dayId/notes', async () => {
+ return HttpResponse.json({ note: createdNote });
+ })
+ );
+
+ const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+ act(() => {
+ result.current.setNoteUi({
+ [DAY_ID]: { mode: 'add', text: 'New note', time: '', icon: 'FileText', sortOrder: 0 },
+ });
+ });
+
+ await act(async () => {
+ await result.current.saveNote(DAY_ID);
+ });
+
+ // UI should be cleared after successful save
+ expect(result.current.noteUi[DAY_ID]).toBeUndefined();
+ });
+
+ it('FE-HOOK-DAYNOTES-009: saveNote in edit mode calls updateDayNote and clears UI', async () => {
+ const noteId = 55;
+ const updatedNote = buildDayNote({ id: noteId, day_id: DAY_ID, text: 'Updated' });
+ server.use(
+ http.put('/api/trips/:id/days/:dayId/notes/:noteId', async () => {
+ return HttpResponse.json({ note: updatedNote });
+ })
+ );
+
+ const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+ act(() => {
+ result.current.setNoteUi({
+ [DAY_ID]: { mode: 'edit', noteId, text: 'Updated', time: '', icon: 'FileText' },
+ });
+ });
+
+ await act(async () => {
+ await result.current.saveNote(DAY_ID);
+ });
+
+ expect(result.current.noteUi[DAY_ID]).toBeUndefined();
+ });
+
+ it('FE-HOOK-DAYNOTES-010: deleteNote calls deleteDayNote on the store', async () => {
+ const note = buildDayNote({ id: 77, day_id: DAY_ID });
+ useTripStore.setState({ dayNotes: { [String(DAY_ID)]: [note] } });
+
+ server.use(
+ http.delete('/api/trips/:id/days/:dayId/notes/:noteId', () => {
+ return HttpResponse.json({ success: true });
+ })
+ );
+
+ const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+ await act(async () => {
+ await result.current.deleteNote(DAY_ID, 77);
+ });
+
+ // Note should be removed from the store
+ const dayNotes = useTripStore.getState().dayNotes[String(DAY_ID)] || [];
+ expect(dayNotes.find((n) => n.id === 77)).toBeUndefined();
+ });
+
+ it('FE-HOOK-DAYNOTES-011: saveNote on API error shows toast', async () => {
+ const toastSpy = vi.fn();
+ window.__addToast = toastSpy;
+
+ server.use(
+ http.post('/api/trips/:id/days/:dayId/notes', () => {
+ return HttpResponse.json({ error: 'Server error' }, { status: 500 });
+ })
+ );
+
+ const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+ act(() => {
+ result.current.setNoteUi({
+ [DAY_ID]: { mode: 'add', text: 'Test note', time: '', icon: 'FileText', sortOrder: 0 },
+ });
+ });
+
+ await act(async () => {
+ await result.current.saveNote(DAY_ID);
+ });
+
+ expect(toastSpy).toHaveBeenCalledWith(expect.any(String), 'error', undefined);
+ delete window.__addToast;
+ });
+
+ it('FE-HOOK-DAYNOTES-012: deleteNote on API error shows toast', async () => {
+ const toastSpy = vi.fn();
+ window.__addToast = toastSpy;
+
+ const note = buildDayNote({ id: 88, day_id: DAY_ID });
+ useTripStore.setState({ dayNotes: { [String(DAY_ID)]: [note] } });
+
+ server.use(
+ http.delete('/api/trips/:id/days/:dayId/notes/:noteId', () => {
+ return HttpResponse.json({ error: 'Server error' }, { status: 500 });
+ })
+ );
+
+ const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+ await act(async () => {
+ await result.current.deleteNote(DAY_ID, 88);
+ });
+
+ expect(toastSpy).toHaveBeenCalledWith(expect.any(String), 'error', undefined);
+ delete window.__addToast;
+ });
+
+ it('FE-HOOK-DAYNOTES-013: moveNote up calculates midpoint sort order', async () => {
+ let capturedBody: Record = {};
+ server.use(
+ http.put('/api/trips/:id/days/:dayId/notes/:noteId', async ({ request }) => {
+ capturedBody = await request.json() as Record;
+ return HttpResponse.json({ note: buildDayNote() });
+ })
+ );
+
+ const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+ const noteA = buildDayNote({ id: 1 });
+ const noteB = buildDayNote({ id: 2 });
+ const noteC = buildDayNote({ id: 3 });
+
+ // merged items with sortKeys 0, 2, 4
+ const getMergedItems = () => [
+ { type: 'note' as const, sortKey: 0, data: noteA },
+ { type: 'note' as const, sortKey: 2, data: noteB },
+ { type: 'note' as const, sortKey: 4, data: noteC },
+ ];
+
+ // Move noteC (idx=2) up → new order should be between idx=0 and idx=1 → (0+2)/2 = 1
+ await act(async () => {
+ await result.current.moveNote(DAY_ID, noteC.id, 'up', getMergedItems);
+ });
+
+ expect(capturedBody.sort_order).toBe(1); // (sortKey[0] + sortKey[1]) / 2 = (0+2)/2
+ });
+
+ it('FE-HOOK-DAYNOTES-014: moveNote down calculates midpoint sort order', async () => {
+ let capturedBody: Record = {};
+ server.use(
+ http.put('/api/trips/:id/days/:dayId/notes/:noteId', async ({ request }) => {
+ capturedBody = await request.json() as Record;
+ return HttpResponse.json({ note: buildDayNote() });
+ })
+ );
+
+ const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+ const noteA = buildDayNote({ id: 1 });
+ const noteB = buildDayNote({ id: 2 });
+ const noteC = buildDayNote({ id: 3 });
+
+ const getMergedItems = () => [
+ { type: 'note' as const, sortKey: 0, data: noteA },
+ { type: 'note' as const, sortKey: 2, data: noteB },
+ { type: 'note' as const, sortKey: 4, data: noteC },
+ ];
+
+ // Move noteA (idx=0) down → new order between idx=1 and idx=2 → (2+4)/2 = 3
+ await act(async () => {
+ await result.current.moveNote(DAY_ID, noteA.id, 'down', getMergedItems);
+ });
+
+ expect(capturedBody.sort_order).toBe(3); // (sortKey[1] + sortKey[2]) / 2 = (2+4)/2
+ });
+
+ it('FE-HOOK-DAYNOTES-015: moveNote up at index 0 is a no-op', async () => {
+ const spy = vi.fn();
+ server.use(
+ http.put('/api/trips/:id/days/:dayId/notes/:noteId', () => {
+ spy();
+ return HttpResponse.json({ note: buildDayNote() });
+ })
+ );
+
+ const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+ const noteA = buildDayNote({ id: 1 });
+ const getMergedItems = () => [
+ { type: 'note' as const, sortKey: 0, data: noteA },
+ ];
+
+ await act(async () => {
+ await result.current.moveNote(DAY_ID, noteA.id, 'up', getMergedItems);
+ });
+
+ expect(spy).not.toHaveBeenCalled();
+ });
+
+ it('FE-HOOK-DAYNOTES-016: moveNote down at last index is a no-op', async () => {
+ const spy = vi.fn();
+ server.use(
+ http.put('/api/trips/:id/days/:dayId/notes/:noteId', () => {
+ spy();
+ return HttpResponse.json({ note: buildDayNote() });
+ })
+ );
+
+ const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+ const noteA = buildDayNote({ id: 1 });
+ const getMergedItems = () => [
+ { type: 'note' as const, sortKey: 0, data: noteA },
+ ];
+
+ await act(async () => {
+ await result.current.moveNote(DAY_ID, noteA.id, 'down', getMergedItems);
+ });
+
+ expect(spy).not.toHaveBeenCalled();
+ });
+
+ it('FE-HOOK-DAYNOTES-017: moveNote down at last item uses sortKey + 1', async () => {
+ let capturedBody: Record = {};
+ server.use(
+ http.put('/api/trips/:id/days/:dayId/notes/:noteId', async ({ request }) => {
+ capturedBody = await request.json() as Record;
+ return HttpResponse.json({ note: buildDayNote() });
+ })
+ );
+
+ const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+ const noteA = buildDayNote({ id: 1 });
+ const noteB = buildDayNote({ id: 2 });
+
+ const getMergedItems = () => [
+ { type: 'note' as const, sortKey: 5, data: noteA },
+ { type: 'note' as const, sortKey: 10, data: noteB },
+ ];
+
+ // Move noteA (idx=0) down — only 2 items, so idx < length-1 is false after going down
+ // direction=down, idx=0, length=2, idx < length-2 is false (0 < 0), so newSortOrder = sortKey[1]+1 = 11
+ await act(async () => {
+ await result.current.moveNote(DAY_ID, noteA.id, 'down', getMergedItems);
+ });
+
+ expect(capturedBody.sort_order).toBe(11); // sortKey[idx+1] + 1 = 10 + 1
+ });
+
+ it('FE-HOOK-DAYNOTES-018: moveNote on error shows toast', async () => {
+ const toastSpy = vi.fn();
+ window.__addToast = toastSpy;
+
+ server.use(
+ http.put('/api/trips/:id/days/:dayId/notes/:noteId', () => {
+ return HttpResponse.json({ error: 'Server error' }, { status: 500 });
+ })
+ );
+
+ const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+ const noteA = buildDayNote({ id: 1 });
+ const noteB = buildDayNote({ id: 2 });
+
+ const getMergedItems = () => [
+ { type: 'note' as const, sortKey: 0, data: noteA },
+ { type: 'note' as const, sortKey: 1, data: noteB },
+ ];
+
+ await act(async () => {
+ await result.current.moveNote(DAY_ID, noteA.id, 'down', getMergedItems);
+ });
+
+ expect(toastSpy).toHaveBeenCalledWith(expect.any(String), 'error', undefined);
+ delete window.__addToast;
+ });
+
+ it('FE-HOOK-DAYNOTES-019: moveNote up with only 1 item before uses sortKey - 1', async () => {
+ let capturedBody: Record = {};
+ server.use(
+ http.put('/api/trips/:id/days/:dayId/notes/:noteId', async ({ request }) => {
+ capturedBody = await request.json() as Record;
+ return HttpResponse.json({ note: buildDayNote() });
+ })
+ );
+
+ const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+ const noteA = buildDayNote({ id: 1 });
+ const noteB = buildDayNote({ id: 2 });
+
+ const getMergedItems = () => [
+ { type: 'note' as const, sortKey: 5, data: noteA },
+ { type: 'note' as const, sortKey: 10, data: noteB },
+ ];
+
+ // Move noteB (idx=1) up — idx >= 2 is false, so newSortOrder = sortKey[idx-1] - 1 = 5-1 = 4
+ await act(async () => {
+ await result.current.moveNote(DAY_ID, noteB.id, 'up', getMergedItems);
+ });
+
+ expect(capturedBody.sort_order).toBe(4); // sortKey[0] - 1 = 5 - 1
+ });
+
+ it('FE-HOOK-DAYNOTES-020: openAddNote calls expandDay if provided', () => {
+ const expandDay = vi.fn();
+ const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+ act(() => {
+ result.current.openAddNote(DAY_ID, () => [], expandDay);
+ });
+
+ expect(expandDay).toHaveBeenCalledWith(DAY_ID);
+ });
+});
+
+// Type augment for window.__addToast
+declare global {
+ interface Window {
+ __addToast?: (message: string, type: string, duration?: number) => void;
+ }
+}
diff --git a/client/tests/integration/hooks/useInAppNotificationListener.test.ts b/client/tests/integration/hooks/useInAppNotificationListener.test.ts
new file mode 100644
index 00000000..532707e1
--- /dev/null
+++ b/client/tests/integration/hooks/useInAppNotificationListener.test.ts
@@ -0,0 +1,225 @@
+import { renderHook, act } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { useInAppNotificationStore } from '../../../src/store/inAppNotificationStore';
+import { resetAllStores } from '../../helpers/store';
+
+// Capture the listener registered via addListener so we can simulate WS events
+let capturedListener: ((event: Record) => void) | null = null;
+
+vi.mock('../../../src/api/websocket', () => ({
+ connect: vi.fn(),
+ disconnect: vi.fn(),
+ getSocketId: vi.fn(() => null),
+ setRefetchCallback: vi.fn(),
+ joinTrip: vi.fn(),
+ leaveTrip: vi.fn(),
+ addListener: vi.fn((fn) => {
+ capturedListener = fn;
+ }),
+ removeListener: vi.fn(),
+}));
+
+const wsMock = await import('../../../src/api/websocket');
+
+// Import the hook after the mock is in place
+const { useInAppNotificationListener } = await import('../../../src/hooks/useInAppNotificationListener');
+
+describe('useInAppNotificationListener', () => {
+ beforeEach(() => {
+ capturedListener = null;
+ resetAllStores();
+ vi.clearAllMocks();
+ // Re-capture after clear
+ (wsMock.addListener as ReturnType).mockImplementation((fn) => {
+ capturedListener = fn;
+ });
+ });
+
+ it('FE-HOOK-NOTIFLISTENER-001: on mount, addListener is called once', () => {
+ const { unmount } = renderHook(() => useInAppNotificationListener());
+ expect(wsMock.addListener).toHaveBeenCalledTimes(1);
+ unmount();
+ });
+
+ it('FE-HOOK-NOTIFLISTENER-002: on unmount, removeListener is called with the same function', () => {
+ const { unmount } = renderHook(() => useInAppNotificationListener());
+
+ const registeredFn = (wsMock.addListener as ReturnType).mock.calls[0][0];
+ unmount();
+
+ expect(wsMock.removeListener).toHaveBeenCalledWith(registeredFn);
+ });
+
+ it('FE-HOOK-NOTIFLISTENER-003: notification:new event calls handleNewNotification on the store', () => {
+ const handleNew = vi.fn();
+ useInAppNotificationStore.setState({ handleNewNotification: handleNew } as any);
+
+ const { unmount } = renderHook(() => useInAppNotificationListener());
+
+ expect(capturedListener).toBeTypeOf('function');
+
+ const notification = {
+ id: 1, type: 'simple', scope: 'trip', target: 1, sender_id: null, sender_username: null,
+ sender_avatar: null, recipient_id: 2, title_key: 'test', title_params: '{}',
+ text_key: 'test_body', text_params: '{}', positive_text_key: null, negative_text_key: null,
+ response: null, navigate_text_key: null, navigate_target: null, is_read: 0,
+ created_at: '2025-01-01T00:00:00Z',
+ };
+
+ act(() => {
+ capturedListener!({ type: 'notification:new', notification });
+ });
+
+ expect(handleNew).toHaveBeenCalledWith(notification);
+ unmount();
+ });
+
+ it('FE-HOOK-NOTIFLISTENER-004: notification:updated event calls handleUpdatedNotification on the store', () => {
+ const handleUpdated = vi.fn();
+ useInAppNotificationStore.setState({ handleUpdatedNotification: handleUpdated } as any);
+
+ const { unmount } = renderHook(() => useInAppNotificationListener());
+
+ const notification = {
+ id: 5, type: 'simple', scope: 'user', target: 1, sender_id: null, sender_username: null,
+ sender_avatar: null, recipient_id: 2, title_key: 'updated', title_params: '{}',
+ text_key: 'updated_body', text_params: '{}', positive_text_key: null, negative_text_key: null,
+ response: 'positive', navigate_text_key: null, navigate_target: null, is_read: 1,
+ created_at: '2025-01-01T00:00:00Z',
+ };
+
+ act(() => {
+ capturedListener!({ type: 'notification:updated', notification });
+ });
+
+ expect(handleUpdated).toHaveBeenCalledWith(notification);
+ unmount();
+ });
+
+ it('FE-HOOK-NOTIFLISTENER-005: unrelated event types are ignored', () => {
+ const handleNew = vi.fn();
+ const handleUpdated = vi.fn();
+ useInAppNotificationStore.setState({
+ handleNewNotification: handleNew,
+ handleUpdatedNotification: handleUpdated,
+ } as any);
+
+ const { unmount } = renderHook(() => useInAppNotificationListener());
+
+ act(() => {
+ capturedListener!({ type: 'place:created', data: {} });
+ });
+
+ expect(handleNew).not.toHaveBeenCalled();
+ expect(handleUpdated).not.toHaveBeenCalled();
+ unmount();
+ });
+
+ it('FE-HOOK-NOTIFLISTENER-006: notification:new actually updates the store unreadCount', () => {
+ renderHook(() => useInAppNotificationListener());
+
+ const initialCount = useInAppNotificationStore.getState().unreadCount;
+
+ act(() => {
+ capturedListener!({
+ type: 'notification:new',
+ notification: {
+ id: 99, type: 'simple', scope: 'trip', target: 1, sender_id: null, sender_username: null,
+ sender_avatar: null, recipient_id: 2, title_key: 'test', title_params: {},
+ text_key: 'body', text_params: {}, positive_text_key: null, negative_text_key: null,
+ response: null, navigate_text_key: null, navigate_target: null, is_read: false,
+ created_at: '2025-01-01T00:00:00Z',
+ },
+ });
+ });
+
+ expect(useInAppNotificationStore.getState().unreadCount).toBe(initialCount + 1);
+ });
+
+ it('FE-HOOK-NOTIFLISTENER-007: notification:updated updates the notification in the store', () => {
+ // Seed a notification
+ useInAppNotificationStore.setState({
+ notifications: [{
+ id: 10, type: 'simple', scope: 'trip', target: 1, sender_id: null, sender_username: null,
+ sender_avatar: null, recipient_id: 2, title_key: 'test', title_params: {},
+ text_key: 'body', text_params: {}, positive_text_key: null, negative_text_key: null,
+ response: null, navigate_text_key: null, navigate_target: null, is_read: false,
+ created_at: '2025-01-01T00:00:00Z',
+ }],
+ });
+
+ renderHook(() => useInAppNotificationListener());
+
+ act(() => {
+ capturedListener!({
+ type: 'notification:updated',
+ notification: {
+ id: 10, type: 'simple', scope: 'trip', target: 1, sender_id: null, sender_username: null,
+ sender_avatar: null, recipient_id: 2, title_key: 'test', title_params: {},
+ text_key: 'body', text_params: {}, positive_text_key: null, negative_text_key: null,
+ response: 'positive', navigate_text_key: null, navigate_target: null, is_read: true,
+ created_at: '2025-01-01T00:00:00Z',
+ },
+ });
+ });
+
+ const updated = useInAppNotificationStore.getState().notifications.find((n) => n.id === 10);
+ expect(updated?.response).toBe('positive');
+ expect(updated?.is_read).toBe(true);
+ });
+
+ it('FE-HOOK-NOTIFLISTENER-008: multiple events processed correctly in sequence', () => {
+ const { unmount } = renderHook(() => useInAppNotificationListener());
+
+ const initial = useInAppNotificationStore.getState().unreadCount;
+
+ act(() => {
+ capturedListener!({
+ type: 'notification:new',
+ notification: {
+ id: 101, type: 'simple', scope: 'trip', target: 1, sender_id: null, sender_username: null,
+ sender_avatar: null, recipient_id: 2, title_key: 'k1', title_params: {},
+ text_key: 'b1', text_params: {}, positive_text_key: null, negative_text_key: null,
+ response: null, navigate_text_key: null, navigate_target: null, is_read: false,
+ created_at: '2025-01-01T00:00:00Z',
+ },
+ });
+ capturedListener!({
+ type: 'notification:new',
+ notification: {
+ id: 102, type: 'simple', scope: 'trip', target: 1, sender_id: null, sender_username: null,
+ sender_avatar: null, recipient_id: 2, title_key: 'k2', title_params: {},
+ text_key: 'b2', text_params: {}, positive_text_key: null, negative_text_key: null,
+ response: null, navigate_text_key: null, navigate_target: null, is_read: false,
+ created_at: '2025-01-01T00:00:00Z',
+ },
+ });
+ });
+
+ expect(useInAppNotificationStore.getState().unreadCount).toBe(initial + 2);
+ unmount();
+ });
+
+ it('FE-HOOK-NOTIFLISTENER-009: listener added on mount is the same one removed on unmount', () => {
+ const { unmount } = renderHook(() => useInAppNotificationListener());
+
+ const addedFn = (wsMock.addListener as ReturnType).mock.calls[0][0];
+ unmount();
+ const removedFn = (wsMock.removeListener as ReturnType).mock.calls[0][0];
+
+ expect(addedFn).toBe(removedFn);
+ });
+
+ it('FE-HOOK-NOTIFLISTENER-010: after unmount, listener no longer processes events', () => {
+ const handleNew = vi.fn();
+ useInAppNotificationStore.setState({ handleNewNotification: handleNew } as any);
+
+ const { unmount } = renderHook(() => useInAppNotificationListener());
+ unmount();
+
+ // capturedListener is captured but the component is unmounted
+ // The removeListener was called — the actual implementation would have unregistered it
+ // We verify removeListener was called (the cleanup ran)
+ expect(wsMock.removeListener).toHaveBeenCalled();
+ });
+});
diff --git a/client/tests/integration/hooks/useResizablePanels.test.ts b/client/tests/integration/hooks/useResizablePanels.test.ts
new file mode 100644
index 00000000..b3b08533
--- /dev/null
+++ b/client/tests/integration/hooks/useResizablePanels.test.ts
@@ -0,0 +1,168 @@
+import { renderHook, act } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { fireEvent } from '@testing-library/react';
+import { useResizablePanels } from '../../../src/hooks/useResizablePanels';
+
+describe('useResizablePanels', () => {
+ beforeEach(() => {
+ localStorage.clear();
+ vi.clearAllMocks();
+ });
+
+ it('FE-HOOK-PANELS-001: default leftWidth is 340 when localStorage is empty', () => {
+ const { result } = renderHook(() => useResizablePanels());
+ expect(result.current.leftWidth).toBe(340);
+ });
+
+ it('FE-HOOK-PANELS-002: default rightWidth is 300 when localStorage is empty', () => {
+ const { result } = renderHook(() => useResizablePanels());
+ expect(result.current.rightWidth).toBe(300);
+ });
+
+ it('FE-HOOK-PANELS-003: leftWidth loaded from localStorage when set', () => {
+ localStorage.setItem('sidebarLeftWidth', '400');
+ const { result } = renderHook(() => useResizablePanels());
+ expect(result.current.leftWidth).toBe(400);
+ });
+
+ it('FE-HOOK-PANELS-004: rightWidth loaded from localStorage when set', () => {
+ localStorage.setItem('sidebarRightWidth', '350');
+ const { result } = renderHook(() => useResizablePanels());
+ expect(result.current.rightWidth).toBe(350);
+ });
+
+ it('FE-HOOK-PANELS-005: startResizeLeft sets body cursor to col-resize', () => {
+ const { result } = renderHook(() => useResizablePanels());
+ act(() => {
+ result.current.startResizeLeft();
+ });
+ expect(document.body.style.cursor).toBe('col-resize');
+ });
+
+ it('FE-HOOK-PANELS-006: startResizeRight sets body cursor to col-resize', () => {
+ const { result } = renderHook(() => useResizablePanels());
+ act(() => {
+ result.current.startResizeRight();
+ });
+ expect(document.body.style.cursor).toBe('col-resize');
+ });
+
+ it('FE-HOOK-PANELS-007: mousedown → mousemove → mouseup updates leftWidth and persists to localStorage', async () => {
+ const { result } = renderHook(() => useResizablePanels());
+
+ act(() => {
+ result.current.startResizeLeft();
+ });
+
+ // mousemove with clientX=350 → w = max(200, min(520, 350-10)) = 340
+ act(() => {
+ fireEvent.mouseMove(document, { clientX: 350 });
+ });
+
+ expect(result.current.leftWidth).toBe(340);
+ expect(localStorage.getItem('sidebarLeftWidth')).toBe('340');
+
+ act(() => {
+ fireEvent.mouseUp(document);
+ });
+
+ expect(document.body.style.cursor).toBe('');
+ });
+
+ it('FE-HOOK-PANELS-008: mousedown → mousemove → mouseup updates rightWidth and persists to localStorage', () => {
+ // Set window.innerWidth for the right panel calculation
+ Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 1200 });
+
+ const { result } = renderHook(() => useResizablePanels());
+
+ act(() => {
+ result.current.startResizeRight();
+ });
+
+ // mousemove with clientX=800 → w = max(200, min(520, 1200-800-10)) = max(200, min(520, 390)) = 390
+ act(() => {
+ fireEvent.mouseMove(document, { clientX: 800 });
+ });
+
+ expect(result.current.rightWidth).toBe(390);
+ expect(localStorage.getItem('sidebarRightWidth')).toBe('390');
+
+ act(() => {
+ fireEvent.mouseUp(document);
+ });
+
+ expect(document.body.style.cursor).toBe('');
+ });
+
+ it('FE-HOOK-PANELS-009: min width constraint (200) is enforced for left panel', () => {
+ const { result } = renderHook(() => useResizablePanels());
+
+ act(() => {
+ result.current.startResizeLeft();
+ });
+
+ // clientX=50 → w = max(200, min(520, 50-10)) = max(200, 40) = 200
+ act(() => {
+ fireEvent.mouseMove(document, { clientX: 50 });
+ });
+
+ expect(result.current.leftWidth).toBe(200);
+ });
+
+ it('FE-HOOK-PANELS-010: max width constraint (520) is enforced for left panel', () => {
+ const { result } = renderHook(() => useResizablePanels());
+
+ act(() => {
+ result.current.startResizeLeft();
+ });
+
+ // clientX=600 → w = max(200, min(520, 600-10)) = min(520, 590) = 520
+ act(() => {
+ fireEvent.mouseMove(document, { clientX: 600 });
+ });
+
+ expect(result.current.leftWidth).toBe(520);
+ });
+
+ it('FE-HOOK-PANELS-011: mousemove without prior startResize does nothing', () => {
+ const { result } = renderHook(() => useResizablePanels());
+
+ const initialLeft = result.current.leftWidth;
+ const initialRight = result.current.rightWidth;
+
+ act(() => {
+ fireEvent.mouseMove(document, { clientX: 400 });
+ });
+
+ expect(result.current.leftWidth).toBe(initialLeft);
+ expect(result.current.rightWidth).toBe(initialRight);
+ });
+
+ it('FE-HOOK-PANELS-012: body userSelect set to none during resize, cleared on mouseup', () => {
+ const { result } = renderHook(() => useResizablePanels());
+
+ act(() => {
+ result.current.startResizeLeft();
+ });
+
+ expect(document.body.style.userSelect).toBe('none');
+
+ act(() => {
+ fireEvent.mouseUp(document);
+ });
+
+ expect(document.body.style.userSelect).toBe('');
+ });
+
+ it('FE-HOOK-PANELS-013: leftCollapsed and rightCollapsed default to false', () => {
+ const { result } = renderHook(() => useResizablePanels());
+ expect(result.current.leftCollapsed).toBe(false);
+ expect(result.current.rightCollapsed).toBe(false);
+ });
+
+ it('FE-HOOK-PANELS-014: setLeftCollapsed and setRightCollapsed are exposed', () => {
+ const { result } = renderHook(() => useResizablePanels());
+ expect(result.current.setLeftCollapsed).toBeTypeOf('function');
+ expect(result.current.setRightCollapsed).toBeTypeOf('function');
+ });
+});
diff --git a/client/tests/integration/hooks/useRouteCalculation.test.ts b/client/tests/integration/hooks/useRouteCalculation.test.ts
new file mode 100644
index 00000000..fb26a1c3
--- /dev/null
+++ b/client/tests/integration/hooks/useRouteCalculation.test.ts
@@ -0,0 +1,307 @@
+import { renderHook, act } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { useRouteCalculation } from '../../../src/hooks/useRouteCalculation';
+import { useSettingsStore } from '../../../src/store/settingsStore';
+import { buildAssignment, buildPlace } from '../../helpers/factories';
+import type { TripStoreState } from '../../../src/store/tripStore';
+import type { RouteSegment } from '../../../src/types';
+
+// Mock the RouteCalculator module to avoid real OSRM fetch calls
+vi.mock('../../../src/components/Map/RouteCalculator', () => ({
+ calculateSegments: vi.fn(),
+ calculateRoute: vi.fn(),
+ optimizeRoute: vi.fn((waypoints: unknown[]) => waypoints),
+ generateGoogleMapsUrl: vi.fn(),
+}));
+
+const { calculateSegments } = await import('../../../src/components/Map/RouteCalculator');
+
+function buildMockStore(assignments: Record[]> = {}): Partial {
+ return { assignments } as Partial;
+}
+
+const MOCK_SEGMENTS: RouteSegment[] = [
+ {
+ from: [48.8566, 2.3522],
+ to: [51.5074, -0.1278],
+ mid: [50.182, 1.1122],
+ walkingText: '120 min',
+ drivingText: '90 min',
+ },
+];
+
+describe('useRouteCalculation', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ // Default: route_calculation disabled
+ useSettingsStore.setState({ settings: { route_calculation: false } as any });
+ (calculateSegments as ReturnType).mockResolvedValue(MOCK_SEGMENTS);
+ });
+
+ it('FE-HOOK-ROUTE-001: with no selectedDayId, route is null', () => {
+ const store = buildMockStore({});
+ const { result } = renderHook(() =>
+ useRouteCalculation(store as TripStoreState, null)
+ );
+ expect(result.current.route).toBeNull();
+ });
+
+ it('FE-HOOK-ROUTE-002: with < 2 waypoints, route remains null', async () => {
+ const place = buildPlace({ lat: 48.8566, lng: 2.3522 });
+ const assignment = buildAssignment({ day_id: 5, order_index: 0, place });
+ const store = buildMockStore({ '5': [assignment] });
+
+ const { result } = renderHook(() =>
+ useRouteCalculation(store as TripStoreState, 5)
+ );
+
+ await act(async () => {});
+ expect(result.current.route).toBeNull();
+ });
+
+ it('FE-HOOK-ROUTE-003: with ≥ 2 geo-coded assignments, sets route coordinates', async () => {
+ const p1 = buildPlace({ lat: 48.8566, lng: 2.3522 });
+ const p2 = buildPlace({ lat: 51.5074, lng: -0.1278 });
+ const a1 = buildAssignment({ day_id: 5, order_index: 0, place: p1 });
+ const a2 = buildAssignment({ day_id: 5, order_index: 1, place: p2 });
+ const store = buildMockStore({ '5': [a1, a2] });
+
+ const { result } = renderHook(() =>
+ useRouteCalculation(store as TripStoreState, 5)
+ );
+
+ await act(async () => {});
+ expect(result.current.route).toEqual([
+ [p1.lat, p1.lng],
+ [p2.lat, p2.lng],
+ ]);
+ });
+
+ it('FE-HOOK-ROUTE-004: with route_calculation enabled, calls calculateSegments', async () => {
+ useSettingsStore.setState({ settings: { route_calculation: true } as any });
+
+ const p1 = buildPlace({ lat: 48.8566, lng: 2.3522 });
+ const p2 = buildPlace({ lat: 51.5074, lng: -0.1278 });
+ const a1 = buildAssignment({ day_id: 5, order_index: 0, place: p1 });
+ const a2 = buildAssignment({ day_id: 5, order_index: 1, place: p2 });
+ const store = buildMockStore({ '5': [a1, a2] });
+
+ const { result } = renderHook(() =>
+ useRouteCalculation(store as TripStoreState, 5)
+ );
+
+ await act(async () => {});
+
+ expect(calculateSegments).toHaveBeenCalled();
+ expect(result.current.routeSegments).toEqual(MOCK_SEGMENTS);
+ });
+
+ it('FE-HOOK-ROUTE-005: with route_calculation disabled, does not call calculateSegments', async () => {
+ useSettingsStore.setState({ settings: { route_calculation: false } as any });
+
+ const p1 = buildPlace({ lat: 48.8566, lng: 2.3522 });
+ const p2 = buildPlace({ lat: 51.5074, lng: -0.1278 });
+ const a1 = buildAssignment({ day_id: 5, order_index: 0, place: p1 });
+ const a2 = buildAssignment({ day_id: 5, order_index: 1, place: p2 });
+ const store = buildMockStore({ '5': [a1, a2] });
+
+ const { result } = renderHook(() =>
+ useRouteCalculation(store as TripStoreState, 5)
+ );
+
+ await act(async () => {});
+
+ expect(calculateSegments).not.toHaveBeenCalled();
+ expect(result.current.routeSegments).toEqual([]);
+ });
+
+ it('FE-HOOK-ROUTE-006: assignments are sorted by order_index before extracting waypoints', async () => {
+ useSettingsStore.setState({ settings: { route_calculation: true } as any });
+
+ const p1 = buildPlace({ lat: 10, lng: 10 });
+ const p2 = buildPlace({ lat: 20, lng: 20 });
+ // order_index 1 comes before 0 in the array, but should be sorted
+ const a1 = buildAssignment({ day_id: 5, order_index: 1, place: p1 });
+ const a2 = buildAssignment({ day_id: 5, order_index: 0, place: p2 });
+ const store = buildMockStore({ '5': [a1, a2] });
+
+ const { result } = renderHook(() =>
+ useRouteCalculation(store as TripStoreState, 5)
+ );
+
+ await act(async () => {});
+
+ // After sort: a2 (order_index=0) first, then a1 (order_index=1)
+ expect(result.current.route).toEqual([
+ [p2.lat, p2.lng],
+ [p1.lat, p1.lng],
+ ]);
+ });
+
+ it('FE-HOOK-ROUTE-007: assignments with no lat/lng are filtered out', async () => {
+ const pValid = buildPlace({ lat: 48.8566, lng: 2.3522 });
+ const pNoGeo = buildPlace({ lat: null as any, lng: null as any });
+ const a1 = buildAssignment({ day_id: 5, order_index: 0, place: pNoGeo });
+ const a2 = buildAssignment({ day_id: 5, order_index: 1, place: pValid });
+ const store = buildMockStore({ '5': [a1, a2] });
+
+ const { result } = renderHook(() =>
+ useRouteCalculation(store as TripStoreState, 5)
+ );
+
+ await act(async () => {});
+ // Only 1 valid waypoint → route is null
+ expect(result.current.route).toBeNull();
+ });
+
+ it('FE-HOOK-ROUTE-008: AbortController.abort() is called when selectedDayId changes', async () => {
+ useSettingsStore.setState({ settings: { route_calculation: true } as any });
+
+ // Make calculateSegments resolve slowly
+ let resolveSegments!: (val: RouteSegment[]) => void;
+ (calculateSegments as ReturnType).mockImplementationOnce(
+ (_waypoints: unknown[], options: { signal?: AbortSignal }) => {
+ return new Promise((resolve) => {
+ resolveSegments = resolve;
+ options?.signal?.addEventListener('abort', () => resolve([]));
+ });
+ }
+ );
+
+ const p1 = buildPlace({ lat: 10, lng: 10 });
+ const p2 = buildPlace({ lat: 20, lng: 20 });
+ const a1 = buildAssignment({ day_id: 5, order_index: 0, place: p1 });
+ const a2 = buildAssignment({ day_id: 5, order_index: 1, place: p2 });
+
+ const store1 = buildMockStore({ '5': [a1, a2], '6': [a1, a2] });
+
+ const { rerender } = renderHook(
+ ({ dayId }: { dayId: number }) => useRouteCalculation(store1 as TripStoreState, dayId),
+ { initialProps: { dayId: 5 } }
+ );
+
+ // Change to day 6 — should abort in-flight request for day 5
+ await act(async () => {
+ rerender({ dayId: 6 });
+ });
+
+ // calculateSegments should have been called at least once for day 5
+ // and once more for day 6
+ expect((calculateSegments as ReturnType).mock.calls.length).toBeGreaterThanOrEqual(1);
+
+ // Cleanup
+ resolveSegments?.([]);
+ });
+
+ it('FE-HOOK-ROUTE-009: AbortError from calculateSegments does not set routeSegments to []', async () => {
+ useSettingsStore.setState({ settings: { route_calculation: true } as any });
+
+ const abortError = new Error('Aborted');
+ abortError.name = 'AbortError';
+ (calculateSegments as ReturnType).mockRejectedValueOnce(abortError);
+
+ const p1 = buildPlace({ lat: 10, lng: 10 });
+ const p2 = buildPlace({ lat: 20, lng: 20 });
+ const a1 = buildAssignment({ day_id: 5, order_index: 0, place: p1 });
+ const a2 = buildAssignment({ day_id: 5, order_index: 1, place: p2 });
+ const store = buildMockStore({ '5': [a1, a2] });
+
+ const { result } = renderHook(() =>
+ useRouteCalculation(store as TripStoreState, 5)
+ );
+
+ await act(async () => {});
+ // AbortError should be swallowed silently — segments remain empty
+ expect(result.current.routeSegments).toEqual([]);
+ });
+
+ it('FE-HOOK-ROUTE-010: non-AbortError from calculateSegments sets routeSegments to []', async () => {
+ useSettingsStore.setState({ settings: { route_calculation: true } as any });
+
+ (calculateSegments as ReturnType).mockRejectedValueOnce(new Error('Network error'));
+
+ const p1 = buildPlace({ lat: 10, lng: 10 });
+ const p2 = buildPlace({ lat: 20, lng: 20 });
+ const a1 = buildAssignment({ day_id: 5, order_index: 0, place: p1 });
+ const a2 = buildAssignment({ day_id: 5, order_index: 1, place: p2 });
+ const store = buildMockStore({ '5': [a1, a2] });
+
+ const { result } = renderHook(() =>
+ useRouteCalculation(store as TripStoreState, 5)
+ );
+
+ await act(async () => {});
+ expect(result.current.routeSegments).toEqual([]);
+ });
+
+ it('FE-HOOK-ROUTE-011: when selectedDayId is null, route and segments are cleared', async () => {
+ const p1 = buildPlace({ lat: 10, lng: 10 });
+ const p2 = buildPlace({ lat: 20, lng: 20 });
+ const a1 = buildAssignment({ day_id: 5, order_index: 0, place: p1 });
+ const a2 = buildAssignment({ day_id: 5, order_index: 1, place: p2 });
+ const store = buildMockStore({ '5': [a1, a2] });
+
+ const { result, rerender } = renderHook(
+ ({ dayId }: { dayId: number | null }) => useRouteCalculation(store as TripStoreState, dayId),
+ { initialProps: { dayId: 5 as number | null } }
+ );
+
+ await act(async () => {});
+ // Some route may have been set for day 5
+
+ await act(async () => {
+ rerender({ dayId: null });
+ });
+
+ expect(result.current.route).toBeNull();
+ expect(result.current.routeSegments).toEqual([]);
+ });
+
+ it('FE-HOOK-ROUTE-012: setRoute and setRouteInfo are exposed', () => {
+ const store = buildMockStore({});
+ const { result } = renderHook(() =>
+ useRouteCalculation(store as TripStoreState, null)
+ );
+ expect(result.current.setRoute).toBeTypeOf('function');
+ expect(result.current.setRouteInfo).toBeTypeOf('function');
+ });
+
+ it('FE-HOOK-ROUTE-013: hook uses tripStoreRef — late store updates reflected correctly', async () => {
+ useSettingsStore.setState({ settings: { route_calculation: true } as any });
+
+ const p1 = buildPlace({ lat: 10, lng: 10 });
+ const p2 = buildPlace({ lat: 20, lng: 20 });
+ const a1 = buildAssignment({ day_id: 5, order_index: 0, place: p1 });
+ const a2 = buildAssignment({ day_id: 5, order_index: 1, place: p2 });
+
+ let storeData = buildMockStore({ '5': [a1, a2] });
+
+ const { result, rerender } = renderHook(() =>
+ useRouteCalculation(storeData as TripStoreState, 5)
+ );
+
+ await act(async () => {});
+
+ expect(result.current.route).toEqual([
+ [p1.lat, p1.lng],
+ [p2.lat, p2.lng],
+ ]);
+
+ // Now add a third place
+ const p3 = buildPlace({ lat: 30, lng: 30 });
+ const a3 = buildAssignment({ day_id: 5, order_index: 2, place: p3 });
+ storeData = buildMockStore({ '5': [a1, a2, a3] });
+
+ await act(async () => {
+ rerender();
+ });
+
+ await act(async () => {});
+
+ expect(result.current.route).toEqual([
+ [p1.lat, p1.lng],
+ [p2.lat, p2.lng],
+ [p3.lat, p3.lng],
+ ]);
+ });
+});
diff --git a/client/tests/integration/hooks/useTripWebSocket.test.ts b/client/tests/integration/hooks/useTripWebSocket.test.ts
new file mode 100644
index 00000000..6f982e1a
--- /dev/null
+++ b/client/tests/integration/hooks/useTripWebSocket.test.ts
@@ -0,0 +1,134 @@
+import { renderHook, act } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { useTripWebSocket } from '../../../src/hooks/useTripWebSocket';
+import { useTripStore } from '../../../src/store/tripStore';
+
+vi.mock('../../../src/api/websocket', () => ({
+ connect: vi.fn(),
+ disconnect: vi.fn(),
+ getSocketId: vi.fn(() => 'mock-socket-id'),
+ joinTrip: vi.fn(),
+ leaveTrip: vi.fn(),
+ addListener: vi.fn(),
+ removeListener: vi.fn(),
+ setRefetchCallback: vi.fn(),
+}));
+
+// Import the mocked module AFTER vi.mock
+const wsMock = await import('../../../src/api/websocket');
+
+describe('useTripWebSocket', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it('FE-HOOK-WS-001: on mount, joinTrip(tripId) is called', () => {
+ const { unmount } = renderHook(() => useTripWebSocket(42));
+ expect(wsMock.joinTrip).toHaveBeenCalledWith(42);
+ unmount();
+ });
+
+ it('FE-HOOK-WS-002: on mount, addListener is called (registers event handlers)', () => {
+ const { unmount } = renderHook(() => useTripWebSocket(42));
+ // addListener is called twice: once for handleRemoteEvent, once for collabFileSync
+ expect(wsMock.addListener).toHaveBeenCalled();
+ expect((wsMock.addListener as ReturnType).mock.calls.length).toBeGreaterThanOrEqual(1);
+ unmount();
+ });
+
+ it('FE-HOOK-WS-003: on unmount, leaveTrip(tripId) is called', () => {
+ const { unmount } = renderHook(() => useTripWebSocket(42));
+ unmount();
+ expect(wsMock.leaveTrip).toHaveBeenCalledWith(42);
+ });
+
+ it('FE-HOOK-WS-004: on unmount, removeListener is called', () => {
+ const { unmount } = renderHook(() => useTripWebSocket(42));
+ unmount();
+ expect(wsMock.removeListener).toHaveBeenCalled();
+ });
+
+ it('FE-HOOK-WS-005: when tripId changes, leaves old trip and joins new one', () => {
+ const { rerender, unmount } = renderHook(({ id }) => useTripWebSocket(id), {
+ initialProps: { id: 1 as number | undefined },
+ });
+ expect(wsMock.joinTrip).toHaveBeenCalledWith(1);
+
+ rerender({ id: 2 });
+
+ expect(wsMock.leaveTrip).toHaveBeenCalledWith(1);
+ expect(wsMock.joinTrip).toHaveBeenCalledWith(2);
+ unmount();
+ });
+
+ it('FE-HOOK-WS-006: one of the registered listeners is handleRemoteEvent from tripStore', () => {
+ const handler = useTripStore.getState().handleRemoteEvent;
+ renderHook(() => useTripWebSocket(42));
+
+ const addListenerCalls = (wsMock.addListener as ReturnType).mock.calls;
+ const registeredFunctions = addListenerCalls.map((call) => call[0]);
+ expect(registeredFunctions).toContain(handler);
+ });
+
+ it('FE-HOOK-WS-006b: collab file sync listener is also registered (second addListener call)', () => {
+ const { unmount } = renderHook(() => useTripWebSocket(42));
+ // Two listeners registered: handleRemoteEvent + collabFileSync
+ expect((wsMock.addListener as ReturnType).mock.calls.length).toBe(2);
+ unmount();
+ });
+
+ it('FE-HOOK-WS-006c: collab file sync listener reacts to collab:note:deleted events', () => {
+ const mockLoadFiles = vi.fn();
+ useTripStore.setState({ loadFiles: mockLoadFiles } as any);
+
+ renderHook(() => useTripWebSocket(42));
+
+ // The second addListener call is the collabFileSync function
+ const addListenerCalls = (wsMock.addListener as ReturnType).mock.calls;
+ const collabFileSync = addListenerCalls[1]?.[0];
+ expect(collabFileSync).toBeTypeOf('function');
+
+ act(() => {
+ collabFileSync({ type: 'collab:note:deleted' });
+ });
+
+ expect(mockLoadFiles).toHaveBeenCalledWith(42);
+ });
+
+ it('FE-HOOK-WS-006d: collab file sync listener reacts to collab:note:updated events', () => {
+ const mockLoadFiles = vi.fn();
+ useTripStore.setState({ loadFiles: mockLoadFiles } as any);
+
+ renderHook(() => useTripWebSocket(42));
+
+ const addListenerCalls = (wsMock.addListener as ReturnType).mock.calls;
+ const collabFileSync = addListenerCalls[1]?.[0];
+
+ act(() => {
+ collabFileSync({ type: 'collab:note:updated' });
+ });
+
+ expect(mockLoadFiles).toHaveBeenCalledWith(42);
+ });
+
+ it('FE-HOOK-WS-006e: collab file sync listener ignores unrelated event types', () => {
+ const mockLoadFiles = vi.fn();
+ useTripStore.setState({ loadFiles: mockLoadFiles } as any);
+
+ renderHook(() => useTripWebSocket(42));
+
+ const addListenerCalls = (wsMock.addListener as ReturnType).mock.calls;
+ const collabFileSync = addListenerCalls[1]?.[0];
+
+ act(() => {
+ collabFileSync({ type: 'place:created' });
+ });
+
+ expect(mockLoadFiles).not.toHaveBeenCalled();
+ });
+
+ it('FE-HOOK-WS-007: no joinTrip call when tripId is undefined', () => {
+ renderHook(() => useTripWebSocket(undefined));
+ expect(wsMock.joinTrip).not.toHaveBeenCalled();
+ });
+});
diff --git a/client/tests/setup.ts b/client/tests/setup.ts
new file mode 100644
index 00000000..2f507fed
--- /dev/null
+++ b/client/tests/setup.ts
@@ -0,0 +1,71 @@
+import '@testing-library/jest-dom/vitest';
+import { cleanup } from '@testing-library/react';
+import { afterAll, afterEach, beforeAll, vi } from 'vitest';
+import { server } from './helpers/msw/server';
+
+// Mock the websocket module so stores don't try to open real connections
+vi.mock('../src/api/websocket', () => ({
+ connect: vi.fn(),
+ disconnect: vi.fn(),
+ getSocketId: vi.fn(() => null),
+ setRefetchCallback: vi.fn(),
+}));
+
+// MSW lifecycle
+beforeAll(() => server.listen({ onUnhandledRequest: 'warn' }));
+afterEach(() => {
+ server.resetHandlers();
+ cleanup();
+ localStorage.clear();
+ sessionStorage.clear();
+});
+afterAll(() => server.close());
+
+// ── jsdom stubs ────────────────────────────────────────────────────────────────
+
+// window.matchMedia — used by dark mode / responsive components
+Object.defineProperty(window, 'matchMedia', {
+ writable: true,
+ value: vi.fn().mockImplementation((query: string) => ({
+ matches: false,
+ media: query,
+ onchange: null,
+ addListener: vi.fn(),
+ removeListener: vi.fn(),
+ addEventListener: vi.fn(),
+ removeEventListener: vi.fn(),
+ dispatchEvent: vi.fn(),
+ })),
+});
+
+// IntersectionObserver — used by lazy loading
+// Must use a class or regular function (not arrow function) so 'new IntersectionObserver()' works
+class _MockIntersectionObserver {
+ observe = vi.fn()
+ unobserve = vi.fn()
+ disconnect = vi.fn()
+ root = null
+ rootMargin = ''
+ thresholds: ReadonlyArray = []
+ takeRecords = vi.fn(() => [])
+ constructor(_callback: IntersectionObserverCallback, _options?: IntersectionObserverInit) {}
+}
+globalThis.IntersectionObserver = _MockIntersectionObserver as unknown as typeof IntersectionObserver;
+
+// ResizeObserver — used by resizable panels
+globalThis.ResizeObserver = vi.fn().mockImplementation(() => ({
+ observe: vi.fn(),
+ unobserve: vi.fn(),
+ disconnect: vi.fn(),
+})) as unknown as typeof ResizeObserver;
+
+// URL.createObjectURL / revokeObjectURL — used by file uploads
+if (typeof URL.createObjectURL === 'undefined') {
+ Object.defineProperty(URL, 'createObjectURL', { writable: true, value: vi.fn(() => 'blob:mock') });
+}
+if (typeof URL.revokeObjectURL === 'undefined') {
+ Object.defineProperty(URL, 'revokeObjectURL', { writable: true, value: vi.fn() });
+}
+
+// Element.prototype.scrollIntoView — jsdom doesn't implement it
+Element.prototype.scrollIntoView = vi.fn();
diff --git a/client/tests/unit/hooks/usePlaceSelection.test.ts b/client/tests/unit/hooks/usePlaceSelection.test.ts
new file mode 100644
index 00000000..a21a9404
--- /dev/null
+++ b/client/tests/unit/hooks/usePlaceSelection.test.ts
@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { usePlaceSelection } from '../../../src/hooks/usePlaceSelection';
+
+// FE-HOOK-SEL-001 onwards
+
+describe('usePlaceSelection', () => {
+ it('FE-HOOK-SEL-001: initially both IDs are null', () => {
+ const { result } = renderHook(() => usePlaceSelection());
+ expect(result.current.selectedPlaceId).toBeNull();
+ expect(result.current.selectedAssignmentId).toBeNull();
+ });
+
+ it('FE-HOOK-SEL-002: setSelectedPlaceId sets selectedPlaceId', () => {
+ const { result } = renderHook(() => usePlaceSelection());
+ act(() => { result.current.setSelectedPlaceId(42); });
+ expect(result.current.selectedPlaceId).toBe(42);
+ });
+
+ it('FE-HOOK-SEL-003: setSelectedPlaceId clears selectedAssignmentId', () => {
+ const { result } = renderHook(() => usePlaceSelection());
+ // First set an assignment via selectAssignment
+ act(() => { result.current.selectAssignment(99, 10); });
+ expect(result.current.selectedAssignmentId).toBe(99);
+
+ // Now change the place — assignment must be cleared
+ act(() => { result.current.setSelectedPlaceId(20); });
+ expect(result.current.selectedPlaceId).toBe(20);
+ expect(result.current.selectedAssignmentId).toBeNull();
+ });
+
+ it('FE-HOOK-SEL-004: selectAssignment sets both selectedAssignmentId and selectedPlaceId', () => {
+ const { result } = renderHook(() => usePlaceSelection());
+ act(() => { result.current.selectAssignment(7, 3); });
+ expect(result.current.selectedAssignmentId).toBe(7);
+ expect(result.current.selectedPlaceId).toBe(3);
+ });
+
+ it('FE-HOOK-SEL-005: setSelectedPlaceId(null) resets selectedPlaceId to null and clears assignment', () => {
+ const { result } = renderHook(() => usePlaceSelection());
+ act(() => { result.current.selectAssignment(5, 1); });
+ act(() => { result.current.setSelectedPlaceId(null); });
+ expect(result.current.selectedPlaceId).toBeNull();
+ expect(result.current.selectedAssignmentId).toBeNull();
+ });
+
+ it('FE-HOOK-SEL-006: selectAssignment(null, null) clears both IDs', () => {
+ const { result } = renderHook(() => usePlaceSelection());
+ act(() => { result.current.selectAssignment(5, 1); });
+ act(() => { result.current.selectAssignment(null, null); });
+ expect(result.current.selectedAssignmentId).toBeNull();
+ expect(result.current.selectedPlaceId).toBeNull();
+ });
+
+ it('FE-HOOK-SEL-007: selecting a different place after an assignment clears the assignment', () => {
+ const { result } = renderHook(() => usePlaceSelection());
+ act(() => { result.current.selectAssignment(11, 5); });
+ // Switch to a different place without going through selectAssignment
+ act(() => { result.current.setSelectedPlaceId(99); });
+ expect(result.current.selectedPlaceId).toBe(99);
+ expect(result.current.selectedAssignmentId).toBeNull();
+ });
+});
diff --git a/client/tests/unit/hooks/usePlannerHistory.test.ts b/client/tests/unit/hooks/usePlannerHistory.test.ts
new file mode 100644
index 00000000..9fb0d31d
--- /dev/null
+++ b/client/tests/unit/hooks/usePlannerHistory.test.ts
@@ -0,0 +1,92 @@
+import { describe, it, expect, vi } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { usePlannerHistory } from '../../../src/hooks/usePlannerHistory';
+
+// FE-HOOK-HIST-001 onwards
+
+describe('usePlannerHistory', () => {
+ it('FE-HOOK-HIST-001: starts with canUndo=false and lastActionLabel=null', () => {
+ const { result } = renderHook(() => usePlannerHistory());
+ expect(result.current.canUndo).toBe(false);
+ expect(result.current.lastActionLabel).toBeNull();
+ });
+
+ it('FE-HOOK-HIST-002: pushing an entry sets canUndo=true and lastActionLabel', () => {
+ const { result } = renderHook(() => usePlannerHistory());
+ act(() => {
+ result.current.pushUndo('Delete place', vi.fn());
+ });
+ expect(result.current.canUndo).toBe(true);
+ expect(result.current.lastActionLabel).toBe('Delete place');
+ });
+
+ it('FE-HOOK-HIST-003: calling undo fires the undo function and sets canUndo=false', async () => {
+ const { result } = renderHook(() => usePlannerHistory());
+ const undoFn = vi.fn();
+ act(() => {
+ result.current.pushUndo('Add place', undoFn);
+ });
+ await act(async () => {
+ await result.current.undo();
+ });
+ expect(undoFn).toHaveBeenCalledOnce();
+ expect(result.current.canUndo).toBe(false);
+ });
+
+ it('FE-HOOK-HIST-004: multiple entries stack in LIFO order', () => {
+ const { result } = renderHook(() => usePlannerHistory());
+ act(() => {
+ result.current.pushUndo('First', vi.fn());
+ result.current.pushUndo('Second', vi.fn());
+ result.current.pushUndo('Third', vi.fn());
+ });
+ expect(result.current.lastActionLabel).toBe('Third');
+ });
+
+ it('FE-HOOK-HIST-005: undo consumes entries in LIFO order', async () => {
+ const { result } = renderHook(() => usePlannerHistory());
+ const fn1 = vi.fn();
+ const fn2 = vi.fn();
+ act(() => {
+ result.current.pushUndo('First', fn1);
+ result.current.pushUndo('Second', fn2);
+ });
+ await act(async () => { await result.current.undo(); });
+ expect(fn2).toHaveBeenCalledOnce();
+ expect(fn1).not.toHaveBeenCalled();
+ expect(result.current.lastActionLabel).toBe('First');
+
+ await act(async () => { await result.current.undo(); });
+ expect(fn1).toHaveBeenCalledOnce();
+ expect(result.current.canUndo).toBe(false);
+ });
+
+ it('FE-HOOK-HIST-006: caps history at 30 entries', () => {
+ const { result } = renderHook(() => usePlannerHistory());
+ act(() => {
+ for (let i = 0; i < 31; i++) {
+ result.current.pushUndo(`Action ${i}`, vi.fn());
+ }
+ });
+ // After 31 pushes with cap=30, the oldest entry (Action 0) should be dropped.
+ // canUndo must be true and the stack should not exceed 30.
+ expect(result.current.canUndo).toBe(true);
+ expect(result.current.lastActionLabel).toBe('Action 30');
+ });
+
+ it('FE-HOOK-HIST-007: undo on an empty stack does not throw', async () => {
+ const { result } = renderHook(() => usePlannerHistory());
+ await expect(
+ act(async () => { await result.current.undo(); })
+ ).resolves.not.toThrow();
+ expect(result.current.canUndo).toBe(false);
+ });
+
+ it('FE-HOOK-HIST-008: undo still sets canUndo=false after consuming the last entry', async () => {
+ const { result } = renderHook(() => usePlannerHistory());
+ act(() => { result.current.pushUndo('Only', vi.fn()); });
+ await act(async () => { await result.current.undo(); });
+ expect(result.current.canUndo).toBe(false);
+ expect(result.current.lastActionLabel).toBeNull();
+ });
+});
diff --git a/client/tests/unit/remoteEventHandler/assignments.test.ts b/client/tests/unit/remoteEventHandler/assignments.test.ts
new file mode 100644
index 00000000..d54475d9
--- /dev/null
+++ b/client/tests/unit/remoteEventHandler/assignments.test.ts
@@ -0,0 +1,110 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useTripStore } from '../../../src/store/tripStore';
+import { resetAllStores } from '../../helpers/store';
+import { buildDay, buildAssignment, buildPlace } from '../../helpers/factories';
+
+beforeEach(() => {
+ resetAllStores();
+});
+
+describe('remoteEventHandler > assignments', () => {
+ const seedData = () => {
+ useTripStore.setState({
+ days: [buildDay({ id: 10 }), buildDay({ id: 20 })],
+ assignments: {
+ '10': [buildAssignment({ id: 100, day_id: 10 })],
+ '20': [],
+ },
+ });
+ };
+
+ it('FE-WSEVT-ASSIGN-001: assignment:created adds assignment to correct day', () => {
+ seedData();
+ const newAssignment = buildAssignment({ id: 200, day_id: 20 });
+ useTripStore.getState().handleRemoteEvent({ type: 'assignment:created', assignment: newAssignment });
+ const { assignments } = useTripStore.getState();
+ expect(assignments['20']).toHaveLength(1);
+ expect(assignments['20'][0].id).toBe(200);
+ expect(assignments['10']).toHaveLength(1);
+ });
+
+ it('FE-WSEVT-ASSIGN-002: assignment:created is idempotent — no duplicate if same ID', () => {
+ seedData();
+ const duplicate = buildAssignment({ id: 100, day_id: 10 });
+ useTripStore.getState().handleRemoteEvent({ type: 'assignment:created', assignment: duplicate });
+ const { assignments } = useTripStore.getState();
+ expect(assignments['10']).toHaveLength(1);
+ });
+
+ it('FE-WSEVT-ASSIGN-003: assignment:created replaces temp (negative) ID assignment with same place_id', () => {
+ const place = buildPlace({ id: 55 });
+ const tempAssignment = buildAssignment({ id: -1, day_id: 10, place, place_id: place.id });
+ useTripStore.setState({
+ days: [buildDay({ id: 10 })],
+ assignments: { '10': [tempAssignment] },
+ });
+ const realAssignment = buildAssignment({ id: 500, day_id: 10, place, place_id: place.id });
+ useTripStore.getState().handleRemoteEvent({ type: 'assignment:created', assignment: realAssignment });
+ const { assignments } = useTripStore.getState();
+ expect(assignments['10']).toHaveLength(1);
+ expect(assignments['10'][0].id).toBe(500);
+ });
+
+ it('FE-WSEVT-ASSIGN-004: assignment:updated merges updated data into correct day', () => {
+ seedData();
+ const updated = buildAssignment({ id: 100, day_id: 10, notes: 'Updated notes' });
+ useTripStore.getState().handleRemoteEvent({ type: 'assignment:updated', assignment: updated });
+ const { assignments } = useTripStore.getState();
+ expect(assignments['10'][0].notes).toBe('Updated notes');
+ });
+
+ it('FE-WSEVT-ASSIGN-005: assignment:deleted removes assignment from day', () => {
+ seedData();
+ useTripStore.getState().handleRemoteEvent({ type: 'assignment:deleted', assignmentId: 100, dayId: 10 });
+ const { assignments } = useTripStore.getState();
+ expect(assignments['10']).toHaveLength(0);
+ });
+
+ it('FE-WSEVT-ASSIGN-006: assignment:moved removes from old day and adds to new day', () => {
+ const movedAssignment = buildAssignment({ id: 100, day_id: 20 });
+ useTripStore.setState({
+ days: [buildDay({ id: 10 }), buildDay({ id: 20 })],
+ assignments: {
+ '10': [movedAssignment],
+ '20': [],
+ },
+ });
+ useTripStore.getState().handleRemoteEvent({
+ type: 'assignment:moved',
+ assignment: movedAssignment,
+ oldDayId: 10,
+ newDayId: 20,
+ });
+ const { assignments } = useTripStore.getState();
+ expect(assignments['10']).toHaveLength(0);
+ expect(assignments['20']).toHaveLength(1);
+ expect(assignments['20'][0].id).toBe(100);
+ });
+
+ it('FE-WSEVT-ASSIGN-007: assignment:reordered updates order_index values', () => {
+ const a1 = buildAssignment({ id: 1, day_id: 10, order_index: 0 });
+ const a2 = buildAssignment({ id: 2, day_id: 10, order_index: 1 });
+ const a3 = buildAssignment({ id: 3, day_id: 10, order_index: 2 });
+ useTripStore.setState({
+ assignments: { '10': [a1, a2, a3] },
+ });
+ useTripStore.getState().handleRemoteEvent({
+ type: 'assignment:reordered',
+ dayId: 10,
+ orderedIds: [3, 1, 2],
+ });
+ const { assignments } = useTripStore.getState();
+ const reordered = assignments['10'];
+ const item3 = reordered.find(a => a.id === 3);
+ const item1 = reordered.find(a => a.id === 1);
+ const item2 = reordered.find(a => a.id === 2);
+ expect(item3?.order_index).toBe(0);
+ expect(item1?.order_index).toBe(1);
+ expect(item2?.order_index).toBe(2);
+ });
+});
diff --git a/client/tests/unit/remoteEventHandler/budget.test.ts b/client/tests/unit/remoteEventHandler/budget.test.ts
new file mode 100644
index 00000000..1effce0b
--- /dev/null
+++ b/client/tests/unit/remoteEventHandler/budget.test.ts
@@ -0,0 +1,93 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useTripStore } from '../../../src/store/tripStore';
+import { resetAllStores } from '../../helpers/store';
+import { buildBudgetItem } from '../../helpers/factories';
+import type { BudgetMember } from '../../../src/types';
+
+beforeEach(() => {
+ resetAllStores();
+});
+
+describe('remoteEventHandler > budget', () => {
+ const member1: BudgetMember = { user_id: 5, paid: false };
+ const member2: BudgetMember = { user_id: 6, paid: true };
+
+ const seedData = () => {
+ useTripStore.setState({
+ budgetItems: [
+ buildBudgetItem({ id: 1, persons: 1, members: [{ ...member1 }] }),
+ buildBudgetItem({ id: 2, persons: 2, members: [{ ...member2 }] }),
+ ],
+ });
+ };
+
+ it('FE-WSEVT-BUDGET-001: budget:created adds item to budgetItems', () => {
+ seedData();
+ const newItem = buildBudgetItem({ id: 99, name: 'Hotel' });
+ useTripStore.getState().handleRemoteEvent({ type: 'budget:created', item: newItem });
+ const { budgetItems } = useTripStore.getState();
+ expect(budgetItems).toHaveLength(3);
+ expect(budgetItems.find(i => i.id === 99)).toBeDefined();
+ });
+
+ it('FE-WSEVT-BUDGET-002: budget:created is idempotent — no duplicate if same ID', () => {
+ seedData();
+ const duplicate = buildBudgetItem({ id: 1, name: 'Duplicate' });
+ useTripStore.getState().handleRemoteEvent({ type: 'budget:created', item: duplicate });
+ const { budgetItems } = useTripStore.getState();
+ expect(budgetItems).toHaveLength(2);
+ });
+
+ it('FE-WSEVT-BUDGET-003: budget:updated replaces item in array', () => {
+ seedData();
+ const updated = buildBudgetItem({ id: 1, name: 'Updated Hotel', amount: 500 });
+ useTripStore.getState().handleRemoteEvent({ type: 'budget:updated', item: updated });
+ const { budgetItems } = useTripStore.getState();
+ const item = budgetItems.find(i => i.id === 1);
+ expect(item?.name).toBe('Updated Hotel');
+ expect(item?.amount).toBe(500);
+ });
+
+ it('FE-WSEVT-BUDGET-004: budget:deleted removes item by ID', () => {
+ seedData();
+ useTripStore.getState().handleRemoteEvent({ type: 'budget:deleted', itemId: 1 });
+ const { budgetItems } = useTripStore.getState();
+ expect(budgetItems).toHaveLength(1);
+ expect(budgetItems.find(i => i.id === 1)).toBeUndefined();
+ });
+
+ it('FE-WSEVT-BUDGET-005: budget:members-updated replaces entire members array and persons count', () => {
+ seedData();
+ const newMembers: BudgetMember[] = [{ user_id: 7, paid: true }, { user_id: 8, paid: false }];
+ useTripStore.getState().handleRemoteEvent({
+ type: 'budget:members-updated',
+ itemId: 1,
+ members: newMembers,
+ persons: 3,
+ });
+ const { budgetItems } = useTripStore.getState();
+ const item = budgetItems.find(i => i.id === 1);
+ expect(item?.members).toEqual(newMembers);
+ expect(item?.persons).toBe(3);
+ // Other item should be unchanged
+ const item2 = budgetItems.find(i => i.id === 2);
+ expect(item2?.members).toEqual([{ ...member2 }]);
+ });
+
+ it('FE-WSEVT-BUDGET-006: budget:member-paid-updated toggles specific member paid status', () => {
+ seedData();
+ useTripStore.getState().handleRemoteEvent({
+ type: 'budget:member-paid-updated',
+ itemId: 1,
+ userId: 5,
+ paid: true,
+ });
+ const { budgetItems } = useTripStore.getState();
+ const item = budgetItems.find(i => i.id === 1);
+ const m = item?.members?.find(m => m.user_id === 5);
+ expect(m?.paid).toBe(true);
+ // Other item members unchanged
+ const item2 = budgetItems.find(i => i.id === 2);
+ expect(item2?.members?.[0].paid).toBe(true);
+ });
+});
diff --git a/client/tests/unit/remoteEventHandler/dayNotes.test.ts b/client/tests/unit/remoteEventHandler/dayNotes.test.ts
new file mode 100644
index 00000000..1529680d
--- /dev/null
+++ b/client/tests/unit/remoteEventHandler/dayNotes.test.ts
@@ -0,0 +1,60 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useTripStore } from '../../../src/store/tripStore';
+import { resetAllStores } from '../../helpers/store';
+import { buildDayNote } from '../../helpers/factories';
+
+beforeEach(() => {
+ resetAllStores();
+});
+
+describe('remoteEventHandler > dayNotes', () => {
+ const seedData = () => {
+ useTripStore.setState({
+ dayNotes: {
+ '10': [buildDayNote({ id: 1, day_id: 10, text: 'Original' })],
+ '20': [],
+ },
+ });
+ };
+
+ it('FE-WSEVT-DAYNOTE-001: dayNote:created adds note to correct day', () => {
+ seedData();
+ const newNote = buildDayNote({ id: 99, day_id: 10, text: 'New note' });
+ useTripStore.getState().handleRemoteEvent({ type: 'dayNote:created', dayId: 10, note: newNote });
+ const { dayNotes } = useTripStore.getState();
+ expect(dayNotes['10']).toHaveLength(2);
+ expect(dayNotes['10'].find(n => n.id === 99)).toBeDefined();
+ });
+
+ it('FE-WSEVT-DAYNOTE-002: dayNote:created is idempotent — no duplicate if same ID', () => {
+ seedData();
+ const duplicate = buildDayNote({ id: 1, day_id: 10, text: 'Duplicate' });
+ useTripStore.getState().handleRemoteEvent({ type: 'dayNote:created', dayId: 10, note: duplicate });
+ const { dayNotes } = useTripStore.getState();
+ expect(dayNotes['10']).toHaveLength(1);
+ expect(dayNotes['10'][0].text).toBe('Original');
+ });
+
+ it('FE-WSEVT-DAYNOTE-003: dayNote:updated replaces note in correct day', () => {
+ seedData();
+ const updated = buildDayNote({ id: 1, day_id: 10, text: 'Updated text' });
+ useTripStore.getState().handleRemoteEvent({ type: 'dayNote:updated', dayId: 10, note: updated });
+ const { dayNotes } = useTripStore.getState();
+ expect(dayNotes['10'][0].text).toBe('Updated text');
+ });
+
+ it('FE-WSEVT-DAYNOTE-004: dayNote:deleted removes note from correct day', () => {
+ seedData();
+ useTripStore.getState().handleRemoteEvent({ type: 'dayNote:deleted', dayId: 10, noteId: 1 });
+ const { dayNotes } = useTripStore.getState();
+ expect(dayNotes['10']).toHaveLength(0);
+ });
+
+ it('FE-WSEVT-DAYNOTE-005: operations on day 10 do not affect day 20', () => {
+ seedData();
+ const newNote = buildDayNote({ id: 50, day_id: 10, text: 'Day 10 note' });
+ useTripStore.getState().handleRemoteEvent({ type: 'dayNote:created', dayId: 10, note: newNote });
+ const { dayNotes } = useTripStore.getState();
+ expect(dayNotes['20']).toHaveLength(0);
+ });
+});
diff --git a/client/tests/unit/remoteEventHandler/days.test.ts b/client/tests/unit/remoteEventHandler/days.test.ts
new file mode 100644
index 00000000..df2282b2
--- /dev/null
+++ b/client/tests/unit/remoteEventHandler/days.test.ts
@@ -0,0 +1,80 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useTripStore } from '../../../src/store/tripStore';
+import { resetAllStores } from '../../helpers/store';
+import { buildDay, buildAssignment, buildDayNote } from '../../helpers/factories';
+
+beforeEach(() => {
+ resetAllStores();
+});
+
+describe('remoteEventHandler > days', () => {
+ const seedData = () => {
+ useTripStore.setState({
+ days: [buildDay({ id: 10 }), buildDay({ id: 20 })],
+ assignments: {
+ '10': [buildAssignment({ id: 100, day_id: 10 })],
+ '20': [],
+ },
+ dayNotes: {
+ '10': [buildDayNote({ id: 1, day_id: 10 })],
+ '20': [],
+ },
+ });
+ };
+
+ it('FE-WSEVT-DAY-001: day:created adds day to days array', () => {
+ seedData();
+ const newDay = buildDay({ id: 30 });
+ useTripStore.getState().handleRemoteEvent({ type: 'day:created', day: newDay });
+ const { days } = useTripStore.getState();
+ expect(days).toHaveLength(3);
+ expect(days.find(d => d.id === 30)).toBeDefined();
+ });
+
+ it('FE-WSEVT-DAY-002: day:created is idempotent — no duplicate if same ID', () => {
+ seedData();
+ const duplicate = buildDay({ id: 10 });
+ useTripStore.getState().handleRemoteEvent({ type: 'day:created', day: duplicate });
+ const { days } = useTripStore.getState();
+ expect(days).toHaveLength(2);
+ });
+
+ it('FE-WSEVT-DAY-003: day:updated replaces day in days array', () => {
+ seedData();
+ const updated = buildDay({ id: 10, title: 'New Title' });
+ useTripStore.getState().handleRemoteEvent({ type: 'day:updated', day: updated });
+ const { days } = useTripStore.getState();
+ const day10 = days.find(d => d.id === 10);
+ expect(day10?.title).toBe('New Title');
+ });
+
+ it('FE-WSEVT-DAY-004: day:deleted removes day from days array', () => {
+ seedData();
+ useTripStore.getState().handleRemoteEvent({ type: 'day:deleted', dayId: 10 });
+ const { days } = useTripStore.getState();
+ expect(days).toHaveLength(1);
+ expect(days.find(d => d.id === 10)).toBeUndefined();
+ });
+
+ it('FE-WSEVT-DAY-005: day:deleted removes the assignments key for deleted day', () => {
+ seedData();
+ useTripStore.getState().handleRemoteEvent({ type: 'day:deleted', dayId: 10 });
+ const { assignments } = useTripStore.getState();
+ expect('10' in assignments).toBe(false);
+ });
+
+ it('FE-WSEVT-DAY-006: day:deleted removes the dayNotes key for deleted day', () => {
+ seedData();
+ useTripStore.getState().handleRemoteEvent({ type: 'day:deleted', dayId: 10 });
+ const { dayNotes } = useTripStore.getState();
+ expect('10' in dayNotes).toBe(false);
+ });
+
+ it('FE-WSEVT-DAY-007: day:deleted does not remove other days assignments/dayNotes', () => {
+ seedData();
+ useTripStore.getState().handleRemoteEvent({ type: 'day:deleted', dayId: 10 });
+ const { assignments, dayNotes } = useTripStore.getState();
+ expect('20' in assignments).toBe(true);
+ expect('20' in dayNotes).toBe(true);
+ });
+});
diff --git a/client/tests/unit/remoteEventHandler/files.test.ts b/client/tests/unit/remoteEventHandler/files.test.ts
new file mode 100644
index 00000000..5623b1a3
--- /dev/null
+++ b/client/tests/unit/remoteEventHandler/files.test.ts
@@ -0,0 +1,61 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useTripStore } from '../../../src/store/tripStore';
+import { resetAllStores } from '../../helpers/store';
+import { buildTripFile } from '../../helpers/factories';
+
+beforeEach(() => {
+ resetAllStores();
+});
+
+describe('remoteEventHandler > files', () => {
+ const seedData = () => {
+ useTripStore.setState({
+ files: [buildTripFile({ id: 1, original_name: 'document.pdf' })],
+ });
+ };
+
+ it('FE-WSEVT-FILE-001: file:created prepends new file to array', () => {
+ seedData();
+ const newFile = buildTripFile({ id: 99, original_name: 'photo.jpg' });
+ useTripStore.getState().handleRemoteEvent({ type: 'file:created', file: newFile });
+ const { files } = useTripStore.getState();
+ expect(files).toHaveLength(2);
+ expect(files[0].id).toBe(99); // prepended
+ });
+
+ it('FE-WSEVT-FILE-002: file:created is idempotent — no duplicate if same ID', () => {
+ seedData();
+ const duplicate = buildTripFile({ id: 1, original_name: 'document_dup.pdf' });
+ useTripStore.getState().handleRemoteEvent({ type: 'file:created', file: duplicate });
+ const { files } = useTripStore.getState();
+ expect(files).toHaveLength(1);
+ expect(files[0].original_name).toBe('document.pdf');
+ });
+
+ it('FE-WSEVT-FILE-003: file:updated replaces file in array', () => {
+ seedData();
+ const updated = buildTripFile({ id: 1, original_name: 'renamed.pdf' });
+ useTripStore.getState().handleRemoteEvent({ type: 'file:updated', file: updated });
+ const { files } = useTripStore.getState();
+ expect(files[0].original_name).toBe('renamed.pdf');
+ });
+
+ it('FE-WSEVT-FILE-004: file:deleted removes file by ID', () => {
+ seedData();
+ useTripStore.getState().handleRemoteEvent({ type: 'file:deleted', fileId: 1 });
+ const { files } = useTripStore.getState();
+ expect(files).toHaveLength(0);
+ });
+
+ it('FE-WSEVT-FILE-005: file:created ordering — newest is first', () => {
+ seedData();
+ const f2 = buildTripFile({ id: 2, original_name: 'second.pdf' });
+ const f3 = buildTripFile({ id: 3, original_name: 'third.pdf' });
+ useTripStore.getState().handleRemoteEvent({ type: 'file:created', file: f2 });
+ useTripStore.getState().handleRemoteEvent({ type: 'file:created', file: f3 });
+ const { files } = useTripStore.getState();
+ expect(files[0].id).toBe(3);
+ expect(files[1].id).toBe(2);
+ expect(files[2].id).toBe(1);
+ });
+});
diff --git a/client/tests/unit/remoteEventHandler/memories.test.ts b/client/tests/unit/remoteEventHandler/memories.test.ts
new file mode 100644
index 00000000..62b4e0ba
--- /dev/null
+++ b/client/tests/unit/remoteEventHandler/memories.test.ts
@@ -0,0 +1,57 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { useTripStore } from '../../../src/store/tripStore';
+import { resetAllStores } from '../../helpers/store';
+import { buildPlace } from '../../helpers/factories';
+
+beforeEach(() => {
+ resetAllStores();
+});
+
+describe('remoteEventHandler > memories', () => {
+ it('FE-WSEVT-MEM-001: memories:updated dispatches CustomEvent on window', () => {
+ const received: Event[] = [];
+ const handler = (e: Event) => received.push(e);
+ window.addEventListener('memories:updated', handler);
+ useTripStore.getState().handleRemoteEvent({ type: 'memories:updated', photos: [] });
+ window.removeEventListener('memories:updated', handler);
+ expect(received).toHaveLength(1);
+ });
+
+ it('FE-WSEVT-MEM-002: memories:updated event type is correct', () => {
+ const received: Event[] = [];
+ const handler = (e: Event) => received.push(e);
+ window.addEventListener('memories:updated', handler);
+ useTripStore.getState().handleRemoteEvent({ type: 'memories:updated', photos: [] });
+ window.removeEventListener('memories:updated', handler);
+ expect(received[0].type).toBe('memories:updated');
+ });
+
+ it('FE-WSEVT-MEM-003: memories:updated event detail contains the payload', () => {
+ const received: CustomEvent[] = [];
+ const handler = (e: Event) => received.push(e as CustomEvent);
+ window.addEventListener('memories:updated', handler);
+ const payload = { photos: [{ id: 1, url: '/photo.jpg' }] };
+ useTripStore.getState().handleRemoteEvent({ type: 'memories:updated', ...payload });
+ window.removeEventListener('memories:updated', handler);
+ expect(received[0].detail).toMatchObject(payload);
+ });
+
+ it('FE-WSEVT-MEM-004: memories:updated does not modify store state', () => {
+ const places = [buildPlace({ id: 42, name: 'Eiffel Tower' })];
+ useTripStore.setState({ places });
+ useTripStore.getState().handleRemoteEvent({ type: 'memories:updated', photos: [] });
+ const { places: afterPlaces } = useTripStore.getState();
+ expect(afterPlaces).toHaveLength(1);
+ expect(afterPlaces[0].id).toBe(42);
+ });
+
+ it('FE-WSEVT-MEM-005: memories:updated fires exactly once per event', () => {
+ const received: Event[] = [];
+ const handler = (e: Event) => received.push(e);
+ window.addEventListener('memories:updated', handler);
+ useTripStore.getState().handleRemoteEvent({ type: 'memories:updated', photos: [] });
+ useTripStore.getState().handleRemoteEvent({ type: 'memories:updated', photos: [] });
+ window.removeEventListener('memories:updated', handler);
+ expect(received).toHaveLength(2);
+ });
+});
diff --git a/client/tests/unit/remoteEventHandler/packing.test.ts b/client/tests/unit/remoteEventHandler/packing.test.ts
new file mode 100644
index 00000000..0c578233
--- /dev/null
+++ b/client/tests/unit/remoteEventHandler/packing.test.ts
@@ -0,0 +1,49 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useTripStore } from '../../../src/store/tripStore';
+import { resetAllStores } from '../../helpers/store';
+import { buildPackingItem } from '../../helpers/factories';
+
+beforeEach(() => {
+ resetAllStores();
+});
+
+describe('remoteEventHandler > packing', () => {
+ const seedData = () => {
+ useTripStore.setState({
+ packingItems: [buildPackingItem({ id: 1, name: 'Sunscreen' })],
+ });
+ };
+
+ it('FE-WSEVT-PACK-001: packing:created adds item to packingItems', () => {
+ seedData();
+ const newItem = buildPackingItem({ id: 99, name: 'Hat' });
+ useTripStore.getState().handleRemoteEvent({ type: 'packing:created', item: newItem });
+ const { packingItems } = useTripStore.getState();
+ expect(packingItems).toHaveLength(2);
+ expect(packingItems.find(i => i.id === 99)).toBeDefined();
+ });
+
+ it('FE-WSEVT-PACK-002: packing:created is idempotent — no duplicate if same ID', () => {
+ seedData();
+ const duplicate = buildPackingItem({ id: 1, name: 'Sunscreen Duplicate' });
+ useTripStore.getState().handleRemoteEvent({ type: 'packing:created', item: duplicate });
+ const { packingItems } = useTripStore.getState();
+ expect(packingItems).toHaveLength(1);
+ expect(packingItems[0].name).toBe('Sunscreen');
+ });
+
+ it('FE-WSEVT-PACK-003: packing:updated replaces item in array', () => {
+ seedData();
+ const updated = buildPackingItem({ id: 1, name: 'SPF 50 Sunscreen' });
+ useTripStore.getState().handleRemoteEvent({ type: 'packing:updated', item: updated });
+ const { packingItems } = useTripStore.getState();
+ expect(packingItems[0].name).toBe('SPF 50 Sunscreen');
+ });
+
+ it('FE-WSEVT-PACK-004: packing:deleted removes item by ID', () => {
+ seedData();
+ useTripStore.getState().handleRemoteEvent({ type: 'packing:deleted', itemId: 1 });
+ const { packingItems } = useTripStore.getState();
+ expect(packingItems).toHaveLength(0);
+ });
+});
diff --git a/client/tests/unit/remoteEventHandler/places.test.ts b/client/tests/unit/remoteEventHandler/places.test.ts
new file mode 100644
index 00000000..8584f0d2
--- /dev/null
+++ b/client/tests/unit/remoteEventHandler/places.test.ts
@@ -0,0 +1,67 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useTripStore } from '../../../src/store/tripStore';
+import { resetAllStores } from '../../helpers/store';
+import { buildPlace, buildAssignment } from '../../helpers/factories';
+
+beforeEach(() => {
+ resetAllStores();
+});
+
+describe('remoteEventHandler > places', () => {
+ const seedData = () => {
+ const place = buildPlace({ id: 1, name: 'Original' });
+ const assignment = buildAssignment({ id: 100, place, day_id: 10 });
+ useTripStore.setState({
+ places: [place],
+ assignments: { '10': [assignment] },
+ });
+ };
+
+ it('FE-WSEVT-PLACE-001: place:created prepends new place to places array', () => {
+ seedData();
+ const newPlace = buildPlace({ id: 99, name: 'New Place' });
+ useTripStore.getState().handleRemoteEvent({ type: 'place:created', place: newPlace });
+ const { places } = useTripStore.getState();
+ expect(places[0].id).toBe(99);
+ expect(places).toHaveLength(2);
+ });
+
+ it('FE-WSEVT-PLACE-002: place:created is idempotent — no duplicate if same ID', () => {
+ seedData();
+ const duplicate = buildPlace({ id: 1, name: 'Duplicate' });
+ useTripStore.getState().handleRemoteEvent({ type: 'place:created', place: duplicate });
+ const { places } = useTripStore.getState();
+ expect(places).toHaveLength(1);
+ expect(places[0].name).toBe('Original');
+ });
+
+ it('FE-WSEVT-PLACE-003: place:updated updates place in places array', () => {
+ seedData();
+ const updated = buildPlace({ id: 1, name: 'Updated Name' });
+ useTripStore.getState().handleRemoteEvent({ type: 'place:updated', place: updated });
+ const { places } = useTripStore.getState();
+ expect(places[0].name).toBe('Updated Name');
+ });
+
+ it('FE-WSEVT-PLACE-004: place:updated cascades into assignments nested place', () => {
+ seedData();
+ const updated = buildPlace({ id: 1, name: 'Cascaded Update' });
+ useTripStore.getState().handleRemoteEvent({ type: 'place:updated', place: updated });
+ const { assignments } = useTripStore.getState();
+ expect(assignments['10'][0].place?.name).toBe('Cascaded Update');
+ });
+
+ it('FE-WSEVT-PLACE-005: place:deleted removes place from places array', () => {
+ seedData();
+ useTripStore.getState().handleRemoteEvent({ type: 'place:deleted', placeId: 1 });
+ const { places } = useTripStore.getState();
+ expect(places).toHaveLength(0);
+ });
+
+ it('FE-WSEVT-PLACE-006: place:deleted cascades — assignments referencing that place are removed', () => {
+ seedData();
+ useTripStore.getState().handleRemoteEvent({ type: 'place:deleted', placeId: 1 });
+ const { assignments } = useTripStore.getState();
+ expect(assignments['10']).toHaveLength(0);
+ });
+});
diff --git a/client/tests/unit/remoteEventHandler/reservations.test.ts b/client/tests/unit/remoteEventHandler/reservations.test.ts
new file mode 100644
index 00000000..718d16e5
--- /dev/null
+++ b/client/tests/unit/remoteEventHandler/reservations.test.ts
@@ -0,0 +1,61 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useTripStore } from '../../../src/store/tripStore';
+import { resetAllStores } from '../../helpers/store';
+import { buildReservation } from '../../helpers/factories';
+
+beforeEach(() => {
+ resetAllStores();
+});
+
+describe('remoteEventHandler > reservations', () => {
+ const seedData = () => {
+ useTripStore.setState({
+ reservations: [buildReservation({ id: 1, name: 'Hotel Paris' })],
+ });
+ };
+
+ it('FE-WSEVT-RESERV-001: reservation:created prepends new reservation to array', () => {
+ seedData();
+ const newRes = buildReservation({ id: 99, name: 'Flight' });
+ useTripStore.getState().handleRemoteEvent({ type: 'reservation:created', reservation: newRes });
+ const { reservations } = useTripStore.getState();
+ expect(reservations).toHaveLength(2);
+ expect(reservations[0].id).toBe(99); // prepended, so first
+ });
+
+ it('FE-WSEVT-RESERV-002: reservation:created is idempotent — no duplicate if same ID', () => {
+ seedData();
+ const duplicate = buildReservation({ id: 1, name: 'Hotel Paris Dup' });
+ useTripStore.getState().handleRemoteEvent({ type: 'reservation:created', reservation: duplicate });
+ const { reservations } = useTripStore.getState();
+ expect(reservations).toHaveLength(1);
+ expect(reservations[0].name).toBe('Hotel Paris');
+ });
+
+ it('FE-WSEVT-RESERV-003: reservation:updated replaces reservation in array', () => {
+ seedData();
+ const updated = buildReservation({ id: 1, name: 'Hotel Lyon' });
+ useTripStore.getState().handleRemoteEvent({ type: 'reservation:updated', reservation: updated });
+ const { reservations } = useTripStore.getState();
+ expect(reservations[0].name).toBe('Hotel Lyon');
+ });
+
+ it('FE-WSEVT-RESERV-004: reservation:deleted removes reservation by ID', () => {
+ seedData();
+ useTripStore.getState().handleRemoteEvent({ type: 'reservation:deleted', reservationId: 1 });
+ const { reservations } = useTripStore.getState();
+ expect(reservations).toHaveLength(0);
+ });
+
+ it('FE-WSEVT-RESERV-005: reservation:created ordering — newest is first', () => {
+ seedData();
+ const r2 = buildReservation({ id: 2, name: 'Second' });
+ const r3 = buildReservation({ id: 3, name: 'Third' });
+ useTripStore.getState().handleRemoteEvent({ type: 'reservation:created', reservation: r2 });
+ useTripStore.getState().handleRemoteEvent({ type: 'reservation:created', reservation: r3 });
+ const { reservations } = useTripStore.getState();
+ expect(reservations[0].id).toBe(3);
+ expect(reservations[1].id).toBe(2);
+ expect(reservations[2].id).toBe(1);
+ });
+});
diff --git a/client/tests/unit/remoteEventHandler/todo.test.ts b/client/tests/unit/remoteEventHandler/todo.test.ts
new file mode 100644
index 00000000..1c5c2a68
--- /dev/null
+++ b/client/tests/unit/remoteEventHandler/todo.test.ts
@@ -0,0 +1,49 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useTripStore } from '../../../src/store/tripStore';
+import { resetAllStores } from '../../helpers/store';
+import { buildTodoItem } from '../../helpers/factories';
+
+beforeEach(() => {
+ resetAllStores();
+});
+
+describe('remoteEventHandler > todo', () => {
+ const seedData = () => {
+ useTripStore.setState({
+ todoItems: [buildTodoItem({ id: 1, name: 'Book flights' })],
+ });
+ };
+
+ it('FE-WSEVT-TODO-001: todo:created adds item to todoItems', () => {
+ seedData();
+ const newItem = buildTodoItem({ id: 99, name: 'Pack bags' });
+ useTripStore.getState().handleRemoteEvent({ type: 'todo:created', item: newItem });
+ const { todoItems } = useTripStore.getState();
+ expect(todoItems).toHaveLength(2);
+ expect(todoItems.find(i => i.id === 99)).toBeDefined();
+ });
+
+ it('FE-WSEVT-TODO-002: todo:created is idempotent — no duplicate if same ID', () => {
+ seedData();
+ const duplicate = buildTodoItem({ id: 1, name: 'Book flights duplicate' });
+ useTripStore.getState().handleRemoteEvent({ type: 'todo:created', item: duplicate });
+ const { todoItems } = useTripStore.getState();
+ expect(todoItems).toHaveLength(1);
+ expect(todoItems[0].name).toBe('Book flights');
+ });
+
+ it('FE-WSEVT-TODO-003: todo:updated replaces item in array', () => {
+ seedData();
+ const updated = buildTodoItem({ id: 1, name: 'Book round-trip flights' });
+ useTripStore.getState().handleRemoteEvent({ type: 'todo:updated', item: updated });
+ const { todoItems } = useTripStore.getState();
+ expect(todoItems[0].name).toBe('Book round-trip flights');
+ });
+
+ it('FE-WSEVT-TODO-004: todo:deleted removes item by ID', () => {
+ seedData();
+ useTripStore.getState().handleRemoteEvent({ type: 'todo:deleted', itemId: 1 });
+ const { todoItems } = useTripStore.getState();
+ expect(todoItems).toHaveLength(0);
+ });
+});
diff --git a/client/tests/unit/remoteEventHandler/trip.test.ts b/client/tests/unit/remoteEventHandler/trip.test.ts
new file mode 100644
index 00000000..26f6bdf6
--- /dev/null
+++ b/client/tests/unit/remoteEventHandler/trip.test.ts
@@ -0,0 +1,32 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useTripStore } from '../../../src/store/tripStore';
+import { resetAllStores } from '../../helpers/store';
+import { buildTrip, buildPlace } from '../../helpers/factories';
+
+beforeEach(() => {
+ resetAllStores();
+});
+
+describe('remoteEventHandler > trip', () => {
+ it('FE-WSEVT-TRIP-001: trip:updated replaces trip in state', () => {
+ const originalTrip = buildTrip({ id: 1, name: 'Paris Trip' });
+ useTripStore.setState({ trip: originalTrip });
+ const updatedTrip = buildTrip({ id: 1, name: 'Paris & Lyon Trip' });
+ useTripStore.getState().handleRemoteEvent({ type: 'trip:updated', trip: updatedTrip });
+ const { trip } = useTripStore.getState();
+ expect(trip?.name).toBe('Paris & Lyon Trip');
+ });
+
+ it('FE-WSEVT-TRIP-002: trip:updated does not affect other state fields', () => {
+ const existingPlace = buildPlace({ id: 55, name: 'Eiffel Tower' });
+ useTripStore.setState({
+ trip: buildTrip({ id: 1, name: 'Original' }),
+ places: [existingPlace],
+ });
+ const updatedTrip = buildTrip({ id: 1, name: 'Updated' });
+ useTripStore.getState().handleRemoteEvent({ type: 'trip:updated', trip: updatedTrip });
+ const { places } = useTripStore.getState();
+ expect(places).toHaveLength(1);
+ expect(places[0].id).toBe(55);
+ });
+});
diff --git a/client/tests/unit/slices/assignmentsSlice.test.ts b/client/tests/unit/slices/assignmentsSlice.test.ts
new file mode 100644
index 00000000..e510c1e1
--- /dev/null
+++ b/client/tests/unit/slices/assignmentsSlice.test.ts
@@ -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);
+ });
+ });
+});
diff --git a/client/tests/unit/slices/budgetSlice.test.ts b/client/tests/unit/slices/budgetSlice.test.ts
new file mode 100644
index 00000000..ac122ce0
--- /dev/null
+++ b/client/tests/unit/slices/budgetSlice.test.ts
@@ -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;
+ 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;
+ // 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);
+
+ // 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);
+ });
+ });
+});
diff --git a/client/tests/unit/slices/dayNotesSlice.test.ts b/client/tests/unit/slices/dayNotesSlice.test.ts
new file mode 100644
index 00000000..2021d22b
--- /dev/null
+++ b/client/tests/unit/slices/dayNotesSlice.test.ts
@@ -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');
+ });
+ });
+});
diff --git a/client/tests/unit/slices/filesSlice.test.ts b/client/tests/unit/slices/filesSlice.test.ts
new file mode 100644
index 00000000..97de5cd9
--- /dev/null
+++ b/client/tests/unit/slices/filesSlice.test.ts
@@ -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);
+ });
+ });
+});
diff --git a/client/tests/unit/slices/packingSlice.test.ts b/client/tests/unit/slices/packingSlice.test.ts
new file mode 100644
index 00000000..1ccc653b
--- /dev/null
+++ b/client/tests/unit/slices/packingSlice.test.ts
@@ -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;
+ 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;
+ 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);
+ });
+ });
+});
diff --git a/client/tests/unit/slices/placesSlice.test.ts b/client/tests/unit/slices/placesSlice.test.ts
new file mode 100644
index 00000000..6a55094f
--- /dev/null
+++ b/client/tests/unit/slices/placesSlice.test.ts
@@ -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;
+ 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;
+ 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');
+ });
+ });
+});
diff --git a/client/tests/unit/slices/reservationsSlice.test.ts b/client/tests/unit/slices/reservationsSlice.test.ts
new file mode 100644
index 00000000..d2beb5b1
--- /dev/null
+++ b/client/tests/unit/slices/reservationsSlice.test.ts
@@ -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;
+ 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;
+ 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;
+ 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);
+ });
+ });
+});
diff --git a/client/tests/unit/slices/todoSlice.test.ts b/client/tests/unit/slices/todoSlice.test.ts
new file mode 100644
index 00000000..2060d722
--- /dev/null
+++ b/client/tests/unit/slices/todoSlice.test.ts
@@ -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;
+ 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;
+ 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;
+ return HttpResponse.json({ item: { ...item, ...body } });
+ }),
+ );
+
+ await useTripStore.getState().toggleTodoItem(1, 10, true);
+
+ expect(useTripStore.getState().todoItems[0].sort_order).toBe(3);
+ });
+ });
+});
diff --git a/client/tests/unit/stores/addonStore.test.ts b/client/tests/unit/stores/addonStore.test.ts
new file mode 100644
index 00000000..52718c95
--- /dev/null
+++ b/client/tests/unit/stores/addonStore.test.ts
@@ -0,0 +1,53 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../helpers/msw/server';
+import { useAddonStore } from '../../../src/store/addonStore';
+import { resetAllStores } from '../../helpers/store';
+
+beforeEach(() => {
+ resetAllStores();
+});
+
+describe('addonStore', () => {
+ describe('FE-ADDON-001: loadAddons()', () => {
+ it('fetches and stores enabled addons', async () => {
+ await useAddonStore.getState().loadAddons();
+ const state = useAddonStore.getState();
+
+ expect(state.loaded).toBe(true);
+ expect(state.addons.length).toBeGreaterThan(0);
+ expect(state.addons[0]).toHaveProperty('id');
+ expect(state.addons[0]).toHaveProperty('enabled', true);
+ });
+ });
+
+ describe('FE-ADDON-002: isEnabled returns true for known addon', () => {
+ it('returns true when addon is in the list and enabled', async () => {
+ await useAddonStore.getState().loadAddons();
+ expect(useAddonStore.getState().isEnabled('vacay')).toBe(true);
+ });
+ });
+
+ describe('FE-ADDON-003: isEnabled returns false for unknown addon', () => {
+ it('returns false when addon is not in the list', async () => {
+ await useAddonStore.getState().loadAddons();
+ expect(useAddonStore.getState().isEnabled('nonexistent')).toBe(false);
+ });
+ });
+
+ describe('FE-ADDON-004: API failure', () => {
+ it('sets loaded: true and keeps addons empty on API error', async () => {
+ server.use(
+ http.get('/api/addons', () =>
+ HttpResponse.json({ error: 'Server error' }, { status: 500 })
+ )
+ );
+
+ await useAddonStore.getState().loadAddons();
+ const state = useAddonStore.getState();
+
+ expect(state.loaded).toBe(true);
+ expect(state.addons).toEqual([]);
+ });
+ });
+});
diff --git a/client/tests/unit/stores/authStore.test.ts b/client/tests/unit/stores/authStore.test.ts
new file mode 100644
index 00000000..07442a8a
--- /dev/null
+++ b/client/tests/unit/stores/authStore.test.ts
@@ -0,0 +1,196 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../helpers/msw/server';
+import { useAuthStore } from '../../../src/store/authStore';
+import { resetAllStores } from '../../helpers/store';
+import { buildUser } from '../../helpers/factories';
+
+// The websocket module is already mocked globally in tests/setup.ts
+import { connect, disconnect } from '../../../src/api/websocket';
+
+beforeEach(() => {
+ resetAllStores();
+ vi.clearAllMocks();
+});
+
+describe('authStore', () => {
+ describe('FE-AUTH-001: Successful login', () => {
+ it('sets user, isAuthenticated: true, isLoading: false', async () => {
+ const user = buildUser();
+ server.use(
+ http.post('/api/auth/login', () =>
+ HttpResponse.json({ user, token: 'tok' })
+ )
+ );
+
+ await useAuthStore.getState().login(user.email, 'password');
+ const state = useAuthStore.getState();
+
+ expect(state.user).toEqual(user);
+ expect(state.isAuthenticated).toBe(true);
+ expect(state.isLoading).toBe(false);
+ expect(state.error).toBeNull();
+ });
+ });
+
+ describe('FE-AUTH-002: Login failure', () => {
+ it('sets error and isAuthenticated: false', async () => {
+ server.use(
+ http.post('/api/auth/login', () =>
+ HttpResponse.json({ error: 'Bad credentials' }, { status: 401 })
+ )
+ );
+
+ await expect(
+ useAuthStore.getState().login('bad@example.com', 'wrong')
+ ).rejects.toThrow();
+
+ const state = useAuthStore.getState();
+ expect(state.error).toBe('Bad credentials');
+ expect(state.isAuthenticated).toBe(false);
+ expect(state.isLoading).toBe(false);
+ });
+ });
+
+ describe('FE-AUTH-003: Login calls connect()', () => {
+ it('calls connect from websocket module after successful login', async () => {
+ const user = buildUser();
+ server.use(
+ http.post('/api/auth/login', () =>
+ HttpResponse.json({ user, token: 'tok' })
+ )
+ );
+
+ await useAuthStore.getState().login(user.email, 'password');
+
+ expect(connect).toHaveBeenCalledOnce();
+ });
+ });
+
+ describe('FE-AUTH-004: loadUser with valid session', () => {
+ it('sets user state from /auth/me', async () => {
+ const user = buildUser();
+ server.use(
+ http.get('/api/auth/me', () => HttpResponse.json({ user }))
+ );
+
+ await useAuthStore.getState().loadUser();
+ const state = useAuthStore.getState();
+
+ expect(state.user).toEqual(user);
+ expect(state.isAuthenticated).toBe(true);
+ expect(state.isLoading).toBe(false);
+ });
+ });
+
+ describe('FE-AUTH-005: loadUser with 401', () => {
+ it('clears auth state on 401', async () => {
+ server.use(
+ http.get('/api/auth/me', () =>
+ HttpResponse.json({ error: 'Unauthorized' }, { status: 401 })
+ )
+ );
+
+ // Pre-seed as authenticated
+ useAuthStore.setState({ user: buildUser(), isAuthenticated: true });
+
+ await useAuthStore.getState().loadUser();
+ const state = useAuthStore.getState();
+
+ expect(state.user).toBeNull();
+ expect(state.isAuthenticated).toBe(false);
+ expect(state.isLoading).toBe(false);
+ });
+ });
+
+ describe('FE-AUTH-006: logout', () => {
+ it('calls disconnect() and clears user state', () => {
+ useAuthStore.setState({ user: buildUser(), isAuthenticated: true });
+
+ useAuthStore.getState().logout();
+ const state = useAuthStore.getState();
+
+ expect(disconnect).toHaveBeenCalledOnce();
+ expect(state.user).toBeNull();
+ expect(state.isAuthenticated).toBe(false);
+ });
+ });
+
+ describe('FE-AUTH-007: Register success', () => {
+ it('sets user and authenticates', async () => {
+ const user = buildUser();
+ server.use(
+ http.post('/api/auth/register', () =>
+ HttpResponse.json({ user, token: 'tok' })
+ )
+ );
+
+ await useAuthStore.getState().register(user.username, user.email, 'password');
+ const state = useAuthStore.getState();
+
+ expect(state.user).toEqual(user);
+ expect(state.isAuthenticated).toBe(true);
+ expect(state.isLoading).toBe(false);
+ });
+ });
+
+ describe('FE-AUTH-008: authSequence guard', () => {
+ it('stale loadUser does not overwrite fresh login state', async () => {
+ let resolveStale!: (v: Response) => void;
+ const stalePromise = new Promise((res) => { resolveStale = res; });
+
+ // First call to /auth/me will hang until we resolve it manually
+ let callCount = 0;
+ server.use(
+ http.get('/api/auth/me', async () => {
+ callCount++;
+ if (callCount === 1) {
+ // Stale request — wait
+ await stalePromise;
+ return HttpResponse.json({ user: buildUser({ username: 'stale' }) });
+ }
+ // Should not be called a second time in this test
+ return HttpResponse.json({ user: buildUser({ username: 'fresh' }) });
+ })
+ );
+
+ // Start loadUser but don't await yet
+ const staleLoad = useAuthStore.getState().loadUser();
+
+ // Meanwhile, perform a login (bumps authSequence)
+ const freshUser = buildUser({ username: 'freshlogin' });
+ server.use(
+ http.post('/api/auth/login', () =>
+ HttpResponse.json({ user: freshUser, token: 'tok' })
+ )
+ );
+ await useAuthStore.getState().login(freshUser.email, 'password');
+
+ // Now resolve the stale loadUser response
+ resolveStale(new Response());
+ await staleLoad;
+
+ // The fresh login state must be preserved
+ const state = useAuthStore.getState();
+ expect(state.user?.username).toBe('freshlogin');
+ expect(state.isAuthenticated).toBe(true);
+ });
+ });
+
+ describe('FE-AUTH-009: MFA-required state handling', () => {
+ it('returns mfa_required flag and does not set user as authenticated', async () => {
+ server.use(
+ http.post('/api/auth/login', () =>
+ HttpResponse.json({ mfa_required: true, mfa_token: 'mfa-tok-123' })
+ )
+ );
+
+ const result = await useAuthStore.getState().login('user@example.com', 'password');
+
+ expect(result).toMatchObject({ mfa_required: true, mfa_token: 'mfa-tok-123' });
+ const state = useAuthStore.getState();
+ expect(state.isAuthenticated).toBe(false);
+ expect(state.user).toBeNull();
+ });
+ });
+});
diff --git a/client/tests/unit/stores/inAppNotificationStore.test.ts b/client/tests/unit/stores/inAppNotificationStore.test.ts
new file mode 100644
index 00000000..860d484f
--- /dev/null
+++ b/client/tests/unit/stores/inAppNotificationStore.test.ts
@@ -0,0 +1,134 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../helpers/msw/server';
+import { useInAppNotificationStore } from '../../../src/store/inAppNotificationStore';
+import { resetAllStores } from '../../helpers/store';
+
+// Raw notification factory matching the server shape (is_read as 0/1, params as strings)
+function buildRawNotif(overrides: Record = {}) {
+ const id = Math.floor(Math.random() * 100000);
+ return {
+ id,
+ type: 'simple',
+ scope: 'trip',
+ target: 1,
+ sender_id: 2,
+ sender_username: 'alice',
+ sender_avatar: null,
+ recipient_id: 1,
+ title_key: 'notif.title',
+ title_params: '{}',
+ text_key: 'notif.text',
+ text_params: '{}',
+ positive_text_key: null,
+ negative_text_key: null,
+ response: null,
+ navigate_text_key: null,
+ navigate_target: null,
+ is_read: 0,
+ created_at: '2025-01-01T00:00:00.000Z',
+ ...overrides,
+ };
+}
+
+beforeEach(() => {
+ resetAllStores();
+});
+
+describe('inAppNotificationStore', () => {
+ describe('FE-NOTIF-001: fetchNotifications() loads first page', () => {
+ it('populates notifications, total, and unreadCount', async () => {
+ await useInAppNotificationStore.getState().fetchNotifications();
+ const state = useInAppNotificationStore.getState();
+
+ expect(state.notifications.length).toBeGreaterThan(0);
+ expect(state.total).toBeGreaterThan(0);
+ expect(state.unreadCount).toBe(5);
+ expect(state.isLoading).toBe(false);
+ });
+ });
+
+ describe('FE-NOTIF-002: Pagination — loading more appends to list', () => {
+ it('appends additional notifications when fetchNotifications is called again', async () => {
+ // First page
+ await useInAppNotificationStore.getState().fetchNotifications(true);
+ const firstPageCount = useInAppNotificationStore.getState().notifications.length;
+ const total = useInAppNotificationStore.getState().total;
+
+ // Only test pagination if there are more items
+ if (firstPageCount < total) {
+ await useInAppNotificationStore.getState().fetchNotifications();
+ const state = useInAppNotificationStore.getState();
+ expect(state.notifications.length).toBeGreaterThan(firstPageCount);
+ } else {
+ // All notifications fit in one page
+ expect(firstPageCount).toBe(total);
+ }
+ });
+ });
+
+ describe('FE-NOTIF-003: markRead(id)', () => {
+ it('updates is_read to true for the notification', async () => {
+ // Seed with an unread notification
+ const unread = buildRawNotif({ id: 42, is_read: 0 });
+ useInAppNotificationStore.setState({
+ notifications: [{ ...unread, title_params: {}, text_params: {}, is_read: false }] as never,
+ unreadCount: 1,
+ });
+
+ await useInAppNotificationStore.getState().markRead(42);
+ const state = useInAppNotificationStore.getState();
+
+ const notif = state.notifications.find((n) => n.id === 42);
+ expect(notif?.is_read).toBe(true);
+ expect(state.unreadCount).toBe(0);
+ });
+ });
+
+ describe('FE-NOTIF-004: handleNewNotification() prepends to list', () => {
+ it('adds a new notification at the start of the list', () => {
+ // Seed existing notifications
+ useInAppNotificationStore.setState({
+ notifications: [{ ...buildRawNotif({ id: 1 }), title_params: {}, text_params: {}, is_read: false }] as never,
+ total: 1,
+ unreadCount: 1,
+ });
+
+ const newRaw = buildRawNotif({ id: 99 });
+ useInAppNotificationStore.getState().handleNewNotification(newRaw as never);
+
+ const state = useInAppNotificationStore.getState();
+ expect(state.notifications[0].id).toBe(99);
+ expect(state.notifications.length).toBe(2);
+ expect(state.total).toBe(2);
+ expect(state.unreadCount).toBe(2);
+ });
+ });
+
+ describe('FE-NOTIF-005: handleUpdatedNotification() updates existing notification', () => {
+ it('replaces the notification in the list', () => {
+ useInAppNotificationStore.setState({
+ notifications: [{ ...buildRawNotif({ id: 7, is_read: 0 }), title_params: {}, text_params: {}, is_read: false }] as never,
+ total: 1,
+ unreadCount: 1,
+ });
+
+ const updated = buildRawNotif({ id: 7, is_read: 1 });
+ useInAppNotificationStore.getState().handleUpdatedNotification(updated as never);
+
+ const state = useInAppNotificationStore.getState();
+ const notif = state.notifications.find((n) => n.id === 7);
+ expect(notif?.is_read).toBe(true);
+ });
+ });
+
+ describe('FE-NOTIF-006: Unread count is correct', () => {
+ it('unreadCount matches the number of unread notifications', async () => {
+ await useInAppNotificationStore.getState().fetchNotifications(true);
+ const state = useInAppNotificationStore.getState();
+
+ // The mock returns 5 unread from the server
+ expect(state.unreadCount).toBe(5);
+ });
+ });
+});
diff --git a/client/tests/unit/stores/permissionsStore.test.ts b/client/tests/unit/stores/permissionsStore.test.ts
new file mode 100644
index 00000000..7f5f88aa
--- /dev/null
+++ b/client/tests/unit/stores/permissionsStore.test.ts
@@ -0,0 +1,110 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { usePermissionsStore, useCanDo } from '../../../src/store/permissionsStore';
+import { useAuthStore } from '../../../src/store/authStore';
+import { resetAllStores } from '../../helpers/store';
+import { buildUser, buildAdmin } from '../../helpers/factories';
+
+beforeEach(() => {
+ resetAllStores();
+});
+
+describe('permissionsStore', () => {
+ describe('FE-PERMS-001: setPermissions()', () => {
+ it('stores the permission map', () => {
+ const perms = { trip_create: 'everybody', file_upload: 'trip_member' } as const;
+ usePermissionsStore.getState().setPermissions(perms);
+
+ expect(usePermissionsStore.getState().permissions).toEqual(perms);
+ });
+ });
+
+ describe('FE-PERMS-002: useCanDo() — basic allow/deny', () => {
+ it('returns false when user is not authenticated', () => {
+ usePermissionsStore.getState().setPermissions({ trip_create: 'everybody' });
+
+ const { result } = renderHook(() => useCanDo());
+ expect(result.current('trip_create')).toBe(false);
+ });
+
+ it('returns true for "everybody" when user is authenticated', () => {
+ useAuthStore.setState({ user: buildUser(), isAuthenticated: true });
+ usePermissionsStore.getState().setPermissions({ trip_create: 'everybody' });
+
+ const { result } = renderHook(() => useCanDo());
+ expect(result.current('trip_create')).toBe(true);
+ });
+
+ it('returns true when action has no configured permission (default allow)', () => {
+ useAuthStore.setState({ user: buildUser(), isAuthenticated: true });
+ usePermissionsStore.getState().setPermissions({});
+
+ const { result } = renderHook(() => useCanDo());
+ expect(result.current('unconfigured_action')).toBe(true);
+ });
+ });
+
+ describe('Admin user', () => {
+ it('can do anything regardless of configured permissions', () => {
+ useAuthStore.setState({ user: buildAdmin(), isAuthenticated: true });
+ usePermissionsStore.getState().setPermissions({ restricted_action: 'admin' });
+
+ const { result } = renderHook(() => useCanDo());
+ expect(result.current('restricted_action')).toBe(true);
+ });
+ });
+
+ describe('Owner permissions', () => {
+ it('trip_owner level: owner can act, member cannot', () => {
+ const user = buildUser({ id: 42 });
+ useAuthStore.setState({ user, isAuthenticated: true });
+ usePermissionsStore.getState().setPermissions({ delete_trip: 'trip_owner' });
+
+ const { result } = renderHook(() => useCanDo());
+ const trip = { owner_id: 42 }; // user is owner
+ const otherTrip = { owner_id: 99 }; // user is not owner
+
+ expect(result.current('delete_trip', trip)).toBe(true);
+ expect(result.current('delete_trip', otherTrip)).toBe(false);
+ });
+
+ it('trip_owner level: is_owner flag grants access', () => {
+ const user = buildUser({ id: 1 });
+ useAuthStore.setState({ user, isAuthenticated: true });
+ usePermissionsStore.getState().setPermissions({ delete_trip: 'trip_owner' });
+
+ const { result } = renderHook(() => useCanDo());
+ expect(result.current('delete_trip', { is_owner: true })).toBe(true);
+ expect(result.current('delete_trip', { is_owner: false })).toBe(false);
+ });
+ });
+
+ describe('Member permissions', () => {
+ it('trip_member level: members and owners can act, unauthenticated trip context cannot', () => {
+ const user = buildUser({ id: 1 });
+ useAuthStore.setState({ user, isAuthenticated: true });
+ usePermissionsStore.getState().setPermissions({ upload_file: 'trip_member' });
+
+ const { result } = renderHook(() => useCanDo());
+ const asOwner = { owner_id: 1 }; // user is owner
+ const asMember = { owner_id: 99 }; // user is member (trip context provided, not owner)
+ const noTrip = null; // no trip context
+
+ expect(result.current('upload_file', asOwner)).toBe(true);
+ expect(result.current('upload_file', asMember)).toBe(true);
+ expect(result.current('upload_file', noTrip)).toBe(false);
+ });
+ });
+
+ describe('Nobody / admin-only level', () => {
+ it('admin level: regular user is denied even as trip owner', () => {
+ const user = buildUser({ id: 1 });
+ useAuthStore.setState({ user, isAuthenticated: true });
+ usePermissionsStore.getState().setPermissions({ admin_action: 'admin' });
+
+ const { result } = renderHook(() => useCanDo());
+ expect(result.current('admin_action', { owner_id: 1 })).toBe(false);
+ expect(result.current('admin_action')).toBe(false);
+ });
+ });
+});
diff --git a/client/tests/unit/stores/settingsStore.test.ts b/client/tests/unit/stores/settingsStore.test.ts
new file mode 100644
index 00000000..93b06836
--- /dev/null
+++ b/client/tests/unit/stores/settingsStore.test.ts
@@ -0,0 +1,82 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../helpers/msw/server';
+import { useSettingsStore } from '../../../src/store/settingsStore';
+import { resetAllStores } from '../../helpers/store';
+import { buildSettings } from '../../helpers/factories';
+
+beforeEach(() => {
+ resetAllStores();
+});
+
+describe('settingsStore', () => {
+ describe('FE-SETTINGS-001: loadSettings()', () => {
+ it('fetches settings and updates store', async () => {
+ const settings = buildSettings({ default_currency: 'EUR', language: 'de' });
+ server.use(
+ http.get('/api/settings', () => HttpResponse.json({ settings }))
+ );
+
+ await useSettingsStore.getState().loadSettings();
+ const state = useSettingsStore.getState();
+
+ expect(state.settings.default_currency).toBe('EUR');
+ expect(state.settings.language).toBe('de');
+ expect(state.isLoaded).toBe(true);
+ });
+ });
+
+ describe('FE-SETTINGS-002: updateSetting() optimistic update', () => {
+ it('immediately updates local state before API resolves', async () => {
+ // The store's set() is called synchronously before the first await (settingsApi.set)
+ // so state is visible without needing to await the full action.
+ const promise = useSettingsStore.getState().updateSetting('default_currency', 'GBP');
+
+ // Check optimistic state — no await needed here
+ expect(useSettingsStore.getState().settings.default_currency).toBe('GBP');
+
+ // Let the API call finish to avoid dangling promises
+ await promise;
+ });
+ });
+
+ describe('FE-SETTINGS-003: updateSetting() reverts on API failure', () => {
+ it('throws when API fails', async () => {
+ server.use(
+ http.put('/api/settings', () =>
+ HttpResponse.json({ error: 'Server error' }, { status: 500 })
+ )
+ );
+
+ // The store optimistically sets, then throws — the revert is a throw
+ await expect(
+ useSettingsStore.getState().updateSetting('default_currency', 'GBP')
+ ).rejects.toThrow();
+ });
+ });
+
+ describe('FE-SETTINGS-004: Language change', () => {
+ it('updates language field and localStorage', async () => {
+ await useSettingsStore.getState().updateSetting('language', 'fr');
+
+ const state = useSettingsStore.getState();
+ expect(state.settings.language).toBe('fr');
+ expect(localStorage.getItem('app_language')).toBe('fr');
+ });
+ });
+
+ describe('FE-SETTINGS-005: loadSettings failure', () => {
+ it('sets isLoaded: true even on API failure (graceful)', async () => {
+ server.use(
+ http.get('/api/settings', () =>
+ HttpResponse.json({ error: 'Server error' }, { status: 500 })
+ )
+ );
+
+ await useSettingsStore.getState().loadSettings();
+ const state = useSettingsStore.getState();
+
+ expect(state.isLoaded).toBe(true);
+ });
+ });
+});
diff --git a/client/tests/unit/stores/vacayStore.test.ts b/client/tests/unit/stores/vacayStore.test.ts
new file mode 100644
index 00000000..428bd30e
--- /dev/null
+++ b/client/tests/unit/stores/vacayStore.test.ts
@@ -0,0 +1,148 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../helpers/msw/server';
+import { useVacayStore } from '../../../src/store/vacayStore';
+import { resetAllStores } from '../../helpers/store';
+
+beforeEach(() => {
+ resetAllStores();
+});
+
+describe('vacayStore', () => {
+ describe('FE-VACAY-001: loadAll()', () => {
+ it('fetches plan, years, entries, and stats, updates state', async () => {
+ await useVacayStore.getState().loadAll();
+ const state = useVacayStore.getState();
+
+ expect(state.plan).not.toBeNull();
+ expect(state.plan?.id).toBe(1);
+ expect(state.years).toEqual([2025, 2026]);
+ expect(state.entries.length).toBeGreaterThan(0);
+ expect(state.stats.length).toBeGreaterThan(0);
+ expect(state.loading).toBe(false);
+ });
+ });
+
+ describe('FE-VACAY-002: toggleEntry()', () => {
+ it('calls the toggle API then reloads entries and stats', async () => {
+ // Seed selected year
+ useVacayStore.setState({ selectedYear: 2025 });
+
+ let toggled = false;
+ server.use(
+ http.post('/api/addons/vacay/entries/toggle', () => {
+ toggled = true;
+ return HttpResponse.json({ success: true });
+ })
+ );
+
+ await useVacayStore.getState().toggleEntry('2025-06-20');
+
+ expect(toggled).toBe(true);
+ // After toggle, entries are refreshed from MSW (2 entries)
+ expect(useVacayStore.getState().entries.length).toBe(2);
+ });
+ });
+
+ describe('FE-VACAY-003: loadHolidays() — holidays_enabled with calendars', () => {
+ it('populates holidays map when plan has holiday calendars', async () => {
+ // Set plan state with holidays_enabled and a simple (non-regional) calendar
+ useVacayStore.setState({
+ selectedYear: 2025,
+ plan: {
+ id: 1,
+ holidays_enabled: true,
+ holidays_region: null,
+ holiday_calendars: [
+ { id: 1, plan_id: 1, region: 'DE', label: 'Germany', color: '#ef4444', sort_order: 0 },
+ ],
+ block_weekends: true,
+ carry_over_enabled: false,
+ company_holidays_enabled: false,
+ },
+ });
+
+ // Override MSW to return non-regional holidays (no counties)
+ server.use(
+ http.get('/api/addons/vacay/holidays/:year/:country', () =>
+ HttpResponse.json([
+ { date: '2025-12-25', name: 'Christmas', localName: 'Weihnachten', global: true, counties: null },
+ { date: '2025-01-01', name: 'New Year', localName: 'Neujahr', global: true, counties: null },
+ ])
+ )
+ );
+
+ await useVacayStore.getState().loadHolidays(2025);
+ const state = useVacayStore.getState();
+
+ expect(Object.keys(state.holidays).length).toBeGreaterThan(0);
+ expect(state.holidays['2025-12-25']).toBeDefined();
+ expect(state.holidays['2025-12-25'].name).toBe('Christmas');
+ });
+ });
+
+ describe('FE-VACAY-003b: loadHolidays() — holidays not enabled', () => {
+ it('sets holidays to empty map when holidays_enabled is false', async () => {
+ useVacayStore.setState({
+ selectedYear: 2025,
+ plan: {
+ id: 1,
+ holidays_enabled: false,
+ holidays_region: null,
+ holiday_calendars: [],
+ block_weekends: true,
+ carry_over_enabled: false,
+ company_holidays_enabled: false,
+ },
+ });
+
+ await useVacayStore.getState().loadHolidays(2025);
+ expect(useVacayStore.getState().holidays).toEqual({});
+ });
+ });
+
+ describe('FE-VACAY-004a: updatePlan()', () => {
+ it('updates plan and reloads entries, stats, holidays', async () => {
+ // Need existing plan for holiday check in loadHolidays
+ useVacayStore.setState({
+ selectedYear: 2025,
+ plan: {
+ id: 1,
+ holidays_enabled: false,
+ holidays_region: null,
+ holiday_calendars: [],
+ block_weekends: true,
+ carry_over_enabled: false,
+ company_holidays_enabled: false,
+ },
+ });
+
+ await useVacayStore.getState().updatePlan({ holidays_enabled: true });
+ const state = useVacayStore.getState();
+
+ // The MSW handler for PUT /addons/vacay/plan returns holidays_enabled: true
+ expect(state.plan?.holidays_enabled).toBe(true);
+ });
+ });
+
+ describe('FE-VACAY-004b: addYear()', () => {
+ it('adds a year and the years list is updated', async () => {
+ await useVacayStore.getState().addYear(2027);
+ expect(useVacayStore.getState().years).toContain(2027);
+ });
+ });
+
+ describe('FE-VACAY-004c: removeYear()', () => {
+ it('removes a year and updates the years list', async () => {
+ useVacayStore.setState({ years: [2025, 2026], selectedYear: 2026 });
+
+ await useVacayStore.getState().removeYear(2026);
+ const state = useVacayStore.getState();
+
+ // MSW returns [2025] after delete
+ expect(state.years).toEqual([2025]);
+ // selectedYear should shift to the last remaining year
+ expect(state.selectedYear).toBe(2025);
+ });
+ });
+});
diff --git a/client/tests/unit/tripStore.test.ts b/client/tests/unit/tripStore.test.ts
new file mode 100644
index 00000000..bf0009eb
--- /dev/null
+++ b/client/tests/unit/tripStore.test.ts
@@ -0,0 +1,258 @@
+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 } 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('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();
+ });
+ });
+
+ 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, name: '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, { name: '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');
+ });
+ });
+});
diff --git a/client/tests/unit/utils/formatters.test.ts b/client/tests/unit/utils/formatters.test.ts
new file mode 100644
index 00000000..a53b926d
--- /dev/null
+++ b/client/tests/unit/utils/formatters.test.ts
@@ -0,0 +1,102 @@
+import { describe, it, expect } from 'vitest';
+import { formatDate, formatTime, dayTotalCost, currencyDecimals } from '../../../src/utils/formatters';
+
+describe('currencyDecimals', () => {
+ it('returns 0 for zero-decimal currencies', () => {
+ expect(currencyDecimals('JPY')).toBe(0);
+ expect(currencyDecimals('KRW')).toBe(0);
+ expect(currencyDecimals('jpy')).toBe(0); // case-insensitive
+ });
+
+ it('returns 2 for standard currencies', () => {
+ expect(currencyDecimals('EUR')).toBe(2);
+ expect(currencyDecimals('USD')).toBe(2);
+ expect(currencyDecimals('GBP')).toBe(2);
+ });
+});
+
+describe('formatDate', () => {
+ it('returns null for null/undefined input', () => {
+ expect(formatDate(null, 'en-US')).toBeNull();
+ expect(formatDate(undefined, 'en-US')).toBeNull();
+ });
+
+ it('formats a date string and returns a non-empty string', () => {
+ const result = formatDate('2025-06-01', 'en-US');
+ expect(result).not.toBeNull();
+ expect(typeof result).toBe('string');
+ expect(result!.length).toBeGreaterThan(0);
+ });
+
+ it('accepts an optional timeZone parameter without throwing', () => {
+ const result = formatDate('2025-06-01', 'en-US', 'America/New_York');
+ expect(result).not.toBeNull();
+ });
+});
+
+describe('formatTime', () => {
+ it('returns empty string for null/undefined', () => {
+ expect(formatTime(null, 'en-US', '24h')).toBe('');
+ expect(formatTime(undefined, 'en-US', '24h')).toBe('');
+ });
+
+ it('formats 24h time', () => {
+ expect(formatTime('14:30', 'en-US', '24h')).toBe('14:30');
+ expect(formatTime('09:05', 'en-US', '24h')).toBe('09:05');
+ });
+
+ it('appends Uhr suffix for German locale in 24h mode', () => {
+ expect(formatTime('14:30', 'de-DE', '24h')).toBe('14:30 Uhr');
+ });
+
+ it('formats 12h time', () => {
+ expect(formatTime('14:30', 'en-US', '12h')).toBe('2:30 PM');
+ expect(formatTime('00:00', 'en-US', '12h')).toBe('12:00 AM');
+ expect(formatTime('12:00', 'en-US', '12h')).toBe('12:00 PM');
+ expect(formatTime('01:00', 'en-US', '12h')).toBe('1:00 AM');
+ });
+});
+
+describe('dayTotalCost', () => {
+ it('returns null when there are no assignments', () => {
+ expect(dayTotalCost(1, {}, 'EUR')).toBeNull();
+ });
+
+ it('returns null when no places have prices', () => {
+ const assignments = {
+ '1': [
+ { id: 1, day_id: 1, order_index: 0, notes: null, place: { id: 1, trip_id: 1, name: 'P', lat: null, lng: null, description: null, address: null, category_id: null, icon: null, price: null, image_url: null, google_place_id: null, osm_id: null, route_geometry: null, place_time: null, end_time: null, created_at: '' } },
+ ],
+ };
+ expect(dayTotalCost(1, assignments, 'EUR')).toBeNull();
+ });
+
+ it('sums prices across assignments', () => {
+ const assignments = {
+ '1': [
+ { id: 1, day_id: 1, order_index: 0, notes: null, place: { id: 1, trip_id: 1, name: 'A', lat: null, lng: null, description: null, address: null, category_id: null, icon: null, price: '20', image_url: null, google_place_id: null, osm_id: null, route_geometry: null, place_time: null, end_time: null, created_at: '' } },
+ { id: 2, day_id: 1, order_index: 1, notes: null, place: { id: 2, trip_id: 1, name: 'B', lat: null, lng: null, description: null, address: null, category_id: null, icon: null, price: '30', image_url: null, google_place_id: null, osm_id: null, route_geometry: null, place_time: null, end_time: null, created_at: '' } },
+ ],
+ };
+ expect(dayTotalCost(1, assignments, 'EUR')).toBe('50 EUR');
+ });
+
+ it('ignores non-numeric price strings', () => {
+ const assignments = {
+ '1': [
+ { id: 1, day_id: 1, order_index: 0, notes: null, place: { id: 1, trip_id: 1, name: 'A', lat: null, lng: null, description: null, address: null, category_id: null, icon: null, price: 'free', image_url: null, google_place_id: null, osm_id: null, route_geometry: null, place_time: null, end_time: null, created_at: '' } },
+ ],
+ };
+ expect(dayTotalCost(1, assignments, 'EUR')).toBeNull();
+ });
+
+ it('uses the dayId key to look up assignments', () => {
+ const assignments = {
+ '2': [
+ { id: 3, day_id: 2, order_index: 0, notes: null, place: { id: 3, trip_id: 1, name: 'C', lat: null, lng: null, description: null, address: null, category_id: null, icon: null, price: '10', image_url: null, google_place_id: null, osm_id: null, route_geometry: null, place_time: null, end_time: null, created_at: '' } },
+ ],
+ };
+ expect(dayTotalCost(1, assignments, 'USD')).toBeNull();
+ expect(dayTotalCost(2, assignments, 'USD')).toBe('10 USD');
+ });
+});
diff --git a/client/tests/unit/utils/reorder.test.ts b/client/tests/unit/utils/reorder.test.ts
new file mode 100644
index 00000000..50c7f27b
--- /dev/null
+++ b/client/tests/unit/utils/reorder.test.ts
@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest';
+import { swapItems } from '../../../src/utils/reorder';
+
+// FE-UTIL-020 onwards
+
+const items = [
+ { id: 10 },
+ { id: 20 },
+ { id: 30 },
+ { id: 40 },
+];
+
+describe('swapItems', () => {
+ it('FE-UTIL-020: swaps item up with its predecessor', () => {
+ const result = swapItems(items, 1, 'up');
+ expect(result).toEqual([20, 10, 30, 40]);
+ });
+
+ it('FE-UTIL-021: swaps item down with its successor', () => {
+ const result = swapItems(items, 1, 'down');
+ expect(result).toEqual([10, 30, 20, 40]);
+ });
+
+ it('FE-UTIL-022: returns null when moving first item up (out of bounds)', () => {
+ expect(swapItems(items, 0, 'up')).toBeNull();
+ });
+
+ it('FE-UTIL-023: returns null when moving last item down (out of bounds)', () => {
+ expect(swapItems(items, items.length - 1, 'down')).toBeNull();
+ });
+
+ it('FE-UTIL-024: swaps first and second items when moving index 1 up', () => {
+ const result = swapItems(items, 1, 'up');
+ expect(result![0]).toBe(20);
+ expect(result![1]).toBe(10);
+ });
+
+ it('FE-UTIL-025: returns an array of IDs (not objects)', () => {
+ const result = swapItems(items, 0, 'down');
+ expect(Array.isArray(result)).toBe(true);
+ expect(typeof result![0]).toBe('number');
+ });
+
+ it('FE-UTIL-026: does not mutate the original array', () => {
+ const original = [{ id: 1 }, { id: 2 }, { id: 3 }];
+ const snapshot = original.map((o) => o.id);
+ swapItems(original, 0, 'down');
+ expect(original.map((o) => o.id)).toEqual(snapshot);
+ });
+
+ it('FE-UTIL-027: returns null for a single-element array moving down', () => {
+ expect(swapItems([{ id: 5 }], 0, 'down')).toBeNull();
+ });
+
+ it('FE-UTIL-028: returns null for a single-element array moving up', () => {
+ expect(swapItems([{ id: 5 }], 0, 'up')).toBeNull();
+ });
+
+ it('FE-UTIL-029: swaps last two items when moving second-to-last down', () => {
+ const result = swapItems(items, items.length - 2, 'down');
+ expect(result).toEqual([10, 20, 40, 30]);
+ });
+});
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 81cc7b93..e2a6dd4d 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -20,5 +20,5 @@
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true
},
- "include": ["src"]
+ "include": ["src", "tests"]
}
diff --git a/client/vitest.config.ts b/client/vitest.config.ts
new file mode 100644
index 00000000..41d026f2
--- /dev/null
+++ b/client/vitest.config.ts
@@ -0,0 +1,29 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+ plugins: [react()],
+ test: {
+ root: '.',
+ globals: true,
+ environment: 'jsdom',
+ include: [
+ 'tests/**/*.test.{ts,tsx}',
+ 'src/**/*.test.{ts,tsx}',
+ ],
+ setupFiles: ['tests/setup.ts'],
+ testTimeout: 15000,
+ hookTimeout: 15000,
+ pool: 'forks',
+ silent: false,
+ reporters: ['verbose'],
+ coverage: {
+ provider: 'v8',
+ reporter: ['lcov', 'text'],
+ reportsDirectory: './coverage',
+ include: ['src/**/*.{ts,tsx}'],
+ exclude: ['src/main.tsx', 'src/vite-env.d.ts'],
+ },
+ css: false,
+ },
+});