daf53ad499
All checks were successful
Build & Publish / publish (push) Successful in 44s
New components: - SegmentedTabs — pill-style tabs with sliding animated indicator, trailing slot for custom content, MutationObserver for dynamic resizing - Custom DateTimePicker — replaces native datetime-local with calendar grid, hour/minute inputs, Now/Apply buttons, portal dropdown Time range selector redesign: - Uses SegmentedTabs with inline from/to DateTimePicker triggers - "now" shown as clickable placeholder when to-date is not explicitly set - Preset selection keeps to-date as "now" until user sets it - No more "Custom" button — last tab is the live date range Other improvements: - FilterPill gains activeColor prop for status-colored active states - TopBar and EventFeed status pills now use colored dots + activeColor - Inventory nav expanded to full component-level table of contents - COMPONENT_GUIDE.md updated with new components - DateRangePicker test updated for custom DateTimePicker Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import { describe, it, expect, vi } from 'vitest'
|
|
import { render, screen } from '@testing-library/react'
|
|
import userEvent from '@testing-library/user-event'
|
|
import { DateRangePicker } from './DateRangePicker'
|
|
|
|
describe('DateRangePicker', () => {
|
|
it('renders two datetime picker triggers', () => {
|
|
render(
|
|
<DateRangePicker
|
|
value={{ start: new Date('2026-03-19T10:00'), end: new Date('2026-03-19T11:00') }}
|
|
onChange={() => {}}
|
|
/>,
|
|
)
|
|
// DateTimePicker renders button triggers with formatted date text
|
|
const buttons = screen.getAllByRole('button')
|
|
// At least 2 buttons are the from/to date picker triggers (plus preset pills)
|
|
expect(buttons.length).toBeGreaterThanOrEqual(2)
|
|
})
|
|
|
|
it('renders preset buttons', () => {
|
|
render(
|
|
<DateRangePicker
|
|
value={{ start: new Date(), end: new Date() }}
|
|
onChange={() => {}}
|
|
/>,
|
|
)
|
|
expect(screen.getByText('Last 1h')).toBeInTheDocument()
|
|
expect(screen.getByText('Today')).toBeInTheDocument()
|
|
})
|
|
|
|
it('calls onChange when a preset is clicked', async () => {
|
|
const onChange = vi.fn()
|
|
const user = userEvent.setup()
|
|
render(
|
|
<DateRangePicker
|
|
value={{ start: new Date(), end: new Date() }}
|
|
onChange={onChange}
|
|
/>,
|
|
)
|
|
await user.click(screen.getByText('Last 1h'))
|
|
expect(onChange).toHaveBeenCalledWith(
|
|
expect.objectContaining({ start: expect.any(Date), end: expect.any(Date) }),
|
|
)
|
|
})
|
|
})
|