mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-18 21:16:47 +00:00
Maurice
4a8d77c59c
Three reports from the same week, all "the layout is in my way". #2247 — the Plan tab shows both side panels from 768px up, unconditionally. A Pixel 10 Pro Fold unfolded is ~860 CSS px, so 340 + 300 of panel left the map a 200px strip; those same widths became fit padding, shrinking the framing window to 140px and opening the camera two zoom levels out over half of East Asia. The floating POI/compass cluster is centred on the viewport at z-25, which at that width put it on top of both collapse tabs (z-1 inside z-20 containers) and on the Add Place/Activity button — and its pills set pointer-events: auto, so it ate the taps meant for them. The resize handles are mousedown-only, so a touch user could not narrow anything either. Between 768 and 1023px only one panel is open now, the day plan first, the places list one tap away — the Google Maps shape the reporter asked for. The collapse flags stay the wide-layout state, so a fold back restores what was there, and a marker tap reopening "both" no longer re-crowds the screen. The control cluster centres on the corridor the panels leave (the formula PlaceInspector and DayDetailPanel already use), the tabs finally have accessible names, the dead resize handles go, and a panel dragged to 520px on a desktop is clamped so the map keeps 360px without touching the stored width. computeMapViewport refuses to frame for less than a third of the box, so absurd padding can never pick the zoom again. #2248 — the public journey hero clips its own overflow to keep its decorative circles from widening the document, which also amputated the language menu at the hero's bottom edge: 8 of 23 locales, the rest unreachable. Both share pages inlined the same menu, so it is one component now, portalled to the body and anchored to its trigger the way CustomSelect is, with a height cap and its own scroll. It closes on Escape and on an outside click, which it never did, and `zh-TW` stops labelling itself 简体中文. #2249 — the note row's pencil/trash pill is absolutely positioned over the row's own reorder chevrons, and a coarse-pointer `opacity: 1 !important` pinned it permanently visible on tablets. On a mouse it was no better: the chevrons are revealed on hover, which is exactly when the opaque pill covers them, so note reordering has never been clickable on any pointer. The pill is gone; the row opens the note the way the phone shell already does, and delete lives in that dialog behind the same confirmation. A link in the note body keeps its own tap, on both shells. Closes #2247 Closes #2248 Closes #2249
4502 lines
244 KiB
TypeScript
4502 lines
244 KiB
TypeScript
// FE-PLANNER-DAYPLAN-001 to FE-PLANNER-DAYPLAN-155
|
||
import { render, screen, waitFor, fireEvent, within } from '../../../tests/helpers/render'
|
||
import userEvent from '@testing-library/user-event'
|
||
import { http, HttpResponse } from 'msw'
|
||
import { server } from '../../../tests/helpers/msw/server'
|
||
import { clearExchangeRateCache } from '../../hooks/useExchangeRates'
|
||
import { useAuthStore } from '../../store/authStore'
|
||
import { useTripStore, type TripStoreState } from '../../store/tripStore'
|
||
import { useSettingsStore } from '../../store/settingsStore'
|
||
import { usePluginStore } from '../../store/pluginStore'
|
||
import { installTouchDragBridge } from '../../utils/touchDragBridge'
|
||
import { resetAllStores, seedStore } from '../../../tests/helpers/store'
|
||
import {
|
||
buildUser, buildTrip, buildDay, buildPlace, buildCategory, buildAssignment, buildDayNote, buildReservation,
|
||
} from '../../../tests/helpers/factories'
|
||
import type { Accommodation, Reservation } from '../../types'
|
||
import { calculateRouteWithLegs, generateCoMapsUrl, generateGoogleMapsUrl } from '../Map/RouteCalculator'
|
||
import DayPlanSidebar from './DayPlanSidebar'
|
||
import { makeMarkerDraggable } from '../Map/markerDrag'
|
||
|
||
// ── Hoisted mock state (accessible in vi.mock factories) ────────────────────
|
||
const mockDayNotesState = vi.hoisted(() => ({
|
||
noteUi: {} as Record<string, any>,
|
||
dayNotes: {} as Record<string, any[]>,
|
||
setNoteUi: vi.fn(),
|
||
noteInputRef: { current: null } as { current: null },
|
||
openAddNote: vi.fn(),
|
||
openEditNote: vi.fn(),
|
||
cancelNote: vi.fn(),
|
||
saveNote: vi.fn(),
|
||
deleteNote: vi.fn(),
|
||
moveNote: vi.fn(),
|
||
}))
|
||
|
||
// ── Module mocks ────────────────────────────────────────────────────────────
|
||
|
||
vi.mock('../../api/client', async (importOriginal) => {
|
||
const actual = await importOriginal() as any
|
||
return {
|
||
...actual,
|
||
assignmentsApi: {
|
||
reorder: vi.fn().mockResolvedValue({}),
|
||
remove: vi.fn().mockResolvedValue({}),
|
||
updateTime: vi.fn().mockResolvedValue({}),
|
||
updateTransport: vi.fn().mockResolvedValue({}),
|
||
},
|
||
reservationsApi: {
|
||
list: vi.fn().mockResolvedValue({ reservations: [] }),
|
||
updatePositions: vi.fn().mockResolvedValue({}),
|
||
},
|
||
daysApi: {
|
||
...actual.daysApi,
|
||
updateTransport: vi.fn().mockResolvedValue({}),
|
||
},
|
||
}
|
||
})
|
||
|
||
vi.mock('../PDF/TripPDF', () => ({ downloadTripPDF: vi.fn().mockResolvedValue(undefined) }))
|
||
|
||
vi.mock('../Map/RouteCalculator', () => ({
|
||
calculateRoute: vi.fn().mockResolvedValue({ distanceText: '5 km', durationText: '1h', coordinates: [] }),
|
||
generateGoogleMapsUrl: vi.fn().mockReturnValue('https://maps.google.com/...'),
|
||
generateCoMapsUrl: vi.fn().mockReturnValue('https://comaps.at/...'),
|
||
optimizeRoute: vi.fn().mockImplementation((places) => places),
|
||
// One leg per waypoint gap; the connector between two stops reads distanceText.
|
||
calculateRouteWithLegs: vi.fn().mockImplementation((waypoints) => Promise.resolve({
|
||
distanceText: '2 km', durationText: '10 min',
|
||
legs: Array.from({ length: Math.max(0, (waypoints?.length ?? 0) - 1) }, () => ({
|
||
distanceText: '2 km', durationText: '10 min', drivingText: '10 min', walkingText: '25 min',
|
||
})),
|
||
})),
|
||
}))
|
||
|
||
// PlaceAvatar needs IntersectionObserver
|
||
class MockIO { observe = vi.fn(); disconnect = vi.fn(); unobserve = vi.fn() }
|
||
beforeAll(() => { (globalThis as any).IntersectionObserver = MockIO })
|
||
|
||
vi.mock('../../services/photoService', () => ({
|
||
getCached: vi.fn(() => null),
|
||
isLoading: vi.fn(() => false),
|
||
fetchPhoto: vi.fn(),
|
||
onThumbReady: vi.fn(() => () => {}),
|
||
}))
|
||
|
||
vi.mock('../../hooks/useDayNotes', () => ({
|
||
useDayNotes: () => mockDayNotesState,
|
||
}))
|
||
|
||
vi.mock('../Weather/WeatherWidget', () => ({
|
||
default: (props: { locationName?: string | null }) => (
|
||
<span data-testid="weather-widget" data-location={props.locationName ?? ''} />
|
||
),
|
||
}))
|
||
|
||
// A stable toast object so tests can assert on the messages the sidebar raises.
|
||
const mockToast = vi.hoisted(() => ({ error: vi.fn(), success: vi.fn(), warning: vi.fn(), info: vi.fn() }))
|
||
|
||
vi.mock('../shared/Toast', () => ({
|
||
useToast: () => mockToast,
|
||
}))
|
||
|
||
// ── Permissions mock ────────────────────────────────────────────────────────
|
||
|
||
// Flipped per test to render the read-only variants of the day rows.
|
||
const mockPermissions = vi.hoisted(() => ({ canEdit: true }))
|
||
|
||
vi.mock('../../store/permissionsStore', async (importOriginal) => {
|
||
const actual = await importOriginal() as any
|
||
return {
|
||
...actual,
|
||
useCanDo: () => () => mockPermissions.canEdit,
|
||
}
|
||
})
|
||
|
||
// ── Default props ───────────────────────────────────────────────────────────
|
||
|
||
const trip = buildTrip({ id: 1, currency: 'EUR' })
|
||
|
||
function makeDefaultProps(overrides = {}) {
|
||
return {
|
||
tripId: 1,
|
||
trip,
|
||
days: [],
|
||
places: [],
|
||
categories: [],
|
||
assignments: {},
|
||
selectedDayId: null,
|
||
selectedPlaceId: null,
|
||
selectedAssignmentId: null,
|
||
onSelectDay: vi.fn(),
|
||
onPlaceClick: vi.fn(),
|
||
onDayDetail: vi.fn(),
|
||
accommodations: [],
|
||
onReorder: vi.fn(),
|
||
onUpdateDayTitle: vi.fn(),
|
||
onRouteCalculated: vi.fn(),
|
||
onAssignToDay: vi.fn(),
|
||
onRemoveAssignment: vi.fn(),
|
||
onEditPlace: vi.fn(),
|
||
onDeletePlace: vi.fn(),
|
||
reservations: [],
|
||
onAddReservation: vi.fn(),
|
||
onNavigateToFiles: vi.fn(),
|
||
...overrides,
|
||
}
|
||
}
|
||
|
||
// ── Setup ───────────────────────────────────────────────────────────────────
|
||
|
||
// ── Shared helpers for the newer tests ──────────────────────────────────────
|
||
|
||
/** Replace store actions the sidebar captures once, before its first render. */
|
||
function stubTripActions(actions: Record<string, unknown>) {
|
||
useTripStore.setState(actions as unknown as Partial<TripStoreState>)
|
||
}
|
||
|
||
function dayHeader(title: string) {
|
||
return screen.getByText(title).closest('[style*="cursor: pointer"]') as HTMLElement
|
||
}
|
||
|
||
function dragRow(el: HTMLElement | null) {
|
||
return el!.closest('[draggable="true"]') as HTMLElement
|
||
}
|
||
|
||
/** Transport and note rows share the same card margin; legs are not draggable. */
|
||
function cardRow(el: HTMLElement | null) {
|
||
return el!.closest('[style*="margin: 1px 8px"]') as HTMLElement
|
||
}
|
||
|
||
function lockToggle(row: HTMLElement) {
|
||
return row.querySelector('[style*="cursor: pointer"][style*="position: relative"]') as HTMLElement
|
||
}
|
||
|
||
/** The context menu is portalled to body and shares labels with the route tools. */
|
||
function contextMenu() {
|
||
return within(document.querySelector('[style*="z-index: 999999"]') as HTMLElement)
|
||
}
|
||
|
||
const emptyDataTransfer = { setData: vi.fn(), effectAllowed: '', getData: vi.fn(() => '') }
|
||
|
||
beforeEach(() => {
|
||
resetAllStores()
|
||
vi.clearAllMocks()
|
||
mockPermissions.canEdit = true
|
||
// clearAllMocks keeps implementations, so tests that swap the router out would
|
||
// otherwise leak into the ones after them.
|
||
vi.mocked(calculateRouteWithLegs).mockImplementation(waypoints => Promise.resolve({
|
||
coordinates: [], distance: 0, duration: 0,
|
||
// Each leg carries its endpoint coordinates (mirrors the real RouteCalculator), so
|
||
// connector-driven features that read seg.from/seg.to see faithful [lat, lng] pairs.
|
||
legs: Array.from({ length: Math.max(0, (waypoints?.length ?? 0) - 1) }, (_, i) => {
|
||
const a = waypoints[i], b = waypoints[i + 1]
|
||
return {
|
||
mid: [(a.lat + b.lat) / 2, (a.lng + b.lng) / 2] as [number, number],
|
||
from: [a.lat, a.lng] as [number, number], to: [b.lat, b.lng] as [number, number],
|
||
distance: 2000, duration: 600, distanceText: '2 km', durationText: '10 min',
|
||
drivingText: '10 min', walkingText: '25 min',
|
||
}
|
||
}),
|
||
}))
|
||
vi.mocked(generateGoogleMapsUrl).mockReturnValue('https://maps.google.com/...')
|
||
vi.mocked(generateCoMapsUrl).mockReturnValue('https://comaps.at/...')
|
||
sessionStorage.clear()
|
||
localStorage.clear()
|
||
// Cost totals fetch FX rates for their base currency; keep the suite hermetic.
|
||
clearExchangeRateCache()
|
||
server.use(http.get('https://api.frankfurter.dev/v2/rates', () => HttpResponse.json([])))
|
||
// Reset mutable day-notes state
|
||
mockDayNotesState.noteUi = {}
|
||
mockDayNotesState.dayNotes = {}
|
||
seedStore(useAuthStore, { user: buildUser(), isAuthenticated: true })
|
||
seedStore(useTripStore, { trip: buildTrip({ id: 1 }) })
|
||
seedStore(useSettingsStore, { settings: { time_format: '24h', temperature_unit: 'celsius' } } as any)
|
||
})
|
||
|
||
// ── Tests ───────────────────────────────────────────────────────────────────
|
||
|
||
describe('DayPlanSidebar', () => {
|
||
// ── Rendering ───────────────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-001: renders without crashing', () => {
|
||
render(<DayPlanSidebar {...makeDefaultProps()} />)
|
||
expect(document.body).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-002: renders day titles', () => {
|
||
const day = buildDay({ title: 'Amsterdam Day', date: '2025-06-01' })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
|
||
expect(screen.getByText('Amsterdam Day')).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-003: renders day number when title is null', () => {
|
||
const day = buildDay({ title: null, date: '2025-06-01' })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
|
||
expect(screen.getByText(/Day 1/i)).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-004: renders formatted date alongside title', () => {
|
||
const day = buildDay({ date: '2025-06-15', title: 'Day 1' })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
|
||
expect(screen.getByText(/Jun 15|15 Jun/)).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-005: renders multiple days', () => {
|
||
const days = [
|
||
buildDay({ title: 'D1', date: '2025-06-01' }),
|
||
buildDay({ title: 'D2', date: '2025-06-02' }),
|
||
]
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days })} />)
|
||
expect(screen.getByText('D1')).toBeInTheDocument()
|
||
expect(screen.getByText('D2')).toBeInTheDocument()
|
||
})
|
||
|
||
// ── #1330: route tools for a single optimizable place ───────────────────────
|
||
it('FE-PLANNER-DAYPLAN-005b: route tools show for one located place with a bookend hotel (#1330)', () => {
|
||
const place = buildPlace({ name: 'Louvre', lat: 48.86, lng: 2.34 })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const day2 = buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
const accommodations = [{ id: 1, start_day_id: 10, end_day_id: 11, place_lat: 48.85, place_lng: 2.35 }]
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day, day2], places: [place], assignments: { '10': [assignment] },
|
||
accommodations: accommodations as any, selectedDayId: 10,
|
||
})} />)
|
||
// With accommodation optimization on, one located place is routable (hotel → place → hotel),
|
||
// so the route tools (here the Google Maps export button) must be visible.
|
||
expect(screen.getByRole('button', { name: 'Open in Google Maps' })).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-005c: route tools stay hidden for one place with no bookend hotel (#1330 guard)', () => {
|
||
const place = buildPlace({ name: 'Louvre', lat: 48.86, lng: 2.34 })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place], assignments: { '10': [assignment] },
|
||
accommodations: [], selectedDayId: 10,
|
||
})} />)
|
||
// No accommodation to bookend the lone place, so nothing routable — tools stay hidden.
|
||
expect(screen.queryByRole('button', { name: 'Open in Google Maps' })).not.toBeInTheDocument()
|
||
})
|
||
|
||
// ── #1297: route tools for a hotel-to-hotel transfer day with no stops ───────
|
||
it('FE-PLANNER-DAYPLAN-005d: route tools show for a two-hotel transfer day with no places (#1297)', () => {
|
||
const dayA = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const dayTransfer = buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' })
|
||
const dayB = buildDay({ id: 12, date: '2025-06-03', title: 'Day 3' })
|
||
// Check out of hotel A (slept there) and into hotel B on the same day — two distinct
|
||
// located hotels, zero places. The map draws A → B, so the tools must be reachable.
|
||
const accommodations = [
|
||
{ id: 1, start_day_id: 10, end_day_id: 11, place_lat: 48.85, place_lng: 2.35 },
|
||
{ id: 2, start_day_id: 11, end_day_id: 12, place_lat: 51.50, place_lng: -0.12 },
|
||
]
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [dayA, dayTransfer, dayB], accommodations: accommodations as any, selectedDayId: 11,
|
||
})} />)
|
||
expect(screen.getByRole('button', { name: 'Open in Google Maps' })).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-005e: no route tools on a same-hotel rest day with no places (#1297 guard)', () => {
|
||
const dayA = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const dayRest = buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' })
|
||
const dayC = buildDay({ id: 12, date: '2025-06-03', title: 'Day 3' })
|
||
// One hotel spanning all three days: the middle day has morning === evening, so there is
|
||
// no transfer leg to draw and the tools stay hidden.
|
||
const accommodations = [{ id: 1, start_day_id: 10, end_day_id: 12, place_lat: 48.85, place_lng: 2.35 }]
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [dayA, dayRest, dayC], accommodations: accommodations as any, selectedDayId: 11,
|
||
})} />)
|
||
expect(screen.queryByRole('button', { name: 'Open in Google Maps' })).not.toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-005f: no route tools on a plain arrival day with no places (#1297 guard)', () => {
|
||
const dayArrive = buildDay({ id: 11, date: '2025-06-02', title: 'Day 1' })
|
||
const dayNext = buildDay({ id: 12, date: '2025-06-03', title: 'Day 2' })
|
||
// Only a check-in today (no hotel slept in last night, no places): morning === evening,
|
||
// so there is no hotel → hotel leg and the tools stay hidden.
|
||
const accommodations = [{ id: 2, start_day_id: 11, end_day_id: 12, place_lat: 51.50, place_lng: -0.12 }]
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [dayArrive, dayNext], accommodations: accommodations as any, selectedDayId: 11,
|
||
})} />)
|
||
expect(screen.queryByRole('button', { name: 'Open in Google Maps' })).not.toBeInTheDocument()
|
||
})
|
||
|
||
// ── Day expansion/collapse ──────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-006: days are expanded by default', () => {
|
||
const place = buildPlace({ name: 'Eiffel Tower' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
const assignments = { '10': [assignment] }
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments })} />)
|
||
expect(screen.getByText('Eiffel Tower')).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-007: clicking chevron collapses that day', async () => {
|
||
const user = userEvent.setup()
|
||
const place = buildPlace({ name: 'Eiffel Tower' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
const assignments = { '10': [assignment] }
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments })} />)
|
||
// The chevron button immediately follows the "Add Note" button (which has a title attribute)
|
||
const addNoteBtn = screen.getByLabelText('Add Note')
|
||
const chevron = addNoteBtn.nextElementSibling as HTMLButtonElement
|
||
expect(chevron).toBeTruthy()
|
||
await user.click(chevron)
|
||
expect(screen.queryByText('Eiffel Tower')).not.toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-008: clicking chevron again re-expands', async () => {
|
||
const user = userEvent.setup()
|
||
const place = buildPlace({ name: 'Eiffel Tower' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
const assignments = { '10': [assignment] }
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments })} />)
|
||
const getChevron = () => screen.getByLabelText('Add Note').nextElementSibling as HTMLButtonElement
|
||
await user.click(getChevron()) // collapse
|
||
expect(screen.queryByText('Eiffel Tower')).not.toBeInTheDocument()
|
||
await user.click(getChevron()) // re-expand
|
||
expect(screen.getByText('Eiffel Tower')).toBeInTheDocument()
|
||
})
|
||
|
||
// ── Day selection ───────────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-009: clicking day header calls onSelectDay', async () => {
|
||
const user = userEvent.setup()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'My Day' })
|
||
const onSelectDay = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], onSelectDay })} />)
|
||
await user.click(screen.getByText('My Day'))
|
||
expect(onSelectDay).toHaveBeenCalledWith(10)
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-209: clicking the selected day header again deselects it', async () => {
|
||
const user = userEvent.setup()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'My Day' })
|
||
const onSelectDay = vi.fn()
|
||
const onDayDetail = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], selectedDayId: 10, onSelectDay, onDayDetail })} />)
|
||
await user.click(screen.getByText('My Day'))
|
||
expect(onSelectDay).toHaveBeenCalledWith(null)
|
||
expect(onDayDetail).toHaveBeenCalledWith(null)
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-010: selectedDayId renders without error', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'My Day' })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], selectedDayId: 10 })} />)
|
||
expect(screen.getByText('My Day')).toBeInTheDocument()
|
||
})
|
||
|
||
// ── Assigned places ─────────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-011: assigned place name rendered in day card', () => {
|
||
const place = buildPlace({ name: 'Louvre Museum' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments: { '10': [assignment] } })} />)
|
||
expect(screen.getByText('Louvre Museum')).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-012: assigned place time is shown when set', () => {
|
||
const place = buildPlace({ name: 'Louvre Museum', place_time: '10:00' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments: { '10': [assignment] } })} />)
|
||
expect(screen.getByText(/10:00/)).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-012b: the day-specific assignment note shows as a caption line in the row (#2163)', () => {
|
||
const place = buildPlace({ name: 'Louvre Museum' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place, notes: 'Book the 10:00 timed entry' })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments: { '10': [assignment] } })} />)
|
||
expect(screen.getByText('Book the 10:00 timed entry')).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-013: clicking a place calls onPlaceClick', async () => {
|
||
const user = userEvent.setup()
|
||
const place = buildPlace({ id: 42, name: 'Louvre Museum' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
const onPlaceClick = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments: { '10': [assignment] }, onPlaceClick })} />)
|
||
await user.click(screen.getByText('Louvre Museum'))
|
||
expect(onPlaceClick).toHaveBeenCalledWith(42, 99)
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-014: selectedPlaceId renders the place without error', () => {
|
||
const place = buildPlace({ id: 42, name: 'Louvre Museum' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments: { '10': [assignment] }, selectedPlaceId: 42 })} />)
|
||
expect(screen.getByText('Louvre Museum')).toBeInTheDocument()
|
||
})
|
||
|
||
// ── Transit search button (#1065 — replaced the rename pencil; renaming
|
||
// moved next to the day name in the day detail panel) ─────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-015: transit button opens the route search for the day', async () => {
|
||
const user = userEvent.setup()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const onPlanTransit = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], onPlanTransit })} />)
|
||
await user.click(screen.getByLabelText('Public transit'))
|
||
expect(onPlanTransit).toHaveBeenCalledWith(10)
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-016: transit button is absent without the onPlanTransit prop', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
|
||
expect(screen.queryByLabelText('Public transit')).not.toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-017: the day header no longer has a rename pencil (#1065)', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Original Title' })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], onPlanTransit: vi.fn() })} />)
|
||
expect(screen.queryByLabelText('Edit')).not.toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-104: a transit journey renders line chips and opens its itinerary view, not the edit form (#1065)', async () => {
|
||
const user = userEvent.setup()
|
||
const onEditTransport = vi.fn()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const res = {
|
||
...buildReservation({
|
||
id: 300, type: 'transit', title: 'Fernsehturm → Zoo',
|
||
reservation_time: '2025-06-01T08:30:00', day_id: 10,
|
||
}),
|
||
metadata: {
|
||
transit: {
|
||
provider: 'transitous', duration: 1800, transfers: 1, walk_seconds: 240,
|
||
legs: [
|
||
{ mode: 'WALK', duration: 240, from: { name: 'Start' }, to: { name: 'Alexanderplatz' } },
|
||
{ mode: 'SUBWAY', line: 'U2', line_color: '#FF3300', line_text_color: '#FFFFFF', headsign: 'Ruhleben', duration: 1440, stops: 6, from: { name: 'Alexanderplatz', time: '08:36' }, to: { name: 'Zoo', time: '09:00' } },
|
||
],
|
||
},
|
||
},
|
||
}
|
||
const onOpenTransit = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], reservations: [res as any], onEditTransport, onOpenTransit })} />)
|
||
// Line chip + transfer summary render inline in the timeline row; the
|
||
// title uses an arrow icon, so its parts are separate text nodes.
|
||
expect(screen.getByText('U2')).toBeInTheDocument()
|
||
// Transfer counts stay out of the compact row — the chips say it all.
|
||
expect(screen.queryByText(/1 transfers/)).not.toBeInTheDocument()
|
||
// Clicking the row opens the journey view — not the edit form.
|
||
await user.click(screen.getByText('Fernsehturm'))
|
||
expect(onEditTransport).not.toHaveBeenCalled()
|
||
expect(onOpenTransit).toHaveBeenCalledWith(expect.objectContaining({ id: 300 }))
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-105: the transit row folds its itinerary out inline (#1065)', async () => {
|
||
const user = userEvent.setup()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const res = {
|
||
...buildReservation({ id: 301, type: 'transit', title: 'A → B', reservation_time: '2025-06-01T08:30:00', day_id: 10 }),
|
||
metadata: {
|
||
transit: {
|
||
provider: 'transitous', duration: 1800, transfers: 1, walk_seconds: 240,
|
||
legs: [
|
||
{ mode: 'WALK', duration: 240, from: { name: 'Start' }, to: { name: 'Alexanderplatz' } },
|
||
{ mode: 'SUBWAY', line: 'U2', line_color: '#FF3300', headsign: 'Ruhleben', duration: 1440, stops: 6, from: { name: 'Alexanderplatz', time: '08:36', track: '2' }, to: { name: 'Zoo', time: '09:00' } },
|
||
],
|
||
},
|
||
},
|
||
endpoints: [
|
||
{ role: 'from', sequence: 0, name: 'A', code: null, lat: 1, lng: 2, timezone: null, local_date: null, local_time: null },
|
||
{ role: 'to', sequence: 1, name: 'B', code: null, lat: 3, lng: 4, timezone: null, local_date: null, local_time: null },
|
||
],
|
||
}
|
||
const onToggleConnection = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], reservations: [res as any], onOpenTransit: vi.fn(), onToggleConnection, visibleConnectionIds: [] })} />)
|
||
// No map-connections toggle on transit rows — the expander replaces it.
|
||
expect(screen.queryByTitle(/connections/i)).not.toBeInTheDocument()
|
||
// Collapsed: no stop names beyond the chips.
|
||
expect(screen.queryByText('Alexanderplatz')).not.toBeInTheDocument()
|
||
await user.click(screen.getByLabelText('Expand'))
|
||
expect(await screen.findByText('Alexanderplatz')).toBeInTheDocument()
|
||
expect(screen.getByText(/Platform 2/)).toBeInTheDocument()
|
||
await user.click(screen.getByLabelText('Collapse'))
|
||
expect(screen.queryByText('Alexanderplatz')).not.toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-106: the toolbar button shows "show all" and calls onToggleAllConnections when not all routes are shown', async () => {
|
||
const user = userEvent.setup()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const res1 = {
|
||
...buildReservation({ id: 401, type: 'flight' }),
|
||
endpoints: [
|
||
{ role: 'from', sequence: 0, name: 'A', code: null, lat: 1, lng: 2, timezone: null, local_time: null, local_date: null },
|
||
{ role: 'to', sequence: 1, name: 'B', code: null, lat: 3, lng: 4, timezone: null, local_time: null, local_date: null },
|
||
],
|
||
}
|
||
const onToggleAllConnections = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], reservations: [res1 as any],
|
||
visibleConnectionIds: [], onToggleConnection: vi.fn(),
|
||
allConnectionsShown: false, onToggleAllConnections,
|
||
})} />)
|
||
await user.click(screen.getByLabelText('Show all booking routes'))
|
||
expect(onToggleAllConnections).toHaveBeenCalledTimes(1)
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-107: the toolbar button reads "hide" once allConnectionsShown is true, and calls onToggleAllConnections on click', async () => {
|
||
const user = userEvent.setup()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const res1 = {
|
||
...buildReservation({ id: 401, type: 'flight' }),
|
||
endpoints: [
|
||
{ role: 'from', sequence: 0, name: 'A', code: null, lat: 1, lng: 2, timezone: null, local_time: null, local_date: null },
|
||
{ role: 'to', sequence: 1, name: 'B', code: null, lat: 3, lng: 4, timezone: null, local_time: null, local_date: null },
|
||
],
|
||
}
|
||
const onToggleAllConnections = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], reservations: [res1 as any],
|
||
visibleConnectionIds: [401], onToggleConnection: vi.fn(),
|
||
allConnectionsShown: true, onToggleAllConnections,
|
||
})} />)
|
||
await user.click(screen.getByLabelText('Hide all booking routes'))
|
||
expect(onToggleAllConnections).toHaveBeenCalledTimes(1)
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-108: the toolbar button is absent when the trip has no routable reservation', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], reservations: [], onToggleAllConnections: vi.fn() })} />)
|
||
expect(screen.queryByLabelText('Show all booking routes')).not.toBeInTheDocument()
|
||
expect(screen.queryByLabelText('Hide all booking routes')).not.toBeInTheDocument()
|
||
})
|
||
|
||
// ── Day info button ─────────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-018: clicking day header calls onDayDetail', async () => {
|
||
const user = userEvent.setup()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'My Day' })
|
||
const onDayDetail = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], onDayDetail })} />)
|
||
await user.click(screen.getByText('My Day'))
|
||
expect(onDayDetail).toHaveBeenCalledWith(day)
|
||
})
|
||
|
||
// ── Context menu ────────────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-019: right-click on assignment opens context menu', () => {
|
||
const place = buildPlace({ name: 'Louvre Museum' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments: { '10': [assignment] } })} />)
|
||
const placeEl = screen.getByText('Louvre Museum')
|
||
fireEvent.contextMenu(placeEl)
|
||
// Context menu should show Edit and Remove options
|
||
expect(screen.getByText('Edit')).toBeInTheDocument()
|
||
expect(screen.getByText(/Remove from day/i)).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-020: context menu Remove calls onRemoveAssignment', async () => {
|
||
const user = userEvent.setup()
|
||
const place = buildPlace({ name: 'Louvre Museum' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
const onRemoveAssignment = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments: { '10': [assignment] }, onRemoveAssignment })} />)
|
||
fireEvent.contextMenu(screen.getByText('Louvre Museum'))
|
||
await user.click(screen.getByText(/Remove from day/i))
|
||
expect(onRemoveAssignment).toHaveBeenCalledWith(10, 99)
|
||
})
|
||
|
||
// ── Undo bar ────────────────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-022: undo bar shown when canUndo=true', () => {
|
||
const onUndo = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({ canUndo: true, lastActionLabel: 'Removed place', onUndo })} />)
|
||
// The undo button should be present (Undo2 icon)
|
||
const undoButtons = screen.getAllByRole('button')
|
||
const undoBtn = undoButtons.find(btn => !(btn as HTMLButtonElement).disabled && btn.querySelector('svg'))
|
||
expect(undoBtn).toBeDefined()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-023: clicking undo button calls onUndo', async () => {
|
||
const user = userEvent.setup()
|
||
const onUndo = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({ canUndo: true, lastActionLabel: 'Removed place', onUndo })} />)
|
||
const undoBtn = screen.getByLabelText('Undo')
|
||
await user.click(undoBtn)
|
||
expect(onUndo).toHaveBeenCalled()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-024: undo button not present when onUndo not provided', () => {
|
||
render(<DayPlanSidebar {...makeDefaultProps({ canUndo: false })} />)
|
||
expect(screen.queryByLabelText('Undo')).toBeNull()
|
||
})
|
||
|
||
// ── PDF export ──────────────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-025: the export button is present', () => {
|
||
render(<DayPlanSidebar {...makeDefaultProps()} />)
|
||
expect(screen.getByRole('button', { name: 'Export' })).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-026: the PDF row in the export dialog calls downloadTripPDF', async () => {
|
||
const user = userEvent.setup()
|
||
const { downloadTripPDF } = await import('../PDF/TripPDF')
|
||
render(<DayPlanSidebar {...makeDefaultProps()} />)
|
||
await user.click(screen.getByRole('button', { name: 'Export' }))
|
||
await user.click(await screen.findByText('PDF'))
|
||
await waitFor(() => {
|
||
expect(downloadTripPDF).toHaveBeenCalled()
|
||
})
|
||
})
|
||
|
||
// ── Route calculation ───────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-027: route button present when day has 2+ assigned places', () => {
|
||
const place1 = buildPlace({ id: 1, name: 'Place A', lat: 48.85, lng: 2.35 })
|
||
const place2 = buildPlace({ id: 2, name: 'Place B', lat: 48.86, lng: 2.36 })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const a1 = buildAssignment({ id: 1, day_id: 10, order_index: 0, place: place1 })
|
||
const a2 = buildAssignment({ id: 2, day_id: 10, order_index: 1, place: place2 })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day],
|
||
places: [place1, place2],
|
||
assignments: { '10': [a1, a2] },
|
||
selectedDayId: 10,
|
||
})} />)
|
||
// Route/navigation button should be visible — look for Navigation icon button
|
||
const buttons = screen.getAllByRole('button')
|
||
// The component renders navigation-related buttons when a day is selected with 2+ geo places
|
||
expect(buttons.length).toBeGreaterThan(0)
|
||
})
|
||
|
||
// ── Empty states ────────────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-029: day with no assignments shows empty state', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Empty Day' })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], assignments: {} })} />)
|
||
expect(screen.getByText(/No places planned for this day/i)).toBeInTheDocument()
|
||
})
|
||
|
||
// ── Transport items ─────────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-030: flight reservation renders in day with matching date', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Travel Day' })
|
||
const reservation = buildReservation({
|
||
id: 200,
|
||
type: 'flight',
|
||
title: 'Paris to London',
|
||
reservation_time: '2025-06-01T08:00:00',
|
||
day_id: 10,
|
||
})
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], reservations: [reservation] })} />)
|
||
expect(screen.getByText('Paris to London')).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-031: clicking transport item calls onEditTransport', async () => {
|
||
const user = userEvent.setup()
|
||
const onEditTransport = vi.fn()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Travel Day' })
|
||
const reservation = buildReservation({
|
||
id: 200,
|
||
type: 'flight',
|
||
title: 'Air France 123',
|
||
reservation_time: '2025-06-01T08:00:00',
|
||
day_id: 10,
|
||
})
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], reservations: [reservation], onEditTransport })} />)
|
||
await user.click(screen.getByText('Air France 123'))
|
||
await waitFor(() => {
|
||
expect(onEditTransport).toHaveBeenCalledWith(expect.objectContaining({ id: 200 }))
|
||
})
|
||
})
|
||
|
||
// ── Accommodation badges ────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-032: accommodation badge renders hotel name in day header', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Hotel Day' })
|
||
const accommodation = {
|
||
id: 99,
|
||
start_day_id: 10,
|
||
end_day_id: 10,
|
||
place_name: 'Grand Hyatt',
|
||
place_id: 500,
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], accommodations: [accommodation as any] })} />)
|
||
expect(screen.getByText('Grand Hyatt')).toBeInTheDocument()
|
||
})
|
||
|
||
// ── Note cards ──────────────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-033: note card renders note text', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
mockDayNotesState.dayNotes = {
|
||
'10': [buildDayNote({ id: 55, day_id: 10, text: 'Pack sunscreen', sort_order: 0 })],
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
|
||
expect(screen.getByText('Pack sunscreen')).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-034: right-click on note opens context menu', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
mockDayNotesState.dayNotes = {
|
||
'10': [buildDayNote({ id: 55, day_id: 10, text: 'My note' })],
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
|
||
fireEvent.contextMenu(screen.getByText('My note'))
|
||
expect(screen.getByText('Edit')).toBeInTheDocument()
|
||
expect(screen.getByText(/Delete/i)).toBeInTheDocument()
|
||
})
|
||
|
||
// ── Note modal ──────────────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-035: note modal renders when noteUi has an entry', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
mockDayNotesState.noteUi = {
|
||
'10': { mode: 'add', text: '', time: '', icon: 'StickyNote' },
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
|
||
// Cancel and Add/Save buttons should appear in the modal
|
||
expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-036: note modal Cancel calls cancelNote', async () => {
|
||
const user = userEvent.setup()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
mockDayNotesState.noteUi = {
|
||
'10': { mode: 'add', text: 'Hello', time: '', icon: 'StickyNote' },
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
|
||
await user.click(screen.getByRole('button', { name: /cancel/i }))
|
||
expect(mockDayNotesState.cancelNote).toHaveBeenCalledWith(10)
|
||
})
|
||
|
||
// ── Budget footer ───────────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-037: budget footer shows total cost when places have prices', () => {
|
||
const place = buildPlace({ name: 'Eiffel Tower', price: 25 })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day],
|
||
places: [place],
|
||
assignments: { '10': [assignment] },
|
||
trip: buildTrip({ id: 1, currency: 'EUR' }),
|
||
})} />)
|
||
// Budget footer shows "Total Cost" label when totalCost > 0
|
||
expect(screen.getByText('Total Cost')).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-037b: converts foreign-currency prices into the display currency (#1561)', async () => {
|
||
server.use(http.get('https://api.frankfurter.dev/v2/rates', ({ request }) => {
|
||
expect(new URL(request.url).searchParams.get('base')).toBe('USD')
|
||
return HttpResponse.json([{ quote: 'NOK', rate: 10 }]) // 10 NOK per 1 USD
|
||
}))
|
||
seedStore(useSettingsStore, { settings: { time_format: '24h', default_currency: 'USD' } } as any)
|
||
const placeUsd = buildPlace({ id: 1, name: 'Hotel', price: 25, currency: 'USD' } as any)
|
||
const placeNok = buildPlace({ id: 2, name: 'Museum', price: 250, currency: null } as any) // implicit trip currency
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day],
|
||
places: [placeUsd, placeNok],
|
||
assignments: { '10': [
|
||
buildAssignment({ id: 1, day_id: 10, order_index: 0, place: placeUsd }),
|
||
buildAssignment({ id: 2, day_id: 10, order_index: 1, place: placeNok }),
|
||
] },
|
||
trip: buildTrip({ id: 1, currency: 'NOK' }),
|
||
})} />)
|
||
// $25 + 250 NOK / 10 = $50, marked as approximate; footer and day header agree.
|
||
await waitFor(() => expect(screen.getByText('≈ $50.00')).toBeInTheDocument())
|
||
expect(screen.getByText('≈ $50')).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-037c: falls back to a per-currency breakdown when rates are unavailable (#1561)', async () => {
|
||
server.use(http.get('https://api.frankfurter.dev/v2/rates', () => HttpResponse.error()))
|
||
const placeUsd = buildPlace({ id: 1, name: 'Hotel', price: 2730.27, currency: 'USD' } as any)
|
||
const placeNok = buildPlace({ id: 2, name: 'Museum', price: 2500, currency: 'NOK' } as any)
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day],
|
||
places: [placeUsd, placeNok],
|
||
assignments: { '10': [
|
||
buildAssignment({ id: 1, day_id: 10, order_index: 0, place: placeUsd }),
|
||
buildAssignment({ id: 2, day_id: 10, order_index: 1, place: placeNok }),
|
||
] },
|
||
trip: buildTrip({ id: 1, currency: 'NOK' }),
|
||
})} />)
|
||
// The USD amount must never be folded into a NOK-labeled number (the #1561 bug):
|
||
// footer keeps each currency separate, base (NOK) first.
|
||
await waitFor(() => expect(screen.getByText(/kr.*\+.*\$2,730\.27|2\s?500,00\s?kr.*\+/)).toBeInTheDocument())
|
||
expect(screen.queryByText(/≈/)).toBeNull()
|
||
expect(screen.queryByText(/5\s?230/)).toBeNull()
|
||
})
|
||
|
||
// ── Route tools (Optimize / Google Maps) ────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-038: optimize button calls onReorder with 3 geo-places', async () => {
|
||
const user = userEvent.setup()
|
||
const onReorder = vi.fn().mockResolvedValue(undefined)
|
||
const places = [
|
||
buildPlace({ id: 1, name: 'A', lat: 48.85, lng: 2.35 }),
|
||
buildPlace({ id: 2, name: 'B', lat: 48.86, lng: 2.36 }),
|
||
buildPlace({ id: 3, name: 'C', lat: 48.87, lng: 2.37 }),
|
||
]
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assigns = {
|
||
'10': [
|
||
buildAssignment({ id: 1, day_id: 10, order_index: 0, place: places[0] }),
|
||
buildAssignment({ id: 2, day_id: 10, order_index: 1, place: places[1] }),
|
||
buildAssignment({ id: 3, day_id: 10, order_index: 2, place: places[2] }),
|
||
],
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places, assignments: assigns, selectedDayId: 10, onReorder,
|
||
})} />)
|
||
// Found by its accessible name — the button is icon-only since #1981, so
|
||
// the label lives on aria-label rather than in the button's text.
|
||
const optimizeBtn = screen.getByRole('button', { name: /optimize/i })
|
||
await user.click(optimizeBtn)
|
||
await waitFor(() => expect(onReorder).toHaveBeenCalledWith(10, expect.any(Array)))
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-039: Google Maps button calls window.open', async () => {
|
||
const user = userEvent.setup()
|
||
const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null)
|
||
const place1 = buildPlace({ id: 1, name: 'A', lat: 48.85, lng: 2.35 })
|
||
const place2 = buildPlace({ id: 2, name: 'B', lat: 48.86, lng: 2.36 })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assigns = {
|
||
'10': [
|
||
buildAssignment({ id: 1, day_id: 10, order_index: 0, place: place1 }),
|
||
buildAssignment({ id: 2, day_id: 10, order_index: 1, place: place2 }),
|
||
],
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place1, place2], assignments: assigns, selectedDayId: 10,
|
||
})} />)
|
||
// The ExternalLink button is the Google Maps icon-only button (sibling of Optimize button)
|
||
const routeSection = document.querySelector('[style*="flex-direction: column"]')
|
||
const externalLinkBtn = screen.getAllByRole('button').find(btn => {
|
||
const parent = btn.closest('[style*="flex"]')
|
||
return btn.querySelector('svg') && !btn.textContent?.trim() && parent?.textContent?.includes('optimize')
|
||
})
|
||
if (externalLinkBtn) {
|
||
await user.click(externalLinkBtn)
|
||
expect(openSpy).toHaveBeenCalledWith('https://maps.google.com/...', '_blank')
|
||
}
|
||
openSpy.mockRestore()
|
||
})
|
||
|
||
// ── Context menu — Edit calls onEditPlace ────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-040: context menu Edit calls onEditPlace', async () => {
|
||
const user = userEvent.setup()
|
||
const place = buildPlace({ id: 42, name: 'Louvre Museum' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
const onEditPlace = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place], assignments: { '10': [assignment] }, onEditPlace,
|
||
})} />)
|
||
fireEvent.contextMenu(screen.getByText('Louvre Museum'))
|
||
await user.click(screen.getByText('Edit'))
|
||
expect(onEditPlace).toHaveBeenCalledWith(place, assignment.id)
|
||
})
|
||
|
||
// ── Arrow reorder buttons ────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-041: arrow down button reorders day assignments', async () => {
|
||
const user = userEvent.setup()
|
||
const onReorder = vi.fn().mockResolvedValue(undefined)
|
||
const place1 = buildPlace({ id: 1, name: 'First Place' })
|
||
const place2 = buildPlace({ id: 2, name: 'Second Place' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const a1 = buildAssignment({ id: 11, day_id: 10, order_index: 0, place: place1 })
|
||
const a2 = buildAssignment({ id: 12, day_id: 10, order_index: 1, place: place2 })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place1, place2], assignments: { '10': [a1, a2] }, onReorder,
|
||
})} />)
|
||
// First .reorder-buttons div → second button (ChevronDown) is enabled for first row
|
||
const reorderDivs = document.querySelectorAll('.reorder-buttons')
|
||
expect(reorderDivs.length).toBeGreaterThan(0)
|
||
const firstRowDownBtn = reorderDivs[0].querySelectorAll('button')[1]
|
||
await user.click(firstRowDownBtn)
|
||
await waitFor(() => expect(onReorder).toHaveBeenCalledWith(10, expect.any(Array)))
|
||
})
|
||
|
||
// Day-title renaming moved to DayDetailPanel (#1065) — covered there.
|
||
|
||
// ── ICS export ───────────────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-043: the calendar export sits in the export dialog', async () => {
|
||
const user = userEvent.setup()
|
||
render(<DayPlanSidebar {...makeDefaultProps()} />)
|
||
await user.click(screen.getByRole('button', { name: 'Export' }))
|
||
expect(await screen.findByText('Calendar')).toBeInTheDocument()
|
||
expect(screen.getByText('Download .ics')).toBeInTheDocument()
|
||
})
|
||
|
||
// ── getMergedItems: transport merged with assignments ──────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-044: merged list shows both assignment and flight on same day', () => {
|
||
const place = buildPlace({ name: 'Louvre', lat: 48.86, lng: 2.34, place_time: '14:00' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
const reservation = buildReservation({
|
||
id: 200, type: 'flight', title: 'CDG to LHR',
|
||
reservation_time: '2025-06-01T08:00:00',
|
||
day_id: 10,
|
||
})
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day],
|
||
places: [place],
|
||
assignments: { '10': [assignment] },
|
||
reservations: [reservation],
|
||
})} />)
|
||
expect(screen.getByText('Louvre')).toBeInTheDocument()
|
||
expect(screen.getByText('CDG to LHR')).toBeInTheDocument()
|
||
})
|
||
|
||
// ── Multi-day transport span phases ────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-045: multi-day flight shows departure label on first day', () => {
|
||
const day1 = buildDay({ id: 10, date: '2025-06-01', title: 'Departure' })
|
||
const day2 = buildDay({ id: 11, date: '2025-06-02', title: 'Arrival' })
|
||
const flight = buildReservation({
|
||
id: 201, type: 'flight', title: 'Transatlantic',
|
||
reservation_time: '2025-06-01T22:00:00',
|
||
reservation_end_time: '2025-06-02T06:00:00',
|
||
day_id: 10,
|
||
end_day_id: 11,
|
||
} as any)
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day1, day2],
|
||
reservations: [flight],
|
||
})} />)
|
||
// Both days should show the flight (departure on day1, arrival on day2)
|
||
const titles = screen.getAllByText('Transatlantic')
|
||
expect(titles.length).toBeGreaterThanOrEqual(2)
|
||
})
|
||
|
||
// ── Car active rental badge ────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-046: car rental in middle phase shows active badge in day header', () => {
|
||
const day1 = buildDay({ id: 10, date: '2025-06-01', title: 'Pickup' })
|
||
const day2 = buildDay({ id: 11, date: '2025-06-02', title: 'Drive Day' })
|
||
const day3 = buildDay({ id: 12, date: '2025-06-03', title: 'Return' })
|
||
const carRental = buildReservation({
|
||
id: 300, type: 'car', title: 'Renault Rental',
|
||
reservation_time: '2025-06-01T09:00:00',
|
||
reservation_end_time: '2025-06-03T17:00:00',
|
||
day_id: 10,
|
||
end_day_id: 12,
|
||
} as any)
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day1, day2, day3],
|
||
reservations: [carRental],
|
||
})} />)
|
||
// Car may appear as transport item on pickup/return days and as active badge on middle day
|
||
const instances = screen.getAllByText('Renault Rental')
|
||
expect(instances.length).toBeGreaterThan(0)
|
||
})
|
||
|
||
// ── Lock toggle ────────────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-047: clicking PlaceAvatar toggles lock (red border appears)', async () => {
|
||
const user = userEvent.setup()
|
||
const place = buildPlace({ id: 42, name: 'Arc de Triomphe', lat: 48.87, lng: 2.29 })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place], assignments: { '10': [assignment] }, selectedDayId: 10,
|
||
})} />)
|
||
// Click on the PlaceAvatar wrapper (the lock toggle div) — it's a div with cursor: pointer that wraps the avatar
|
||
const placeEl = screen.getByText('Arc de Triomphe')
|
||
// The lock div is the parent of PlaceAvatar, which is a sibling of the GripVertical div
|
||
const row = placeEl.closest('[style*="display: flex"][style*="gap: 8"]')
|
||
const lockDiv = row?.querySelector('[style*="cursor: pointer"][style*="position: relative"]')
|
||
if (lockDiv) {
|
||
await user.click(lockDiv as HTMLElement)
|
||
// After lock: the row should have red border
|
||
await waitFor(() => {
|
||
const rowEl = placeEl.closest('[style*="border-left"]')
|
||
expect(rowEl).toBeTruthy()
|
||
})
|
||
}
|
||
})
|
||
|
||
// ── Drag start/end on assignment ───────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-048: drag start on assignment sets drag state', () => {
|
||
const place = buildPlace({ id: 1, name: 'Drag Place' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place], assignments: { '10': [assignment] },
|
||
})} />)
|
||
const draggable = screen.getByText('Drag Place').closest('[draggable="true"]')
|
||
expect(draggable).toBeTruthy()
|
||
const dt = { setData: vi.fn(), effectAllowed: '', getData: vi.fn().mockReturnValue('') }
|
||
fireEvent.dragStart(draggable as Element, { dataTransfer: dt })
|
||
expect(dt.setData).toHaveBeenCalledWith('assignmentId', '99')
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-049: drag end resets drag state', () => {
|
||
const place = buildPlace({ id: 1, name: 'Drag Place' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place], assignments: { '10': [assignment] },
|
||
})} />)
|
||
const draggable = screen.getByText('Drag Place').closest('[draggable="true"]')
|
||
const dt = { setData: vi.fn(), effectAllowed: '', getData: vi.fn().mockReturnValue('') }
|
||
fireEvent.dragStart(draggable as Element, { dataTransfer: dt })
|
||
fireEvent.dragEnd(draggable as Element)
|
||
// After drag end, draggingId should be cleared (element opacity back to normal)
|
||
expect(draggable).toBeTruthy()
|
||
})
|
||
|
||
// ── Drop on day header (placeId) ───────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-199: a drag started on a map marker lands on the day (#891)', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const onAssignToDay = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], onAssignToDay })} />)
|
||
|
||
// Exactly what makeMarkerDraggable leaves behind on dragstart — the point of
|
||
// this test is that the day plan cannot tell a marker from a sidebar row.
|
||
const marker = document.createElement('div')
|
||
document.body.appendChild(marker)
|
||
makeMarkerDraggable(marker, 42)
|
||
const dragstart = new Event('dragstart', { bubbles: true })
|
||
const store = new Map<string, string>()
|
||
Object.defineProperty(dragstart, 'dataTransfer', {
|
||
value: { setData: (k: string, v: string) => store.set(k, v), getData: (k: string) => store.get(k) ?? '', effectAllowed: 'none' },
|
||
})
|
||
marker.dispatchEvent(dragstart)
|
||
|
||
const dayHeader = screen.getByText('Day 1').closest('[style*="cursor: pointer"]')
|
||
fireEvent.drop(dayHeader as Element, { dataTransfer: { getData: (k: string) => store.get(k) ?? '' } })
|
||
|
||
expect(onAssignToDay).toHaveBeenCalledWith(42, 10)
|
||
marker.remove()
|
||
window.__dragData = null
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-050: dropping place from sidebar onto day header calls onAssignToDay', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const onAssignToDay = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], onAssignToDay })} />)
|
||
// Set drag data as if dragging from the places sidebar
|
||
;(window as any).__dragData = { placeId: '42' }
|
||
const dayHeader = screen.getByText('Day 1').closest('[style*="cursor: pointer"]')
|
||
fireEvent.drop(dayHeader as Element, { dataTransfer: { getData: vi.fn().mockReturnValue('') } })
|
||
expect(onAssignToDay).toHaveBeenCalledWith(42, 10)
|
||
;(window as any).__dragData = null
|
||
})
|
||
|
||
// ── Transport detail modal with metadata ───────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-051: clicking flight transport calls onEditTransport with reservation', async () => {
|
||
const user = userEvent.setup()
|
||
const onEditTransport = vi.fn()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Travel' })
|
||
const reservation = {
|
||
...buildReservation({
|
||
id: 202, type: 'flight', title: 'Paris to Berlin',
|
||
reservation_time: '2025-06-01T07:30:00',
|
||
day_id: 10,
|
||
}),
|
||
metadata: JSON.stringify({ airline: 'Lufthansa', flight_number: 'LH1234', departure_airport: 'CDG', arrival_airport: 'BER' }),
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], reservations: [reservation as any], onEditTransport })} />)
|
||
await user.click(screen.getByText('Paris to Berlin'))
|
||
await waitFor(() => {
|
||
expect(onEditTransport).toHaveBeenCalledWith(expect.objectContaining({ id: 202, type: 'flight' }))
|
||
})
|
||
})
|
||
|
||
// ── Category-tagged place rendering ───────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-052: place with category renders correctly', () => {
|
||
const category = buildCategory({ id: 5, name: 'Restaurants', icon: 'restaurant' })
|
||
const place = buildPlace({ name: 'Café de Flore', category_id: 5 })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place], assignments: { '10': [assignment] }, categories: [category],
|
||
})} />)
|
||
expect(screen.getByText('Café de Flore')).toBeInTheDocument()
|
||
})
|
||
|
||
// ── Drop on assignment row ─────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-053: dropping place from sidebar onto assignment calls onAssignToDay', () => {
|
||
const place = buildPlace({ id: 1, name: 'Existing Place' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
const onAssignToDay = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place], assignments: { '10': [assignment] }, onAssignToDay,
|
||
})} />)
|
||
;(window as any).__dragData = { placeId: '55' }
|
||
const assignmentRow = screen.getByText('Existing Place').closest('[draggable="true"]')
|
||
fireEvent.drop(assignmentRow as Element, { dataTransfer: { getData: vi.fn().mockReturnValue('') } })
|
||
// onAssignToDay is called with (placeId, dayId, position) where position is the index in the list
|
||
expect(onAssignToDay).toHaveBeenCalledWith(55, 10, expect.anything())
|
||
;(window as any).__dragData = null
|
||
})
|
||
|
||
// ── PDF hover tooltip ─────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-054: hovering the export button shows its tooltip', async () => {
|
||
const user = userEvent.setup()
|
||
render(<DayPlanSidebar {...makeDefaultProps()} />)
|
||
await user.hover(screen.getByRole('button', { name: 'Export' }))
|
||
await waitFor(() => {
|
||
// Tooltip text appears (from t('dayplan.exportIntro'))
|
||
const tooltips = document.querySelectorAll('[style*="pointer-events: none"]')
|
||
expect(tooltips.length).toBeGreaterThan(0)
|
||
})
|
||
})
|
||
|
||
// ── Drag over day header ──────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-055: drag over day header sets drag target state', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
|
||
const dayHeader = screen.getByText('Day 1').closest('[style*="cursor: pointer"]')
|
||
fireEvent.dragOver(dayHeader as Element, { dataTransfer: { dropEffect: 'move' } })
|
||
// dragOverDayId should be set — the day header gets drag-target styling
|
||
expect(dayHeader).toBeTruthy()
|
||
})
|
||
|
||
// ── Cross-day drop on day header (assignment) ─────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-056: dropping assignment from another day onto header triggers move', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
|
||
// Simulate dragging an assignment from day 99 to day 10
|
||
;(window as any).__dragData = null
|
||
const dt = {
|
||
getData: (key: string) => {
|
||
if (key === 'assignmentId') return '99'
|
||
if (key === 'fromDayId') return '20'
|
||
return ''
|
||
},
|
||
}
|
||
const dayHeader = screen.getByText('Day 1').closest('[style*="cursor: pointer"]')
|
||
fireEvent.drop(dayHeader as Element, { dataTransfer: dt })
|
||
// tripActions.moveAssignment would be called — just verify no error
|
||
expect(dayHeader).toBeTruthy()
|
||
})
|
||
|
||
// ── Document dragend cleanup ──────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-057: document dragend event resets drag state', async () => {
|
||
const place = buildPlace({ id: 1, name: 'Test Place' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place], assignments: { '10': [assignment] },
|
||
})} />)
|
||
// Start a drag, then fire the global dragend event
|
||
const dt = { setData: vi.fn(), effectAllowed: '', getData: vi.fn().mockReturnValue('') }
|
||
const draggable = screen.getByText('Test Place').closest('[draggable="true"]')
|
||
fireEvent.dragStart(draggable as Element, { dataTransfer: dt })
|
||
// Dispatch global dragend on document
|
||
document.dispatchEvent(new Event('dragend'))
|
||
// Component should handle cleanup without errors
|
||
expect(screen.getByText('Test Place')).toBeInTheDocument()
|
||
})
|
||
|
||
// ── ICS export click ─────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-058: ICS menu "Download ICS" calls fetch for .ics export', async () => {
|
||
const user = userEvent.setup()
|
||
const fetchSpy = vi.spyOn(globalThis, 'fetch').mockResolvedValue({
|
||
ok: true,
|
||
blob: () => Promise.resolve(new Blob(['BEGIN:VCALENDAR'], { type: 'text/calendar' })),
|
||
} as any)
|
||
// Mock URL.createObjectURL
|
||
const createObjURL = vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:mock')
|
||
const revokeObjURL = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => {})
|
||
render(<DayPlanSidebar {...makeDefaultProps()} />)
|
||
// The three export buttons collapsed into one that opens the export dialog.
|
||
await user.click(screen.getByRole('button', { name: 'Export' }))
|
||
await user.click(await screen.findByText('Download .ics'))
|
||
await waitFor(() => expect(fetchSpy).toHaveBeenCalledWith('/api/trips/1/export.ics', expect.any(Object)))
|
||
fetchSpy.mockRestore()
|
||
createObjURL.mockRestore()
|
||
revokeObjURL.mockRestore()
|
||
})
|
||
|
||
// ── openAddNote button click ──────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-059: clicking Add Note button calls openAddNote', async () => {
|
||
const user = userEvent.setup()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
|
||
const addNoteBtn = screen.getByLabelText('Add Note')
|
||
await user.click(addNoteBtn)
|
||
expect(mockDayNotesState.openAddNote).toHaveBeenCalled()
|
||
})
|
||
|
||
// ── Note modal save button ────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-060: note modal Save button calls saveNote', async () => {
|
||
const user = userEvent.setup()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
mockDayNotesState.noteUi = {
|
||
'10': { mode: 'add', text: 'Test note', time: '', icon: 'StickyNote' },
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
|
||
// The Save/Add button in the modal has exact text "Add" (from t('common.add'))
|
||
const addBtn = screen.getByRole('button', { name: 'Add' })
|
||
await user.click(addBtn)
|
||
expect(mockDayNotesState.saveNote).toHaveBeenCalledWith(10)
|
||
})
|
||
|
||
// ── Jump to today (#1567) ─────────────────────────────────────────────
|
||
|
||
describe('jump to today', () => {
|
||
const isoDaysAround = (offsets: number[]) => offsets.map((o, i) => {
|
||
const d = new Date()
|
||
d.setDate(d.getDate() + o)
|
||
const iso = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
|
||
return buildDay({ id: 10 + i, date: iso, title: `Day ${i + 1}` })
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-195: opening a running trip selects today rather than day one', async () => {
|
||
const onSelectDay = vi.fn()
|
||
const days = isoDaysAround([-1, 0, 1])
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days, onSelectDay })} />)
|
||
|
||
await waitFor(() => expect(onSelectDay).toHaveBeenCalledWith(days[1].id, true))
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-196: a trip that is not running is left alone', async () => {
|
||
const onSelectDay = vi.fn()
|
||
const days = isoDaysAround([5, 6, 7])
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days, onSelectDay })} />)
|
||
|
||
await new Promise(r => setTimeout(r, 30))
|
||
expect(onSelectDay).not.toHaveBeenCalled()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-197: a day the user already picked wins over the jump', async () => {
|
||
const onSelectDay = vi.fn()
|
||
const days = isoDaysAround([-1, 0, 1])
|
||
// Coming back from another tab, or in via a deep link: the selection is
|
||
// already made and must not be overruled.
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days, onSelectDay, selectedDayId: days[0].id })} />)
|
||
|
||
await new Promise(r => setTimeout(r, 30))
|
||
expect(onSelectDay).not.toHaveBeenCalled()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-198: a trip planned without dates has nothing to jump to', async () => {
|
||
const onSelectDay = vi.fn()
|
||
const days = [buildDay({ id: 1, date: null, title: 'Day 1' }), buildDay({ id: 2, date: null, title: 'Day 2' })]
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days, onSelectDay })} />)
|
||
|
||
await new Promise(r => setTimeout(r, 30))
|
||
expect(onSelectDay).not.toHaveBeenCalled()
|
||
})
|
||
})
|
||
|
||
// ── Note colours and formatting (#1629) ───────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-192: the note dialog offers the palette and reports the pick', async () => {
|
||
const user = userEvent.setup()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
mockDayNotesState.noteUi = {
|
||
'10': { mode: 'add', text: 'Passport', time: '', icon: 'StickyNote', color: null },
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
|
||
|
||
// Exact, not /red/i: "Ordered list" in the formatting bar matches that too.
|
||
await user.click(screen.getByRole('button', { name: 'Red' }))
|
||
|
||
// The dialog owns no state of its own — it reports upwards, like every other field.
|
||
expect(mockDayNotesState.setNoteUi).toHaveBeenCalled()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-193: a note card is tinted by its colour and renders its body', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
mockDayNotesState.dayNotes = {
|
||
'10': [{ id: 1, day_id: 10, text: 'Ferry', time: 'book **early**', icon: 'StickyNote', color: '#dc2626', sort_order: 0 }],
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], expandedDays: { 10: true } })} />)
|
||
|
||
// Markdown, not the asterisks someone typed with the formatting bar.
|
||
expect(screen.getByText('early').tagName).toBe('STRONG')
|
||
// jsdom normalises the hex inside color-mix() to rgb().
|
||
const card = screen.getByText('Ferry').closest('.dp-row') as HTMLElement
|
||
expect(card.style.background).toContain('220, 38, 38')
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-194: a note without a colour keeps the neutral card', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
mockDayNotesState.dayNotes = {
|
||
'10': [{ id: 2, day_id: 10, text: 'Lunch', time: '', icon: 'StickyNote', color: null, sort_order: 0 }],
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], expandedDays: { 10: true } })} />)
|
||
|
||
const card = screen.getByText('Lunch').closest('.dp-row') as HTMLElement
|
||
expect(card.style.background).toContain('--bg-hover')
|
||
})
|
||
|
||
// ── Note modal edit mode title ────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-061: note modal shows Edit title in edit mode', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
mockDayNotesState.noteUi = {
|
||
'10': { mode: 'edit', text: 'My note', time: '', icon: 'StickyNote' },
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
|
||
// The modal title is t('dayplan.noteEdit') — "Edit Note" or similar
|
||
expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument()
|
||
})
|
||
|
||
// ── Place with website in context menu ────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-062: place with website shows website option in context menu', () => {
|
||
const place = buildPlace({ id: 42, name: 'Museum', website: 'https://museum.example.com' } as any)
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place], assignments: { '10': [assignment] },
|
||
})} />)
|
||
fireEvent.contextMenu(screen.getByText('Museum'))
|
||
// Website option should appear in context menu
|
||
expect(screen.getByText(/Website/i)).toBeInTheDocument()
|
||
})
|
||
|
||
// ── Delete place context menu ─────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-063: context menu Delete calls onDeletePlace', async () => {
|
||
const user = userEvent.setup()
|
||
const place = buildPlace({ id: 42, name: 'Louvre' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
const onDeletePlace = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place], assignments: { '10': [assignment] }, onDeletePlace,
|
||
})} />)
|
||
fireEvent.contextMenu(screen.getByText('Louvre'))
|
||
await user.click(screen.getByText(/Delete/i))
|
||
expect(onDeletePlace).toHaveBeenCalledWith(42)
|
||
})
|
||
|
||
// ── Note card editing (#2249) ─────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-064: clicking a note row opens its edit modal', async () => {
|
||
const user = userEvent.setup()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const note = buildDayNote({ id: 55, day_id: 10, text: 'My note' })
|
||
mockDayNotesState.dayNotes = { '10': [note] }
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
|
||
await user.click(cardRow(screen.getByText('My note')))
|
||
expect(mockDayNotesState.openEditNote).toHaveBeenCalledWith(10, expect.objectContaining({ id: 55 }))
|
||
})
|
||
|
||
// The bug: an absolutely-positioned pencil/trash pill sat on the note's own
|
||
// reorder chevrons, and a coarse-pointer `opacity: 1 !important` in index.css
|
||
// made it permanent on tablets. Nothing may float over that column again.
|
||
it('FE-PLANNER-DAYPLAN-064b: the note row carries no floating action pill over its reorder buttons', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
mockDayNotesState.dayNotes = { '10': [buildDayNote({ id: 55, day_id: 10, text: 'My note' })] }
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
|
||
const row = cardRow(screen.getByText('My note'))
|
||
expect(document.querySelector('.note-edit-buttons')).toBeNull()
|
||
expect(row.querySelectorAll('[style*="position: absolute"]')).toHaveLength(0)
|
||
expect(row.querySelectorAll('.reorder-buttons button')).toHaveLength(2)
|
||
// Positional, not just by class: the reorder column owns the row's right edge.
|
||
expect(row.lastElementChild).toHaveClass('reorder-buttons')
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-064e: the keyboard reaches the note and opens it with Enter', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
mockDayNotesState.dayNotes = { '10': [buildDayNote({ id: 55, day_id: 10, text: 'My note' })] }
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
|
||
const row = cardRow(screen.getByText('My note'))
|
||
expect(row).toHaveAttribute('tabindex', '0')
|
||
// A press-scale on a draggable row fights the drag, so the row opts out (#2158).
|
||
expect(row).toHaveAttribute('data-no-press')
|
||
fireEvent.keyDown(row, { key: 'Enter' })
|
||
expect(mockDayNotesState.openEditNote).toHaveBeenCalledWith(10, expect.objectContaining({ id: 55 }))
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-064c: a link inside the note body opens the link, not the edit modal', async () => {
|
||
const user = userEvent.setup()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
mockDayNotesState.dayNotes = { '10': [buildDayNote({ id: 55, day_id: 10, text: 'My note', time: '[docs](https://example.com)' })] }
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
|
||
await user.click(screen.getByRole('link', { name: 'docs' }))
|
||
expect(mockDayNotesState.openEditNote).not.toHaveBeenCalled()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-064d: the reorder chevrons still move the note instead of editing it', async () => {
|
||
const user = userEvent.setup()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
mockDayNotesState.dayNotes = { '10': [
|
||
buildDayNote({ id: 55, day_id: 10, text: 'First note', sort_order: 0 }),
|
||
buildDayNote({ id: 56, day_id: 10, text: 'Second note', sort_order: 1 }),
|
||
] }
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
|
||
const row = cardRow(screen.getByText('Second note'))
|
||
await user.click(row.querySelectorAll('.reorder-buttons button')[0] as HTMLElement)
|
||
expect(mockDayNotesState.moveNote).toHaveBeenCalled()
|
||
expect(mockDayNotesState.openEditNote).not.toHaveBeenCalled()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-065: the note modal deletes only through the confirmation dialog', async () => {
|
||
const user = userEvent.setup()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
mockDayNotesState.dayNotes = { '10': [buildDayNote({ id: 55, day_id: 10, text: 'My note' })] }
|
||
mockDayNotesState.noteUi = { '10': { mode: 'edit', noteId: 55, text: 'My note', time: '', icon: 'FileText', color: null } }
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
|
||
await user.click(screen.getByRole('button', { name: /^delete$/i }))
|
||
expect(mockDayNotesState.deleteNote).not.toHaveBeenCalled()
|
||
expect(screen.getByText('Delete note?')).toBeInTheDocument()
|
||
const confirm = within(screen.getByText('Delete note?').closest('[class*="z-[10000]"]') as HTMLElement)
|
||
await user.click(confirm.getByRole('button', { name: /^delete$/i }))
|
||
expect(mockDayNotesState.deleteNote).toHaveBeenCalledWith(10, 55)
|
||
// Otherwise the edit modal is left open on a note that no longer exists.
|
||
expect(mockDayNotesState.cancelNote).toHaveBeenCalledWith(10)
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-065b: a note being created offers no delete', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
mockDayNotesState.dayNotes = { '10': [] }
|
||
mockDayNotesState.noteUi = { '10': { mode: 'add', text: '', time: '', icon: 'FileText', color: null } }
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
|
||
expect(screen.queryByRole('button', { name: /^delete$/i })).toBeNull()
|
||
})
|
||
|
||
// ── Drop on assignment: same-day reorder ─────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-066: dropping assignment from same day triggers handleMergedDrop', () => {
|
||
const place1 = buildPlace({ id: 1, name: 'Place A' })
|
||
const place2 = buildPlace({ id: 2, name: 'Place B' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const a1 = buildAssignment({ id: 11, day_id: 10, order_index: 0, place: place1 })
|
||
const a2 = buildAssignment({ id: 12, day_id: 10, order_index: 1, place: place2 })
|
||
const onReorder = vi.fn().mockResolvedValue(undefined)
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place1, place2], assignments: { '10': [a1, a2] }, onReorder,
|
||
})} />)
|
||
// Drag a1 onto a2 (same day reorder)
|
||
const dt = { setData: vi.fn(), effectAllowed: '', getData: vi.fn().mockReturnValue('') }
|
||
const draggableA1 = screen.getByText('Place A').closest('[draggable="true"]')
|
||
fireEvent.dragStart(draggableA1 as Element, { dataTransfer: dt })
|
||
const draggableA2 = screen.getByText('Place B').closest('[draggable="true"]')
|
||
fireEvent.drop(draggableA2 as Element, { dataTransfer: { getData: vi.fn().mockReturnValue('') } })
|
||
// handleMergedDrop called; onReorder should eventually be called
|
||
expect(onReorder).toBeDefined()
|
||
})
|
||
|
||
// ── Cross-day note drop on day header ─────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-067: dropping note from another day onto day header triggers move', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
|
||
const dt = {
|
||
getData: (key: string) => {
|
||
if (key === 'noteId') return '55'
|
||
if (key === 'fromDayId') return '20'
|
||
return ''
|
||
},
|
||
}
|
||
const dayHeader = screen.getByText('Day 1').closest('[style*="cursor: pointer"]')
|
||
fireEvent.drop(dayHeader as Element, { dataTransfer: dt })
|
||
expect(dayHeader).toBeTruthy()
|
||
})
|
||
|
||
// ── Cross-day assignment drag from day1 to day2 header ────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-068: dragging assignment from day1 and dropping on day2 header moves it', async () => {
|
||
const place1 = buildPlace({ id: 1, name: 'Place on Day 1' })
|
||
const day1 = buildDay({ id: 10, date: '2025-06-01', title: 'Day One' })
|
||
const day2 = buildDay({ id: 11, date: '2025-06-02', title: 'Day Two' })
|
||
const a1 = buildAssignment({ id: 11, day_id: 10, order_index: 0, place: place1 })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day1, day2],
|
||
places: [place1],
|
||
assignments: { '10': [a1], '11': [] },
|
||
})} />)
|
||
// DragStart on a1 to set dragDataRef.current
|
||
const dt = { setData: vi.fn(), effectAllowed: '', getData: vi.fn().mockReturnValue('') }
|
||
const draggable = screen.getByText('Place on Day 1').closest('[draggable="true"]')
|
||
fireEvent.dragStart(draggable as Element, { dataTransfer: dt })
|
||
// Drop on day2 header
|
||
const day2Header = screen.getByText('Day Two').closest('[style*="cursor: pointer"]')
|
||
fireEvent.drop(day2Header as Element, { dataTransfer: { getData: vi.fn().mockReturnValue('') } })
|
||
// tripActions.moveAssignment should have been called (no assertion needed — just coverage)
|
||
expect(day2Header).toBeTruthy()
|
||
})
|
||
|
||
// ── Same-day assignment drop (handleMergedDrop) ───────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-069: dropping assignment onto another assignment on same day calls applyMergedOrder', async () => {
|
||
const place1 = buildPlace({ id: 1, name: 'Place A' })
|
||
const place2 = buildPlace({ id: 2, name: 'Place B' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const a1 = buildAssignment({ id: 11, day_id: 10, order_index: 0, place: place1 })
|
||
const a2 = buildAssignment({ id: 12, day_id: 10, order_index: 1, place: place2 })
|
||
const onReorder = vi.fn().mockResolvedValue(undefined)
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place1, place2], assignments: { '10': [a1, a2] }, onReorder,
|
||
})} />)
|
||
// DragStart on a1 to set dragDataRef
|
||
const dt = { setData: vi.fn(), effectAllowed: '', getData: vi.fn().mockReturnValue('') }
|
||
const draggableA1 = screen.getByText('Place A').closest('[draggable="true"]')
|
||
fireEvent.dragStart(draggableA1 as Element, { dataTransfer: dt })
|
||
// Drop on a2 (same day → handleMergedDrop → applyMergedOrder → onReorder)
|
||
const draggableA2 = screen.getByText('Place B').closest('[draggable="true"]')
|
||
fireEvent.drop(draggableA2 as Element, { dataTransfer: { getData: vi.fn().mockReturnValue('') } })
|
||
await waitFor(() => expect(onReorder).toHaveBeenCalled())
|
||
})
|
||
|
||
// ── End-of-day drop zone ──────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-070: dropping place from sidebar onto end-of-day zone calls onAssignToDay', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const onAssignToDay = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], onAssignToDay })} />)
|
||
;(window as any).__dragData = { placeId: '42' }
|
||
// The end drop zone has min-height: 12px and padding 2px 8px
|
||
const endZone = document.querySelector('[style*="min-height: 12"]')
|
||
if (endZone) {
|
||
fireEvent.drop(endZone as Element, { dataTransfer: { getData: vi.fn().mockReturnValue('') } })
|
||
expect(onAssignToDay).toHaveBeenCalledWith(42, 10)
|
||
}
|
||
;(window as any).__dragData = null
|
||
})
|
||
|
||
// ── getMergedItems: place time before transport time ──────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-071: transport placed after time-anchored place in merged list', () => {
|
||
const place = buildPlace({ name: 'Morning Café', place_time: '08:00', lat: 48.86, lng: 2.34 })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
const flight = buildReservation({
|
||
id: 201, type: 'flight', title: 'Afternoon Flight',
|
||
reservation_time: '2025-06-01T14:00:00',
|
||
day_id: 10,
|
||
})
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place], assignments: { '10': [assignment] }, reservations: [flight],
|
||
})} />)
|
||
expect(screen.getByText('Morning Café')).toBeInTheDocument()
|
||
expect(screen.getByText('Afternoon Flight')).toBeInTheDocument()
|
||
})
|
||
|
||
// ── Cross-day assignment drop on assignment row ───────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-072: dropping cross-day assignment onto assignment row calls moveAssignment', async () => {
|
||
const place1 = buildPlace({ id: 1, name: 'Place On Day 1' })
|
||
const place2 = buildPlace({ id: 2, name: 'Place On Day 2' })
|
||
const day1 = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const day2 = buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' })
|
||
const a1 = buildAssignment({ id: 11, day_id: 10, order_index: 0, place: place1 })
|
||
const a2 = buildAssignment({ id: 12, day_id: 11, order_index: 0, place: place2 })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day1, day2],
|
||
places: [place1, place2],
|
||
assignments: { '10': [a1], '11': [a2] },
|
||
})} />)
|
||
// DragStart on a1 (day 10) to set dragDataRef
|
||
const dt = { setData: vi.fn(), effectAllowed: '', getData: vi.fn().mockReturnValue('') }
|
||
const draggableA1 = screen.getByText('Place On Day 1').closest('[draggable="true"]')
|
||
fireEvent.dragStart(draggableA1 as Element, { dataTransfer: dt })
|
||
// Drop on a2 (day 11 — cross-day) → triggers moveAssignment path
|
||
const draggableA2 = screen.getByText('Place On Day 2').closest('[draggable="true"]')
|
||
fireEvent.drop(draggableA2 as Element, { dataTransfer: { getData: vi.fn().mockReturnValue('') } })
|
||
// Just verify no crash
|
||
expect(screen.getByText('Place On Day 2')).toBeInTheDocument()
|
||
})
|
||
|
||
// ── Drag over assignment row ──────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-073: drag over assignment row sets drop target', () => {
|
||
const place = buildPlace({ id: 1, name: 'Target Place' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place], assignments: { '10': [assignment] },
|
||
})} />)
|
||
const draggable = screen.getByText('Target Place').closest('[draggable="true"]')
|
||
fireEvent.dragOver(draggable as Element, { dataTransfer: { dropEffect: 'move' } })
|
||
expect(draggable).toBeTruthy()
|
||
})
|
||
|
||
// ── Note card drag and drop ───────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-074: drag start on note card sets drag state', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const note = buildDayNote({ id: 55, day_id: 10, text: 'Drag this note' })
|
||
mockDayNotesState.dayNotes = { '10': [note] }
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
|
||
const noteEl = screen.getByText('Drag this note').closest('[draggable="true"]')
|
||
if (noteEl) {
|
||
const dt = { setData: vi.fn(), effectAllowed: '', getData: vi.fn().mockReturnValue('') }
|
||
fireEvent.dragStart(noteEl as Element, { dataTransfer: dt })
|
||
expect(dt.setData).toHaveBeenCalledWith('noteId', '55')
|
||
}
|
||
})
|
||
|
||
// ── Note card drop: cross-day note drop onto assignment ───────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-075: dropping cross-day note onto assignment triggers note move', () => {
|
||
const place = buildPlace({ id: 1, name: 'Louvre' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place], assignments: { '10': [assignment] },
|
||
})} />)
|
||
// Simulate dropping a note from another day onto this assignment
|
||
const draggable = screen.getByText('Louvre').closest('[draggable="true"]')
|
||
// dragDataRef has note from another day
|
||
;(window as any).__dragData = null
|
||
const savedDragRef: any = { noteId: '55', fromDayId: '20' }
|
||
// We can't set dragDataRef directly, but we can use the getDragData fallback
|
||
// The fallback only reads placeId from window.__dragData, not noteId
|
||
// This test just verifies drop on assignment with no matching data doesn't crash
|
||
fireEvent.drop(draggable as Element, { dataTransfer: { getData: vi.fn().mockReturnValue('') } })
|
||
expect(screen.getByText('Louvre')).toBeInTheDocument()
|
||
})
|
||
|
||
// ── handleOptimize: no-geo places skipped ────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-076: optimize with some places without geo coords still calls onReorder', async () => {
|
||
const user = userEvent.setup()
|
||
const onReorder = vi.fn().mockResolvedValue(undefined)
|
||
// Mix of geo and non-geo places
|
||
const places = [
|
||
buildPlace({ id: 1, name: 'Geo Place A', lat: 48.85, lng: 2.35 }),
|
||
buildPlace({ id: 2, name: 'No Geo', lat: null as any, lng: null as any }),
|
||
buildPlace({ id: 3, name: 'Geo Place C', lat: 48.87, lng: 2.37 }),
|
||
]
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assigns = {
|
||
'10': [
|
||
buildAssignment({ id: 1, day_id: 10, order_index: 0, place: places[0] }),
|
||
buildAssignment({ id: 2, day_id: 10, order_index: 1, place: places[1] }),
|
||
buildAssignment({ id: 3, day_id: 10, order_index: 2, place: places[2] }),
|
||
],
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places, assignments: assigns, selectedDayId: 10, onReorder,
|
||
})} />)
|
||
const optimizeBtn = screen.getByRole('button', { name: /optimize/i })
|
||
await user.click(optimizeBtn)
|
||
await waitFor(() => expect(onReorder).toHaveBeenCalled())
|
||
})
|
||
|
||
// ── Lock hover tooltip ────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-077: hovering over PlaceAvatar shows lock tooltip', async () => {
|
||
const user = userEvent.setup()
|
||
const place = buildPlace({ id: 42, name: 'Hovered Place', lat: 48.87, lng: 2.29 })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place], assignments: { '10': [assignment] },
|
||
})} />)
|
||
const placeEl = screen.getByText('Hovered Place')
|
||
const row = placeEl.closest('[style*="display: flex"][style*="gap: 8"]')
|
||
const lockDiv = row?.querySelector('[style*="cursor: pointer"][style*="position: relative"]')
|
||
if (lockDiv) {
|
||
fireEvent.mouseEnter(lockDiv as Element)
|
||
// Lock overlay should appear
|
||
await waitFor(() => {
|
||
const overlays = document.querySelectorAll('[style*="position: absolute"][style*="inset: 0"]')
|
||
expect(overlays.length).toBeGreaterThan(0)
|
||
})
|
||
}
|
||
})
|
||
|
||
// ── Reservation badge on assignment ──────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-078: assignment with linked reservation shows confirmed badge', () => {
|
||
const place = buildPlace({ id: 1, name: 'Le Jules Verne' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
const res = buildReservation({ id: 77, trip_id: 1, type: 'restaurant', status: 'confirmed', assignment_id: 99 } as any)
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place], assignments: { '10': [assignment] }, reservations: [res],
|
||
})} />)
|
||
expect(screen.getByText('Le Jules Verne')).toBeInTheDocument()
|
||
// Badge shows confirmed status
|
||
expect(screen.getByText(/confirmed/i)).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-079: assignment with pending reservation shows pending badge', () => {
|
||
const place = buildPlace({ id: 1, name: 'Opera House' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
const res = buildReservation({ id: 77, trip_id: 1, type: 'restaurant', status: 'pending', assignment_id: 99 } as any)
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place], assignments: { '10': [assignment] }, reservations: [res],
|
||
})} />)
|
||
expect(screen.getAllByText(/pending/i).length).toBeGreaterThan(0)
|
||
})
|
||
|
||
// ── timed place drag → timeConfirm modal ─────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-080: dragging timed place out of chronological order shows time-confirm modal', async () => {
|
||
const placeA = buildPlace({ id: 1, name: 'Morning Place', place_time: '08:00' })
|
||
const placeB = buildPlace({ id: 2, name: 'Afternoon Place', place_time: '14:00' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
// A (08:00) at index 0, B (14:00) at index 1
|
||
const a1 = buildAssignment({ id: 11, day_id: 10, order_index: 0, place: placeA })
|
||
const a2 = buildAssignment({ id: 22, day_id: 10, order_index: 1, place: placeB })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [placeA, placeB],
|
||
assignments: { '10': [a1, a2] },
|
||
})} />)
|
||
|
||
// DragStart on a2 (14:00, at index 1), drop onto a1 (08:00, at index 0)
|
||
// This would create [a2(14:00), a1(08:00)] — NOT chronological
|
||
const draggable2 = screen.getByText('Afternoon Place').closest('[draggable="true"]')
|
||
const draggable1 = screen.getByText('Morning Place').closest('[draggable="true"]')
|
||
const dt = { setData: vi.fn(), effectAllowed: '', getData: vi.fn().mockReturnValue('') }
|
||
fireEvent.dragStart(draggable2 as Element, { dataTransfer: dt })
|
||
// Now drop on draggable1 (the assignment row drop handler)
|
||
fireEvent.drop(draggable1 as Element, { dataTransfer: { getData: vi.fn().mockReturnValue('') } })
|
||
|
||
await waitFor(() => {
|
||
expect(screen.getByText('Remove time?')).toBeInTheDocument()
|
||
})
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-081: clicking Confirm in time modal calls confirmTimeRemoval (updates assignment time)', async () => {
|
||
const user = userEvent.setup()
|
||
const { assignmentsApi } = await import('../../api/client')
|
||
const placeA = buildPlace({ id: 1, name: 'Morning Place', place_time: '08:00' })
|
||
const placeB = buildPlace({ id: 2, name: 'Afternoon Place', place_time: '14:00' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const a1 = buildAssignment({ id: 11, day_id: 10, order_index: 0, place: placeA })
|
||
const a2 = buildAssignment({ id: 22, day_id: 10, order_index: 1, place: placeB })
|
||
const onReorder = vi.fn().mockResolvedValue(undefined)
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [placeA, placeB],
|
||
assignments: { '10': [a1, a2] }, onReorder,
|
||
})} />)
|
||
|
||
// Trigger the timeConfirm modal: drag a2 onto a1
|
||
const draggable2 = screen.getByText('Afternoon Place').closest('[draggable="true"]')
|
||
const draggable1 = screen.getByText('Morning Place').closest('[draggable="true"]')
|
||
const dt = { setData: vi.fn(), effectAllowed: '', getData: vi.fn().mockReturnValue('') }
|
||
fireEvent.dragStart(draggable2 as Element, { dataTransfer: dt })
|
||
fireEvent.drop(draggable1 as Element, { dataTransfer: { getData: vi.fn().mockReturnValue('') } })
|
||
|
||
// Wait for modal
|
||
await waitFor(() => expect(screen.getByText('Remove time?')).toBeInTheDocument())
|
||
|
||
// Click Confirm
|
||
const confirmBtn = screen.getByRole('button', { name: /confirm/i })
|
||
await user.click(confirmBtn)
|
||
|
||
await waitFor(() => expect((assignmentsApi as any).updateTime).toHaveBeenCalled())
|
||
})
|
||
|
||
// ── applyMergedOrder with notes in list (noteUpdates branch) ──────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-082: reordering day with notes populates noteUpdates in applyMergedOrder', async () => {
|
||
const { assignmentsApi } = await import('../../api/client')
|
||
const onReorder = vi.fn().mockResolvedValue(undefined)
|
||
const placeA = buildPlace({ id: 1, name: 'Place Alpha' })
|
||
const placeB = buildPlace({ id: 2, name: 'Place Beta' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const a1 = buildAssignment({ id: 11, day_id: 10, order_index: 0, place: placeA })
|
||
const a2 = buildAssignment({ id: 22, day_id: 10, order_index: 2, place: placeB })
|
||
// Note between assignments (sort_order=1 puts it between a1(0) and a2(2))
|
||
const note = buildDayNote({ id: 55, day_id: 10, sort_order: 1, text: 'Mid Note' })
|
||
mockDayNotesState.dayNotes = { '10': [note] }
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [placeA, placeB],
|
||
assignments: { '10': [a1, a2] }, onReorder,
|
||
})} />)
|
||
|
||
// DragStart on a2 (idx 2), drop onto a1 (idx 0) — same day swap
|
||
const draggable2 = screen.getByText('Place Beta').closest('[draggable="true"]')
|
||
const draggable1 = screen.getByText('Place Alpha').closest('[draggable="true"]')
|
||
const dt = { setData: vi.fn(), effectAllowed: '', getData: vi.fn().mockReturnValue('') }
|
||
fireEvent.dragStart(draggable2 as Element, { dataTransfer: dt })
|
||
fireEvent.drop(draggable1 as Element, { dataTransfer: { getData: vi.fn().mockReturnValue('') } })
|
||
|
||
await waitFor(() => expect(onReorder).toHaveBeenCalled())
|
||
})
|
||
|
||
// ── handleOptimize with locked assignments ────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-083: optimize respects locked assignments', async () => {
|
||
const user = userEvent.setup()
|
||
const onReorder = vi.fn().mockResolvedValue(undefined)
|
||
const places = [
|
||
buildPlace({ id: 1, name: 'Place Lock', lat: 48.85, lng: 2.35 }),
|
||
buildPlace({ id: 2, name: 'Place Free A', lat: 48.86, lng: 2.36 }),
|
||
buildPlace({ id: 3, name: 'Place Free B', lat: 48.87, lng: 2.37 }),
|
||
]
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assigns = {
|
||
'10': [
|
||
buildAssignment({ id: 1, day_id: 10, order_index: 0, place: places[0] }),
|
||
buildAssignment({ id: 2, day_id: 10, order_index: 1, place: places[1] }),
|
||
buildAssignment({ id: 3, day_id: 10, order_index: 2, place: places[2] }),
|
||
],
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places, assignments: assigns, selectedDayId: 10, onReorder,
|
||
})} />)
|
||
|
||
// Lock the first assignment by clicking its lock area
|
||
const placeEl = screen.getByText('Place Lock')
|
||
const row = placeEl.closest('[style*="display: flex"][style*="gap: 8"]')
|
||
const lockDiv = row?.querySelector('[style*="cursor: pointer"][style*="position: relative"]')
|
||
if (lockDiv) fireEvent.click(lockDiv as Element)
|
||
|
||
const optimizeBtn = screen.getByRole('button', { name: /optimize/i })
|
||
await user.click(optimizeBtn)
|
||
await waitFor(() => expect(onReorder).toHaveBeenCalled())
|
||
})
|
||
|
||
// ── Drop on transport row (handleMergedDrop via transport onDrop) ──────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-084: dropping same-day assignment onto transport row calls handleMergedDrop', () => {
|
||
const place = buildPlace({ id: 1, name: 'Museum' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 11, day_id: 10, order_index: 0, place })
|
||
const flight = buildReservation({
|
||
id: 77, trip_id: 1, type: 'flight', status: 'confirmed',
|
||
reservation_time: '2025-06-01T10:00:00Z',
|
||
})
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place],
|
||
assignments: { '10': [assignment] },
|
||
reservations: [flight],
|
||
})} />)
|
||
|
||
const assignmentEl = screen.getByText('Museum').closest('[draggable="true"]')
|
||
const dt = { setData: vi.fn(), effectAllowed: '', getData: vi.fn().mockReturnValue('') }
|
||
fireEvent.dragStart(assignmentEl as Element, { dataTransfer: dt })
|
||
|
||
// Find the transport row and drop on it
|
||
const transportRows = document.querySelectorAll('[style*="border: 1px solid"][style*="cursor: pointer"]')
|
||
if (transportRows.length > 0) {
|
||
// Drop assignment on transport row
|
||
fireEvent.drop(transportRows[0] as Element, {
|
||
dataTransfer: { getData: vi.fn().mockReturnValue('') },
|
||
clientY: 100,
|
||
})
|
||
}
|
||
expect(screen.getByText('Museum')).toBeInTheDocument()
|
||
})
|
||
|
||
// ── PDF click with populated dayNotes ─────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-085: clicking PDF with populated dayNotes includes notes in call', async () => {
|
||
const user = userEvent.setup()
|
||
const { downloadTripPDF } = await import('../PDF/TripPDF')
|
||
const place = buildPlace({ id: 1, name: 'Eiffel' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
const note = buildDayNote({ id: 55, day_id: 10, sort_order: 0, text: 'PDF Note' })
|
||
mockDayNotesState.dayNotes = { '10': [note] }
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place], assignments: { '10': [assignment] },
|
||
})} />)
|
||
await user.click(screen.getByRole('button', { name: 'Export' }))
|
||
await user.click(await screen.findByText('PDF'))
|
||
await waitFor(() => expect(downloadTripPDF).toHaveBeenCalledWith(
|
||
expect.objectContaining({ dayNotes: expect.arrayContaining([expect.objectContaining({ text: 'PDF Note' })]) })
|
||
))
|
||
})
|
||
|
||
// ── Accommodation sort: checkout day ─────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-086: accommodation that ends on current day shows checkout styling', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
// Accommodation: started day 8, ends day 10 → today is checkout day
|
||
const acc = { id: 1, start_day_id: 8, end_day_id: 10, place_id: 5, place_name: 'Grand Hotel' }
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], accommodations: [acc as any],
|
||
})} />)
|
||
expect(screen.getByText('Grand Hotel')).toBeInTheDocument()
|
||
})
|
||
|
||
// ── Note move arrows ──────────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-087: clicking note move-down button calls moveNote', async () => {
|
||
const user = userEvent.setup()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const note1 = buildDayNote({ id: 10, day_id: 10, sort_order: 0, text: 'Note One' })
|
||
const note2 = buildDayNote({ id: 20, day_id: 10, sort_order: 1, text: 'Note Two' })
|
||
mockDayNotesState.dayNotes = { '10': [note1, note2] }
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
|
||
|
||
// The first note should have a down arrow (not at bottom)
|
||
const noteEl = screen.getByText('Note One')
|
||
const noteCard = noteEl.closest('[style*="display: flex"][style*="gap: 8"]')
|
||
const buttons = noteCard?.querySelectorAll('.reorder-buttons button')
|
||
if (buttons && buttons.length >= 2) {
|
||
await user.click(buttons[1] as HTMLButtonElement) // down arrow
|
||
expect(mockDayNotesState.moveNote).toHaveBeenCalled()
|
||
}
|
||
})
|
||
|
||
// ── Drop zone at end of list ──────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-088: drag over end-of-list zone sets dropTarget', () => {
|
||
const place = buildPlace({ id: 1, name: 'Spot A' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 11, day_id: 10, order_index: 0, place })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place], assignments: { '10': [assignment] },
|
||
})} />)
|
||
const assignmentEl = screen.getByText('Spot A').closest('[draggable="true"]')
|
||
const dt = { setData: vi.fn(), effectAllowed: '', getData: vi.fn().mockReturnValue('') }
|
||
fireEvent.dragStart(assignmentEl as Element, { dataTransfer: dt })
|
||
|
||
// Find the end-of-list drop zone (has minHeight: 12 and padding 2px 8px)
|
||
const endZones = document.querySelectorAll('[style*="min-height: 12"]')
|
||
if (endZones.length > 0) {
|
||
fireEvent.dragOver(endZones[0] as Element, { preventDefault: vi.fn() })
|
||
}
|
||
expect(screen.getByText('Spot A')).toBeInTheDocument()
|
||
})
|
||
|
||
// ── Inner expanded-area onDrop: place from sidebar ────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-089: dropping place from sidebar onto expanded content area calls onAssignToDay', () => {
|
||
const place = buildPlace({ id: 1, name: 'Existing Place' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 11, day_id: 10, order_index: 0, place })
|
||
const onAssignToDay = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place], assignments: { '10': [assignment] }, onAssignToDay,
|
||
})} />)
|
||
|
||
// The expanded content wrapper is the div with background: var(--bg-hover) paddingTop:6
|
||
const expandedArea = document.querySelector('[style*="padding-top: 6"]') ||
|
||
document.querySelector('[style*="paddingTop: 6"]')
|
||
|
||
if (expandedArea) {
|
||
;(window as any).__dragData = { placeId: '99' }
|
||
fireEvent.drop(expandedArea as Element, {
|
||
dataTransfer: { getData: vi.fn().mockReturnValue('') },
|
||
})
|
||
expect(onAssignToDay).toHaveBeenCalledWith(99, 10)
|
||
;(window as any).__dragData = null
|
||
}
|
||
})
|
||
|
||
// ── Export dialog ─────────────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-090: the export button opens the dialog with every format', async () => {
|
||
const user = userEvent.setup()
|
||
render(<DayPlanSidebar {...makeDefaultProps()} />)
|
||
await user.click(screen.getByRole('button', { name: 'Export' }))
|
||
await waitFor(() => {
|
||
expect(screen.getByText('PDF')).toBeInTheDocument()
|
||
expect(screen.getByText('Download .ics')).toBeInTheDocument()
|
||
expect(screen.getByText('Subscribe to calendar')).toBeInTheDocument()
|
||
expect(screen.getByText('Whole trip')).toBeInTheDocument()
|
||
})
|
||
})
|
||
|
||
// ── DragLeave on day header clears drag-over ──────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-091: dragLeave on day header clears dragOverDayId', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
|
||
const dayHeader = screen.getByText('Day 1').closest('[style*="cursor: pointer"]')
|
||
if (dayHeader) {
|
||
fireEvent.dragOver(dayHeader as Element, { preventDefault: vi.fn() })
|
||
fireEvent.dragLeave(dayHeader as Element, { relatedTarget: document.body })
|
||
}
|
||
expect(screen.getByText('Day 1')).toBeInTheDocument()
|
||
})
|
||
|
||
// ── applyMergedOrder: transport in merged list (transportUpdates branch) ──
|
||
|
||
it('FE-PLANNER-DAYPLAN-092: reordering day with flight in merged list updates transport positions', async () => {
|
||
const { reservationsApi } = await import('../../api/client') as any
|
||
const onReorder = vi.fn().mockResolvedValue(undefined)
|
||
const placeA = buildPlace({ id: 1, name: 'Museum' })
|
||
const placeB = buildPlace({ id: 2, name: 'Gallery' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const a1 = buildAssignment({ id: 11, day_id: 10, order_index: 0, place: placeA })
|
||
const a2 = buildAssignment({ id: 22, day_id: 10, order_index: 1, place: placeB })
|
||
const flight = buildReservation({
|
||
id: 77, trip_id: 1, type: 'flight', status: 'confirmed',
|
||
reservation_time: '2025-06-01T12:00:00Z',
|
||
})
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [placeA, placeB],
|
||
assignments: { '10': [a1, a2] }, reservations: [flight], onReorder,
|
||
})} />)
|
||
|
||
// DragStart on a2 (Gallery), drop on a1 (Museum) — same day
|
||
const draggable2 = screen.getByText('Gallery').closest('[draggable="true"]')
|
||
const draggable1 = screen.getByText('Museum').closest('[draggable="true"]')
|
||
const dt = { setData: vi.fn(), effectAllowed: '', getData: vi.fn().mockReturnValue('') }
|
||
fireEvent.dragStart(draggable2 as Element, { dataTransfer: dt })
|
||
fireEvent.drop(draggable1 as Element, { dataTransfer: { getData: vi.fn().mockReturnValue('') } })
|
||
|
||
await waitFor(() => expect(onReorder).toHaveBeenCalled())
|
||
})
|
||
|
||
// ── confirmTimeRemoval via arrow (reorderIds path) ─────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-093: arrow-reorder timed place shows modal then confirm removes time', async () => {
|
||
const user = userEvent.setup()
|
||
const { assignmentsApi } = await import('../../api/client') as any
|
||
const onReorder = vi.fn().mockResolvedValue(undefined)
|
||
const placeA = buildPlace({ id: 1, name: 'Early Place', place_time: '08:00' })
|
||
const placeB = buildPlace({ id: 2, name: 'Later Place', place_time: '14:00' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const a1 = buildAssignment({ id: 11, day_id: 10, order_index: 0, place: placeA })
|
||
const a2 = buildAssignment({ id: 22, day_id: 10, order_index: 1, place: placeB })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [placeA, placeB],
|
||
assignments: { '10': [a1, a2] }, onReorder,
|
||
})} />)
|
||
|
||
// Click down arrow on 'Early Place' (a1) — would move it after a2, breaking order
|
||
const earlyEl = screen.getByText('Early Place')
|
||
const row = earlyEl.closest('[style*="display: flex"][style*="gap: 8"]')
|
||
const reorderBtns = row?.querySelectorAll('.reorder-buttons button')
|
||
if (reorderBtns && reorderBtns.length >= 2) {
|
||
await user.click(reorderBtns[1] as HTMLButtonElement) // down button
|
||
// Modal should appear
|
||
await waitFor(() => expect(screen.getByText('Remove time?')).toBeInTheDocument())
|
||
// Click Confirm
|
||
const confirmBtn = screen.getByRole('button', { name: /confirm/i })
|
||
await user.click(confirmBtn)
|
||
await waitFor(() => expect(assignmentsApi.updateTime).toHaveBeenCalled())
|
||
}
|
||
})
|
||
|
||
// ── Same-day assignment drop onto end-of-list zone ────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-094: same-day assignment dropped on end-zone calls handleMergedDrop', async () => {
|
||
const onReorder = vi.fn().mockResolvedValue(undefined)
|
||
const placeA = buildPlace({ id: 1, name: 'First Stop' })
|
||
const placeB = buildPlace({ id: 2, name: 'Second Stop' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const a1 = buildAssignment({ id: 11, day_id: 10, order_index: 0, place: placeA })
|
||
const a2 = buildAssignment({ id: 22, day_id: 10, order_index: 1, place: placeB })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [placeA, placeB],
|
||
assignments: { '10': [a1, a2] }, onReorder,
|
||
})} />)
|
||
|
||
// DragStart on a1 (First Stop), drop on end-of-list zone
|
||
const draggable1 = screen.getByText('First Stop').closest('[draggable="true"]')
|
||
const dt = { setData: vi.fn(), effectAllowed: '', getData: vi.fn().mockReturnValue('') }
|
||
fireEvent.dragStart(draggable1 as Element, { dataTransfer: dt })
|
||
|
||
const endZones = document.querySelectorAll('[style*="min-height: 12"]')
|
||
if (endZones.length > 0) {
|
||
fireEvent.drop(endZones[0] as Element, { dataTransfer: { getData: vi.fn().mockReturnValue('') } })
|
||
}
|
||
|
||
await waitFor(() => expect(onReorder).toHaveBeenCalled())
|
||
})
|
||
|
||
// ── Accommodation check-in (start_day_id === day.id) styling ─────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-095: accommodation check-in day shows check-in badge', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
// Accommodation starts on day 10 (check-in day)
|
||
const acc = { id: 1, start_day_id: 10, end_day_id: 12, place_id: 5, place_name: 'Boutique Hotel' }
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], accommodations: [acc as any],
|
||
})} />)
|
||
expect(screen.getByText('Boutique Hotel')).toBeInTheDocument()
|
||
})
|
||
|
||
// ── handleOptimize: selectedDayId null early return ───────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-096: optimize button with no selectedDay does nothing', async () => {
|
||
const user = userEvent.setup()
|
||
const onReorder = vi.fn()
|
||
const places = [
|
||
buildPlace({ id: 1, name: 'P1', lat: 1, lng: 1 }),
|
||
buildPlace({ id: 2, name: 'P2', lat: 2, lng: 2 }),
|
||
buildPlace({ id: 3, name: 'P3', lat: 3, lng: 3 }),
|
||
]
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places,
|
||
assignments: {
|
||
'10': [
|
||
buildAssignment({ id: 1, day_id: 10, order_index: 0, place: places[0] }),
|
||
buildAssignment({ id: 2, day_id: 10, order_index: 1, place: places[1] }),
|
||
buildAssignment({ id: 3, day_id: 10, order_index: 2, place: places[2] }),
|
||
],
|
||
},
|
||
selectedDayId: null, onReorder,
|
||
})} />)
|
||
// Optimize button should not be visible when no day is selected
|
||
expect(screen.queryByRole('button', { name: /optimize/i })).not.toBeInTheDocument()
|
||
})
|
||
|
||
// ── Edit reservation pencil button ───────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-097: pencil button on non-transport reservation calls onEditReservation', async () => {
|
||
const user = userEvent.setup()
|
||
const place = buildPlace({ id: 1, name: 'Hotel du Lac' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
const res = buildReservation({ id: 77, trip_id: 1, type: 'hotel', status: 'pending', assignment_id: 99 } as any)
|
||
const onEditReservation = vi.fn()
|
||
const onEditTransport = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place], assignments: { '10': [assignment] }, reservations: [res],
|
||
onEditReservation, onEditTransport,
|
||
})} />)
|
||
const pencil = screen.getByTitle(/edit/i)
|
||
await user.click(pencil)
|
||
expect(onEditReservation).toHaveBeenCalledWith(res)
|
||
expect(onEditTransport).not.toHaveBeenCalled()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-098: pencil button on transport reservation calls onEditTransport', async () => {
|
||
const user = userEvent.setup()
|
||
const place = buildPlace({ id: 1, name: 'Geneva Airport' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
const res = buildReservation({ id: 88, trip_id: 1, type: 'flight', status: 'pending', assignment_id: 99 } as any)
|
||
const onEditReservation = vi.fn()
|
||
const onEditTransport = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place], assignments: { '10': [assignment] }, reservations: [res],
|
||
onEditReservation, onEditTransport,
|
||
})} />)
|
||
const pencil = screen.getByTitle(/edit/i)
|
||
await user.click(pencil)
|
||
expect(onEditTransport).toHaveBeenCalledWith(res)
|
||
expect(onEditReservation).not.toHaveBeenCalled()
|
||
})
|
||
|
||
// ── showRouteToolsWhenExpanded (mobile route tools) ───────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-099: showRouteToolsWhenExpanded shows route tools on expanded day without selection', () => {
|
||
const places = [
|
||
buildPlace({ id: 1, name: 'A', lat: 48.85, lng: 2.35 }),
|
||
buildPlace({ id: 2, name: 'B', lat: 48.86, lng: 2.36 }),
|
||
]
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assigns = {
|
||
'10': [
|
||
buildAssignment({ id: 1, day_id: 10, order_index: 0, place: places[0] }),
|
||
buildAssignment({ id: 2, day_id: 10, order_index: 1, place: places[1] }),
|
||
],
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places, assignments: assigns, selectedDayId: null, showRouteToolsWhenExpanded: true,
|
||
})} />)
|
||
// Days are expanded by default, so route tools must be visible even with no selected day
|
||
expect(screen.getByRole('button', { name: /optimize/i })).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-100: optimize via showRouteToolsWhenExpanded reorders the expanded day', async () => {
|
||
const user = userEvent.setup()
|
||
const onReorder = vi.fn().mockResolvedValue(undefined)
|
||
const places = [
|
||
buildPlace({ id: 1, name: 'A', lat: 48.85, lng: 2.35 }),
|
||
buildPlace({ id: 2, name: 'B', lat: 48.86, lng: 2.36 }),
|
||
buildPlace({ id: 3, name: 'C', lat: 48.87, lng: 2.37 }),
|
||
]
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assigns = {
|
||
'10': [
|
||
buildAssignment({ id: 1, day_id: 10, order_index: 0, place: places[0] }),
|
||
buildAssignment({ id: 2, day_id: 10, order_index: 1, place: places[1] }),
|
||
buildAssignment({ id: 3, day_id: 10, order_index: 2, place: places[2] }),
|
||
],
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places, assignments: assigns, selectedDayId: null, onReorder, showRouteToolsWhenExpanded: true,
|
||
})} />)
|
||
const optimizeBtn = screen.getByRole('button', { name: /optimize/i })
|
||
await user.click(optimizeBtn)
|
||
await waitFor(() => expect(onReorder).toHaveBeenCalledWith(10, expect.any(Array)))
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-101: mobile Route toggle shows inline leg distances without selecting the day (#1374)', async () => {
|
||
const user = userEvent.setup()
|
||
const onSelectDay = vi.fn()
|
||
const onToggleRoute = vi.fn()
|
||
const places = [
|
||
buildPlace({ id: 1, name: 'A', lat: 48.85, lng: 2.35 }),
|
||
buildPlace({ id: 2, name: 'B', lat: 48.86, lng: 2.36 }),
|
||
]
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assigns = {
|
||
'10': [
|
||
buildAssignment({ id: 1, day_id: 10, order_index: 0, place: places[0] }),
|
||
buildAssignment({ id: 2, day_id: 10, order_index: 1, place: places[1] }),
|
||
],
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places, assignments: assigns, selectedDayId: null,
|
||
showRouteToolsWhenExpanded: true, onSelectDay, onToggleRoute,
|
||
})} />)
|
||
// Distances are hidden until the user asks for them.
|
||
expect(screen.queryByText('2 km')).not.toBeInTheDocument()
|
||
await user.click(screen.getByRole('button', { name: 'Route' }))
|
||
// The leg distance appears inline…
|
||
expect(await screen.findByText('2 km')).toBeInTheDocument()
|
||
// …and the day was never selected, so on mobile the sheet stays open.
|
||
expect(onSelectDay).not.toHaveBeenCalled()
|
||
expect(onToggleRoute).not.toHaveBeenCalled()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-102: mobile Route toggle hides the distances again on second tap (#1374)', async () => {
|
||
const user = userEvent.setup()
|
||
const places = [
|
||
buildPlace({ id: 1, name: 'A', lat: 48.85, lng: 2.35 }),
|
||
buildPlace({ id: 2, name: 'B', lat: 48.86, lng: 2.36 }),
|
||
]
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assigns = {
|
||
'10': [
|
||
buildAssignment({ id: 1, day_id: 10, order_index: 0, place: places[0] }),
|
||
buildAssignment({ id: 2, day_id: 10, order_index: 1, place: places[1] }),
|
||
],
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places, assignments: assigns, selectedDayId: null, showRouteToolsWhenExpanded: true,
|
||
})} />)
|
||
const routeBtn = screen.getByRole('button', { name: 'Route' })
|
||
await user.click(routeBtn)
|
||
expect(await screen.findByText('2 km')).toBeInTheDocument()
|
||
await user.click(routeBtn)
|
||
await waitFor(() => expect(screen.queryByText('2 km')).not.toBeInTheDocument())
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-103: two route-toggled days keep separate leg distances despite id overlap (#1374)', async () => {
|
||
const user = userEvent.setup()
|
||
const { calculateRouteWithLegs } = await import('../Map/RouteCalculator')
|
||
// Distance derived from the first waypoint's latitude, so each day yields a
|
||
// distinct text. With a flat (non-per-day) leg map, the shared first-place id (5)
|
||
// would let the last day overwrite the other — this guards that regression.
|
||
vi.mocked(calculateRouteWithLegs as any).mockImplementation((wp: any) => {
|
||
const lat = wp?.[0]?.lat ?? 0
|
||
const txt = `${Math.round(lat * 100)} m`
|
||
return Promise.resolve({
|
||
distanceText: txt, durationText: '1 min',
|
||
legs: Array.from({ length: Math.max(0, (wp?.length ?? 0) - 1) }, () => ({
|
||
distanceText: txt, durationText: '1 min', drivingText: '1 min', walkingText: '1 min',
|
||
})),
|
||
})
|
||
})
|
||
const dayA = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const dayB = buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' })
|
||
// Both days start with an assignment whose id is 5 (the leg is keyed on the first
|
||
// place's id) — the collision the per-day nesting must keep apart.
|
||
const assigns = {
|
||
'10': [
|
||
buildAssignment({ id: 5, day_id: 10, order_index: 0, place: buildPlace({ id: 1, name: 'A1', lat: 10.0, lng: 2.0 }) }),
|
||
buildAssignment({ id: 6, day_id: 10, order_index: 1, place: buildPlace({ id: 2, name: 'A2', lat: 10.01, lng: 2.01 }) }),
|
||
],
|
||
'11': [
|
||
buildAssignment({ id: 5, day_id: 11, order_index: 0, place: buildPlace({ id: 3, name: 'B1', lat: 20.0, lng: 3.0 }) }),
|
||
buildAssignment({ id: 7, day_id: 11, order_index: 1, place: buildPlace({ id: 4, name: 'B2', lat: 20.01, lng: 3.01 }) }),
|
||
],
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [dayA, dayB],
|
||
places: [], assignments: assigns, selectedDayId: null, showRouteToolsWhenExpanded: true,
|
||
})} />)
|
||
const routeBtns = screen.getAllByRole('button', { name: 'Route' })
|
||
await user.click(routeBtns[0]) // Day 1
|
||
await user.click(routeBtns[1]) // Day 2
|
||
// Each day shows its own distance, not the other's — proves per-day isolation.
|
||
expect(await screen.findByText('1000 m')).toBeInTheDocument()
|
||
expect(await screen.findByText('2000 m')).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-106: leg distance survives a car rental on its middle days (#1504)', async () => {
|
||
const user = userEvent.setup()
|
||
const { calculateRouteWithLegs } = await import('../Map/RouteCalculator')
|
||
vi.mocked(calculateRouteWithLegs as any).mockImplementation((wp: any) => Promise.resolve({
|
||
distanceText: '2 km', durationText: '10 min',
|
||
legs: Array.from({ length: Math.max(0, (wp?.length ?? 0) - 1) }, () => ({
|
||
distanceText: '2 km', durationText: '10 min', drivingText: '10 min', walkingText: '25 min',
|
||
})),
|
||
}))
|
||
// A rental spanning days 10–12: on day 11 (middle) its row is not rendered in
|
||
// the timeline, so the through-leg between the places around it must stay keyed
|
||
// to the place — re-keying it to the hidden car row would drop the distance.
|
||
const car = {
|
||
...buildReservation({ id: 400, type: 'car', title: 'Rental car', day_id: 10 }),
|
||
end_day_id: 12,
|
||
day_positions: { 11: 0.5 },
|
||
}
|
||
const days = [
|
||
buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
|
||
buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
|
||
buildDay({ id: 12, date: '2025-06-03', title: 'Day 3' }),
|
||
]
|
||
const assigns = {
|
||
'11': [
|
||
buildAssignment({ id: 1, day_id: 11, order_index: 0, place: buildPlace({ id: 1, name: 'A', lat: 48.85, lng: 2.35 }) }),
|
||
buildAssignment({ id: 2, day_id: 11, order_index: 1, place: buildPlace({ id: 2, name: 'B', lat: 48.86, lng: 2.36 }) }),
|
||
],
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days, places: [], assignments: assigns, reservations: [car as any],
|
||
selectedDayId: null, showRouteToolsWhenExpanded: true,
|
||
})} />)
|
||
// Only day 2 has places, so it renders the sole Route toggle.
|
||
await user.click(screen.getByRole('button', { name: 'Route' }))
|
||
expect(await screen.findByText('2 km')).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-203: leg distance survives a parking on its middle days (#1937)', async () => {
|
||
const user = userEvent.setup()
|
||
const { calculateRouteWithLegs } = await import('../Map/RouteCalculator')
|
||
vi.mocked(calculateRouteWithLegs as any).mockImplementation((wp: any) => Promise.resolve({
|
||
distanceText: '2 km', durationText: '10 min',
|
||
legs: Array.from({ length: Math.max(0, (wp?.length ?? 0) - 1) }, () => ({
|
||
distanceText: '2 km', durationText: '10 min', drivingText: '10 min', walkingText: '25 min',
|
||
})),
|
||
}))
|
||
// Same trap as the car rental in -106: the parking row is hidden on day 11, so the
|
||
// through-leg between the places around it must stay keyed to the place.
|
||
const parking = {
|
||
...buildReservation({ id: 323, type: 'parking', title: 'Airport Parking', day_id: 10 }),
|
||
end_day_id: 12,
|
||
day_positions: { 11: 0.5 },
|
||
}
|
||
const days = [
|
||
buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
|
||
buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
|
||
buildDay({ id: 12, date: '2025-06-03', title: 'Day 3' }),
|
||
]
|
||
const assigns = {
|
||
'11': [
|
||
buildAssignment({ id: 1, day_id: 11, order_index: 0, place: buildPlace({ id: 1, name: 'A', lat: 48.85, lng: 2.35 }) }),
|
||
buildAssignment({ id: 2, day_id: 11, order_index: 1, place: buildPlace({ id: 2, name: 'B', lat: 48.86, lng: 2.36 }) }),
|
||
],
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days, places: [], assignments: assigns, reservations: [parking as any],
|
||
selectedDayId: null, showRouteToolsWhenExpanded: true,
|
||
})} />)
|
||
await user.click(screen.getByRole('button', { name: 'Route' }))
|
||
expect(await screen.findByText('2 km')).toBeInTheDocument()
|
||
})
|
||
|
||
// ── Persisted / externally driven state ──────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-110: the saved collapse state wins over expanding every day', () => {
|
||
const place = buildPlace({ id: 1, name: 'Stored Place' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const a = buildAssignment({ id: 11, day_id: 10, order_index: 0, place })
|
||
localStorage.setItem('day-expanded-1', JSON.stringify([]))
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments: { '10': [a] } })} />)
|
||
expect(screen.getByText('Day 1')).toBeInTheDocument()
|
||
expect(screen.queryByText('Stored Place')).not.toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-111: an externally requested booking opens its detail modal and hands editing back', async () => {
|
||
const user = userEvent.setup()
|
||
const onExternalTransportDetailHandled = vi.fn()
|
||
const onEditTransport = vi.fn()
|
||
const res = buildReservation({ id: 300, type: 'flight', title: 'BER to CDG', reservation_time: '2025-06-01T08:30:00' })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ externalTransportDetail: res, onExternalTransportDetailHandled, onEditTransport })} />)
|
||
expect(await screen.findByText('BER to CDG')).toBeInTheDocument()
|
||
expect(onExternalTransportDetailHandled).toHaveBeenCalledTimes(1)
|
||
await user.click(screen.getByRole('button', { name: /^Edit$/ }))
|
||
expect(onEditTransport).toHaveBeenCalledWith(res)
|
||
await waitFor(() => expect(screen.queryByText('BER to CDG')).not.toBeInTheDocument())
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-112: the list restores its saved scroll offset and reports further scrolling', () => {
|
||
const onScrollTopChange = vi.fn()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
// jsdom has no layout, so scrollTop is a no-op accessor — back it with a real one.
|
||
const original = Object.getOwnPropertyDescriptor(Element.prototype, 'scrollTop')!
|
||
Object.defineProperty(Element.prototype, 'scrollTop', {
|
||
configurable: true,
|
||
get(this: Element & { _st?: number }) { return this._st ?? 0 },
|
||
set(this: Element & { _st?: number }, v: number) { this._st = v },
|
||
})
|
||
try {
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], onScrollTopChange, initialScrollTop: 140 })} />)
|
||
const list = document.querySelector('.scroll-container') as HTMLElement
|
||
expect(list.scrollTop).toBe(140)
|
||
list.scrollTop = 260
|
||
fireEvent.scroll(list)
|
||
expect(onScrollTopChange).toHaveBeenCalledWith(260)
|
||
} finally {
|
||
Object.defineProperty(Element.prototype, 'scrollTop', original)
|
||
}
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-113: a day added later expands on its own and is remembered', () => {
|
||
const d1 = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const d2 = buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' })
|
||
const props = makeDefaultProps({ days: [d1] })
|
||
const { rerender } = render(<DayPlanSidebar {...props} />)
|
||
expect(screen.getAllByText('No places planned for this day')).toHaveLength(1)
|
||
rerender(<DayPlanSidebar {...props} days={[d1, d2]} />)
|
||
expect(screen.getAllByText('No places planned for this day')).toHaveLength(2)
|
||
expect(JSON.parse(localStorage.getItem('day-expanded-1')!).sort()).toEqual([10, 11])
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-114: bookings without a saved slot get one derived from their time', async () => {
|
||
const { reservationsApi } = await import('../../api/client')
|
||
const place = buildPlace({ id: 1, name: 'Cafe', place_time: '08:00' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const a = buildAssignment({ id: 11, day_id: 10, order_index: 0, place })
|
||
const late = buildReservation({ id: 301, type: 'flight', title: 'Late flight', reservation_time: '2025-06-01T18:00:00', day_id: 10 })
|
||
const early = buildReservation({ id: 302, type: 'train', title: 'Early train', reservation_time: '2025-06-01T06:00:00', day_id: 10 })
|
||
seedStore(useTripStore, { reservations: [late, early] })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place], assignments: { '10': [a] }, reservations: [late, early],
|
||
})} />)
|
||
await waitFor(() => expect(vi.mocked(reservationsApi.updatePositions)).toHaveBeenCalled())
|
||
const positions = vi.mocked(reservationsApi.updatePositions).mock.calls[0][1]
|
||
// Sorted by departure time, so the 06:00 train is initialised first.
|
||
expect(positions.map(p => p.id)).toEqual([302, 301])
|
||
// The store is updated up front so the merged list sees the new slots.
|
||
const stored = useTripStore.getState().reservations.find(r => r.id === 301)
|
||
expect(stored!.day_plan_position).toBe(positions[1].day_plan_position)
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-204: a rejected slot write puts the bookings back where the server has them', async () => {
|
||
const { reservationsApi } = await import('../../api/client')
|
||
vi.mocked(reservationsApi.updatePositions).mockRejectedValueOnce(new Error('offline'))
|
||
const place = buildPlace({ id: 1, name: 'Cafe', place_time: '08:00' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const a = buildAssignment({ id: 11, day_id: 10, order_index: 0, place })
|
||
const train = buildReservation({ id: 302, type: 'train', title: 'Early train', reservation_time: '2025-06-01T06:00:00', day_id: 10 })
|
||
seedStore(useTripStore, { reservations: [train] })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place], assignments: { '10': [a] }, reservations: [train],
|
||
})} />)
|
||
await waitFor(() => expect(vi.mocked(reservationsApi.updatePositions)).toHaveBeenCalled())
|
||
// The optimistic slot is rolled back, so the next mount derives it again
|
||
// instead of showing an order only this tab knows about.
|
||
await waitFor(() => {
|
||
expect(useTripStore.getState().reservations.find(r => r.id === 302)!.day_plan_position).toBeNull()
|
||
})
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-115: a multi-day cruise labels its start, middle and end days', () => {
|
||
const days = [
|
||
buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
|
||
buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
|
||
buildDay({ id: 12, date: '2025-06-03', title: 'Day 3' }),
|
||
]
|
||
const cruise = buildReservation({
|
||
id: 310, type: 'cruise', title: 'Baltic cruise', day_id: 10, end_day_id: 12,
|
||
reservation_time: '2025-06-01T10:00:00',
|
||
})
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days, reservations: [cruise] })} />)
|
||
expect(screen.getByText('Start')).toBeInTheDocument()
|
||
expect(screen.getByText('Ongoing')).toBeInTheDocument()
|
||
expect(screen.getByText('End')).toBeInTheDocument()
|
||
})
|
||
|
||
// ── Moving a booking across days (computeMultiDayMove) ───────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-116: dragging a span start past its end collapses the booking onto one day', () => {
|
||
const updateReservation = vi.fn(async () => ({} as Reservation))
|
||
stubTripActions({ updateReservation })
|
||
const days = [9, 10, 11, 12].map((id, i) => buildDay({ id, date: `2025-06-0${i + 1}`, title: `Day ${i + 1}` }))
|
||
const flight = buildReservation({ id: 400, type: 'flight', title: 'Long flight', day_id: 10, end_day_id: 12, reservation_time: '2025-06-02T10:00:00' })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days, reservations: [flight] })} />)
|
||
// Rows render on days 2..4; the first one is the start phase.
|
||
fireEvent.dragStart(dragRow(screen.getAllByText('Long flight')[0]), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(dayHeader('Day 1'), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
// Day 1 sits before the span end, so only the start moves.
|
||
expect(updateReservation).toHaveBeenLastCalledWith(1, 400, { day_id: 9, end_day_id: 12 })
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-117: dragging a span end before its start collapses it, otherwise it just shortens', () => {
|
||
const updateReservation = vi.fn(async () => ({} as Reservation))
|
||
stubTripActions({ updateReservation })
|
||
const days = [9, 10, 11, 12].map((id, i) => buildDay({ id, date: `2025-06-0${i + 1}`, title: `Day ${i + 1}` }))
|
||
const flight = buildReservation({ id: 400, type: 'flight', title: 'Long flight', day_id: 10, end_day_id: 12, reservation_time: '2025-06-02T10:00:00' })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days, reservations: [flight] })} />)
|
||
const endRow = () => dragRow(screen.getAllByText('Long flight')[2])
|
||
fireEvent.dragStart(endRow(), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(dayHeader('Day 3'), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
expect(updateReservation).toHaveBeenLastCalledWith(1, 400, { day_id: 10, end_day_id: 11 })
|
||
|
||
fireEvent.dragStart(endRow(), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(dayHeader('Day 1'), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
expect(updateReservation).toHaveBeenLastCalledWith(1, 400, { day_id: 9, end_day_id: 9 })
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-118: a single-day booking dragged to another day moves wholesale', () => {
|
||
const updateReservation = vi.fn(async () => ({} as Reservation))
|
||
stubTripActions({ updateReservation })
|
||
const days = [
|
||
buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
|
||
buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
|
||
]
|
||
const dinner = buildReservation({ id: 401, type: 'train', title: 'Regional train', day_id: 10, reservation_time: '2025-06-01T10:00:00' })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days, reservations: [dinner] })} />)
|
||
fireEvent.dragStart(dragRow(screen.getByText('Regional train')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(dayHeader('Day 2'), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
expect(updateReservation).toHaveBeenCalledWith(1, 401, { day_id: 11, end_day_id: 11 })
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-119: only a genuine multi-day rental with known days shows the active badge', () => {
|
||
const days = [
|
||
buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
|
||
buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
|
||
buildDay({ id: 12, date: '2025-06-03', title: 'Day 3' }),
|
||
]
|
||
const sameDay = buildReservation({ id: 410, type: 'car', title: 'Day rental', day_id: 10, end_day_id: 10 })
|
||
const unknownEnd = buildReservation({ id: 411, type: 'car', title: 'Ghost rental', day_id: 10, end_day_id: 999 })
|
||
const real = buildReservation({ id: 412, type: 'car', title: 'Real rental', day_id: 10, end_day_id: 12 })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days, reservations: [sameDay, unknownEnd, real] })} />)
|
||
// The real rental: a pickup row, a return row and the "active" badge on day 2.
|
||
expect(screen.getAllByText('Real rental')).toHaveLength(3)
|
||
// A same-day rental and one whose end day is unknown never count as active,
|
||
// so each only shows its own timeline row.
|
||
expect(screen.getAllByText('Day rental')).toHaveLength(1)
|
||
expect(screen.getAllByText('Ghost rental')).toHaveLength(1)
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-200: a multi-day parking shows on the first and last day only (#1937)', () => {
|
||
const days = [
|
||
buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
|
||
buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
|
||
buildDay({ id: 12, date: '2025-06-03', title: 'Day 3' }),
|
||
]
|
||
const parking = buildReservation({
|
||
id: 320, type: 'parking', title: 'Airport Parking', day_id: 10, end_day_id: 12,
|
||
reservation_time: '2025-06-01T05:30:00', reservation_end_time: '2025-06-03T19:00:00',
|
||
})
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days, reservations: [parking] })} />)
|
||
// Drop-off on day 1, pickup on day 3, nothing in between.
|
||
expect(screen.getAllByText('Airport Parking')).toHaveLength(2)
|
||
// And no smaller tag in the day header either, unlike a rental car.
|
||
expect(within(dayHeader('Day 2')).queryByText('Airport Parking')).not.toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-201: a multi-day parking labels its drop-off and its pickup day', () => {
|
||
const days = [
|
||
buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
|
||
buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
|
||
buildDay({ id: 12, date: '2025-06-03', title: 'Day 3' }),
|
||
]
|
||
const parking = buildReservation({
|
||
id: 321, type: 'parking', title: 'Airport Parking', day_id: 10, end_day_id: 12,
|
||
reservation_time: '2025-06-01T05:30:00', reservation_end_time: '2025-06-03T19:00:00',
|
||
})
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days, reservations: [parking] })} />)
|
||
expect(screen.getByText('Drop-off')).toBeInTheDocument()
|
||
expect(screen.getByText('Pickup')).toBeInTheDocument()
|
||
// The generic span wording never appears for a parking.
|
||
expect(screen.queryByText('Ongoing')).not.toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-202: a day left empty by a spanning parking shows the empty-day hint', () => {
|
||
const days = [
|
||
buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
|
||
buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
|
||
buildDay({ id: 12, date: '2025-06-03', title: 'Day 3' }),
|
||
]
|
||
const parking = buildReservation({
|
||
id: 322, type: 'parking', title: 'Airport Parking', day_id: 10, end_day_id: 12,
|
||
reservation_time: '2025-06-01T05:30:00', reservation_end_time: '2025-06-03T19:00:00',
|
||
})
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days, reservations: [parking] })} />)
|
||
// Days 1 and 3 carry the booking, so only day 2 is empty, and it says so instead
|
||
// of leaving a blank gap where the hidden row used to be.
|
||
expect(screen.getAllByText('No places planned for this day')).toHaveLength(1)
|
||
})
|
||
|
||
// ── Route legs, hotel bookends, travel modes ─────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-120: a routed day draws the hotel bookends around its stops', async () => {
|
||
const days = [
|
||
buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
|
||
buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
|
||
buildDay({ id: 12, date: '2025-06-03', title: 'Day 3' }),
|
||
]
|
||
const accommodations: Accommodation[] = [{
|
||
id: 1, trip_id: 1, start_day_id: 10, end_day_id: 12,
|
||
place_lat: 48.85, place_lng: 2.35, place_name: 'Hotel Lutetia',
|
||
}]
|
||
const assignments = {
|
||
'11': [
|
||
buildAssignment({ id: 1, day_id: 11, order_index: 0, place: buildPlace({ id: 1, name: 'Louvre', lat: 48.86, lng: 2.34 }) }),
|
||
buildAssignment({ id: 2, day_id: 11, order_index: 1, place: buildPlace({ id: 2, name: 'Orsay', lat: 48.87, lng: 2.33 }) }),
|
||
],
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days, assignments, accommodations, selectedDayId: 11, routeShown: true,
|
||
})} />)
|
||
// Three day-header badges plus the morning departure and evening return connectors.
|
||
await waitFor(() => expect(screen.getAllByText('Hotel Lutetia')).toHaveLength(5))
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-121: a located booking splits the day into separate drive runs', async () => {
|
||
const { calculateRouteWithLegs } = await import('../Map/RouteCalculator')
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const flight = buildReservation({
|
||
id: 420, type: 'flight', title: 'Hop over', day_id: 10, reservation_time: '2025-06-01T12:00:00',
|
||
endpoints: [
|
||
{ role: 'from', sequence: 0, name: 'ORY', code: null, lat: 48.72, lng: 2.36, timezone: null, local_date: null, local_time: null },
|
||
{ role: 'to', sequence: 1, name: 'NCE', code: null, lat: 43.66, lng: 7.21, timezone: null, local_date: null, local_time: null },
|
||
],
|
||
})
|
||
const assignments = {
|
||
'10': [
|
||
buildAssignment({ id: 1, day_id: 10, order_index: 0, place: buildPlace({ id: 1, name: 'Morning stop', place_time: '09:00', lat: 48.86, lng: 2.34 }) }),
|
||
buildAssignment({ id: 2, day_id: 10, order_index: 1, place: buildPlace({ id: 2, name: 'Evening stop', place_time: '18:00', lat: 43.70, lng: 7.26 }) }),
|
||
],
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], assignments, reservations: [flight], selectedDayId: 10, routeShown: true,
|
||
})} />)
|
||
await waitFor(() => expect(vi.mocked(calculateRouteWithLegs)).toHaveBeenCalled())
|
||
// Two runs: morning stop → departure airport, arrival airport → evening stop.
|
||
const pairs = vi.mocked(calculateRouteWithLegs).mock.calls.map(c => c[0])
|
||
expect(pairs).toContainEqual([{ lat: 48.86, lng: 2.34 }, { lat: 48.72, lng: 2.36 }])
|
||
expect(pairs).toContainEqual([{ lat: 43.66, lng: 7.21 }, { lat: 43.70, lng: 7.26 }])
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-122: a failing route lookup leaves the day without connectors', async () => {
|
||
const { calculateRouteWithLegs } = await import('../Map/RouteCalculator')
|
||
vi.mocked(calculateRouteWithLegs).mockRejectedValue(new Error('router down'))
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignments = {
|
||
'10': [
|
||
buildAssignment({ id: 1, day_id: 10, order_index: 0, place: buildPlace({ id: 1, name: 'A', lat: 48.85, lng: 2.35 }) }),
|
||
buildAssignment({ id: 2, day_id: 10, order_index: 1, place: buildPlace({ id: 2, name: 'B', lat: 48.86, lng: 2.36 }) }),
|
||
],
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], assignments, selectedDayId: 10, routeShown: true })} />)
|
||
await waitFor(() => expect(vi.mocked(calculateRouteWithLegs)).toHaveBeenCalled())
|
||
expect(screen.queryByText('2 km')).not.toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-205: the legs of a day are fetched together, not one after the other', async () => {
|
||
const { calculateRouteWithLegs } = await import('../Map/RouteCalculator')
|
||
const release: (() => void)[] = []
|
||
vi.mocked(calculateRouteWithLegs as any).mockImplementation(() => new Promise(resolve => {
|
||
release.push(() => resolve({
|
||
coordinates: [], distance: 0, duration: 0,
|
||
legs: [{ distanceText: '2 km', durationText: '10 min', drivingText: '10 min', walkingText: '25 min' }],
|
||
}))
|
||
}))
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const places = [
|
||
buildPlace({ id: 1, name: 'A', lat: 48.85, lng: 2.35 }),
|
||
buildPlace({ id: 2, name: 'B', lat: 48.86, lng: 2.36 }),
|
||
buildPlace({ id: 3, name: 'C', lat: 48.87, lng: 2.37 }),
|
||
buildPlace({ id: 4, name: 'D', lat: 48.88, lng: 2.38 }),
|
||
]
|
||
const assignments = {
|
||
'10': places.map((place, i) => buildAssignment({ id: i + 1, day_id: 10, order_index: i, place })),
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places, assignments, selectedDayId: 10, routeShown: true })} />)
|
||
// All three legs are in flight while none of them has answered yet.
|
||
await waitFor(() => expect(release).toHaveLength(3))
|
||
release.forEach(fn => fn())
|
||
// And the connectors still land in one go once they come back.
|
||
await waitFor(() => expect(screen.getAllByText('2 km')).toHaveLength(3))
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-123: adding a note to a collapsed day expands it first', async () => {
|
||
const user = userEvent.setup()
|
||
mockDayNotesState.openAddNote.mockImplementation((dayId: number, _getMerged: unknown, expand: (id: number) => void) => expand(dayId))
|
||
const place = buildPlace({ id: 1, name: 'Hidden Place' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const a = buildAssignment({ id: 11, day_id: 10, order_index: 0, place })
|
||
localStorage.setItem('day-expanded-1', JSON.stringify([]))
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments: { '10': [a] } })} />)
|
||
expect(screen.queryByText('Hidden Place')).not.toBeInTheDocument()
|
||
await user.click(screen.getByLabelText('Add Note'))
|
||
expect(await screen.findByText('Hidden Place')).toBeInTheDocument()
|
||
})
|
||
|
||
// ── applyMergedOrder ─────────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-124: reordering a day persists booking slots, note order and an undo step', async () => {
|
||
const { reservationsApi } = await import('../../api/client')
|
||
const updateDayNote = vi.fn(async () => buildDayNote({ id: 70 }))
|
||
const reorderAssignments = vi.fn(async () => undefined)
|
||
stubTripActions({ updateDayNote, reorderAssignments })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const placeA = buildPlace({ id: 1, name: 'Place A' })
|
||
const placeB = buildPlace({ id: 2, name: 'Place B' })
|
||
const a1 = buildAssignment({ id: 11, day_id: 10, order_index: 0, place: placeA })
|
||
const a2 = buildAssignment({ id: 12, day_id: 10, order_index: 1, place: placeB })
|
||
const note = buildDayNote({ id: 70, day_id: 10, text: 'Pack sunscreen', sort_order: 1.4 })
|
||
const bus = buildReservation({ id: 430, type: 'bus', title: 'Airport bus', day_id: 10, day_plan_position: 1.5 })
|
||
mockDayNotesState.dayNotes = { '10': [note] }
|
||
seedStore(useTripStore, { reservations: [bus] })
|
||
const onReorder = vi.fn(async () => undefined)
|
||
const onRouteRefresh = vi.fn()
|
||
const pushUndo = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [placeA, placeB], assignments: { '10': [a1, a2] },
|
||
reservations: [bus], onReorder, onRouteRefresh, pushUndo,
|
||
})} />)
|
||
// Drag Place B above Place A so the note + bus end up as one trailing group.
|
||
fireEvent.dragStart(dragRow(screen.getByText('Place B')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(dragRow(screen.getByText('Place A')), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
|
||
await waitFor(() => expect(onReorder).toHaveBeenCalledWith(10, [12, 11]))
|
||
expect(updateDayNote).toHaveBeenCalledWith(1, 10, 70, { sort_order: expect.any(Number) })
|
||
await waitFor(() => expect(vi.mocked(reservationsApi.updatePositions)).toHaveBeenCalledWith(
|
||
1, [{ id: 430, day_plan_position: expect.any(Number) }], 10,
|
||
))
|
||
expect(onRouteRefresh).toHaveBeenCalled()
|
||
// The store carries the new slot per day so the merged list stays stable.
|
||
expect(useTripStore.getState().reservations[0].day_positions).toEqual({ 10: expect.any(Number) })
|
||
// Undoing restores the original assignment order.
|
||
const undo = pushUndo.mock.calls[0][1] as () => Promise<void>
|
||
await undo()
|
||
expect(reorderAssignments).toHaveBeenCalledWith(1, 10, [11, 12])
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-125: a rejected reorder surfaces the error as a toast', async () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const placeA = buildPlace({ id: 1, name: 'Place A' })
|
||
const placeB = buildPlace({ id: 2, name: 'Place B' })
|
||
const a1 = buildAssignment({ id: 11, day_id: 10, order_index: 0, place: placeA })
|
||
const a2 = buildAssignment({ id: 12, day_id: 10, order_index: 1, place: placeB })
|
||
const onReorder = vi.fn().mockRejectedValue(new Error('server said no'))
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [placeA, placeB], assignments: { '10': [a1, a2] }, onReorder,
|
||
})} />)
|
||
fireEvent.dragStart(dragRow(screen.getByText('Place B')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(dragRow(screen.getByText('Place A')), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
await waitFor(() => expect(mockToast.error).toHaveBeenCalledWith('server said no'))
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-206: a rejected slot write snaps the booking order back', async () => {
|
||
const { reservationsApi } = await import('../../api/client')
|
||
vi.mocked(reservationsApi.updatePositions).mockRejectedValueOnce(new Error('server said no'))
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const placeA = buildPlace({ id: 1, name: 'Place A' })
|
||
const placeB = buildPlace({ id: 2, name: 'Place B' })
|
||
const a1 = buildAssignment({ id: 11, day_id: 10, order_index: 0, place: placeA })
|
||
const a2 = buildAssignment({ id: 12, day_id: 10, order_index: 1, place: placeB })
|
||
const bus = buildReservation({ id: 430, type: 'bus', title: 'Airport bus', day_id: 10, day_plan_position: 1.5 })
|
||
seedStore(useTripStore, { reservations: [bus] })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [placeA, placeB], assignments: { '10': [a1, a2] },
|
||
reservations: [bus], onReorder: vi.fn(async () => undefined),
|
||
})} />)
|
||
fireEvent.dragStart(dragRow(screen.getByText('Place B')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(dragRow(screen.getByText('Place A')), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
|
||
await waitFor(() => expect(mockToast.error).toHaveBeenCalledWith('server said no'))
|
||
// The optimistic slot goes with it — otherwise the day keeps an order the
|
||
// server never accepted.
|
||
const stored = useTripStore.getState().reservations.find(r => r.id === 430)!
|
||
expect(stored.day_plan_position).toBe(1.5)
|
||
expect(stored.day_positions).toBeUndefined()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-207: a rejected note write leaves the stored booking slot alone', async () => {
|
||
const updateDayNote = vi.fn().mockRejectedValue(new Error('note write failed'))
|
||
stubTripActions({ updateDayNote })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const placeA = buildPlace({ id: 1, name: 'Place A' })
|
||
const placeB = buildPlace({ id: 2, name: 'Place B' })
|
||
const a1 = buildAssignment({ id: 11, day_id: 10, order_index: 0, place: placeA })
|
||
const a2 = buildAssignment({ id: 12, day_id: 10, order_index: 1, place: placeB })
|
||
const note = buildDayNote({ id: 70, day_id: 10, text: 'Pack sunscreen', sort_order: 1.4 })
|
||
const bus = buildReservation({ id: 430, type: 'bus', title: 'Airport bus', day_id: 10, day_plan_position: 1.5 })
|
||
mockDayNotesState.dayNotes = { '10': [note] }
|
||
seedStore(useTripStore, { reservations: [bus] })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [placeA, placeB], assignments: { '10': [a1, a2] },
|
||
reservations: [bus], onReorder: vi.fn(async () => undefined),
|
||
})} />)
|
||
fireEvent.dragStart(dragRow(screen.getByText('Place B')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(dragRow(screen.getByText('Place A')), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
|
||
await waitFor(() => expect(mockToast.error).toHaveBeenCalledWith('note write failed'))
|
||
// The slot write went through before the note failed, so the day must keep it.
|
||
const stored = useTripStore.getState().reservations.find(r => r.id === 430)!
|
||
expect(stored.day_positions).toEqual({ 10: expect.any(Number) })
|
||
expect(stored.day_plan_position).not.toBe(1.5)
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-208: a booking that arrived mid-write survives the rollback', async () => {
|
||
const { reservationsApi } = await import('../../api/client')
|
||
const ferry = buildReservation({ id: 431, type: 'ferry', title: 'Island ferry', day_id: 10 })
|
||
vi.mocked(reservationsApi.updatePositions).mockImplementationOnce(async () => {
|
||
// Stands in for a collaborator's reservation:created event landing while the
|
||
// slot write is still out.
|
||
useTripStore.setState(state => ({ reservations: [...state.reservations, ferry] }))
|
||
throw new Error('server said no')
|
||
})
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const placeA = buildPlace({ id: 1, name: 'Place A' })
|
||
const placeB = buildPlace({ id: 2, name: 'Place B' })
|
||
const a1 = buildAssignment({ id: 11, day_id: 10, order_index: 0, place: placeA })
|
||
const a2 = buildAssignment({ id: 12, day_id: 10, order_index: 1, place: placeB })
|
||
const bus = buildReservation({ id: 430, type: 'bus', title: 'Airport bus', day_id: 10, day_plan_position: 1.5 })
|
||
seedStore(useTripStore, { reservations: [bus] })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [placeA, placeB], assignments: { '10': [a1, a2] },
|
||
reservations: [bus], onReorder: vi.fn(async () => undefined),
|
||
})} />)
|
||
fireEvent.dragStart(dragRow(screen.getByText('Place B')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(dragRow(screen.getByText('Place A')), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
|
||
await waitFor(() => expect(mockToast.error).toHaveBeenCalledWith('server said no'))
|
||
const stored = useTripStore.getState().reservations
|
||
expect(stored.find(r => r.id === 430)!.day_plan_position).toBe(1.5)
|
||
expect(stored.find(r => r.id === 431)).toBeDefined()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-126: reordering around a multi-leg flight writes a position per leg', async () => {
|
||
const updateReservation = vi.fn(async () => ({} as Reservation))
|
||
stubTripActions({ updateReservation })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const placeA = buildPlace({ id: 1, name: 'Place A', place_time: '06:00' })
|
||
const placeB = buildPlace({ id: 2, name: 'Place B' })
|
||
const a1 = buildAssignment({ id: 11, day_id: 10, order_index: 0, place: placeA })
|
||
const a2 = buildAssignment({ id: 12, day_id: 10, order_index: 1, place: placeB })
|
||
const metadata = {
|
||
legs: [
|
||
{ dep_day_id: 10, arr_day_id: 10, dep_time: '10:00', arr_time: '11:00', from: 'BER', to: 'FRA', airline: 'LH', flight_number: 'LH1' },
|
||
{ dep_day_id: 10, arr_day_id: 10, dep_time: '12:00', arr_time: '15:00', from: 'FRA', to: 'JFK', airline: 'LH', flight_number: 'LH2' },
|
||
],
|
||
}
|
||
const flight = buildReservation({ id: 440, type: 'flight', title: 'Berlin to New York', day_id: 10, reservation_time: '2025-06-01T10:00:00' })
|
||
const flightWithLegs = { ...flight, metadata } as unknown as Reservation
|
||
seedStore(useTripStore, { reservations: [flightWithLegs] })
|
||
const onReorder = vi.fn(async () => undefined)
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [placeA, placeB], assignments: { '10': [a1, a2] },
|
||
reservations: [flightWithLegs], onReorder,
|
||
})} />)
|
||
// Both legs render as their own rows; drag the late place above them.
|
||
expect(screen.getAllByText('Berlin to New York')).toHaveLength(2)
|
||
fireEvent.dragStart(dragRow(screen.getByText('Place B')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(cardRow(screen.getAllByText('Berlin to New York')[0]), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
|
||
await waitFor(() => expect(updateReservation).toHaveBeenCalled())
|
||
const payload = (updateReservation.mock.calls[0] as unknown as unknown[])[2] as { metadata: { legs: Array<{ day_positions?: Record<string, number> }> } }
|
||
expect(payload.metadata.legs).toHaveLength(2)
|
||
expect(payload.metadata.legs[0].day_positions).toEqual({ 10: expect.any(Number) })
|
||
expect(payload.metadata.legs[1].day_positions).toEqual({ 10: expect.any(Number) })
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-127: a failing time removal aborts the reorder and reports the error', async () => {
|
||
const user = userEvent.setup()
|
||
const { assignmentsApi } = await import('../../api/client')
|
||
vi.mocked(assignmentsApi.updateTime).mockRejectedValueOnce(new Error('locked'))
|
||
const placeA = buildPlace({ id: 1, name: 'Morning Place', place_time: '08:00' })
|
||
const placeB = buildPlace({ id: 2, name: 'Afternoon Place', place_time: '14:00' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const a1 = buildAssignment({ id: 11, day_id: 10, order_index: 0, place: placeA })
|
||
const a2 = buildAssignment({ id: 22, day_id: 10, order_index: 1, place: placeB })
|
||
const onReorder = vi.fn(async () => undefined)
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [placeA, placeB], assignments: { '10': [a1, a2] }, onReorder,
|
||
})} />)
|
||
fireEvent.dragStart(dragRow(screen.getByText('Afternoon Place')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(dragRow(screen.getByText('Morning Place')), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
await waitFor(() => expect(screen.getByText('Remove time?')).toBeInTheDocument())
|
||
await user.click(screen.getByRole('button', { name: /confirm/i }))
|
||
await waitFor(() => expect(mockToast.error).toHaveBeenCalledWith('locked'))
|
||
expect(onReorder).not.toHaveBeenCalled()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-128: undoing a lock restores the previous locked set', async () => {
|
||
const user = userEvent.setup()
|
||
const place = buildPlace({ id: 1, name: 'Locked Place' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const a = buildAssignment({ id: 11, day_id: 10, order_index: 0, place })
|
||
const pushUndo = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments: { '10': [a] }, pushUndo })} />)
|
||
const row = dragRow(screen.getByText('Locked Place'))
|
||
await user.click(lockToggle(row))
|
||
await waitFor(() => expect(row.style.borderLeftColor).toBe('rgb(220, 38, 38)'))
|
||
const undo = pushUndo.mock.calls[0][1] as () => void
|
||
undo()
|
||
await waitFor(() => expect(dragRow(screen.getByText('Locked Place')).style.borderLeftColor).toBe('transparent'))
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-129: optimising a day with fewer than three stops does nothing', async () => {
|
||
const user = userEvent.setup()
|
||
const placeA = buildPlace({ id: 1, name: 'A', lat: 48.85, lng: 2.35 })
|
||
const placeB = buildPlace({ id: 2, name: 'B', lat: 48.86, lng: 2.36 })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const onReorder = vi.fn(async () => undefined)
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [placeA, placeB], selectedDayId: 10, onReorder,
|
||
assignments: { '10': [
|
||
buildAssignment({ id: 1, day_id: 10, order_index: 0, place: placeA }),
|
||
buildAssignment({ id: 2, day_id: 10, order_index: 1, place: placeB }),
|
||
] },
|
||
})} />)
|
||
await user.click(screen.getByRole('button', { name: 'Optimize' }))
|
||
expect(onReorder).not.toHaveBeenCalled()
|
||
})
|
||
|
||
// #2167 — the badge used to borrow ANY located trip place, so a roadtrip day
|
||
// without stops silently showed another city's weather. Day-local only now.
|
||
it('FE-PLANNER-DAYPLAN-130: no weather badge for a day without located stops or a bookend hotel (#2167)', () => {
|
||
const located = buildPlace({ id: 5, name: 'Somewhere', lat: 48.85, lng: 2.35 })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [located] })} />)
|
||
expect(screen.queryByTestId('weather-widget')).not.toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-130b: the weather badge anchors to the day bookend hotel, independent of the optimize setting (#2167)', () => {
|
||
// The hotel fallback is unconditional (matching the mobile timeline) — turn the
|
||
// route-optimization setting OFF to prove the weather anchor ignores it.
|
||
seedStore(useSettingsStore, { settings: { time_format: '24h', temperature_unit: 'celsius', optimize_from_accommodation: false } } as any)
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const day2 = buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' })
|
||
const accommodations = [{ id: 1, start_day_id: 10, end_day_id: 11, place_name: 'Hotel Roma', place_lat: 41.9, place_lng: 12.5 }]
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day, day2], accommodations: accommodations as any })} />)
|
||
const widgets = screen.getAllByTestId('weather-widget')
|
||
expect(widgets.length).toBeGreaterThan(0)
|
||
expect(widgets[0]).toHaveAttribute('data-location', 'Hotel Roma')
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-130c: the weather badge names the day-local stop it is anchored to (#2167)', () => {
|
||
const place = buildPlace({ id: 5, name: 'Louvre', lat: 48.86, lng: 2.34 })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const a = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments: { '10': [a] } })} />)
|
||
expect(screen.getByTestId('weather-widget')).toHaveAttribute('data-location', 'Louvre')
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-131: a read-only trip drops the edit affordances from day and note rows', () => {
|
||
mockPermissions.canEdit = false
|
||
const place = buildPlace({ id: 1, name: 'Read only place' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const a = buildAssignment({ id: 11, day_id: 10, order_index: 0, place })
|
||
mockDayNotesState.dayNotes = { '10': [buildDayNote({ id: 70, day_id: 10, text: 'A note' })] }
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place], assignments: { '10': [a] }, onAddTransport: vi.fn(), onPlanTransit: vi.fn(),
|
||
})} />)
|
||
expect(screen.queryByLabelText('Add Note')).not.toBeInTheDocument()
|
||
expect(dragRow(screen.getByText('Read only place'))).toBeNull()
|
||
expect(screen.getByText('A note')).toBeInTheDocument()
|
||
// A viewer must not reach the edit modal they could never save (#2249).
|
||
const noteRow = cardRow(screen.getByText('A note'))
|
||
expect(noteRow).not.toHaveAttribute('role', 'button')
|
||
expect(noteRow.querySelectorAll('.reorder-buttons')).toHaveLength(0)
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-132: the read-only chevron still collapses and expands the day', async () => {
|
||
const user = userEvent.setup()
|
||
mockPermissions.canEdit = false
|
||
const place = buildPlace({ id: 1, name: 'Read only place' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const a = buildAssignment({ id: 11, day_id: 10, order_index: 0, place })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments: { '10': [a] } })} />)
|
||
const chevron = dayHeader('Day 1').querySelector('button') as HTMLElement
|
||
await user.click(chevron)
|
||
expect(screen.queryByText('Read only place')).not.toBeInTheDocument()
|
||
})
|
||
|
||
// ── Drops onto the expanded day body ─────────────────────────────────────
|
||
|
||
function expandedBody() {
|
||
return document.querySelector('[style*="padding-top: 6px"]') as HTMLElement
|
||
}
|
||
|
||
function dayWithBusAndPlaces() {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const placeA = buildPlace({ id: 1, name: 'Place A' })
|
||
const placeB = buildPlace({ id: 2, name: 'Place B' })
|
||
const bus = buildReservation({ id: 500, type: 'bus', title: 'City bus', day_id: 10, day_plan_position: 1.5 })
|
||
return {
|
||
day, placeA, placeB, bus,
|
||
assignments: {
|
||
'10': [
|
||
buildAssignment({ id: 11, day_id: 10, order_index: 0, place: placeA }),
|
||
buildAssignment({ id: 12, day_id: 10, order_index: 1, place: placeB }),
|
||
],
|
||
},
|
||
}
|
||
}
|
||
|
||
it('FE-PLANNER-DAYPLAN-133: a sidebar place dropped on a booking row lands on that day', () => {
|
||
const { day, placeA, placeB, bus, assignments } = dayWithBusAndPlaces()
|
||
const onAssignToDay = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [placeA, placeB], assignments, reservations: [bus], onAssignToDay,
|
||
})} />)
|
||
window.__dragData = { placeId: '77' }
|
||
fireEvent.dragOver(cardRow(screen.getByText('City bus')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(expandedBody(), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
expect(onAssignToDay).toHaveBeenCalledWith(77, 10)
|
||
window.__dragData = null
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-134: a same-day place dropped on a booking row reorders around it', async () => {
|
||
const { day, placeA, placeB, bus, assignments } = dayWithBusAndPlaces()
|
||
const onReorder = vi.fn(async () => undefined)
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [placeA, placeB], assignments, reservations: [bus], onReorder,
|
||
})} />)
|
||
fireEvent.dragStart(dragRow(screen.getByText('Place B')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.dragOver(cardRow(screen.getByText('City bus')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(expandedBody(), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
await waitFor(() => expect(onReorder).toHaveBeenCalledWith(10, [11, 12]))
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-135: a same-day note dropped on a booking row is re-sorted, not moved', async () => {
|
||
const updateDayNote = vi.fn(async () => buildDayNote({ id: 70 }))
|
||
stubTripActions({ updateDayNote })
|
||
const { day, placeA, placeB, bus, assignments } = dayWithBusAndPlaces()
|
||
mockDayNotesState.dayNotes = { '10': [buildDayNote({ id: 70, day_id: 10, text: 'Buy tickets', sort_order: 0.5 })] }
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [placeA, placeB], assignments, reservations: [bus], onReorder: vi.fn(async () => undefined),
|
||
})} />)
|
||
fireEvent.dragStart(cardRow(screen.getByText('Buy tickets')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.dragOver(cardRow(screen.getByText('City bus')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(expandedBody(), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
await waitFor(() => expect(updateDayNote).toHaveBeenCalledWith(1, 10, 70, { sort_order: expect.any(Number) }))
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-136: a booking from another day dropped on a booking row is re-dated', () => {
|
||
const updateReservation = vi.fn(async () => ({} as Reservation))
|
||
stubTripActions({ updateReservation })
|
||
const days = [
|
||
buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
|
||
buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
|
||
]
|
||
const bus = buildReservation({ id: 500, type: 'bus', title: 'City bus', day_id: 11 })
|
||
const taxi = buildReservation({ id: 501, type: 'taxi', title: 'Airport taxi', day_id: 10 })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days, reservations: [bus, taxi] })} />)
|
||
fireEvent.dragStart(cardRow(screen.getByText('Airport taxi')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.dragOver(cardRow(screen.getByText('City bus')), { dataTransfer: emptyDataTransfer })
|
||
// The second day's body is the one holding the bus row.
|
||
const bodies = document.querySelectorAll('[style*="padding-top: 6px"]')
|
||
fireEvent.drop(bodies[1], { dataTransfer: { getData: vi.fn(() => '') } })
|
||
expect(updateReservation).toHaveBeenCalledWith(1, 501, { day_id: 11, end_day_id: 11 })
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-137: cross-day places, notes and bookings dropped on the day body are moved', () => {
|
||
const moveAssignment = vi.fn(async () => undefined)
|
||
const moveDayNote = vi.fn(async () => undefined)
|
||
const updateReservation = vi.fn(async () => ({} as Reservation))
|
||
stubTripActions({ moveAssignment, moveDayNote, updateReservation })
|
||
const days = [
|
||
buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
|
||
buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
|
||
]
|
||
const place = buildPlace({ id: 1, name: 'Place A' })
|
||
const assignments = { '10': [buildAssignment({ id: 11, day_id: 10, order_index: 0, place })] }
|
||
mockDayNotesState.dayNotes = { '10': [buildDayNote({ id: 70, day_id: 10, text: 'A note' })] }
|
||
const taxi = buildReservation({ id: 501, type: 'taxi', title: 'Airport taxi', day_id: 10 })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days, places: [place], assignments, reservations: [taxi] })} />)
|
||
const target = () => document.querySelectorAll('[style*="padding-top: 6px"]')[1]
|
||
|
||
fireEvent.dragStart(dragRow(screen.getByText('Place A')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(target(), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
expect(moveAssignment).toHaveBeenCalledWith(1, 11, 10, 11)
|
||
|
||
fireEvent.dragStart(cardRow(screen.getByText('A note')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(target(), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
expect(moveDayNote).toHaveBeenCalledWith(1, 10, 11, 70)
|
||
|
||
fireEvent.dragStart(cardRow(screen.getByText('Airport taxi')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(target(), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
expect(updateReservation).toHaveBeenCalledWith(1, 501, { day_id: 11, end_day_id: 11 })
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-138: a drop with no payload on the day body changes nothing', () => {
|
||
const onAssignToDay = vi.fn()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], onAssignToDay })} />)
|
||
fireEvent.drop(expandedBody(), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
expect(onAssignToDay).not.toHaveBeenCalled()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-139: a same-day place dropped on the empty day body moves to the end', async () => {
|
||
const { day, placeA, placeB, assignments } = dayWithBusAndPlaces()
|
||
const onReorder = vi.fn(async () => undefined)
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [placeA, placeB], assignments, onReorder,
|
||
})} />)
|
||
fireEvent.dragStart(dragRow(screen.getByText('Place A')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(expandedBody(), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
await waitFor(() => expect(onReorder).toHaveBeenCalledWith(10, [12, 11]))
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-140: a same-day note dropped on the empty day body moves to the end', async () => {
|
||
const updateDayNote = vi.fn(async () => buildDayNote({ id: 70 }))
|
||
stubTripActions({ updateDayNote })
|
||
const { day, placeA, placeB, assignments } = dayWithBusAndPlaces()
|
||
mockDayNotesState.dayNotes = { '10': [buildDayNote({ id: 70, day_id: 10, text: 'A note', sort_order: -1 })] }
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [placeA, placeB], assignments, onReorder: vi.fn(async () => undefined),
|
||
})} />)
|
||
fireEvent.dragStart(cardRow(screen.getByText('A note')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(expandedBody(), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
await waitFor(() => expect(updateDayNote).toHaveBeenCalledWith(1, 10, 70, { sort_order: expect.any(Number) }))
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-141: dragging over the empty day body marks it as the end drop target', () => {
|
||
const { day, placeA, placeB, assignments } = dayWithBusAndPlaces()
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [placeA, placeB], assignments })} />)
|
||
fireEvent.dragStart(dragRow(screen.getByText('Place A')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.dragOver(expandedBody(), { dataTransfer: emptyDataTransfer })
|
||
// The end-of-list marker is a 2px rule shown only while that target is active.
|
||
expect(document.querySelector('[style*="height: 2px"]')).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-142: an empty day accepts a place dropped straight onto its placeholder', () => {
|
||
const onAssignToDay = vi.fn()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], onAssignToDay })} />)
|
||
const placeholder = screen.getByText('No places planned for this day').parentElement as HTMLElement
|
||
fireEvent.dragOver(placeholder, { dataTransfer: emptyDataTransfer })
|
||
expect(placeholder.className).toContain('bg-[rgba(17,24,39,0.05)]')
|
||
fireEvent.drop(placeholder, { dataTransfer: { getData: (k: string) => (k === 'placeId' ? '88' : '') } })
|
||
expect(onAssignToDay).toHaveBeenCalledWith(88, 10)
|
||
})
|
||
|
||
// ── Drops onto the trailing drop zone ────────────────────────────────────
|
||
|
||
function endZones() {
|
||
return document.querySelectorAll('[style*="min-height: 12px"]')
|
||
}
|
||
|
||
it('FE-PLANNER-DAYPLAN-143: cross-day items dropped on the end zone move to that day', () => {
|
||
const moveAssignment = vi.fn(async () => undefined)
|
||
const moveDayNote = vi.fn(async () => undefined)
|
||
const updateReservation = vi.fn(async () => ({} as Reservation))
|
||
stubTripActions({ moveAssignment, moveDayNote, updateReservation })
|
||
const days = [
|
||
buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
|
||
buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
|
||
]
|
||
const place = buildPlace({ id: 1, name: 'Place A' })
|
||
const assignments = { '10': [buildAssignment({ id: 11, day_id: 10, order_index: 0, place })] }
|
||
mockDayNotesState.dayNotes = { '10': [buildDayNote({ id: 70, day_id: 10, text: 'A note' })] }
|
||
const taxi = buildReservation({ id: 501, type: 'taxi', title: 'Airport taxi', day_id: 10 })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days, places: [place], assignments, reservations: [taxi] })} />)
|
||
|
||
fireEvent.dragStart(dragRow(screen.getByText('Place A')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(endZones()[1], { dataTransfer: { getData: vi.fn(() => '') } })
|
||
expect(moveAssignment).toHaveBeenCalledWith(1, 11, 10, 11)
|
||
|
||
fireEvent.dragStart(cardRow(screen.getByText('A note')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(endZones()[1], { dataTransfer: { getData: vi.fn(() => '') } })
|
||
expect(moveDayNote).toHaveBeenCalledWith(1, 10, 11, 70)
|
||
|
||
fireEvent.dragStart(cardRow(screen.getByText('Airport taxi')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(endZones()[1], { dataTransfer: { getData: vi.fn(() => '') } })
|
||
expect(updateReservation).toHaveBeenCalledWith(1, 501, { day_id: 11, end_day_id: 11 })
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-144: a same-day booking dropped on the end zone moves after the last item', async () => {
|
||
const { day, placeA, placeB, bus, assignments } = dayWithBusAndPlaces()
|
||
// Pinned between the two places, so the last timeline item is a place.
|
||
const earlyBus = { ...bus, day_positions: { 10: 0.5 } }
|
||
const onReorder = vi.fn(async () => undefined)
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [placeA, placeB], assignments, reservations: [earlyBus], onReorder,
|
||
})} />)
|
||
fireEvent.dragStart(cardRow(screen.getByText('City bus')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.dragOver(endZones()[0], { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(endZones()[0], { dataTransfer: { getData: vi.fn(() => '') } })
|
||
await waitFor(() => expect(onReorder).toHaveBeenCalledWith(10, [11, 12]))
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-145: a payload-free drop on the end zone of an empty day is a no-op', () => {
|
||
const onAssignToDay = vi.fn()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], onAssignToDay })} />)
|
||
fireEvent.drop(endZones()[0], { dataTransfer: { getData: vi.fn(() => '') } })
|
||
expect(onAssignToDay).not.toHaveBeenCalled()
|
||
window.__dragData = { assignmentId: '11', fromDayId: '10' }
|
||
fireEvent.drop(endZones()[0], { dataTransfer: { getData: vi.fn(() => '') } })
|
||
expect(onAssignToDay).not.toHaveBeenCalled()
|
||
window.__dragData = null
|
||
})
|
||
|
||
// ── Note rows ────────────────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-146: a sidebar place dropped on a note lands at the note position', () => {
|
||
const onAssignToDay = vi.fn()
|
||
const { day, placeA, placeB, assignments } = dayWithBusAndPlaces()
|
||
mockDayNotesState.dayNotes = { '10': [buildDayNote({ id: 70, day_id: 10, text: 'A note', sort_order: 0.5 })] }
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [placeA, placeB], assignments, onAssignToDay })} />)
|
||
window.__dragData = { placeId: '99' }
|
||
fireEvent.drop(cardRow(screen.getByText('A note')), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
// One place sits above the note, so the new one is inserted at index 1.
|
||
expect(onAssignToDay).toHaveBeenCalledWith(99, 10, 1)
|
||
window.__dragData = null
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-147: a same-day booking or place dropped on a note reorders the day', async () => {
|
||
const { day, placeA, placeB, bus, assignments } = dayWithBusAndPlaces()
|
||
// The note leads the day, so dropping Place B on it puts B first.
|
||
mockDayNotesState.dayNotes = { '10': [buildDayNote({ id: 70, day_id: 10, text: 'A note', sort_order: -1 })] }
|
||
const onReorder = vi.fn(async () => undefined)
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [placeA, placeB], assignments, reservations: [bus], onReorder,
|
||
})} />)
|
||
fireEvent.dragStart(cardRow(screen.getByText('City bus')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.dragOver(cardRow(screen.getByText('A note')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(cardRow(screen.getByText('A note')), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
await waitFor(() => expect(onReorder).toHaveBeenCalled())
|
||
|
||
onReorder.mockClear()
|
||
fireEvent.dragStart(dragRow(screen.getByText('Place B')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(cardRow(screen.getByText('A note')), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
await waitFor(() => expect(onReorder).toHaveBeenCalledWith(10, [12, 11]))
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-148: cross-day items dropped on a note move onto the note day', () => {
|
||
const moveAssignment = vi.fn(async () => undefined)
|
||
const moveDayNote = vi.fn(async () => undefined)
|
||
const updateReservation = vi.fn(async () => ({} as Reservation))
|
||
stubTripActions({ moveAssignment, moveDayNote, updateReservation })
|
||
const days = [
|
||
buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
|
||
buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
|
||
]
|
||
const place = buildPlace({ id: 1, name: 'Place A' })
|
||
const assignments = { '10': [buildAssignment({ id: 11, day_id: 10, order_index: 0, place })] }
|
||
mockDayNotesState.dayNotes = {
|
||
'10': [buildDayNote({ id: 70, day_id: 10, text: 'Source note' })],
|
||
'11': [buildDayNote({ id: 71, day_id: 11, text: 'Target note' })],
|
||
}
|
||
const taxi = buildReservation({ id: 501, type: 'taxi', title: 'Airport taxi', day_id: 10 })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days, places: [place], assignments, reservations: [taxi] })} />)
|
||
const target = () => cardRow(screen.getByText('Target note'))
|
||
|
||
fireEvent.dragStart(dragRow(screen.getByText('Place A')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(target(), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
expect(moveAssignment).toHaveBeenCalledWith(1, 11, 10, 11, 0)
|
||
|
||
fireEvent.dragStart(cardRow(screen.getByText('Source note')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(target(), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
expect(moveDayNote).toHaveBeenCalledWith(1, 10, 11, 70, expect.any(Number))
|
||
|
||
fireEvent.dragStart(cardRow(screen.getByText('Airport taxi')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(target(), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
expect(updateReservation).toHaveBeenCalledWith(1, 501, { day_id: 11, end_day_id: 11 })
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-149: the note context menu edits and asks before deleting', async () => {
|
||
const user = userEvent.setup()
|
||
const note = buildDayNote({ id: 70, day_id: 10, text: 'A note' })
|
||
mockDayNotesState.dayNotes = { '10': [note] }
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
|
||
fireEvent.contextMenu(cardRow(screen.getByText('A note')))
|
||
await user.click(screen.getByRole('button', { name: 'Edit' }))
|
||
expect(mockDayNotesState.openEditNote).toHaveBeenCalledWith(10, note)
|
||
|
||
fireEvent.contextMenu(cardRow(screen.getByText('A note')))
|
||
await user.click(screen.getByRole('button', { name: 'Delete' }))
|
||
expect(await screen.findByText('Delete note?')).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-150: the note move-up button reorders through the notes hook', async () => {
|
||
const user = userEvent.setup()
|
||
mockDayNotesState.dayNotes = { '10': [buildDayNote({ id: 70, day_id: 10, text: 'A note', sort_order: 5 })] }
|
||
const { day, placeA, placeB, assignments } = dayWithBusAndPlaces()
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [placeA, placeB], assignments })} />)
|
||
const noteRow = cardRow(screen.getByText('A note'))
|
||
await user.click(noteRow.querySelectorAll('.reorder-buttons button')[0])
|
||
expect(mockDayNotesState.moveNote).toHaveBeenCalledWith(10, 70, 'up', expect.any(Function))
|
||
})
|
||
|
||
// ── Place rows ───────────────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-151: cross-day and same-day payloads dropped on a place row are handled apart', async () => {
|
||
const moveAssignment = vi.fn(async () => undefined)
|
||
const moveDayNote = vi.fn(async () => undefined)
|
||
const updateReservation = vi.fn(async () => ({} as Reservation))
|
||
stubTripActions({ moveAssignment, moveDayNote, updateReservation })
|
||
const days = [
|
||
buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
|
||
buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
|
||
]
|
||
const place = buildPlace({ id: 1, name: 'Place A' })
|
||
const target = buildPlace({ id: 2, name: 'Target place' })
|
||
const assignments = {
|
||
'10': [buildAssignment({ id: 11, day_id: 10, order_index: 0, place })],
|
||
'11': [buildAssignment({ id: 12, day_id: 11, order_index: 0, place: target })],
|
||
}
|
||
mockDayNotesState.dayNotes = { '10': [buildDayNote({ id: 70, day_id: 10, text: 'A note' })] }
|
||
const taxi = buildReservation({ id: 501, type: 'taxi', title: 'Airport taxi', day_id: 10 })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days, places: [place, target], assignments, reservations: [taxi] })} />)
|
||
const targetRow = () => dragRow(screen.getByText('Target place'))
|
||
|
||
fireEvent.dragStart(cardRow(screen.getByText('Airport taxi')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(targetRow(), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
expect(updateReservation).toHaveBeenCalledWith(1, 501, { day_id: 11, end_day_id: 11 })
|
||
|
||
fireEvent.dragStart(cardRow(screen.getByText('A note')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(targetRow(), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
expect(moveDayNote).toHaveBeenCalledWith(1, 10, 11, 70, expect.any(Number))
|
||
|
||
fireEvent.dragStart(dragRow(screen.getByText('Place A')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(targetRow(), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
expect(moveAssignment).toHaveBeenCalledWith(1, 11, 10, 11, 0)
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-152: a same-day booking or note dropped on a place row reorders the day', async () => {
|
||
const { day, placeA, placeB, bus, assignments } = dayWithBusAndPlaces()
|
||
mockDayNotesState.dayNotes = { '10': [buildDayNote({ id: 70, day_id: 10, text: 'A note', sort_order: 1.2 })] }
|
||
const onReorder = vi.fn(async () => undefined)
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [placeA, placeB], assignments, reservations: [bus], onReorder,
|
||
})} />)
|
||
fireEvent.dragStart(cardRow(screen.getByText('City bus')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(dragRow(screen.getByText('Place A')), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
await waitFor(() => expect(onReorder).toHaveBeenCalled())
|
||
|
||
onReorder.mockClear()
|
||
fireEvent.dragStart(cardRow(screen.getByText('A note')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(dragRow(screen.getByText('Place A')), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
await waitFor(() => expect(onReorder).toHaveBeenCalled())
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-153: dropping a place onto itself leaves the order untouched', async () => {
|
||
const { day, placeA, placeB, assignments } = dayWithBusAndPlaces()
|
||
const onReorder = vi.fn(async () => undefined)
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [placeA, placeB], assignments, onReorder })} />)
|
||
const row = dragRow(screen.getByText('Place A'))
|
||
fireEvent.dragStart(row, { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(row, { dataTransfer: { getData: vi.fn(() => '') } })
|
||
await waitFor(() => expect(row.style.opacity).toBe('1'))
|
||
expect(onReorder).not.toHaveBeenCalled()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-154: an assignment without a place renders nothing for that row', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const orphan = { ...buildAssignment({ id: 11, day_id: 10, order_index: 0 }), place: null }
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], assignments: { '10': [orphan] } as never,
|
||
})} />)
|
||
expect(screen.getByText('Day 1')).toBeInTheDocument()
|
||
expect(document.querySelectorAll('.dp-row')).toHaveLength(0)
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-155: below lg place rows lose their drag handle', () => {
|
||
const place = buildPlace({ id: 1, name: 'Narrow place' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const a = buildAssignment({ id: 11, day_id: 10, order_index: 0, place })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments: { '10': [a] }, isMobile: true })} />)
|
||
const row = screen.getByText('Narrow place').closest('.dp-row') as HTMLElement
|
||
expect(row.getAttribute('draggable')).toBe('false')
|
||
expect(row.querySelector('.dp-grip')).toBeNull()
|
||
fireEvent.dragStart(row, { dataTransfer: emptyDataTransfer })
|
||
expect(row.style.opacity).toBe('1')
|
||
})
|
||
|
||
// #1616: a tablet is a coarse pointer at a desktop width. It gets the same rows
|
||
// the mouse does — the long press in touchDragBridge is what starts the drag.
|
||
it('FE-PLANNER-DAYPLAN-155b: at desktop width place rows keep grip and drag', () => {
|
||
const place = buildPlace({ id: 1, name: 'Tablet place' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const a = buildAssignment({ id: 11, day_id: 10, order_index: 0, place })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments: { '10': [a] }, isMobile: false })} />)
|
||
const row = screen.getByText('Tablet place').closest('.dp-row') as HTMLElement
|
||
expect(row.getAttribute('draggable')).toBe('true')
|
||
expect(row.querySelector('.dp-grip')).not.toBeNull()
|
||
expect(row.closest('[data-touch-drag]')).not.toBeNull()
|
||
})
|
||
|
||
// ── Booking rows ─────────────────────────────────────────────────────────
|
||
|
||
const withEndpoints = (r: Reservation): Reservation => ({
|
||
...r,
|
||
endpoints: [
|
||
{ role: 'from', sequence: 0, name: 'A', code: null, lat: 52.3, lng: 13.5, timezone: null, local_date: null, local_time: null },
|
||
{ role: 'to', sequence: 1, name: 'B', code: null, lat: 49.0, lng: 2.5, timezone: null, local_date: null, local_time: null },
|
||
],
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-156: a routable booking row carries a per-booking route toggle', async () => {
|
||
const user = userEvent.setup()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const flight = withEndpoints(buildReservation({ id: 510, type: 'flight', title: 'BER to CDG', day_id: 10 }))
|
||
const onToggleConnection = vi.fn()
|
||
const { rerender } = render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], reservations: [flight], onToggleConnection,
|
||
})} />)
|
||
const show = screen.getByTitle('Show booking routes')
|
||
await user.click(show)
|
||
expect(onToggleConnection).toHaveBeenCalledWith(510)
|
||
fireEvent.mouseEnter(show)
|
||
fireEvent.mouseLeave(show)
|
||
|
||
rerender(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], reservations: [flight], onToggleConnection, visibleConnectionIds: [510],
|
||
})} />)
|
||
expect(screen.getByTitle('Hide booking routes')).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-157: a non-transport booking row opens the reservation editor, unless read-only', async () => {
|
||
const user = userEvent.setup()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const event = buildReservation({ id: 511, type: 'event', title: 'Opera night', day_id: 10 })
|
||
const onEditReservation = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], reservations: [event], onEditReservation })} />)
|
||
const row = cardRow(screen.getByText('Opera night'))
|
||
fireEvent.mouseEnter(row)
|
||
fireEvent.mouseLeave(row)
|
||
await user.click(row)
|
||
expect(onEditReservation).toHaveBeenCalledWith(event)
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-158: a read-only booking row is inert and cannot start a drag', async () => {
|
||
const user = userEvent.setup()
|
||
mockPermissions.canEdit = false
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const event = buildReservation({ id: 511, type: 'flight', title: 'Opera night', day_id: 10 })
|
||
const onEditTransport = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], reservations: [event], onEditTransport })} />)
|
||
const row = cardRow(screen.getByText('Opera night'))
|
||
await user.click(row)
|
||
expect(onEditTransport).not.toHaveBeenCalled()
|
||
fireEvent.dragStart(row, { dataTransfer: emptyDataTransfer })
|
||
expect(row.style.opacity).toBe('1')
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-159: dragging over a booking row marks it, and dragEnd clears the marker', () => {
|
||
const { day, placeA, placeB, bus, assignments } = dayWithBusAndPlaces()
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [placeA, placeB], assignments, reservations: [bus] })} />)
|
||
const row = cardRow(screen.getByText('City bus'))
|
||
fireEvent.dragStart(row, { dataTransfer: emptyDataTransfer })
|
||
fireEvent.dragOver(row, { dataTransfer: emptyDataTransfer, clientY: 0 })
|
||
expect(row.style.borderTop).toContain('2px')
|
||
fireEvent.dragEnd(row)
|
||
expect(row.style.borderTop).toBe('')
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-160: cross-day payloads dropped on a booking row move onto its day', () => {
|
||
const moveAssignment = vi.fn(async () => undefined)
|
||
const moveDayNote = vi.fn(async () => undefined)
|
||
const updateReservation = vi.fn(async () => ({} as Reservation))
|
||
stubTripActions({ moveAssignment, moveDayNote, updateReservation })
|
||
const days = [
|
||
buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
|
||
buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
|
||
]
|
||
const place = buildPlace({ id: 1, name: 'Place A' })
|
||
const assignments = { '10': [buildAssignment({ id: 11, day_id: 10, order_index: 0, place })] }
|
||
mockDayNotesState.dayNotes = { '10': [buildDayNote({ id: 70, day_id: 10, text: 'A note' })] }
|
||
const taxi = buildReservation({ id: 501, type: 'taxi', title: 'Airport taxi', day_id: 10 })
|
||
const target = buildReservation({ id: 502, type: 'bus', title: 'Target bus', day_id: 11 })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days, places: [place], assignments, reservations: [taxi, target] })} />)
|
||
const targetRow = () => cardRow(screen.getByText('Target bus'))
|
||
|
||
window.__dragData = { placeId: '55' }
|
||
const onAssign = makeDefaultProps().onAssignToDay
|
||
fireEvent.drop(targetRow(), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
expect(onAssign).not.toHaveBeenCalled()
|
||
window.__dragData = null
|
||
|
||
fireEvent.dragStart(dragRow(screen.getByText('Place A')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(targetRow(), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
expect(moveAssignment).toHaveBeenCalledWith(1, 11, 10, 11)
|
||
|
||
fireEvent.dragStart(cardRow(screen.getByText('A note')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(targetRow(), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
expect(moveDayNote).toHaveBeenCalledWith(1, 10, 11, 70)
|
||
|
||
fireEvent.dragStart(cardRow(screen.getByText('Airport taxi')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(targetRow(), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
expect(updateReservation).toHaveBeenCalledWith(1, 501, { day_id: 11, end_day_id: 11 })
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-161: same-day payloads dropped on a booking row reorder the day', async () => {
|
||
const updateDayNote = vi.fn(async () => buildDayNote({ id: 70 }))
|
||
stubTripActions({ updateDayNote })
|
||
const { day, placeA, placeB, bus, assignments } = dayWithBusAndPlaces()
|
||
mockDayNotesState.dayNotes = { '10': [buildDayNote({ id: 70, day_id: 10, text: 'A note', sort_order: -1 })] }
|
||
const secondBus = buildReservation({ id: 501, type: 'bus', title: 'Shuttle', day_id: 10, day_positions: { 10: 0.5 } })
|
||
const onReorder = vi.fn(async () => undefined)
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [placeA, placeB], assignments, reservations: [bus, secondBus], onReorder,
|
||
})} />)
|
||
fireEvent.dragStart(cardRow(screen.getByText('Shuttle')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(cardRow(screen.getByText('City bus')), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
await waitFor(() => expect(onReorder).toHaveBeenCalled())
|
||
|
||
fireEvent.dragStart(cardRow(screen.getByText('A note')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(cardRow(screen.getByText('City bus')), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
await waitFor(() => expect(updateDayNote).toHaveBeenCalled())
|
||
})
|
||
|
||
// ── Linked booking badge on a place row ──────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-162: a linked flight shows its times, airline and a route toggle', async () => {
|
||
const user = userEvent.setup()
|
||
const place = buildPlace({ id: 1, name: 'Airport' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const a = buildAssignment({ id: 11, day_id: 10, order_index: 0, place })
|
||
const linked = withEndpoints(buildReservation({
|
||
id: 520, type: 'flight', title: 'BER to CDG', status: 'confirmed', assignment_id: 11,
|
||
reservation_time: '2025-06-01T08:30:00', reservation_end_time: '2025-06-01T10:05:00',
|
||
metadata: JSON.stringify({ airline: 'Air France', flight_number: 'AF1235' }),
|
||
}))
|
||
const onToggleConnection = vi.fn()
|
||
const onEditTransport = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place], assignments: { '10': [a] }, reservations: [linked],
|
||
onToggleConnection, onEditTransport,
|
||
})} />)
|
||
expect(screen.getByText('08:30 – 10:05')).toBeInTheDocument()
|
||
expect(screen.getByText('Air France AF1235')).toBeInTheDocument()
|
||
await user.click(screen.getByTitle('Show booking routes'))
|
||
expect(onToggleConnection).toHaveBeenCalledWith(520)
|
||
const edit = screen.getByTitle('Edit')
|
||
fireEvent.mouseEnter(edit)
|
||
fireEvent.mouseLeave(edit)
|
||
await user.click(edit)
|
||
expect(onEditTransport).toHaveBeenCalledWith(linked)
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-163: a linked train badge falls back to the train number alone', () => {
|
||
const place = buildPlace({ id: 1, name: 'Station' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const a = buildAssignment({ id: 11, day_id: 10, order_index: 0, place })
|
||
const linked = buildReservation({
|
||
id: 521, type: 'train', title: 'ICE 599', status: 'pending', assignment_id: 11,
|
||
metadata: JSON.stringify({ train_number: 'ICE 599' }),
|
||
})
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place], assignments: { '10': [a] }, reservations: [linked],
|
||
})} />)
|
||
expect(screen.getAllByText('ICE 599').length).toBeGreaterThan(0)
|
||
expect(screen.getByText(/Reservation pending/)).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-163b: every booking on the stop gets its own chip line (#2201)', async () => {
|
||
const user = userEvent.setup()
|
||
const place = buildPlace({ id: 1, name: 'Zoo' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const a = buildAssignment({ id: 11, day_id: 10, order_index: 0, place })
|
||
const parking = buildReservation({
|
||
id: 530, type: 'parking', title: 'Parking pass', status: 'confirmed', assignment_id: 11,
|
||
reservation_time: '2025-06-01T09:00:00', reservation_end_time: '2025-06-01T09:30:00',
|
||
} as any)
|
||
const tickets = buildReservation({
|
||
id: 531, type: 'activity', title: 'Zoo tickets', status: 'pending', assignment_id: 11,
|
||
reservation_time: '2025-06-01T10:15:00',
|
||
} as any)
|
||
const onEditReservation = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
// Newest first, the order the store hands them over after a local create.
|
||
days: [day], places: [place], assignments: { '10': [a] }, reservations: [tickets, parking],
|
||
onEditReservation,
|
||
})} />)
|
||
expect(screen.getByText('09:00 – 09:30')).toBeInTheDocument()
|
||
expect(screen.getByText('10:15')).toBeInTheDocument()
|
||
expect(screen.getByText(/Reservation confirmed/)).toBeInTheDocument()
|
||
expect(screen.getByText(/Reservation pending/)).toBeInTheDocument()
|
||
// Earliest first, so the first pencil belongs to the parking pass.
|
||
await user.click(screen.getAllByTitle('Edit')[0])
|
||
expect(onEditReservation).toHaveBeenCalledWith(parking)
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-164: travellers on a place row are shown as avatars with an overflow count', () => {
|
||
const place = buildPlace({ id: 1, name: 'Group visit' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const participants = Array.from({ length: 7 }, (_, i) => ({
|
||
user_id: i + 1, username: `user${i + 1}`, avatar: i === 0 ? 'a.jpg' : null,
|
||
}))
|
||
const a = buildAssignment({ id: 11, day_id: 10, order_index: 0, place, participants })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments: { '10': [a] } })} />)
|
||
// Five chips at most: the first has an avatar image, the rest fall back to an initial.
|
||
expect(screen.getByText('+2')).toBeInTheDocument()
|
||
expect(screen.getAllByText('U')).toHaveLength(4)
|
||
expect(document.querySelectorAll('img[src*="a.jpg"]')).toHaveLength(1)
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-165: the add-booking shortcut appears while the row is hovered', async () => {
|
||
const user = userEvent.setup()
|
||
const place = buildPlace({ id: 1, name: 'Hover place' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const a = buildAssignment({ id: 11, day_id: 10, order_index: 0, place })
|
||
const onAddBookingToAssignment = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place], assignments: { '10': [a] }, onAddBookingToAssignment,
|
||
})} />)
|
||
const row = dragRow(screen.getByText('Hover place'))
|
||
expect(screen.queryByTitle('Add booking')).not.toBeInTheDocument()
|
||
fireEvent.mouseEnter(row)
|
||
await user.click(screen.getByTitle('Add booking'))
|
||
expect(onAddBookingToAssignment).toHaveBeenCalledWith(10, 11)
|
||
fireEvent.mouseLeave(row)
|
||
expect(screen.queryByTitle('Add booking')).not.toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-166: the lock tooltip switches once a stop is pinned, and unlocking clears it', async () => {
|
||
const user = userEvent.setup()
|
||
const place = buildPlace({ id: 1, name: 'Pin me' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const a = buildAssignment({ id: 11, day_id: 10, order_index: 0, place })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments: { '10': [a] } })} />)
|
||
const row = dragRow(screen.getByText('Pin me'))
|
||
const toggle = lockToggle(row)
|
||
fireEvent.mouseEnter(toggle)
|
||
expect(screen.getByText('Keep position during route optimization')).toBeInTheDocument()
|
||
await user.click(toggle)
|
||
expect(screen.getByText('Click to unlock')).toBeInTheDocument()
|
||
await user.click(toggle)
|
||
await waitFor(() => expect(row.style.borderLeftColor).toBe('transparent'))
|
||
fireEvent.mouseLeave(toggle)
|
||
expect(screen.queryByText('Click to unlock')).not.toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-167: the place context menu opens the website, maps and collection actions', async () => {
|
||
const user = userEvent.setup()
|
||
const openSpy = vi.spyOn(window, 'open').mockReturnValue(null)
|
||
const place = buildPlace({ id: 1, name: 'Louvre', website: 'https://louvre.fr', google_place_id: 'abc' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const a = buildAssignment({ id: 11, day_id: 10, order_index: 0, place })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments: { '10': [a] } })} />)
|
||
fireEvent.contextMenu(dragRow(screen.getByText('Louvre')))
|
||
await user.click(screen.getByRole('button', { name: 'Open Website' }))
|
||
expect(openSpy).toHaveBeenCalledWith('https://louvre.fr', '_blank', 'noopener,noreferrer')
|
||
|
||
fireEvent.contextMenu(dragRow(screen.getByText('Louvre')))
|
||
await user.click(screen.getByRole('button', { name: 'Google Maps' }))
|
||
expect(openSpy).toHaveBeenCalledTimes(2)
|
||
expect(openSpy.mock.calls[1][0]).toContain('google.com/maps')
|
||
openSpy.mockRestore()
|
||
})
|
||
|
||
// ── Route tools ──────────────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-168: the Google Maps export bookends the stops with the day hotel', async () => {
|
||
const user = userEvent.setup()
|
||
const { generateGoogleMapsUrl } = await import('../Map/RouteCalculator')
|
||
const openSpy = vi.spyOn(window, 'open').mockReturnValue(null)
|
||
const days = [
|
||
buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
|
||
buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
|
||
buildDay({ id: 12, date: '2025-06-03', title: 'Day 3' }),
|
||
]
|
||
const accommodations: Accommodation[] = [{
|
||
id: 1, trip_id: 1, start_day_id: 10, end_day_id: 12,
|
||
place_lat: 48.85, place_lng: 2.35, place_name: 'Hotel Lutetia',
|
||
}]
|
||
const assignments = {
|
||
'11': [
|
||
buildAssignment({ id: 1, day_id: 11, order_index: 0, place: buildPlace({ id: 1, name: 'Louvre', lat: 48.86, lng: 2.34 }) }),
|
||
buildAssignment({ id: 2, day_id: 11, order_index: 1, place: buildPlace({ id: 2, name: 'Orsay', lat: 48.87, lng: 2.33 }) }),
|
||
],
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days, assignments, accommodations, selectedDayId: 11 })} />)
|
||
await user.click(screen.getByRole('button', { name: 'Open in Google Maps' }))
|
||
expect(vi.mocked(generateGoogleMapsUrl)).toHaveBeenCalledWith([
|
||
{ lat: 48.85, lng: 2.35, name: 'Hotel Lutetia' },
|
||
{ lat: 48.86, lng: 2.34, name: 'Louvre' },
|
||
{ lat: 48.87, lng: 2.33, name: 'Orsay' },
|
||
{ lat: 48.85, lng: 2.35, name: 'Hotel Lutetia' },
|
||
])
|
||
expect(openSpy).toHaveBeenCalledWith('https://maps.google.com/...', '_blank', 'noopener,noreferrer')
|
||
openSpy.mockRestore()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-168b: the CoMaps export hands over the same stops in the day travel mode', async () => {
|
||
const user = userEvent.setup()
|
||
const { generateCoMapsUrl } = await import('../Map/RouteCalculator')
|
||
const openSpy = vi.spyOn(window, 'open').mockReturnValue(null)
|
||
const days = [
|
||
buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
|
||
buildDay({ id: 11, date: '2025-06-02', title: 'Day 2', default_transport_mode: 'walking' }),
|
||
buildDay({ id: 12, date: '2025-06-03', title: 'Day 3' }),
|
||
]
|
||
const accommodations: Accommodation[] = [{
|
||
id: 1, trip_id: 1, start_day_id: 10, end_day_id: 12,
|
||
place_lat: 48.85, place_lng: 2.35, place_name: 'Hotel Lutetia',
|
||
}]
|
||
const assignments = {
|
||
'11': [
|
||
buildAssignment({ id: 1, day_id: 11, order_index: 0, place: buildPlace({ id: 1, name: 'Louvre', lat: 48.86, lng: 2.34 }) }),
|
||
buildAssignment({ id: 2, day_id: 11, order_index: 1, place: buildPlace({ id: 2, name: 'Orsay', lat: 48.87, lng: 2.33 }) }),
|
||
],
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days, assignments, accommodations, selectedDayId: 11 })} />)
|
||
await user.click(screen.getByRole('button', { name: 'Open in CoMaps' }))
|
||
// Same bookended stop list as the Google export — one source, so the two
|
||
// cannot drift — plus the day's own mode, which CoMaps can actually route in.
|
||
expect(vi.mocked(generateCoMapsUrl)).toHaveBeenCalledWith([
|
||
{ lat: 48.85, lng: 2.35, name: 'Hotel Lutetia' },
|
||
{ lat: 48.86, lng: 2.34, name: 'Louvre' },
|
||
{ lat: 48.87, lng: 2.33, name: 'Orsay' },
|
||
{ lat: 48.85, lng: 2.35, name: 'Hotel Lutetia' },
|
||
], 'walking')
|
||
expect(openSpy).toHaveBeenCalledWith('https://comaps.at/...', '_blank', 'noopener,noreferrer')
|
||
openSpy.mockRestore()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-169: picking a whole-day travel mode persists it and redraws the map', async () => {
|
||
const user = userEvent.setup()
|
||
const { daysApi } = await import('../../api/client')
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignments = {
|
||
'10': [
|
||
buildAssignment({ id: 11, day_id: 10, order_index: 0, place: buildPlace({ id: 1, name: 'A', lat: 48.85, lng: 2.35 }) }),
|
||
buildAssignment({ id: 12, day_id: 10, order_index: 1, place: buildPlace({ id: 2, name: 'B', lat: 48.86, lng: 2.36 }) }),
|
||
],
|
||
}
|
||
const onSetRouteProfile = vi.fn()
|
||
seedStore(useTripStore, { days: [day] })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], assignments, selectedDayId: 10, onSetRouteProfile })} />)
|
||
await user.click(screen.getByRole('button', { name: 'Walking' }))
|
||
expect(onSetRouteProfile).toHaveBeenCalledWith('walking')
|
||
expect(vi.mocked(daysApi.updateTransport)).toHaveBeenCalledWith(1, 10, 'walking')
|
||
expect(useTripStore.getState().days[0].default_transport_mode).toBe('walking')
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-170: a failing day-mode save is reported and the days are refetched', async () => {
|
||
const user = userEvent.setup()
|
||
const { daysApi } = await import('../../api/client')
|
||
vi.mocked(daysApi.updateTransport).mockRejectedValueOnce(new Error('offline'))
|
||
const refreshDays = vi.fn(async () => undefined)
|
||
stubTripActions({ refreshDays })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignments = {
|
||
'10': [
|
||
buildAssignment({ id: 11, day_id: 10, order_index: 0, place: buildPlace({ id: 1, name: 'A', lat: 48.85, lng: 2.35 }) }),
|
||
buildAssignment({ id: 12, day_id: 10, order_index: 1, place: buildPlace({ id: 2, name: 'B', lat: 48.86, lng: 2.36 }) }),
|
||
],
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], assignments, selectedDayId: 10 })} />)
|
||
await user.click(screen.getByRole('button', { name: 'Walking' }))
|
||
await waitFor(() => expect(mockToast.error).toHaveBeenCalledWith('offline'))
|
||
expect(refreshDays).toHaveBeenCalledWith(1)
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-171: a route connector opens the per-segment travel-mode menu', async () => {
|
||
const user = userEvent.setup()
|
||
const { assignmentsApi } = await import('../../api/client')
|
||
const setAssignments = vi.fn()
|
||
stubTripActions({ setAssignments })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignments = {
|
||
'10': [
|
||
buildAssignment({ id: 11, day_id: 10, order_index: 0, place: buildPlace({ id: 1, name: 'A', lat: 48.85, lng: 2.35 }) }),
|
||
buildAssignment({ id: 12, day_id: 10, order_index: 1, place: buildPlace({ id: 2, name: 'B', lat: 48.86, lng: 2.36 }) }),
|
||
],
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], assignments, selectedDayId: 10, routeShown: true })} />)
|
||
const connector = await screen.findByTitle('Change travel mode')
|
||
await user.click(connector)
|
||
await user.click(contextMenu().getByRole('button', { name: 'Walking' }))
|
||
expect(vi.mocked(assignmentsApi.updateTransport)).toHaveBeenCalledWith(1, 11, 'walking')
|
||
expect(setAssignments).toHaveBeenCalledWith({
|
||
'10': [expect.objectContaining({ id: 11, leg_transport_mode: 'walking' }), expect.objectContaining({ id: 12 })],
|
||
})
|
||
|
||
await user.click(await screen.findByTitle('Change travel mode'))
|
||
await user.click(contextMenu().getByRole('button', { name: 'Use day default' }))
|
||
expect(vi.mocked(assignmentsApi.updateTransport)).toHaveBeenLastCalledWith(1, 11, null)
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-171b: a stop-to-stop connector offers public transport pre-filled from the leg', async () => {
|
||
const user = userEvent.setup()
|
||
const onPlanTransitLeg = vi.fn()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignments = {
|
||
'10': [
|
||
buildAssignment({ id: 11, day_id: 10, order_index: 0, place: buildPlace({ id: 1, name: 'Louvre', place_time: '10:30', lat: 48.86, lng: 2.34 }) }),
|
||
buildAssignment({ id: 12, day_id: 10, order_index: 1, place: buildPlace({ id: 2, name: 'Orsay', lat: 48.87, lng: 2.33 }) }),
|
||
],
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], assignments, selectedDayId: 10, routeShown: true, onPlanTransitLeg })} />)
|
||
await user.click(await screen.findByTitle('Change travel mode'))
|
||
await user.click(contextMenu().getByRole('button', { name: 'Public transit' }))
|
||
// Origin/destination + this stop's departure time, resolved back from the leg coords.
|
||
expect(onPlanTransitLeg).toHaveBeenCalledWith({
|
||
dayId: 10,
|
||
from: { name: 'Louvre', lat: 48.86, lng: 2.34 },
|
||
to: { name: 'Orsay', lat: 48.87, lng: 2.33 },
|
||
time: '10:30',
|
||
})
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-171c: the public-transport entry is absent without the onPlanTransitLeg handler', async () => {
|
||
const user = userEvent.setup()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignments = {
|
||
'10': [
|
||
buildAssignment({ id: 11, day_id: 10, order_index: 0, place: buildPlace({ id: 1, name: 'A', lat: 48.85, lng: 2.35 }) }),
|
||
buildAssignment({ id: 12, day_id: 10, order_index: 1, place: buildPlace({ id: 2, name: 'B', lat: 48.86, lng: 2.36 }) }),
|
||
],
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], assignments, selectedDayId: 10, routeShown: true })} />)
|
||
await user.click(await screen.findByTitle('Change travel mode'))
|
||
expect(contextMenu().queryByRole('button', { name: 'Public transit' })).not.toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-171d: a hotel bookend connector offers public transport from the hotel', async () => {
|
||
const user = userEvent.setup()
|
||
const onPlanTransitLeg = vi.fn()
|
||
const days = [
|
||
buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
|
||
buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
|
||
buildDay({ id: 12, date: '2025-06-03', title: 'Day 3' }),
|
||
]
|
||
const accommodations: Accommodation[] = [{
|
||
id: 1, trip_id: 1, start_day_id: 10, end_day_id: 12,
|
||
place_lat: 48.85, place_lng: 2.35, place_name: 'Hotel Lutetia',
|
||
}]
|
||
const assignments = {
|
||
'11': [
|
||
buildAssignment({ id: 11, day_id: 11, order_index: 0, place: buildPlace({ id: 1, name: 'Louvre', lat: 48.86, lng: 2.34 }) }),
|
||
buildAssignment({ id: 12, day_id: 11, order_index: 1, place: buildPlace({ id: 2, name: 'Orsay', lat: 48.87, lng: 2.33 }) }),
|
||
],
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days, assignments, accommodations, selectedDayId: 11, routeShown: true, onPlanTransitLeg })} />)
|
||
// The morning bookend (hotel -> first stop) is the first connector in the list.
|
||
const connectors = await screen.findAllByTitle('Change travel mode')
|
||
await user.click(connectors[0])
|
||
await user.click(contextMenu().getByRole('button', { name: 'Public transit' }))
|
||
expect(onPlanTransitLeg).toHaveBeenCalledWith(expect.objectContaining({
|
||
dayId: 11,
|
||
from: { name: 'Hotel Lutetia', lat: 48.85, lng: 2.35 },
|
||
to: { name: 'Louvre', lat: 48.86, lng: 2.34 },
|
||
// The hotel has no place_time, so the departure time falls back to null (the
|
||
// panel then uses its own 09:00 default).
|
||
time: null,
|
||
}))
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-171e: a revisited stop seeds THIS day\'s departure time, not another day\'s', async () => {
|
||
const user = userEvent.setup()
|
||
const onPlanTransitLeg = vi.fn()
|
||
const days = [
|
||
buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
|
||
buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
|
||
]
|
||
// The SAME located POI (identical coords) is visited on both days at different
|
||
// times. Day 10 has it alone (no leg); day 11 pairs it with Rodin (one leg).
|
||
const assignments = {
|
||
'10': [
|
||
buildAssignment({ id: 11, day_id: 10, order_index: 0, place: buildPlace({ id: 1, name: 'Louvre', place_time: '09:00', lat: 48.86, lng: 2.34 }) }),
|
||
],
|
||
'11': [
|
||
buildAssignment({ id: 21, day_id: 11, order_index: 0, place: buildPlace({ id: 1, name: 'Louvre', place_time: '16:30', lat: 48.86, lng: 2.34 }) }),
|
||
buildAssignment({ id: 22, day_id: 11, order_index: 1, place: buildPlace({ id: 3, name: 'Rodin', lat: 48.855, lng: 2.315 }) }),
|
||
],
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days, assignments, selectedDayId: 11, routeShown: true, onPlanTransitLeg })} />)
|
||
await user.click(await screen.findByTitle('Change travel mode'))
|
||
await user.click(contextMenu().getByRole('button', { name: 'Public transit' }))
|
||
// Day 11's own 16:30, not day 10's 09:00 (a trip-wide coord index would leak it).
|
||
expect(onPlanTransitLeg).toHaveBeenCalledWith(expect.objectContaining({ dayId: 11, time: '16:30' }))
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-172: a failing per-segment save is reported and the days are refetched', async () => {
|
||
const user = userEvent.setup()
|
||
const { assignmentsApi } = await import('../../api/client')
|
||
vi.mocked(assignmentsApi.updateTransport).mockRejectedValueOnce(new Error('nope'))
|
||
const refreshDays = vi.fn(async () => undefined)
|
||
stubTripActions({ refreshDays })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignments = {
|
||
'10': [
|
||
buildAssignment({ id: 11, day_id: 10, order_index: 0, place: buildPlace({ id: 1, name: 'A', lat: 48.85, lng: 2.35 }) }),
|
||
buildAssignment({ id: 12, day_id: 10, order_index: 1, place: buildPlace({ id: 2, name: 'B', lat: 48.86, lng: 2.36 }) }),
|
||
],
|
||
}
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], assignments, selectedDayId: 10, routeShown: true })} />)
|
||
await user.click(await screen.findByTitle('Change travel mode'))
|
||
await user.click(contextMenu().getByRole('button', { name: 'Driving' }))
|
||
await waitFor(() => expect(mockToast.error).toHaveBeenCalledWith('nope'))
|
||
expect(refreshDays).toHaveBeenCalledWith(1)
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-173: a route-provider plugin adds its profile to the day and segment pickers', async () => {
|
||
const user = userEvent.setup()
|
||
usePluginStore.setState({
|
||
plugins: [{ id: 'ev', name: 'EV Router', routeProfiles: [{ id: 'eco', label: 'EV eco' }] }],
|
||
} as never)
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignments = {
|
||
'10': [
|
||
buildAssignment({ id: 11, day_id: 10, order_index: 0, place: buildPlace({ id: 1, name: 'A', lat: 48.85, lng: 2.35 }) }),
|
||
buildAssignment({ id: 12, day_id: 10, order_index: 1, place: buildPlace({ id: 2, name: 'B', lat: 48.86, lng: 2.36 }) }),
|
||
],
|
||
}
|
||
const onSetRouteProfile = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], assignments, selectedDayId: 10, routeShown: true, onSetRouteProfile,
|
||
})} />)
|
||
await user.click(screen.getByRole('button', { name: 'EV eco' }))
|
||
expect(onSetRouteProfile).toHaveBeenCalledWith('plugin:ev/eco')
|
||
await user.click(await screen.findByTitle('Change travel mode'))
|
||
expect(contextMenu().getByRole('button', { name: 'EV eco' })).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-174: the Route toggle of the selected day flips the shared route state', async () => {
|
||
const user = userEvent.setup()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignments = {
|
||
'10': [
|
||
buildAssignment({ id: 11, day_id: 10, order_index: 0, place: buildPlace({ id: 1, name: 'A', lat: 48.85, lng: 2.35 }) }),
|
||
buildAssignment({ id: 12, day_id: 10, order_index: 1, place: buildPlace({ id: 2, name: 'B', lat: 48.86, lng: 2.36 }) }),
|
||
],
|
||
}
|
||
const onToggleRoute = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], assignments, selectedDayId: 10, onToggleRoute })} />)
|
||
await user.click(screen.getByRole('button', { name: 'Route' }))
|
||
expect(onToggleRoute).toHaveBeenCalledTimes(1)
|
||
})
|
||
|
||
// ── Plugin day schedule ──────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-175: plugin schedule rows appear at the day edges, per stop and per booking', async () => {
|
||
server.use(http.get('/api/day-schedule/1', () => HttpResponse.json({
|
||
items: [
|
||
{ pluginId: 'ev', id: 's1', dayId: 10, position: 'start', minutes: 15, label: 'Warm up', tone: 'default' },
|
||
{ pluginId: 'ev', id: 'e1', dayId: 10, position: 'end', minutes: 10, label: 'Wind down', tone: 'success' },
|
||
{ pluginId: 'ev', id: 'a1', dayId: 10, assignmentId: 11, minutes: 35, label: 'Charging', tone: 'warn' },
|
||
{ pluginId: 'ev', id: 'r1', dayId: 10, reservationId: 500, minutes: 45, label: 'Security', tone: 'danger' },
|
||
],
|
||
})))
|
||
const { day, placeA, placeB, bus, assignments } = dayWithBusAndPlaces()
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [placeA, placeB], assignments, reservations: [bus], selectedDayId: 10,
|
||
})} />)
|
||
expect(await screen.findByText('Warm up')).toBeInTheDocument()
|
||
expect(screen.getByText('Wind down')).toBeInTheDocument()
|
||
expect(screen.getByText('Charging')).toBeInTheDocument()
|
||
expect(screen.getByText('Security')).toBeInTheDocument()
|
||
// 105 contributed minutes roll up into the route footer.
|
||
expect(screen.getByText('+1 h 45 min')).toBeInTheDocument()
|
||
})
|
||
|
||
// ── Day header details ───────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-176: a transfer day lists the check-out hotel before the check-in one', async () => {
|
||
const user = userEvent.setup()
|
||
const days = [
|
||
buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
|
||
buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
|
||
buildDay({ id: 12, date: '2025-06-03', title: 'Day 3' }),
|
||
]
|
||
const accommodations: Accommodation[] = [
|
||
{ id: 1, trip_id: 1, start_day_id: 11, end_day_id: 12, place_id: 9, place_lat: 51.5, place_lng: -0.12, place_name: 'Check-in Hotel' },
|
||
{ id: 2, trip_id: 1, start_day_id: 10, end_day_id: 11, place_id: 8, place_lat: 48.85, place_lng: 2.35, place_name: 'Check-out Hotel' },
|
||
]
|
||
const onPlaceClick = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days, accommodations, onPlaceClick })} />)
|
||
const badges = dayHeader('Day 2').querySelectorAll('.bg-surface-hover')
|
||
expect(badges[0].textContent).toBe('Check-out Hotel')
|
||
expect(badges[1].textContent).toBe('Check-in Hotel')
|
||
await user.click(badges[0])
|
||
expect(onPlaceClick).toHaveBeenCalledWith(8)
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-177: clicking an active rental badge opens its booking detail', async () => {
|
||
const user = userEvent.setup()
|
||
const days = [
|
||
buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
|
||
buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
|
||
buildDay({ id: 12, date: '2025-06-03', title: 'Day 3' }),
|
||
]
|
||
const car = buildReservation({ id: 530, type: 'car', title: 'Renault Clio', day_id: 10, end_day_id: 12, location: 'Gare du Nord' })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days, reservations: [car] })} />)
|
||
const badge = dayHeader('Day 2').querySelector('.bg-surface-hover') as HTMLElement
|
||
await user.click(badge)
|
||
expect(await screen.findByText('Gare du Nord')).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-178: the add-transport shortcut targets the day it sits on', async () => {
|
||
const user = userEvent.setup()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const onAddTransport = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], onAddTransport })} />)
|
||
await user.click(screen.getByTitle('Add transport'))
|
||
expect(onAddTransport).toHaveBeenCalledWith(10)
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-179: hovering a day header tints it and clears the tint again', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
|
||
const header = dayHeader('Day 1')
|
||
fireEvent.mouseEnter(header)
|
||
expect(header.style.background).toBe('var(--bg-tertiary)')
|
||
fireEvent.mouseLeave(header)
|
||
expect(header.style.background).toBe('transparent')
|
||
})
|
||
|
||
// ── Chronology guards ────────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-180: the chronology check spans notes and bookings, not just stops', async () => {
|
||
const user = userEvent.setup()
|
||
const { assignmentsApi } = await import('../../api/client')
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const placeA = buildPlace({ id: 1, name: 'Morning Place', place_time: '08:00' })
|
||
const placeB = buildPlace({ id: 2, name: 'Afternoon Place', place_time: '14:00' })
|
||
const assignments = {
|
||
'10': [
|
||
buildAssignment({ id: 11, day_id: 10, order_index: 0, place: placeA }),
|
||
buildAssignment({ id: 12, day_id: 10, order_index: 1, place: placeB }),
|
||
],
|
||
}
|
||
mockDayNotesState.dayNotes = { '10': [buildDayNote({ id: 70, day_id: 10, text: 'A note', sort_order: 0.5 })] }
|
||
const bus = buildReservation({ id: 540, type: 'bus', title: 'Midday bus', day_id: 10, reservation_time: '2025-06-01T12:00:00' })
|
||
const onReorder = vi.fn(async () => undefined)
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [placeA, placeB], assignments, reservations: [bus], onReorder,
|
||
})} />)
|
||
fireEvent.dragStart(dragRow(screen.getByText('Afternoon Place')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(dragRow(screen.getByText('Morning Place')), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
await waitFor(() => expect(screen.getByText('Remove time?')).toBeInTheDocument())
|
||
await user.click(screen.getByRole('button', { name: /confirm/i }))
|
||
await waitFor(() => expect(vi.mocked(assignmentsApi.updateTime)).toHaveBeenCalledWith(1, 12, { place_time: null, end_time: null }))
|
||
await waitFor(() => expect(onReorder).toHaveBeenCalledWith(10, [12, 11]))
|
||
// The booking keeps its slot in the rebuilt order.
|
||
expect(screen.getByText('Midday bus')).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-181: an arrow reorder across a booking drops the time and re-slots the booking', async () => {
|
||
const user = userEvent.setup()
|
||
const { assignmentsApi, reservationsApi } = await import('../../api/client')
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const placeA = buildPlace({ id: 1, name: 'Morning Place', place_time: '08:00' })
|
||
const placeB = buildPlace({ id: 2, name: 'Evening Place', place_time: '18:00' })
|
||
const assignments = {
|
||
'10': [
|
||
buildAssignment({ id: 11, day_id: 10, order_index: 0, place: placeA }),
|
||
buildAssignment({ id: 12, day_id: 10, order_index: 1, place: placeB }),
|
||
],
|
||
}
|
||
const bus = buildReservation({ id: 541, type: 'bus', title: 'Midday bus', day_id: 10, reservation_time: '2025-06-01T12:00:00' })
|
||
seedStore(useTripStore, { reservations: [bus] })
|
||
const onReorder = vi.fn(async () => undefined)
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [placeA, placeB], assignments, reservations: [bus], onReorder,
|
||
})} />)
|
||
const upBtn = dragRow(screen.getByText('Evening Place')).querySelectorAll('.reorder-buttons button')[0]
|
||
await user.click(upBtn)
|
||
await waitFor(() => expect(screen.getByText('Remove time?')).toBeInTheDocument())
|
||
await user.click(screen.getByRole('button', { name: /confirm/i }))
|
||
await waitFor(() => expect(vi.mocked(assignmentsApi.updateTime)).toHaveBeenCalledWith(1, 12, { place_time: null, end_time: null }))
|
||
await waitFor(() => expect(onReorder).toHaveBeenCalledWith(10, [11, 12]))
|
||
// The stop really moves past the booking: the bus lands behind both places
|
||
// instead of keeping its old slot between them.
|
||
await waitFor(() => expect(vi.mocked(reservationsApi.updatePositions)).toHaveBeenCalledWith(
|
||
1, [{ id: 541, day_plan_position: 1.5 }], 10,
|
||
))
|
||
})
|
||
|
||
// ── Undo hooks ───────────────────────────────────────────────────────────
|
||
|
||
it('FE-PLANNER-DAYPLAN-182: optimising registers an undo that restores the previous order', async () => {
|
||
const user = userEvent.setup()
|
||
const reorderAssignments = vi.fn(async () => undefined)
|
||
stubTripActions({ reorderAssignments })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const assignments = {
|
||
'10': [1, 2, 3].map((n, i) => buildAssignment({
|
||
id: 10 + n, day_id: 10, order_index: i,
|
||
place: buildPlace({ id: n, name: `P${n}`, lat: 48.8 + n / 100, lng: 2.3 + n / 100 }),
|
||
})),
|
||
}
|
||
const pushUndo = vi.fn()
|
||
const onReorder = vi.fn(async () => undefined)
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], assignments, selectedDayId: 10, pushUndo, onReorder })} />)
|
||
await user.click(screen.getByRole('button', { name: 'Optimize' }))
|
||
await waitFor(() => expect(onReorder).toHaveBeenCalled())
|
||
const undo = pushUndo.mock.calls[0][1] as () => Promise<void>
|
||
await undo()
|
||
expect(reorderAssignments).toHaveBeenCalledWith(1, 10, [11, 12, 13])
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-183: moving a stop to another day registers an undo that moves it back', async () => {
|
||
const moveAssignment = vi.fn(async () => undefined)
|
||
stubTripActions({ moveAssignment })
|
||
const days = [
|
||
buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
|
||
buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
|
||
]
|
||
const place = buildPlace({ id: 1, name: 'Place A' })
|
||
const assignment = buildAssignment({ id: 11, day_id: 10, order_index: 3, place })
|
||
seedStore(useTripStore, { assignments: { '10': [assignment] } })
|
||
const pushUndo = vi.fn()
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days, places: [place], assignments: { '10': [assignment] }, pushUndo,
|
||
})} />)
|
||
fireEvent.dragStart(dragRow(screen.getByText('Place A')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(dayHeader('Day 2'), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
await waitFor(() => expect(pushUndo).toHaveBeenCalled())
|
||
const undo = pushUndo.mock.calls[0][1] as () => Promise<void>
|
||
await undo()
|
||
expect(moveAssignment).toHaveBeenLastCalledWith(1, 11, 11, 10, 3)
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-184: failed cross-day moves from the day header are reported', async () => {
|
||
stubTripActions({
|
||
moveAssignment: vi.fn(async () => { throw new Error('move failed') }),
|
||
moveDayNote: vi.fn(async () => { throw new Error('note failed') }),
|
||
updateReservation: vi.fn(async () => { throw new Error('booking failed') }),
|
||
})
|
||
const days = [
|
||
buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
|
||
buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
|
||
]
|
||
const place = buildPlace({ id: 1, name: 'Place A' })
|
||
const assignments = { '10': [buildAssignment({ id: 11, day_id: 10, order_index: 0, place })] }
|
||
mockDayNotesState.dayNotes = { '10': [buildDayNote({ id: 70, day_id: 10, text: 'A note' })] }
|
||
const taxi = buildReservation({ id: 501, type: 'taxi', title: 'Airport taxi', day_id: 10 })
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days, places: [place], assignments, reservations: [taxi] })} />)
|
||
|
||
fireEvent.dragStart(dragRow(screen.getByText('Place A')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(dayHeader('Day 2'), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
await waitFor(() => expect(mockToast.error).toHaveBeenCalledWith('move failed'))
|
||
|
||
fireEvent.dragStart(cardRow(screen.getByText('A note')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(dayHeader('Day 2'), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
await waitFor(() => expect(mockToast.error).toHaveBeenCalledWith('note failed'))
|
||
|
||
fireEvent.dragStart(cardRow(screen.getByText('Airport taxi')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(dayHeader('Day 2'), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
await waitFor(() => expect(mockToast.error).toHaveBeenCalledWith('booking failed'))
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-185: every cross-day drop surface reports a failed move', async () => {
|
||
stubTripActions({
|
||
moveAssignment: vi.fn(async () => { throw new Error('place failed') }),
|
||
moveDayNote: vi.fn(async () => { throw new Error('note failed') }),
|
||
updateReservation: vi.fn(async () => { throw new Error('booking failed') }),
|
||
})
|
||
const days = [
|
||
buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
|
||
buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
|
||
]
|
||
const src = buildPlace({ id: 1, name: 'Source place' })
|
||
const tgt = buildPlace({ id: 2, name: 'Target place' })
|
||
const assignments = {
|
||
'10': [buildAssignment({ id: 11, day_id: 10, order_index: 0, place: src })],
|
||
'11': [buildAssignment({ id: 12, day_id: 11, order_index: 0, place: tgt })],
|
||
}
|
||
mockDayNotesState.dayNotes = {
|
||
'10': [buildDayNote({ id: 70, day_id: 10, text: 'Source note' })],
|
||
'11': [buildDayNote({ id: 71, day_id: 11, text: 'Target note' })],
|
||
}
|
||
const taxi = buildReservation({ id: 501, type: 'taxi', title: 'Source taxi', day_id: 10 })
|
||
const targetBus = buildReservation({ id: 502, type: 'bus', title: 'Target bus', day_id: 11 })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days, places: [src, tgt], assignments, reservations: [taxi, targetBus],
|
||
})} />)
|
||
|
||
const sources = [
|
||
() => dragRow(screen.getByText('Source place')),
|
||
() => cardRow(screen.getByText('Source note')),
|
||
() => cardRow(screen.getByText('Source taxi')),
|
||
]
|
||
const targets = [
|
||
() => document.querySelectorAll('[style*="padding-top: 6px"]')[1] as HTMLElement,
|
||
() => endZones()[1] as HTMLElement,
|
||
() => cardRow(screen.getByText('Target note')),
|
||
() => dragRow(screen.getByText('Target place')),
|
||
() => cardRow(screen.getByText('Target bus')),
|
||
]
|
||
for (const target of targets) {
|
||
for (const source of sources) {
|
||
fireEvent.dragStart(source(), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(target(), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
}
|
||
}
|
||
// The day body also routes drops through whichever row was hovered last.
|
||
for (const source of sources) {
|
||
fireEvent.dragStart(source(), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.dragOver(cardRow(screen.getByText('Target bus')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(targets[0](), { dataTransfer: { getData: vi.fn(() => '') } })
|
||
}
|
||
|
||
await waitFor(() => expect(mockToast.error).toHaveBeenCalledWith('place failed'))
|
||
expect(mockToast.error).toHaveBeenCalledWith('note failed')
|
||
expect(mockToast.error).toHaveBeenCalledWith('booking failed')
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-186: a transit row without a journey view falls back to the booking detail', async () => {
|
||
const user = userEvent.setup()
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const transit = buildReservation({
|
||
id: 550, type: 'transit', title: 'U2 to Zoo', day_id: 10, location: 'Alexanderplatz',
|
||
metadata: JSON.stringify({
|
||
transit: { duration: 900, transfers: 0, walk_seconds: 60, legs: [{ mode: 'WALK', duration: 300, from: { name: 'A' }, to: { name: 'B' } }] },
|
||
}),
|
||
})
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], reservations: [transit] })} />)
|
||
const expand = screen.getByLabelText('Expand')
|
||
fireEvent.mouseEnter(expand)
|
||
fireEvent.mouseLeave(expand)
|
||
await user.click(expand)
|
||
expect(screen.getByLabelText('Collapse')).toBeInTheDocument()
|
||
await user.click(cardRow(screen.getByText('U2 to Zoo')))
|
||
expect(await screen.findByText('Alexanderplatz')).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-187: a same-day note dropped on the end zone moves after the last stop', async () => {
|
||
const updateDayNote = vi.fn(async () => buildDayNote({ id: 70 }))
|
||
stubTripActions({ updateDayNote })
|
||
const { day, placeA, placeB, assignments } = dayWithBusAndPlaces()
|
||
mockDayNotesState.dayNotes = { '10': [buildDayNote({ id: 70, day_id: 10, text: 'A note', sort_order: -1 })] }
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [placeA, placeB], assignments, onReorder: vi.fn(async () => undefined),
|
||
})} />)
|
||
fireEvent.dragStart(cardRow(screen.getByText('A note')), { dataTransfer: emptyDataTransfer })
|
||
fireEvent.drop(endZones()[0], { dataTransfer: { getData: vi.fn(() => '') } })
|
||
await waitFor(() => expect(updateDayNote).toHaveBeenCalledWith(1, 10, 70, { sort_order: expect.any(Number) }))
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-188: below lg note rows lose their grip and cannot be dragged', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
mockDayNotesState.dayNotes = { '10': [buildDayNote({ id: 70, day_id: 10, text: 'A note' })] }
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], isMobile: true })} />)
|
||
const row = cardRow(screen.getByText('A note'))
|
||
expect(row.getAttribute('draggable')).toBe('false')
|
||
expect(row.querySelector('.dp-grip')).toBeNull()
|
||
fireEvent.dragStart(row, { dataTransfer: emptyDataTransfer })
|
||
expect(row.style.opacity).toBe('1')
|
||
fireEvent.dragEnd(row)
|
||
expect(row.style.opacity).toBe('1')
|
||
})
|
||
})
|
||
|
||
// FE-W5DPS-001 to FE-W5DPS-006 — booking subtitles, the collections entry in the
|
||
// place menu and the accommodation ordering on a hotel-change day.
|
||
describe('DayPlanSidebar remaining branches', () => {
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
|
||
const renderWith = (reservations: Reservation[], overrides = {}) => {
|
||
seedStore(useTripStore, { reservations })
|
||
return render(<DayPlanSidebar {...makeDefaultProps({ days: [day], reservations, ...overrides })} />)
|
||
}
|
||
|
||
it('FE-W5DPS-001: a flight without an airline still shows its flight number', async () => {
|
||
renderWith([buildReservation({
|
||
id: 601, type: 'flight', title: 'Hop', day_id: 10,
|
||
reservation_time: '2025-06-01T09:00:00', metadata: JSON.stringify({ flight_number: 'AF900' }),
|
||
}) as Reservation])
|
||
|
||
expect(await screen.findByText('AF900')).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-W5DPS-002: a train shows its train number', async () => {
|
||
renderWith([buildReservation({
|
||
id: 602, type: 'train', title: 'ICE', day_id: 10,
|
||
reservation_time: '2025-06-01T09:00:00', metadata: JSON.stringify({ train_number: 'ICE 599' }),
|
||
}) as Reservation])
|
||
|
||
expect(await screen.findByText('ICE 599')).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-W5DPS-003: a booking without usable metadata gets no subtitle', async () => {
|
||
renderWith([buildReservation({
|
||
id: 603, type: 'bus', title: 'Shuttle', day_id: 10,
|
||
reservation_time: '2025-06-01T09:00:00', metadata: JSON.stringify({ seat: '4B' }),
|
||
}) as Reservation])
|
||
|
||
const row = cardRow(await screen.findByText('Shuttle'))
|
||
expect(row).not.toHaveTextContent('4B')
|
||
})
|
||
|
||
it('FE-W5DPS-004: metadata that is not valid JSON leaves the row standing', async () => {
|
||
renderWith([buildReservation({
|
||
id: 604, type: 'bus', title: 'Night bus', day_id: 10,
|
||
reservation_time: '2025-06-01T09:00:00', metadata: '{not json',
|
||
}) as Reservation])
|
||
|
||
// The parse used to throw during render and took the whole sidebar with it.
|
||
expect(await screen.findByText('Night bus')).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-W5DPS-005: the place menu offers Save to collection only with the addon on', async () => {
|
||
const user = userEvent.setup()
|
||
const place = buildPlace({ id: 1, name: 'Louvre' })
|
||
const assignments = { '10': [buildAssignment({ id: 11, day_id: 10, order_index: 0, place })] }
|
||
const { unmount } = render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments })} />)
|
||
|
||
fireEvent.contextMenu(dragRow(screen.getByText('Louvre')))
|
||
expect(contextMenu().queryByText(/save to/i)).not.toBeInTheDocument()
|
||
unmount()
|
||
|
||
const { useAddonStore } = await import('../../store/addonStore')
|
||
seedStore(useAddonStore, {
|
||
addons: [{ id: 'collections', name: 'Collections', type: 'trip', icon: '', enabled: true }],
|
||
loaded: true,
|
||
})
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments })} />)
|
||
|
||
fireEvent.contextMenu(dragRow(screen.getByText('Louvre')))
|
||
await user.click(contextMenu().getByText(/save to/i))
|
||
|
||
const { useSaveToCollectionStore } = await import('../../store/saveToCollectionStore')
|
||
expect(useSaveToCollectionStore.getState().target).not.toBeNull()
|
||
})
|
||
|
||
it('FE-W5DPS-006: a hotel-change day lists the departing stay before the arriving one', async () => {
|
||
const dayBefore = buildDay({ id: 9, date: '2025-05-31', title: 'Day 0' })
|
||
const dayAfter = buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' })
|
||
const accommodations = [
|
||
{ id: 1, place_id: 5, place_name: 'Arriving Inn', start_day_id: 10, end_day_id: 11 },
|
||
{ id: 2, place_id: 6, place_name: 'Departing Inn', start_day_id: 9, end_day_id: 10 },
|
||
] as unknown as Accommodation[]
|
||
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [dayBefore, day, dayAfter], accommodations, selectedDayId: 10,
|
||
})} />)
|
||
|
||
const body = document.body.textContent ?? ''
|
||
expect(body.indexOf('Departing Inn')).toBeGreaterThan(-1)
|
||
expect(body.indexOf('Departing Inn')).toBeLessThan(body.indexOf('Arriving Inn'))
|
||
})
|
||
})
|
||
|
||
// #1616 — the reporter's iPad sees both panes but could not pick a row up at all.
|
||
// This drives the real bridge rather than a synthetic dragstart, so it fails if the
|
||
// long press, the hit test or the opt-in container ever stop lining up.
|
||
describe('reordering the day plan with a finger (#1616)', () => {
|
||
/** Presses a row for longer than the bridge's long press. */
|
||
async function longPress(row: Element) {
|
||
fireEvent.touchStart(row, { touches: [{ identifier: 1, clientX: 20, clientY: 40 }] })
|
||
await new Promise(resolve => setTimeout(resolve, 400))
|
||
}
|
||
|
||
function dragTo(target: Element) {
|
||
document.elementFromPoint = () => target as Element
|
||
fireEvent.touchMove(document, { touches: [{ identifier: 1, clientX: 20, clientY: 180 }] })
|
||
const end = new Event('touchend', { bubbles: true, cancelable: true })
|
||
Object.defineProperty(end, 'touches', { value: [] })
|
||
fireEvent(document, end)
|
||
}
|
||
|
||
it('FE-PLANNER-DAYPLAN-189: a long press drags one place row onto another and reorders the day', async () => {
|
||
const onReorder = vi.fn().mockResolvedValue(undefined)
|
||
const place1 = buildPlace({ id: 1, name: 'First Place' })
|
||
const place2 = buildPlace({ id: 2, name: 'Second Place' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const a1 = buildAssignment({ id: 11, day_id: 10, order_index: 0, place: place1 })
|
||
const a2 = buildAssignment({ id: 12, day_id: 10, order_index: 1, place: place2 })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place1, place2], assignments: { '10': [a1, a2] }, onReorder,
|
||
})} />)
|
||
const teardown = installTouchDragBridge()
|
||
try {
|
||
const from = screen.getByText('First Place').closest('[draggable="true"]')!
|
||
const to = screen.getByText('Second Place').closest('[draggable="true"]')!
|
||
await longPress(from)
|
||
dragTo(to)
|
||
await waitFor(() => expect(onReorder).toHaveBeenCalledWith(10, expect.any(Array)))
|
||
} finally {
|
||
teardown()
|
||
}
|
||
})
|
||
|
||
it('FE-PLANNER-DAYPLAN-190: a swipe across the same row scrolls instead of reordering', async () => {
|
||
const onReorder = vi.fn().mockResolvedValue(undefined)
|
||
const place1 = buildPlace({ id: 1, name: 'First Place' })
|
||
const place2 = buildPlace({ id: 2, name: 'Second Place' })
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
const a1 = buildAssignment({ id: 11, day_id: 10, order_index: 0, place: place1 })
|
||
const a2 = buildAssignment({ id: 12, day_id: 10, order_index: 1, place: place2 })
|
||
render(<DayPlanSidebar {...makeDefaultProps({
|
||
days: [day], places: [place1, place2], assignments: { '10': [a1, a2] }, onReorder,
|
||
})} />)
|
||
const teardown = installTouchDragBridge()
|
||
try {
|
||
const from = screen.getByText('First Place').closest('[draggable="true"]')!
|
||
fireEvent.touchStart(from, { touches: [{ identifier: 1, clientX: 20, clientY: 40 }] })
|
||
// The finger travels before the press lands, so the browser keeps the gesture.
|
||
const moved = fireEvent.touchMove(document, { touches: [{ identifier: 1, clientX: 20, clientY: 140 }] })
|
||
expect(moved).toBe(true)
|
||
await new Promise(resolve => setTimeout(resolve, 400))
|
||
expect(onReorder).not.toHaveBeenCalled()
|
||
} finally {
|
||
teardown()
|
||
}
|
||
})
|
||
|
||
// The reorder popup renders inside the sidebar, so it inherits the opt-in and
|
||
// its day rows become draggable by finger too. Pinned so it stays deliberate.
|
||
it('FE-PLANNER-DAYPLAN-191: a long press reorders days in the reorder popup', async () => {
|
||
const onReorderDays = vi.fn().mockResolvedValue(undefined)
|
||
const days = [
|
||
buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
|
||
buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
|
||
buildDay({ id: 12, date: '2025-06-03', title: 'Day 3' }),
|
||
]
|
||
render(<DayPlanSidebar {...makeDefaultProps({ days, onReorderDays, onAddDay: vi.fn() })} />)
|
||
fireEvent.click(screen.getByLabelText('Reorder days'))
|
||
const teardown = installTouchDragBridge()
|
||
try {
|
||
const rows = document.querySelectorAll('[draggable="true"]')
|
||
const from = [...rows].find(r => r.textContent?.includes('Day 1'))!
|
||
const to = [...rows].find(r => r.textContent?.includes('Day 3'))!
|
||
expect(from.closest('[data-touch-drag]')).not.toBeNull()
|
||
await longPress(from)
|
||
dragTo(to)
|
||
await waitFor(() => expect(onReorderDays).toHaveBeenCalled())
|
||
} finally {
|
||
teardown()
|
||
}
|
||
})
|
||
})
|
||
|
||
/**
|
||
* The day's route-tools row (#1981).
|
||
*
|
||
* Every button in it hands the day somewhere: show the route, open it in Google
|
||
* Maps, open it in CoMaps, reorder it. Two of those were already icon-only; the
|
||
* other two carried labels on `flex: 1` with `padding: '6px 0'`, which is no
|
||
* horizontal padding at all. That was survivable until CoMaps added a fifth
|
||
* button to the row, at which point the optimize label sat hard against both
|
||
* edges of its own button.
|
||
*
|
||
* It is icon-only now, which is also what keeps the row from crowding again the
|
||
* next time something is added to it.
|
||
*/
|
||
describe('the day route-tools row', () => {
|
||
const dayWithTwoStops = () => {
|
||
const places = [
|
||
buildPlace({ id: 1, name: 'A', lat: 48.85, lng: 2.35 }),
|
||
buildPlace({ id: 2, name: 'B', lat: 48.86, lng: 2.36 }),
|
||
]
|
||
const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
|
||
return {
|
||
days: [day], places, selectedDayId: 10,
|
||
assignments: {
|
||
'10': [
|
||
buildAssignment({ id: 1, day_id: 10, order_index: 0, place: places[0] }),
|
||
buildAssignment({ id: 2, day_id: 10, order_index: 1, place: places[1] }),
|
||
],
|
||
},
|
||
}
|
||
}
|
||
|
||
it('keeps the optimize action reachable by name without printing it', () => {
|
||
render(<DayPlanSidebar {...makeDefaultProps(dayWithTwoStops())} />)
|
||
const btn = screen.getByRole('button', { name: /optimize/i })
|
||
// The assertion that pins the change: named, but no visible label.
|
||
expect(btn).toBeInTheDocument()
|
||
expect(btn.textContent?.trim()).toBe('')
|
||
expect(btn.getAttribute('title')).toBeTruthy()
|
||
})
|
||
|
||
/* The click itself is already pinned by FE-PLANNER-DAYPLAN-038 above, which
|
||
finds the button the same way. */
|
||
})
|