6dcb720a0f
Phase 1 of the mobile redesign: add the reusable primitives every later phase plugs into, and switch the layout to a 4-tab bottom nav + compact AppBar on phone viewports while leaving the desktop header untouched above 640px. - New primitives: BottomNav, Sheet, AppBar, SegmentedControl, all with vitest unit tests. - Layout swaps the desktop header for AppBar + BottomNav under the existing 640px breakpoint. Login / register / reader routes opt out of the mobile chrome. - Library tab currently points at /bookmarks; the curated /library wrapper lands in Phase 5. - Independent ResizeObservers publish --app-header-h, --mobile-app-bar-h, --app-bottom-nav-h, with a zero-height skip so hidden bars don't clobber the visible one's value. - viewport-fit=cover + env(safe-area-inset-*) tokens for notched devices and the iOS home indicator. - Playwright spec covers visibility at 390px / 1280px viewports and tab navigation. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
54 lines
2.1 KiB
TypeScript
54 lines
2.1 KiB
TypeScript
import { describe, it, expect, vi, afterEach } from 'vitest';
|
|
import { render, screen, cleanup } from '@testing-library/svelte';
|
|
import SegmentedControl from './SegmentedControl.svelte';
|
|
|
|
afterEach(() => cleanup());
|
|
|
|
const opts = [
|
|
{ label: 'Bookmarks', value: 'bookmarks' as const },
|
|
{ label: 'Collections', value: 'collections' as const },
|
|
{ label: 'History', value: 'history' as const }
|
|
];
|
|
|
|
describe('SegmentedControl', () => {
|
|
it('marks the active option with aria-checked=true and a single .active class', () => {
|
|
render(SegmentedControl, {
|
|
props: {
|
|
options: opts,
|
|
value: 'collections',
|
|
onchange: () => {},
|
|
ariaLabel: 'Library tab'
|
|
}
|
|
});
|
|
const active = screen.getByRole('radio', { name: 'Collections' });
|
|
expect(active.getAttribute('aria-checked')).toBe('true');
|
|
const inactive = screen.getByRole('radio', { name: 'Bookmarks' });
|
|
expect(inactive.getAttribute('aria-checked')).toBe('false');
|
|
});
|
|
|
|
it('fires onchange with the new value when an inactive option is clicked', () => {
|
|
const onchange = vi.fn();
|
|
render(SegmentedControl, {
|
|
props: { options: opts, value: 'bookmarks', onchange, ariaLabel: 'Library tab' }
|
|
});
|
|
screen.getByRole('radio', { name: 'History' }).click();
|
|
expect(onchange).toHaveBeenCalledWith('history');
|
|
});
|
|
|
|
it('does not fire onchange when the currently active option is clicked again', () => {
|
|
const onchange = vi.fn();
|
|
render(SegmentedControl, {
|
|
props: { options: opts, value: 'bookmarks', onchange, ariaLabel: 'Library tab' }
|
|
});
|
|
screen.getByRole('radio', { name: 'Bookmarks' }).click();
|
|
expect(onchange).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('exposes the group with the provided aria-label', () => {
|
|
render(SegmentedControl, {
|
|
props: { options: opts, value: 'bookmarks', onchange: () => {}, ariaLabel: 'Library tab' }
|
|
});
|
|
expect(screen.getByRole('radiogroup', { name: 'Library tab' })).toBeTruthy();
|
|
});
|
|
});
|