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.
31 lines
1.1 KiB
TypeScript
31 lines
1.1 KiB
TypeScript
import { act } from '@testing-library/react';
|
|
import { afterEach } from 'vitest';
|
|
import { _pinSizeClass, _resetSizeClass } from '../../src/hooks/sizeClass';
|
|
|
|
/**
|
|
* The touch shell's size class in tests (src/hooks/sizeClass.ts).
|
|
*
|
|
* jsdom is a browser, where the class is always compact, so a test of the
|
|
* large-screen layout pins the class it wants instead of faking the app and a
|
|
* window size. Importing this helper also hands the class back to the window
|
|
* after each test of the file.
|
|
*
|
|
* Not imported by tests/setup.ts on purpose: sizeClass.ts reads native/platform,
|
|
* and a module a setup file imports is cached before a test file's vi.mock of it
|
|
* can take effect.
|
|
*/
|
|
export type TestSizeClass = 'compact' | 'wide' | 'split';
|
|
|
|
/** Switches the size class; the hooks follow as they would a rotation or a fold. */
|
|
export function setSizeClass(next: TestSizeClass): void {
|
|
act(() => _pinSizeClass(next));
|
|
}
|
|
|
|
/** Back to what the window says (compact in jsdom). */
|
|
export function resetSizeClass(): void {
|
|
_pinSizeClass(null);
|
|
_resetSizeClass();
|
|
}
|
|
|
|
afterEach(() => resetSizeClass());
|