mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-22 15:06:32 +00:00
Maurice
0dd07befa7
The Plan tab was the last trip tab still in the old design. It now reads like Bookings, Costs, Lists, Files and Collab, without losing a function: - Day plan: each day is a card with a head band (day tile with weather, stay and rental pills, a "+" menu for place, stay, transport, transit and note), rows with "..." menus, white badges and a white route bar. - Places column: add, search and filters in three rows, a show dropdown, category and rating filters, and a selection bar at the foot. - Place inspector, day details and the stay editor on the shared dialog frame; the place form in the editor look with the name in the head band. - Clicking a booking or transport anywhere on the plan opens the booking detail popup first; Edit leads to the editor. The popup is one host shared with the Bookings and Transports tabs. - Files and Collab dialogs, notes, polls, links and chat moved to the same frame; shared DialogShell and dialogParts hold the building blocks. - The map hover card shows the place photo and follows the theme. Every new and reworded string is translated into all locales, and a few older English leftovers (help center, cost split, import hints) with them. Phone screens keep their own look.
34 lines
1.3 KiB
TypeScript
34 lines
1.3 KiB
TypeScript
// FE-W4GB-001 to FE-W4GB-004
|
|
import { describe, it, expect } from 'vitest'
|
|
import { fireEvent } from '@testing-library/react'
|
|
import { render, screen } from '../../../tests/helpers/render'
|
|
import GuestBadge from './GuestBadge'
|
|
|
|
describe('GuestBadge', () => {
|
|
it('FE-W4GB-001: renders the translated guest label with the accountless hint as title', () => {
|
|
render(<GuestBadge />)
|
|
const pill = screen.getByTitle(/without an account/i)
|
|
|
|
expect(pill).toHaveTextContent('Guest')
|
|
expect(pill.querySelector('svg')).not.toBeNull()
|
|
})
|
|
|
|
it('FE-W4GB-002: sizes the label at 10px by default', () => {
|
|
render(<GuestBadge />)
|
|
expect(screen.getByTitle(/without an account/i)).toHaveStyle({ fontSize: 'calc(10px * var(--fs-scale-caption, 1))' })
|
|
})
|
|
|
|
it('FE-W4GB-003: shrinks to 9px in the xs variant', () => {
|
|
render(<GuestBadge size="xs" />)
|
|
expect(screen.getByTitle(/without an account/i)).toHaveStyle({ fontSize: 'calc(9px * var(--fs-scale-caption, 1))' })
|
|
})
|
|
|
|
it('FE-W4GB-004: with customTooltip the hint moves from the native title into the app tooltip', async () => {
|
|
render(<GuestBadge customTooltip />)
|
|
expect(screen.queryByTitle(/without an account/i)).toBeNull()
|
|
|
|
fireEvent.mouseEnter(screen.getByText('Guest'))
|
|
expect(await screen.findByRole('tooltip')).toHaveTextContent(/without an account/i)
|
|
})
|
|
})
|