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>
27 lines
1.0 KiB
TypeScript
27 lines
1.0 KiB
TypeScript
import { fireEvent, render, screen } from '@testing-library/react'
|
|
import { describe, expect, it, vi } from 'vitest'
|
|
import { expectMinHitArea } from '../test/hitArea.ts'
|
|
import { Chip } from './Chip.tsx'
|
|
|
|
describe('Chip', () => {
|
|
it('has no remove button unless onRemove is given', () => {
|
|
render(<Chip label="Beef tacos" />)
|
|
expect(screen.getByText('Beef tacos')).toBeInTheDocument()
|
|
expect(screen.queryByRole('button')).not.toBeInTheDocument()
|
|
})
|
|
|
|
it('exposes an accessible "Remove {label}" button that calls onRemove', () => {
|
|
const onRemove = vi.fn()
|
|
render(<Chip label="Beef tacos" onRemove={onRemove} />)
|
|
const remove = screen.getByRole('button', { name: 'Remove Beef tacos' })
|
|
expect(remove).toHaveAttribute('type', 'button')
|
|
fireEvent.click(remove)
|
|
expect(onRemove).toHaveBeenCalledOnce()
|
|
})
|
|
|
|
it('gives the remove button a ≥ 44 px hit area', () => {
|
|
render(<Chip label="Pizza night" onRemove={() => {}} />)
|
|
expectMinHitArea(screen.getByRole('button', { name: 'Remove Pizza night' }))
|
|
})
|
|
})
|