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>
51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import { fireEvent, render, screen } from '@testing-library/react'
|
|
import { useState } from 'react'
|
|
import { describe, expect, it } from 'vitest'
|
|
import { expectMinHitArea } from '../test/hitArea.ts'
|
|
import { Slider } from './Slider.tsx'
|
|
|
|
function Harness() {
|
|
const [value, setValue] = useState(0.7)
|
|
return (
|
|
<Slider
|
|
aria-label="Creativity (temperature)"
|
|
min={0}
|
|
max={1}
|
|
step={0.1}
|
|
value={value}
|
|
onChange={(event) => setValue(Number(event.target.value))}
|
|
/>
|
|
)
|
|
}
|
|
|
|
describe('Slider', () => {
|
|
it('is a native slider exposing its range and value', () => {
|
|
render(<Harness />)
|
|
const slider = screen.getByRole('slider', { name: 'Creativity (temperature)' })
|
|
expect(slider).toHaveAttribute('type', 'range')
|
|
expect(slider).toHaveAttribute('min', '0')
|
|
expect(slider).toHaveAttribute('max', '1')
|
|
expect(slider).toHaveValue('0.7')
|
|
})
|
|
|
|
it('updates the grape fill with the value', () => {
|
|
render(<Harness />)
|
|
const slider = screen.getByRole('slider')
|
|
expect(slider.style.getPropertyValue('--slider-fill')).toBe('70%')
|
|
fireEvent.change(slider, { target: { value: '0.2' } })
|
|
expect(slider).toHaveValue('0.2')
|
|
expect(slider.style.getPropertyValue('--slider-fill')).toBe('20%')
|
|
})
|
|
|
|
it('has a ≥ 44 px hit area', () => {
|
|
render(<Harness />)
|
|
expectMinHitArea(screen.getByRole('slider'))
|
|
})
|
|
|
|
it('fails fast on an empty range', () => {
|
|
expect(() => render(<Slider aria-label="Bad" min={1} max={1} value={1} readOnly />)).toThrow(
|
|
'max (1) must be greater than min (1)',
|
|
)
|
|
})
|
|
})
|