mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-11-13 07:40:59 +00:00
Maurice
4dfccaa2a4
From the large-screen review (code findings H1, M1, M2, M3, M4, M7, L1, L3, L4, L6, L7): - The size class is one value in JavaScript (hooks/sizeClass.ts) and the stylesheet follows it: MobileShell writes it to the shell as data-size, the wide:/split: variants and mobile.css key on that instead of media queries of their own. A window that only grows shorter at the same width while a field has focus is Android's soft keyboard, not a new window, so the rail, the form sheets and the panes no longer fold away (and take the focused field with them) while one types. - The large-screen layout is the app's only. In a browser the touch shell is the phone's below 768px and stays compact there, as before this branch. - Shortcuts are the app's only, so a browser keeps Ctrl+1 and Alt+Left. The command key is the platform's own (Cmd on Apple, Ctrl elsewhere), digits are matched by the key's place as well (AZERTY), and nothing runs while a sheet or another modal dialog is open: the page listens to nothing and the app is handed no key commands, so Cmd+[ can no longer drop an unsaved form. - Inside a trip Cmd+N belongs to the trip shell and creates what the tab on show creates, named after it. - Inside the touch shell the desktop navbar of the few PageShell routes is hidden and --nav-h is 0. - The rail comes before the page in the DOM, so a keyboard reaches it first. - The phone's deep day colour for a journey card without a photo stays the phone's; the desktop and shared timelines keep their faint wash. Its card is opaque, a suggestion included, so the map's names do not read through. - The trip widget's iPad mini layout keys on the iPad mini's width alone. - The trip dock gets the scroll-edge strip and the denser dock glass the global dock has. - Duplicate test id FE-MOB-PANES-016 renumbered.
46 lines
1.8 KiB
TypeScript
46 lines
1.8 KiB
TypeScript
import { renderHook } from '@testing-library/react';
|
|
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
|
import { _resetOverlayStack, closeTopOverlay, hasOpenOverlay, useHasOpenOverlay, useOverlay } from './overlayStack';
|
|
|
|
beforeEach(() => _resetOverlayStack());
|
|
|
|
describe('overlayStack', () => {
|
|
it('closes the newest open overlay first, and reports when none is left', () => {
|
|
const first = vi.fn();
|
|
const second = vi.fn();
|
|
const a = renderHook(({ open }) => useOverlay(open, first), { initialProps: { open: true } });
|
|
renderHook(({ open }) => useOverlay(open, second), { initialProps: { open: true } });
|
|
expect(hasOpenOverlay()).toBe(true);
|
|
|
|
expect(closeTopOverlay()).toBe(true);
|
|
expect(second).toHaveBeenCalledTimes(1);
|
|
expect(first).not.toHaveBeenCalled();
|
|
|
|
a.rerender({ open: false });
|
|
a.unmount();
|
|
});
|
|
|
|
it('forgets an overlay once it closes, and uses its latest close path', () => {
|
|
const old = vi.fn();
|
|
const fresh = vi.fn();
|
|
const h = renderHook(({ open, close }) => useOverlay(open, close), { initialProps: { open: true, close: old } });
|
|
h.rerender({ open: true, close: fresh });
|
|
closeTopOverlay();
|
|
expect(fresh).toHaveBeenCalledTimes(1);
|
|
expect(old).not.toHaveBeenCalled();
|
|
|
|
h.rerender({ open: false, close: fresh });
|
|
expect(hasOpenOverlay()).toBe(false);
|
|
expect(closeTopOverlay()).toBe(false);
|
|
});
|
|
|
|
it('tells a component when an overlay opens and when the last one closes', () => {
|
|
const watch = renderHook(() => useHasOpenOverlay());
|
|
expect(watch.result.current).toBe(false);
|
|
const sheet = renderHook(({ open }) => useOverlay(open, () => {}), { initialProps: { open: true } });
|
|
expect(watch.result.current).toBe(true);
|
|
sheet.rerender({ open: false });
|
|
expect(watch.result.current).toBe(false);
|
|
});
|
|
});
|