mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-21 22:46:32 +00:00
Maurice
8864edda18
Discussion #2084: a cost bought later (the seat upgrade for a flight) could not be tied to the booking it belongs to, and a booking held one expense. - The Costs block of the booking, transport and place forms lists every linked expense with edit, unlink (the expense stays in Costs) and delete, and offers the expenses that belong nowhere yet under Link existing expense. The phone sheets get the same block in their own design, and their Files row lists the attached files and links an existing one. - PUT /budget/:id, update_budget_item (MCP) and costs.update (plugin RPC) take reservation_id / place_id; create and update refuse an id from another trip on all three paths. - The booking's mirrored price is the sum of its expenses when they share one currency (none counts as the trip's), else the first one, with that currency, and follows every change to a linked expense. The booking form's price field leaves a booking with several expenses alone. - Deleting a booking deletes all of its linked expenses and broadcasts each one, also from the MCP delete tools. - Cards show the price with its currency. - Booking and transport dialogs: Booking Type and Travelers as dropdowns at the top, the URL beside Files (transports gain the URL field). The row is one shared component; linking and unlinking files go through the store. Help center pictures and texts for the booking, transport and expense guides are redone in all 27 languages, five Costs labels that were still English in 16 languages are translated, and the wiki follows.
331 lines
15 KiB
TypeScript
331 lines
15 KiB
TypeScript
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||
import MBookingsTab from '../../../../src/mobile/screens/trip/tabs/MBookingsTab'
|
||
import type { MTripShellApi, TripPlanner } from '../../../../src/mobile/screens/trip/MTripShell'
|
||
import { openFile } from '../../../../src/utils/fileDownload'
|
||
import { formatMoney } from '../../../../src/utils/formatters'
|
||
import type { Day, Reservation, TripFile } from '../../../../src/types'
|
||
import { usePluginStore } from '../../../../src/store/pluginStore'
|
||
import { buildSettings } from '../../../helpers/factories'
|
||
import { buildPlanner, buildShell } from '../../../helpers/mobileTrip'
|
||
import { fireEvent, render, screen, waitFor, within } from '../../../helpers/render'
|
||
import { seedStore } from '../../../helpers/store'
|
||
|
||
// FE-MOB-BKTAB-001 to FE-MOB-BKTAB-023
|
||
|
||
// A card shows a price the way formatMoney writes it; getByText collapses the
|
||
// no-break space Intl puts between amount and symbol, so the expectation does too.
|
||
const money = (amount: number, currency: string) => formatMoney(amount, currency, 'en').replace(/\s/g, ' ')
|
||
|
||
vi.mock('../../../../src/utils/fileDownload', async importOriginal => ({
|
||
...(await importOriginal<typeof import('../../../../src/utils/fileDownload')>()),
|
||
openFile: vi.fn(),
|
||
}))
|
||
|
||
vi.mock('../../../../src/components/Plugins/PluginFrame', () => ({
|
||
default: ({ pluginId, tripId, reservationId, surface }: { pluginId: string; tripId: string | null; reservationId?: string | null; surface?: string }) => (
|
||
<div data-testid="plugin-frame" data-plugin={pluginId} data-trip={String(tripId)} data-reservation={String(reservationId)} data-surface={surface} />
|
||
),
|
||
}))
|
||
|
||
const SEAT_MAP = { id: 'seat-map', name: 'Seat Map', type: 'widget', icon: null, slot: 'reservation-detail' } as const
|
||
|
||
const DAYS = [
|
||
{ id: 1, trip_id: 7, day_number: 1, date: '2026-05-01', title: null },
|
||
{ id: 2, trip_id: 7, day_number: 2, date: '2026-05-02', title: 'Kyoto' },
|
||
] as unknown as Day[]
|
||
|
||
const MEMBERS = [
|
||
{ id: 1, username: 'Me', avatar_url: null },
|
||
{ id: 2, username: 'Ada', avatar_url: null },
|
||
]
|
||
|
||
/** Stay: the day range comes from the accommodation link, not day_id. */
|
||
const HOTEL = {
|
||
id: 201, trip_id: 7, type: 'hotel', status: 'confirmed', title: 'Hotel Granvia',
|
||
accommodation_start_day_id: 1, accommodation_end_day_id: 2,
|
||
confirmation_number: 'HG-77', location: 'Kyoto Station', notes: 'Ask for a high floor',
|
||
metadata: JSON.stringify({ check_in_time: '15:00', check_in_end_time: '18:00', check_out_time: '11:00' }),
|
||
} as unknown as Reservation
|
||
|
||
const DINNER = {
|
||
id: 202, trip_id: 7, type: 'restaurant', status: 'confirmed', title: 'Sushi Saito',
|
||
day_id: 2, reservation_time: '2026-05-02T19:30', reservation_end_time: '2026-05-02T21:00',
|
||
travelers: [{ user_id: 2, username: 'Ada', avatar: null }],
|
||
} as unknown as Reservation
|
||
|
||
/** Starts and ends on the same day — the range suffix has to stay off. */
|
||
const SHOW = {
|
||
id: 203, trip_id: 7, type: 'event', status: 'pending', title: 'Kabuki show',
|
||
day_id: 2, end_day_id: 2, needs_review: 1,
|
||
metadata: JSON.stringify({ departure_airport: 'Gion', platform: 'Gate 3', seat: 'B12', price: 40, priceCurrency: 'JPY' }),
|
||
} as unknown as Reservation
|
||
|
||
/** Endpoints present, so the airport meta cells are suppressed and only the price stays. */
|
||
const TOUR = {
|
||
id: 204, trip_id: 7, type: 'tour', status: 'pending', title: 'Bamboo walk',
|
||
metadata: JSON.stringify({ departure_airport: 'Arashiyama', arrival_airport: 'Saga', price: 30, priceCurrency: 'JPY' }),
|
||
endpoints: [
|
||
{ role: 'from', sequence: 0, name: 'Arashiyama' },
|
||
{ role: 'to', sequence: 1, name: 'Saga' },
|
||
],
|
||
} as unknown as Reservation
|
||
|
||
const FLIGHT = {
|
||
id: 205, trip_id: 7, type: 'flight', status: 'confirmed', title: 'HND to ITM', day_id: 1,
|
||
} as unknown as Reservation
|
||
|
||
const FILES = [
|
||
{ id: 301, trip_id: 7, reservation_id: 202, original_name: 'voucher.pdf', url: '/uploads/f/301' },
|
||
{ id: 302, trip_id: 7, reservation_id: 202, original_name: 'stale.pdf', url: '/uploads/f/302', deleted_at: '2026-01-01' },
|
||
] as unknown as TripFile[]
|
||
|
||
const ALL = [HOTEL, DINNER, SHOW, TOUR, FLIGHT]
|
||
|
||
function planner(overrides: Partial<TripPlanner> = {}) {
|
||
return buildPlanner({
|
||
tripId: 7,
|
||
days: DAYS,
|
||
reservations: ALL,
|
||
files: FILES,
|
||
tripMembers: MEMBERS as unknown as TripPlanner['tripMembers'],
|
||
settings: buildSettings({ time_format: '24h' }),
|
||
...overrides,
|
||
})
|
||
}
|
||
|
||
function renderTab(p: TripPlanner = planner(), shell: MTripShellApi = buildShell()) {
|
||
const view = render(<MBookingsTab planner={p} shell={shell} />)
|
||
return { ...view, planner: p, shell }
|
||
}
|
||
|
||
function cardOf(title: string): HTMLElement {
|
||
let el = screen.getByText(title).parentElement
|
||
while (el && !el.className.includes('rounded-2xl')) el = el.parentElement
|
||
if (!el) throw new Error(`no card for ${title}`)
|
||
return el
|
||
}
|
||
|
||
describe('MBookingsTab', () => {
|
||
beforeEach(() => {
|
||
vi.mocked(openFile).mockClear()
|
||
seedStore(usePluginStore, { plugins: [] })
|
||
})
|
||
|
||
it('FE-MOB-BKTAB-001: keeps only the non-transport reservations, split by status', () => {
|
||
renderTab()
|
||
expect(screen.getByRole('button', { name: 'reservations.confirmed2' })).toBeInTheDocument()
|
||
expect(screen.getByRole('button', { name: 'reservations.pending2' })).toBeInTheDocument()
|
||
expect(screen.queryByText('HND to ITM')).not.toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-MOB-BKTAB-002: sorts chronologically and sinks the undated booking', () => {
|
||
renderTab()
|
||
const titles = screen.getAllByText(/Hotel Granvia|Sushi Saito|Kabuki show|Bamboo walk/).map(n => n.textContent)
|
||
expect(titles).toEqual(['Hotel Granvia', 'Sushi Saito', 'Kabuki show', 'Bamboo walk'])
|
||
})
|
||
|
||
it('FE-MOB-BKTAB-003: collapses a section', () => {
|
||
renderTab()
|
||
const header = screen.getByRole('button', { name: 'reservations.pending2' })
|
||
fireEvent.click(header)
|
||
expect(header).toHaveAttribute('aria-expanded', 'false')
|
||
expect(screen.queryByText('Kabuki show')).not.toBeInTheDocument()
|
||
expect(screen.getByText('Hotel Granvia')).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-MOB-BKTAB-004: shows the mascot empty state when only transports exist', () => {
|
||
renderTab(planner({ reservations: [FLIGHT] }))
|
||
expect(screen.getByText('mobileTrip.bookingsEmpty')).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-MOB-BKTAB-005: spans the stay over the accommodation day range', () => {
|
||
renderTab()
|
||
const card = cardOf('Hotel Granvia')
|
||
expect(within(card).getByText('dayplan.dayN:1 – Kyoto')).toBeInTheDocument()
|
||
expect(within(card).getByText('—')).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-MOB-BKTAB-006: renders check-in window and check-out for a stay', () => {
|
||
renderTab()
|
||
const card = cardOf('Hotel Granvia')
|
||
expect(within(card).getByText('reservations.meta.checkIn')).toBeInTheDocument()
|
||
expect(within(card).getByText('15:00 – 18:00')).toBeInTheDocument()
|
||
expect(within(card).getByText('reservations.meta.checkOut')).toBeInTheDocument()
|
||
expect(within(card).getByText('11:00')).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-MOB-BKTAB-007: renders location, notes and the confirmation code of a stay', () => {
|
||
renderTab()
|
||
const card = cardOf('Hotel Granvia')
|
||
expect(within(card).getByText('Kyoto Station')).toBeInTheDocument()
|
||
expect(within(card).getByText('Ask for a high floor')).toBeInTheDocument()
|
||
expect(within(card).getByText('HG-77')).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-MOB-BKTAB-008: renders the booking time range, travelers and files', () => {
|
||
renderTab()
|
||
const card = cardOf('Sushi Saito')
|
||
expect(within(card).getByText('Kyoto')).toBeInTheDocument()
|
||
expect(within(card).getByText('19:30 – 21:00')).toBeInTheDocument()
|
||
expect(within(card).getByText('reservations.travelers.label')).toBeInTheDocument()
|
||
expect(within(card).getByText('Ada')).toBeInTheDocument()
|
||
expect(within(card).getByText('voucher.pdf')).toBeInTheDocument()
|
||
expect(within(card).queryByText('stale.pdf')).not.toBeInTheDocument()
|
||
fireEvent.click(within(card).getByText('voucher.pdf'))
|
||
expect(openFile).toHaveBeenCalledWith('/uploads/f/301', 'voucher.pdf')
|
||
})
|
||
|
||
it('FE-MOB-BKTAB-009: drops the day-range suffix when start and end day are the same', () => {
|
||
renderTab()
|
||
const card = cardOf('Kabuki show')
|
||
expect(within(card).getByText('Kyoto')).toBeInTheDocument()
|
||
expect(within(card).getByText('reservations.needsReview')).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-MOB-BKTAB-010: caps the meta row at three cells', () => {
|
||
renderTab()
|
||
const card = cardOf('Kabuki show')
|
||
expect(within(card).getByText('Gion')).toBeInTheDocument()
|
||
expect(within(card).getByText('Gate 3')).toBeInTheDocument()
|
||
expect(within(card).getByText('B12')).toBeInTheDocument()
|
||
expect(within(card).queryByText('reservations.price')).not.toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-MOB-BKTAB-011: suppresses the airport cells when endpoints exist and keeps the price', () => {
|
||
renderTab()
|
||
const card = cardOf('Bamboo walk')
|
||
expect(within(card).queryByText('reservations.meta.from')).not.toBeInTheDocument()
|
||
expect(within(card).getByText('reservations.price')).toBeInTheDocument()
|
||
// Formatted as money in the booking's own currency.
|
||
expect(within(card).getByText(money(30, 'JPY'))).toBeInTheDocument()
|
||
expect(within(card).getAllByText('—')).toHaveLength(2)
|
||
})
|
||
|
||
it('FE-MOB-BKTAB-012: opens the reservation editor from the row', () => {
|
||
const p = planner()
|
||
renderTab(p)
|
||
fireEvent.click(screen.getByText('Sushi Saito'))
|
||
expect(p.can).toHaveBeenCalledWith('reservation_edit', p.trip)
|
||
expect(p.setEditingReservation).toHaveBeenCalledWith(expect.objectContaining({ id: 202 }))
|
||
expect(p.setShowReservationModal).toHaveBeenCalledWith(true)
|
||
})
|
||
|
||
it('FE-MOB-BKTAB-013: opens the same editor from the pencil', () => {
|
||
const p = planner()
|
||
renderTab(p)
|
||
fireEvent.click(within(cardOf('Hotel Granvia')).getByRole('button', { name: 'common.edit' }))
|
||
expect(p.setEditingReservation).toHaveBeenCalledWith(expect.objectContaining({ id: 201 }))
|
||
})
|
||
|
||
it('FE-MOB-BKTAB-014: a read-only member gets no editor and no actions', () => {
|
||
const p = planner({ can: vi.fn(() => false) as unknown as TripPlanner['can'] })
|
||
renderTab(p)
|
||
fireEvent.click(screen.getByText('Sushi Saito'))
|
||
expect(p.setShowReservationModal).not.toHaveBeenCalled()
|
||
expect(screen.queryByRole('button', { name: 'common.edit' })).not.toBeInTheDocument()
|
||
expect(screen.queryByRole('button', { name: 'common.delete' })).not.toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-MOB-BKTAB-015: deletes after confirming', async () => {
|
||
const p = planner()
|
||
renderTab(p)
|
||
fireEvent.click(within(cardOf('Sushi Saito')).getByRole('button', { name: 'common.delete' }))
|
||
const dialog = screen.getByRole('dialog', { name: 'reservations.confirm.deleteTitle' })
|
||
expect(within(dialog).getByText('reservations.confirm.deleteBody:Sushi Saito')).toBeInTheDocument()
|
||
fireEvent.click(within(dialog).getByText('common.delete'))
|
||
await waitFor(() => expect(p.handleDeleteReservation).toHaveBeenCalledWith(202))
|
||
expect(p.toast.error).not.toHaveBeenCalled()
|
||
})
|
||
|
||
it('FE-MOB-BKTAB-016: toasts when the delete rejects', async () => {
|
||
const p = planner({
|
||
handleDeleteReservation: vi.fn(() => Promise.reject(new Error('boom'))) as unknown as TripPlanner['handleDeleteReservation'],
|
||
})
|
||
renderTab(p)
|
||
fireEvent.click(within(cardOf('Sushi Saito')).getByRole('button', { name: 'common.delete' }))
|
||
fireEvent.click(within(screen.getByRole('dialog')).getByText('common.delete'))
|
||
await waitFor(() => expect(p.toast.error).toHaveBeenCalledWith('reservations.toast.deleteError'))
|
||
})
|
||
|
||
it('FE-MOB-BKTAB-017: compact mode drops the card bodies', () => {
|
||
renderTab(planner(), buildShell({ bookingsCompact: true }))
|
||
expect(screen.getByText('Hotel Granvia')).toBeInTheDocument()
|
||
expect(screen.queryByText('HG-77')).not.toBeInTheDocument()
|
||
expect(screen.queryByText('Kyoto Station')).not.toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-MOB-BKTAB-018: blurs the confirmation code until its button is used', () => {
|
||
renderTab(planner({ settings: buildSettings({ time_format: '24h', blur_booking_codes: true }) }))
|
||
// A button, not a bare div — the reveal has to be reachable by keyboard.
|
||
const code = within(cardOf('Hotel Granvia')).getByRole('button', { name: 'HG-77' })
|
||
expect(code).toHaveClass('blur-[4px]')
|
||
fireEvent.click(code)
|
||
expect(code).not.toHaveClass('blur-[4px]')
|
||
expect(code).toHaveAttribute('aria-pressed', 'true')
|
||
})
|
||
|
||
it('FE-MOB-BKTAB-019: filters the list by assigned traveler', () => {
|
||
renderTab()
|
||
const ada = screen.getByTitle('Ada')
|
||
fireEvent.click(ada)
|
||
expect(screen.getByText('Sushi Saito')).toBeInTheDocument()
|
||
expect(screen.queryByText('Hotel Granvia')).not.toBeInTheDocument()
|
||
fireEvent.click(ada)
|
||
expect(screen.getByText('Hotel Granvia')).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-MOB-BKTAB-020: cancelling the confirm keeps the booking', () => {
|
||
const p = planner()
|
||
renderTab(p)
|
||
fireEvent.click(within(cardOf('Sushi Saito')).getByRole('button', { name: 'common.delete' }))
|
||
fireEvent.click(within(screen.getByRole('dialog')).getByText('common.cancel'))
|
||
expect(p.handleDeleteReservation).not.toHaveBeenCalled()
|
||
expect(screen.getByText('Sushi Saito')).toBeInTheDocument()
|
||
})
|
||
|
||
it('FE-MOB-BKTAB-021: falls back for an unknown type and formats a dateless booking', () => {
|
||
const SPA = {
|
||
id: 206, trip_id: 7, type: 'spa', status: 'confirmed', title: 'Onsen visit',
|
||
reservation_time: '2026-06-15T09:00',
|
||
metadata: JSON.stringify({ arrival_airport: 'Hakone', check_in_time: '09:00' }),
|
||
} as unknown as Reservation
|
||
renderTab(planner({
|
||
reservations: [SPA],
|
||
files: undefined as unknown as TripPlanner['files'],
|
||
settings: { ...buildSettings(), time_format: '' },
|
||
}))
|
||
const card = cardOf('Onsen visit')
|
||
expect(within(card).getByText('reservations.type.spa')).toBeInTheDocument()
|
||
expect(within(card).getByText('Jun 15')).toBeInTheDocument()
|
||
expect(within(card).getByText('reservations.meta.to')).toBeInTheDocument()
|
||
expect(within(card).getByText('Hakone')).toBeInTheDocument()
|
||
// the check-in cell and the time field both read 09:00
|
||
expect(within(card).getAllByText('09:00')).toHaveLength(2)
|
||
})
|
||
|
||
it('FE-MOB-BKTAB-022: mounts a reservation-detail plugin on every booking card, scoped to that booking (#2440)', () => {
|
||
seedStore(usePluginStore, {
|
||
plugins: [SEAT_MAP, { id: 'dash-widget', name: 'Dash', type: 'widget', icon: null, slot: 'sidebar' }],
|
||
})
|
||
const { planner: p } = renderTab()
|
||
const frame = within(cardOf('Hotel Granvia')).getByTestId('plugin-frame')
|
||
expect(frame).toHaveAttribute('data-plugin', 'seat-map')
|
||
expect(frame).toHaveAttribute('data-trip', '7')
|
||
expect(frame).toHaveAttribute('data-reservation', '201')
|
||
expect(frame).toHaveAttribute('data-surface', 'detail-slot')
|
||
// the slot sits outside the card's body button: a tap in it opens no editor
|
||
fireEvent.click(frame)
|
||
expect(p.setShowReservationModal).not.toHaveBeenCalled()
|
||
expect(within(cardOf('Bamboo walk')).getByTestId('plugin-frame')).toHaveAttribute('data-reservation', '204')
|
||
expect(screen.getAllByTestId('plugin-frame')).toHaveLength(4)
|
||
expect(document.querySelector('[data-plugin="dash-widget"]')).toBeNull()
|
||
})
|
||
|
||
it('FE-MOB-BKTAB-023: compact mode drops the plugin frames with the rest of the body', () => {
|
||
seedStore(usePluginStore, { plugins: [SEAT_MAP] })
|
||
renderTab(planner(), buildShell({ bookingsCompact: true }))
|
||
expect(screen.getByText('Hotel Granvia')).toBeInTheDocument()
|
||
expect(screen.queryByTestId('plugin-frame')).not.toBeInTheDocument()
|
||
})
|
||
})
|