mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-18 21:16:47 +00:00
Maurice
6fe89588c2
* Tell a plugin where it is mounted A plugin sits in one of six host surfaces and cannot see which: a trip tab and the plugin page fill their container and scroll themselves, a dashboard widget and the settings frame report their height, a detail slot is a narrow column in someone else's panel. The contracts differ, and on a filling surface the height report is discarded, so a plugin cannot even discover the difference by trying. trek:context now carries viewport: the surface by name, phone or desktop, the fill flag, and the insets the host already keeps clear. The insets describe space that is held free, not padding to add — the mobile trip tab is the only surface with chrome floating over it, and the numbers come from the same variables the native tabs use so the two cannot drift. * Seat the plugin tab like a native one The mobile plugin tab kept clearance at the bottom and none at the top, so the plugin's first row sat under the status bar and behind the floating back button. The bottom value was a copied 84 that ignored the safe area on the devices that have one, and the padding sat on the container rather than in the scroller. Both clearances now come from the variables TabScroller uses, so the tab cannot drift away from the native ones. The frame also states its surface, and pins color-scheme for the reason both settings mounts already pin it: Chromium paints a white canvas behind a transparent frame otherwise. The tab also had no name anywhere on screen. It is not in the dock, so nothing lit up there either, and the header had a branch for every other tab. It gets the same treatment, built from the tab entry the planner already assembles. * Keep the widget card intact on the phone The card is built from the dashboard's glass vocabulary, which is scoped to .trek-dash. The phone dashboard is a different route and mounts these widgets outside that subtree, so background, border, shadow and blur all resolved empty and the widget stood on the gradient as a bare title over an iframe. Each value now falls back to the mobile token the surrounding cards are made of. * Give the design kit a mobile layer The kit was written for the desktop and stayed there: a filled card with a drop shadow where the mobile design is translucent and border-led, inputs at 13px which make iOS Safari zoom on focus and never zoom back, feedback on :hover which never fires on a touchscreen, and one media query in the whole stylesheet. It reads the new viewport field now and sets data-form-factor, data-surface and data-fill on the document, plus the insets as variables. Everything mobile hangs off data-form-factor="phone", so nothing changes on the desktop: the card loses its shadow and takes the mobile surface tokens, targets grow to 44px, inputs to 16px, and pressing something scales it instead of waiting for a hover that will not come. A filling surface anchors the body and scrolls an inner element, because its height report is discarded by the host. Plus the pieces a v4 screen is actually made of, so an author does not have to reverse-engineer them: eyebrow, count pill, section header, status dot, round icon button, field, segmented control. Each falls back to a global token where the mobile family is absent, so they work on both. * Document what a plugin needs on a phone The guide had nothing on the subject: no mention of the second token family, of who scrolls, of what sizes to expect, or that the kit brings almost nothing responsive. It also promised more than it delivered, claiming the palette was complete and that applying it matches the host "exactly" — fonts are named, not shipped, so that was never true. The new section covers the six surfaces and which of them fill versus report a height, what insets mean (space already held free, not padding to add), the mobile palette with the branch-on-absence pattern, and the four rules that decide whether it feels native. It also says plainly that the dev preview cannot show a phone width yet.
108 lines
4.9 KiB
TypeScript
108 lines
4.9 KiB
TypeScript
import { describe, expect, it, vi } from 'vitest'
|
|
import MTripTabPanel from '../../../../src/mobile/screens/trip/tabs/MTripTabPanel'
|
|
import type { MTabScreenProps } from '../../../../src/mobile/screens/trip/tabs/tabModel'
|
|
import { buildPlanner, buildShell } from '../../../helpers/mobileTrip'
|
|
import { render, screen } from '../../../helpers/render'
|
|
|
|
// FE-MOB-TABPANEL-001 to FE-MOB-TABPANEL-010
|
|
|
|
/** Each tab is stubbed so the routing itself is what gets asserted. */
|
|
function stub(name: string) {
|
|
return function Stub({ planner, shell }: MTabScreenProps) {
|
|
return <div data-testid={name} data-trip={String(planner.tripId)} data-tab={shell.trTab} />
|
|
}
|
|
}
|
|
|
|
vi.mock('../../../../src/mobile/screens/trip/tabs/MTransportsTab', () => ({ default: stub('transports') }))
|
|
vi.mock('../../../../src/mobile/screens/trip/tabs/MBookingsTab', () => ({ default: stub('bookings') }))
|
|
vi.mock('../../../../src/mobile/screens/trip/tabs/MCostsTab', () => ({ default: stub('costs') }))
|
|
vi.mock('../../../../src/mobile/screens/trip/tabs/MFilesTab', () => ({ default: stub('files') }))
|
|
vi.mock('../../../../src/mobile/screens/trip/tabs/MCollabTab', () => ({ default: stub('collab') }))
|
|
vi.mock('../../../../src/mobile/screens/trip/tabs/MListsTab', () => ({ default: stub('lists') }))
|
|
vi.mock('../../../../src/components/Plugins/PluginFrame', () => ({
|
|
default: ({ pluginId, tripId, fill, surface }: { pluginId: string; tripId: string | null; fill?: boolean; surface?: string }) => (
|
|
<div data-testid="plugin-frame" data-plugin={pluginId} data-trip={String(tripId)} data-fill={String(!!fill)} data-surface={surface} />
|
|
),
|
|
}))
|
|
|
|
function renderTab(tab: string, plannerOverrides = {}) {
|
|
const planner = buildPlanner(plannerOverrides)
|
|
const shell = buildShell({ trTab: tab })
|
|
return { ...render(<MTripTabPanel planner={planner} shell={shell} tab={tab} />), planner, shell }
|
|
}
|
|
|
|
describe('MTripTabPanel', () => {
|
|
it('FE-MOB-TABPANEL-001: routes transports and hands both props down', () => {
|
|
renderTab('transports')
|
|
const panel = screen.getByTestId('transports')
|
|
expect(panel).toHaveAttribute('data-trip', '1')
|
|
expect(panel).toHaveAttribute('data-tab', 'transports')
|
|
expect(screen.queryByTestId('bookings')).not.toBeInTheDocument()
|
|
})
|
|
|
|
it('FE-MOB-TABPANEL-002: routes buchungen to the bookings panel', () => {
|
|
renderTab('buchungen')
|
|
expect(screen.getByTestId('bookings')).toBeInTheDocument()
|
|
})
|
|
|
|
it('FE-MOB-TABPANEL-003: routes finanzplan to the costs panel', () => {
|
|
renderTab('finanzplan')
|
|
expect(screen.getByTestId('costs')).toBeInTheDocument()
|
|
})
|
|
|
|
it('FE-MOB-TABPANEL-004: routes dateien to the files panel', () => {
|
|
renderTab('dateien')
|
|
expect(screen.getByTestId('files')).toBeInTheDocument()
|
|
})
|
|
|
|
it('FE-MOB-TABPANEL-005: routes collab to the collab panel', () => {
|
|
renderTab('collab')
|
|
expect(screen.getByTestId('collab')).toBeInTheDocument()
|
|
})
|
|
|
|
it('FE-MOB-TABPANEL-006: routes listen to the lists panel', () => {
|
|
renderTab('listen')
|
|
expect(screen.getByTestId('lists')).toBeInTheDocument()
|
|
})
|
|
|
|
it('FE-MOB-TABPANEL-007: mounts the sandboxed frame for a plugin tab', () => {
|
|
renderTab('plugin:trip-todos')
|
|
const frame = screen.getByTestId('plugin-frame')
|
|
expect(frame).toHaveAttribute('data-plugin', 'trip-todos')
|
|
expect(frame).toHaveAttribute('data-trip', '1')
|
|
expect(frame).toHaveAttribute('data-fill', 'true')
|
|
// Both clearances come from the variables TabScroller uses, so the frame
|
|
// cannot drift away from the native tabs. The top one was missing entirely,
|
|
// which put the plugin's first row under the floating back button; the bottom
|
|
// one was a hard-coded 84 that ignored the safe area.
|
|
const wrapper = frame.parentElement as HTMLElement
|
|
expect(wrapper.className).toContain('--m-safe-top')
|
|
expect(wrapper.className).toContain('--bottom-nav-h')
|
|
})
|
|
|
|
it('FE-MOB-TABPANEL-007b: tells the plugin which surface it is mounted in', () => {
|
|
// A trip tab fills and scrolls itself; a widget reports its height. The plugin
|
|
// cannot see the difference from inside the frame.
|
|
renderTab('plugin:trip-todos')
|
|
expect(screen.getByTestId('plugin-frame')).toHaveAttribute('data-surface', 'trip-tab')
|
|
})
|
|
|
|
it('FE-MOB-TABPANEL-008: passes a null tripId to the plugin frame before the trip is known', () => {
|
|
renderTab('plugin:koffi', { tripId: null })
|
|
expect(screen.getByTestId('plugin-frame')).toHaveAttribute('data-trip', 'null')
|
|
})
|
|
|
|
it('FE-MOB-TABPANEL-009: keeps a plugin id that itself contains a colon intact', () => {
|
|
renderTab('plugin:acme:maps')
|
|
expect(screen.getByTestId('plugin-frame')).toHaveAttribute('data-plugin', 'acme:maps')
|
|
})
|
|
|
|
it('FE-MOB-TABPANEL-010: an unbuilt tab falls back to the empty scroll body', () => {
|
|
const { container } = renderTab('plan')
|
|
expect(container.querySelector('[data-testid]')).toBeNull()
|
|
const body = container.querySelector('.overflow-y-auto') as HTMLElement
|
|
expect(body).not.toBeNull()
|
|
expect(body).toBeEmptyDOMElement()
|
|
})
|
|
})
|