dev_agentandClaude Opus 5.5
d9a26b81ec
Button, IconButton, Tag, Chip, TextInput, Segmented, Toggle, Checkbox, Slider, Card and ListRow, styled with CSS Modules over the design tokens. Every interactive primitive keeps a hit area of at least 44 px; visually smaller controls draw their face inside a larger hit box. Vitest now injects CSS Modules into jsdom (css: true) so tests assert the sizes the stylesheets declare, alongside roles, aria states and keyboard behaviour (Segmented arrow keys, Toggle Space/Enter, Chip "Remove X"). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
35 lines
1.4 KiB
TypeScript
35 lines
1.4 KiB
TypeScript
import { fireEvent, render, screen } from '@testing-library/react'
|
|
import { createRef } from 'react'
|
|
import { describe, expect, it, vi } from 'vitest'
|
|
import { hitArea, expectMinHitArea } from '../test/hitArea.ts'
|
|
import { TextInput } from './TextInput.tsx'
|
|
|
|
describe('TextInput', () => {
|
|
it('is a textbox named by its label', () => {
|
|
const onChange = vi.fn()
|
|
render(<TextInput label="Dinner name" placeholder="e.g. Chicken enchiladas" onChange={onChange} />)
|
|
const input = screen.getByRole('textbox', { name: 'Dinner name' })
|
|
fireEvent.change(input, { target: { value: 'Chili' } })
|
|
expect(onChange).toHaveBeenCalledOnce()
|
|
expect(input).toHaveValue('Chili')
|
|
})
|
|
|
|
it('keeps the accessible name when the label is visually hidden', () => {
|
|
render(<TextInput label="Add a regular" labelHidden />)
|
|
expect(screen.getByRole('textbox', { name: 'Add a regular' })).toBeInTheDocument()
|
|
})
|
|
|
|
it('is a 48 px pill with a ≥ 44 px hit area', () => {
|
|
render(<TextInput label="Dinner name" />)
|
|
const input = screen.getByRole('textbox', { name: 'Dinner name' })
|
|
expectMinHitArea(input)
|
|
expect(hitArea(input).height).toBe(48)
|
|
})
|
|
|
|
it('forwards the ref', () => {
|
|
const ref = createRef<HTMLInputElement>()
|
|
render(<TextInput label="Dinner name" ref={ref} />)
|
|
expect(ref.current).toBe(screen.getByRole('textbox', { name: 'Dinner name' }))
|
|
})
|
|
})
|