Files
kvitt/web/src/components/Segmented.test.tsx
T
jacobh2 2ae65a5a9f
Build Kvitt images / build (push) Failing after 1h14m5s
W0 web foundation: Vite + React SPA under /app/, sync-pull ledger, auth, tokens, shared components
web/ is the browser client's scaffold: Vite 8, React 19, TypeScript 5.9 strict, React Router 7 (basename /app, every
fixed route with a lazy placeholder page), TanStack Query 5 (refetch on focus and every 60 s), openapi-typescript
types generated from contracts/openapi.yaml with openapi-fetch. Reads go through GET /sync (no REST reads exist for
the ledger, SPEC §7): useLedger() pulls from cursor 0 and then incrementally, restarting on a new epoch or
cursor_ahead. Login pairs the browser as "Web · <browser>" with an invite code (E-3); every call sends the SPEC
§14.3.1 headers, a 401 signs out. kvitt-domain's split, balances, allocation and settlement rules are ported to
web/src/lib and pass every case of contracts/test-vectors. Design tokens from design-spec §2 in tokens.css
(light-dark()), Material Symbols Rounded (Apache-2.0) as generated inline SVG, sv/en catalogs generated from
docs/ux/strings.csv plus web-strings.csv. Gate: cd web && npm run check.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TQd3pEP9UeN2uifbHknQ7B
2026-10-21 21:03:25 +02:00

36 lines
1.2 KiB
TypeScript

import { screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { useState } from 'react';
import { describe, expect, it } from 'vitest';
import { renderWithProviders } from '../test/render';
import { Segmented } from './Segmented';
function Harness() {
const [value, setValue] = useState<'month' | 'week'>('month');
return (
<Segmented
label="Granularitet"
value={value}
onChange={setValue}
options={[
{ value: 'month', label: 'Månad' },
{ value: 'week', label: 'Vecka' },
]}
/>
);
}
describe('Segmented', () => {
it('is a radio group that changes by click and arrow keys', async () => {
renderWithProviders(<Harness />);
const user = userEvent.setup();
expect(screen.getByRole('radiogroup', { name: 'Granularitet' })).toBeInTheDocument();
expect(screen.getByRole('radio', { name: 'Månad' })).toBeChecked();
await user.click(screen.getByRole('radio', { name: 'Vecka' }));
expect(screen.getByRole('radio', { name: 'Vecka' })).toBeChecked();
await user.keyboard('{ArrowRight}');
expect(screen.getByRole('radio', { name: 'Månad' })).toBeChecked();
expect(screen.getByRole('radio', { name: 'Månad' })).toHaveFocus();
});
});