test: comprehensive Journey test suite — 89.5% new code coverage

Server (172 tests): - journeyService unit tests (87 tests): CRUD, access control, sync, photos, contributors - journeyShareService unit tests (20 tests): share links, token validation, public access - journey integration tests (45 tests): all API routes, auth, permissions, edge cases - Test helpers: journey factories, RESET_TABLES updated Client (340+ tests): - journeyStore tests (15 tests): all store actions and state management - JourneyPage tests (20 tests): frontpage, create flow, suggestions, navigation - JourneyDetailPage tests (94 tests): all sub-components, entry editor, settings, share links, contributors, gallery, map, trip linking - JourneyPublicPage tests (18 tests): public view, tabs, restricted access - JourneyBookPDF tests (6 tests): PDF generation - BottomNav tests (9 tests): profile sheet, navigation - PhotoLightbox tests (8 tests): keyboard nav, counter - JourneyMap tests (12 tests): markers, polylines, zoom - Component tests: moodConfig, stripMarkdown, MarkdownToolbar, JournalBody, MobileTopHeader - DashboardPage tests (32 tests): spotlight card, quick actions, widget settings SonarQube: exclude unused MemoriesPanel from coverage (dead code, moved to Journey)
2026-06-22 14:51:45 +00:00 · 2026-04-12 01:19:53 +02:00
parent 2d9f545c57
commit de157cb87b
21 changed files with 8943 additions and 16 deletions
@@ -0,0 +1,229 @@
+// FE-COMP-JOURNEYMAP-001 to FE-COMP-JOURNEYMAP-006
+
+vi.mock('../../api/websocket', () => ({
+  connect: vi.fn(),
+  disconnect: vi.fn(),
+  getSocketId: vi.fn(() => null),
+  setRefetchCallback: vi.fn(),
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+}));
+
+// Leaflet does not work in jsdom — mock the entire library
+vi.mock('leaflet', () => {
+  const mockMarker = {
+    addTo: vi.fn().mockReturnThis(),
+    bindTooltip: vi.fn().mockReturnThis(),
+    on: vi.fn().mockReturnThis(),
+    setIcon: vi.fn(),
+    setZIndexOffset: vi.fn(),
+    getLatLng: vi.fn(() => ({ lat: 0, lng: 0 })),
+  };
+  const mockMap = {
+    remove: vi.fn(),
+    invalidateSize: vi.fn(),
+    fitBounds: vi.fn(),
+    setView: vi.fn(),
+    flyTo: vi.fn(),
+    getZoom: vi.fn(() => 10),
+    zoomIn: vi.fn(),
+    zoomOut: vi.fn(),
+  };
+  return {
+    default: {
+      map: vi.fn(() => mockMap),
+      tileLayer: vi.fn(() => ({ addTo: vi.fn() })),
+      marker: vi.fn(() => mockMarker),
+      polyline: vi.fn(() => ({ addTo: vi.fn() })),
+      divIcon: vi.fn(() => ({})),
+      latLngBounds: vi.fn(() => ({})),
+    },
+    map: vi.fn(() => mockMap),
+    tileLayer: vi.fn(() => ({ addTo: vi.fn() })),
+    marker: vi.fn(() => mockMarker),
+    polyline: vi.fn(() => ({ addTo: vi.fn() })),
+    divIcon: vi.fn(() => ({})),
+    latLngBounds: vi.fn(() => ({})),
+  };
+});
+
+import React from 'react';
+import { render } from '../../../tests/helpers/render';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { useSettingsStore } from '../../store/settingsStore';
+import { buildSettings } from '../../../tests/helpers/factories';
+import L from 'leaflet';
+import JourneyMap from './JourneyMap';
+import type { JourneyMapHandle } from './JourneyMap';
+
+const entriesWithCoords = [
+  { id: 'e1', lat: 48.8566, lng: 2.3522, title: 'Paris', mood: null, entry_date: '2025-06-01' },
+  { id: 'e2', lat: 52.52, lng: 13.405, title: 'Berlin', mood: null, entry_date: '2025-06-02' },
+];
+
+const entriesWithoutCoords = [
+  { id: 'e3', lat: 0, lng: 0, title: 'Unknown Place', mood: null, entry_date: '2025-06-03' },
+];
+
+const mixedEntries = [
+  ...entriesWithCoords,
+  ...entriesWithoutCoords,
+];
+
+beforeEach(() => {
+  resetAllStores();
+  seedStore(useSettingsStore, { settings: buildSettings() });
+  vi.clearAllMocks();
+});
+
+describe('JourneyMap', () => {
+  it('FE-COMP-JOURNEYMAP-001: renders map container', () => {
+    const { container } = render(
+      <JourneyMap checkins={[]} entries={entriesWithCoords} />
+    );
+    // The component renders a div with a child div ref for the Leaflet map
+    expect(container.firstChild).toBeInTheDocument();
+    expect(L.map).toHaveBeenCalled();
+  });
+
+  it('FE-COMP-JOURNEYMAP-002: renders markers for entries with coordinates', () => {
+    render(
+      <JourneyMap checkins={[]} entries={entriesWithCoords} />
+    );
+    // Two entries with valid lat/lng should produce two markers
+    expect(L.marker).toHaveBeenCalledTimes(2);
+  });
+
+  it('FE-COMP-JOURNEYMAP-003: does not render markers for entries without coordinates', () => {
+    render(
+      <JourneyMap checkins={[]} entries={entriesWithoutCoords} />
+    );
+    // Entry with lat=0 and lng=0 is filtered out by buildMarkerItems (if (e.lat && e.lng))
+    expect(L.marker).not.toHaveBeenCalled();
+  });
+
+  it('FE-COMP-JOURNEYMAP-004: renders polyline connecting entries', () => {
+    render(
+      <JourneyMap checkins={[]} entries={entriesWithCoords} />
+    );
+    // With 2+ marker items, a route polyline is drawn
+    expect(L.polyline).toHaveBeenCalled();
+  });
+
+  it('FE-COMP-JOURNEYMAP-005: shows entry title in marker tooltip', () => {
+    render(
+      <JourneyMap checkins={[]} entries={entriesWithCoords} />
+    );
+    // Each marker calls bindTooltip with the entry label
+    const mockMarkerInstance = (L.marker as any).mock.results[0].value;
+    expect(mockMarkerInstance.bindTooltip).toHaveBeenCalledWith(
+      'Paris',
+      expect.objectContaining({ direction: 'top' }),
+    );
+  });
+
+  it('FE-COMP-JOURNEYMAP-006: exposes imperative handle (focusMarker)', () => {
+    const ref = React.createRef<JourneyMapHandle>();
+    render(
+      <JourneyMap ref={ref} checkins={[]} entries={entriesWithCoords} />
+    );
+    expect(ref.current).not.toBeNull();
+    expect(typeof ref.current!.focusMarker).toBe('function');
+    expect(typeof ref.current!.highlightMarker).toBe('function');
+  });
+
+  it('FE-COMP-JOURNEYMAP-007: renders SVG pin markers via divIcon', () => {
+    render(
+      <JourneyMap checkins={[]} entries={entriesWithCoords} />
+    );
+    // Each marker is created with L.divIcon containing SVG html
+    expect(L.divIcon).toHaveBeenCalledTimes(2);
+    const firstCall = (L.divIcon as any).mock.calls[0][0];
+    expect(firstCall.html).toContain('<svg');
+    expect(firstCall.html).toContain('</svg>');
+    // Marker index label "1" for first entry
+    expect(firstCall.html).toContain('>1<');
+  });
+
+  it('FE-COMP-JOURNEYMAP-008: renders markers with mood-based entry labels', () => {
+    const entriesWithMood = [
+      { id: 'e1', lat: 48.8566, lng: 2.3522, title: 'Happy Paris', mood: 'happy', entry_date: '2025-06-01' },
+      { id: 'e2', lat: 52.52, lng: 13.405, title: 'Sad Berlin', mood: 'sad', entry_date: '2025-06-02' },
+    ];
+    render(
+      <JourneyMap checkins={[]} entries={entriesWithMood} />
+    );
+    // Markers are still created (mood does not prevent rendering)
+    expect(L.marker).toHaveBeenCalledTimes(2);
+    // Tooltips use the entry titles
+    const mockMarker1 = (L.marker as any).mock.results[0].value;
+    expect(mockMarker1.bindTooltip).toHaveBeenCalledWith(
+      'Happy Paris',
+      expect.objectContaining({ direction: 'top' }),
+    );
+    const mockMarker2 = (L.marker as any).mock.results[1].value;
+    expect(mockMarker2.bindTooltip).toHaveBeenCalledWith(
+      'Sad Berlin',
+      expect.objectContaining({ direction: 'top' }),
+    );
+  });
+
+  it('FE-COMP-JOURNEYMAP-009: draws route polyline connecting multiple markers', () => {
+    const threeEntries = [
+      { id: 'e1', lat: 48.8566, lng: 2.3522, title: 'Paris', mood: null, entry_date: '2025-06-01' },
+      { id: 'e2', lat: 52.52, lng: 13.405, title: 'Berlin', mood: null, entry_date: '2025-06-02' },
+      { id: 'e3', lat: 41.9028, lng: 12.4964, title: 'Rome', mood: null, entry_date: '2025-06-03' },
+    ];
+    render(
+      <JourneyMap checkins={[]} entries={threeEntries} />
+    );
+    // Route polyline is drawn for items.length > 1
+    expect(L.polyline).toHaveBeenCalled();
+    const polylineCall = (L.polyline as any).mock.calls[0];
+    // Should contain coordinates for all three entries
+    expect(polylineCall[0].length).toBe(3);
+    // Verify dashed style
+    expect(polylineCall[1]).toMatchObject({ dashArray: '4 6' });
+  });
+
+  it('FE-COMP-JOURNEYMAP-010: fitBounds is called for auto-zoom', () => {
+    // Trigger requestAnimationFrame synchronously
+    const origRAF = globalThis.requestAnimationFrame;
+    globalThis.requestAnimationFrame = (cb: FrameRequestCallback) => { cb(0); return 0; };
+
+    render(
+      <JourneyMap checkins={[]} entries={entriesWithCoords} />
+    );
+
+    const mockMap = (L.map as any).mock.results[0].value;
+    // fitBounds is called inside requestAnimationFrame with the collected coordinates
+    expect(mockMap.fitBounds).toHaveBeenCalled();
+    expect(L.latLngBounds).toHaveBeenCalled();
+
+    globalThis.requestAnimationFrame = origRAF;
+  });
+
+  it('FE-COMP-JOURNEYMAP-011: single entry creates marker but no polyline', () => {
+    const singleEntry = [
+      { id: 'e1', lat: 48.8566, lng: 2.3522, title: 'Solo Paris', mood: null, entry_date: '2025-06-01' },
+    ];
+    render(
+      <JourneyMap checkins={[]} entries={singleEntry} />
+    );
+    // One marker created
+    expect(L.marker).toHaveBeenCalledTimes(1);
+    // No route polyline — polyline is only drawn when items.length > 1
+    expect(L.polyline).not.toHaveBeenCalled();
+  });
+
+  it('FE-COMP-JOURNEYMAP-012: renders zoom control buttons', () => {
+    const { container } = render(
+      <JourneyMap checkins={[]} entries={entriesWithCoords} />
+    );
+    // The component renders zoom in (+) and zoom out (−) buttons
+    const buttons = container.querySelectorAll('button');
+    expect(buttons.length).toBe(2);
+    expect(buttons[0].textContent).toBe('+');
+    expect(buttons[1].textContent).toBe('−');
+  });
+});