@open-mercato/ui 0.6.1-develop.3246.1.dbef9d7392 → 0.6.1-develop.3260.1.dc719cac84

package/src/primitives/__tests__/counter-input.test.tsx

@@ -0,0 +1,165 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { CounterInput } from '../counter-input'
+
+describe('CounterInput primitive', () => {
+  it('renders the value passed via the value prop', () => {
+    render(<CounterInput value={5} onChange={() => {}} />)
+    const input = screen.getByRole('spinbutton') as HTMLInputElement
+    expect(input.value).toBe('5')
+  })
+
+  it('renders an empty string when value is null', () => {
+    render(<CounterInput value={null} onChange={() => {}} />)
+    const input = screen.getByRole('spinbutton') as HTMLInputElement
+    expect(input.value).toBe('')
+  })
+
+  it('increments by step when + is clicked', () => {
+    const onChange = jest.fn()
+    render(<CounterInput value={3} onChange={onChange} step={2} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Increase' }))
+    expect(onChange).toHaveBeenCalledWith(5)
+  })
+
+  it('decrements by step when - is clicked', () => {
+    const onChange = jest.fn()
+    render(<CounterInput value={10} onChange={onChange} step={3} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Decrease' }))
+    expect(onChange).toHaveBeenCalledWith(7)
+  })
+
+  it('defaults step to 1', () => {
+    const onChange = jest.fn()
+    render(<CounterInput value={0} onChange={onChange} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Increase' }))
+    expect(onChange).toHaveBeenCalledWith(1)
+  })
+
+  it('clamps to max when incrementing past max', () => {
+    const onChange = jest.fn()
+    render(<CounterInput value={9} onChange={onChange} max={10} step={5} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Increase' }))
+    expect(onChange).toHaveBeenCalledWith(10)
+  })
+
+  it('clamps to min when decrementing below min', () => {
+    const onChange = jest.fn()
+    render(<CounterInput value={2} onChange={onChange} min={0} step={5} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Decrease' }))
+    expect(onChange).toHaveBeenCalledWith(0)
+  })
+
+  it('disables the increment button when value is at max', () => {
+    render(<CounterInput value={10} onChange={() => {}} max={10} />)
+    expect(screen.getByRole('button', { name: 'Increase' })).toBeDisabled()
+    expect(screen.getByRole('button', { name: 'Decrease' })).not.toBeDisabled()
+  })
+
+  it('disables the decrement button when value is at min', () => {
+    render(<CounterInput value={1} onChange={() => {}} min={1} />)
+    expect(screen.getByRole('button', { name: 'Decrease' })).toBeDisabled()
+    expect(screen.getByRole('button', { name: 'Increase' })).not.toBeDisabled()
+  })
+
+  it('disables both buttons when disabled prop is set', () => {
+    render(<CounterInput value={5} onChange={() => {}} disabled />)
+    expect(screen.getByRole('button', { name: 'Decrease' })).toBeDisabled()
+    expect(screen.getByRole('button', { name: 'Increase' })).toBeDisabled()
+    expect(screen.getByRole('spinbutton')).toBeDisabled()
+  })
+
+  it('commits valid number typed directly', () => {
+    const onChange = jest.fn()
+    render(<CounterInput value={0} onChange={onChange} />)
+    fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '42' } })
+    expect(onChange).toHaveBeenCalledWith(42)
+  })
+
+  it('emits null when input is cleared', () => {
+    const onChange = jest.fn()
+    render(<CounterInput value={5} onChange={onChange} />)
+    fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '' } })
+    expect(onChange).toHaveBeenCalledWith(null)
+  })
+
+  it('clamps typed value to max', () => {
+    const onChange = jest.fn()
+    render(<CounterInput value={0} onChange={onChange} max={100} />)
+    fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '999' } })
+    expect(onChange).toHaveBeenCalledWith(100)
+  })
+
+  it('clamps typed value to min', () => {
+    const onChange = jest.fn()
+    render(<CounterInput value={0} onChange={onChange} min={1} />)
+    fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '-5' } })
+    expect(onChange).toHaveBeenCalledWith(1)
+  })
+
+  it('formats output to precision decimals', () => {
+    const onChange = jest.fn()
+    render(<CounterInput value={1} onChange={onChange} precision={2} step={0.5} />)
+    const input = screen.getByRole('spinbutton') as HTMLInputElement
+    expect(input.value).toBe('1.00')
+    fireEvent.click(screen.getByRole('button', { name: 'Increase' }))
+    expect(onChange).toHaveBeenCalledWith(1.5)
+  })
+
+  it('ArrowUp increments by step', () => {
+    const onChange = jest.fn()
+    render(<CounterInput value={2} onChange={onChange} step={3} />)
+    fireEvent.keyDown(screen.getByRole('spinbutton'), { key: 'ArrowUp' })
+    expect(onChange).toHaveBeenCalledWith(5)
+  })
+
+  it('ArrowDown decrements by step', () => {
+    const onChange = jest.fn()
+    render(<CounterInput value={5} onChange={onChange} step={2} />)
+    fireEvent.keyDown(screen.getByRole('spinbutton'), { key: 'ArrowDown' })
+    expect(onChange).toHaveBeenCalledWith(3)
+  })
+
+  it('uncontrolled mode keeps internal state and emits onChange', () => {
+    const onChange = jest.fn()
+    render(<CounterInput onChange={onChange} />)
+    fireEvent.click(screen.getByRole('button', { name: 'Increase' }))
+    expect(onChange).toHaveBeenCalledWith(1)
+    const input = screen.getByRole('spinbutton') as HTMLInputElement
+    expect(input.value).toBe('1')
+  })
+
+  it('honors custom decrement / increment aria labels', () => {
+    render(
+      <CounterInput
+        value={0}
+        onChange={() => {}}
+        decrementAriaLabel="Zmniejsz"
+        incrementAriaLabel="Zwiększ"
+      />,
+    )
+    expect(screen.getByRole('button', { name: 'Zmniejsz' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Zwiększ' })).toBeInTheDocument()
+  })
+
+  it('renders aria-invalid styling when aria-invalid is set', () => {
+    const { container } = render(
+      <CounterInput value={5} onChange={() => {}} aria-invalid />,
+    )
+    const input = container.querySelector('input')
+    expect(input).toHaveAttribute('aria-invalid', 'true')
+  })
+
+  it('applies size variants to the wrapper', () => {
+    const { container, rerender } = render(<CounterInput value={1} onChange={() => {}} size="sm" />)
+    expect(container.querySelector('[data-slot="counter-input"]')).toHaveClass('h-8')
+    rerender(<CounterInput value={1} onChange={() => {}} size="default" />)
+    expect(container.querySelector('[data-slot="counter-input"]')).toHaveClass('h-9')
+    rerender(<CounterInput value={1} onChange={() => {}} size="lg" />)
+    expect(container.querySelector('[data-slot="counter-input"]')).toHaveClass('h-10')
+  })
+})

package/src/primitives/__tests__/date-picker.test.tsx

@@ -0,0 +1,221 @@
+import * as React from 'react'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import { DatePicker } from '../date-picker'
+import { DatePicker as LegacyDatePicker } from '../../backend/inputs/DatePicker'
+import { DateTimePicker as LegacyDateTimePicker } from '../../backend/inputs/DateTimePicker'
+
+function renderWithI18n(ui: React.ReactElement) {
+  return render(<I18nProvider locale="en" dict={{}}>{ui}</I18nProvider>)
+}
+
+function getTrigger(): HTMLElement {
+  const trigger = document.querySelector('[data-slot="date-picker-trigger"]')
+  if (!trigger) throw new Error('DatePicker trigger not found')
+  return trigger as HTMLElement
+}
+
+async function openPopover() {
+  await act(async () => {
+    fireEvent.click(getTrigger())
+  })
+}
+
+describe('DatePicker primitive', () => {
+  it('renders the placeholder when value is null', () => {
+    renderWithI18n(<DatePicker value={null} onChange={() => {}} placeholder="Pick a date" />)
+    expect(screen.getByText('Pick a date')).toBeInTheDocument()
+  })
+
+  it('renders the formatted value when value is provided', () => {
+    renderWithI18n(<DatePicker value={new Date(2026, 4, 9)} onChange={() => {}} />)
+    expect(screen.getByText('May 9, 2026')).toBeInTheDocument()
+  })
+
+  it('uses a custom display format when supplied', () => {
+    renderWithI18n(
+      <DatePicker value={new Date(2026, 4, 9)} onChange={() => {}} displayFormat="yyyy-MM-dd" />,
+    )
+    expect(screen.getByText('2026-05-09')).toBeInTheDocument()
+  })
+
+  it('opens the popover and renders the calendar grid on trigger click', async () => {
+    renderWithI18n(<DatePicker value={null} onChange={() => {}} placeholder="Pick" />)
+    await openPopover()
+    expect(screen.getByRole('grid')).toBeInTheDocument()
+  })
+
+  it('renders Apply and Cancel buttons in the default footer', async () => {
+    renderWithI18n(<DatePicker value={null} onChange={() => {}} />)
+    await openPopover()
+    expect(screen.getByRole('button', { name: 'Apply' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument()
+  })
+
+  it('renders Today and Clear links when footer="today-clear"', async () => {
+    renderWithI18n(<DatePicker value={null} onChange={() => {}} footer="today-clear" />)
+    await openPopover()
+    expect(screen.getByRole('button', { name: 'Today' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Clear' })).toBeInTheDocument()
+  })
+
+  it('hides the Today button when showTodayButton=false', async () => {
+    renderWithI18n(
+      <DatePicker
+        value={null}
+        onChange={() => {}}
+        footer="today-clear"
+        showTodayButton={false}
+      />,
+    )
+    await openPopover()
+    expect(screen.queryByRole('button', { name: 'Today' })).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Clear' })).toBeInTheDocument()
+  })
+
+  it('hides the Clear button when showClearButton=false', async () => {
+    renderWithI18n(
+      <DatePicker
+        value={null}
+        onChange={() => {}}
+        footer="today-clear"
+        showClearButton={false}
+      />,
+    )
+    await openPopover()
+    expect(screen.queryByRole('button', { name: 'Clear' })).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Today' })).toBeInTheDocument()
+  })
+
+  it('renders no footer when footer="none"', async () => {
+    renderWithI18n(<DatePicker value={null} onChange={() => {}} footer="none" />)
+    await openPopover()
+    expect(screen.queryByRole('button', { name: 'Apply' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Cancel' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Today' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Clear' })).not.toBeInTheDocument()
+  })
+
+  it('blocks open when disabled', () => {
+    renderWithI18n(<DatePicker value={null} onChange={() => {}} disabled />)
+    const trigger = getTrigger()
+    expect(trigger).toBeDisabled()
+    expect(screen.queryByRole('grid')).not.toBeInTheDocument()
+  })
+
+  it('commits today and closes when Today is clicked', async () => {
+    const onChange = jest.fn()
+    renderWithI18n(<DatePicker value={null} onChange={onChange} footer="today-clear" />)
+    await openPopover()
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'Today' }))
+    })
+    expect(onChange).toHaveBeenCalledTimes(1)
+    const committed = onChange.mock.calls[0][0] as Date
+    expect(committed).toBeInstanceOf(Date)
+    expect(committed.getHours()).toBe(0)
+    expect(committed.getMinutes()).toBe(0)
+  })
+
+  it('commits null when Clear is clicked', async () => {
+    const onChange = jest.fn()
+    renderWithI18n(
+      <DatePicker value={new Date(2026, 4, 9)} onChange={onChange} footer="today-clear" />,
+    )
+    await openPopover()
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'Clear' }))
+    })
+    expect(onChange).toHaveBeenCalledWith(null)
+  })
+
+  it('does not commit when Cancel is clicked in apply-cancel mode', async () => {
+    const onChange = jest.fn()
+    renderWithI18n(<DatePicker value={null} onChange={onChange} />)
+    await openPopover()
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+    })
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('renders the time input when withTime=true', async () => {
+    renderWithI18n(<DatePicker value={new Date(2026, 4, 9, 10, 30)} onChange={() => {}} withTime />)
+    expect(screen.getByText('May 9, 2026 10:30')).toBeInTheDocument()
+    await openPopover()
+    expect(screen.getByLabelText('Hour')).toBeInTheDocument()
+    expect(screen.getByLabelText('Minute')).toBeInTheDocument()
+  })
+
+  it('forwards aria-label to the trigger', () => {
+    renderWithI18n(
+      <DatePicker value={null} onChange={() => {}} aria-label="Birthday" />,
+    )
+    expect(screen.getByRole('button', { name: 'Birthday' })).toBeInTheDocument()
+  })
+
+  it('selected day cell paints primary fill and forces button transparent (regression)', async () => {
+    renderWithI18n(<DatePicker value={new Date(2026, 4, 9)} onChange={() => {}} footer="none" />)
+    await openPopover()
+    // react-day-picker v9 applies `selected` className to the day `<td>` cell, not
+    // the inner `<button>`. The button defaults (hover/focus-visible bg) would
+    // otherwise paint over the cell's primary fill, so we force the button to
+    // render transparent on selected cells.
+    const selectedCells = Array.from(document.querySelectorAll('td.\\!bg-primary')) as HTMLElement[]
+    expect(selectedCells.length).toBeGreaterThan(0)
+    const cellClassName = selectedCells[0].className
+    expect(cellClassName).toMatch(/!bg-primary/)
+    // The td-level rule that neutralises the button's bg/hover/focus paint.
+    expect(cellClassName).toMatch(/\[&_button\]:!bg-transparent/)
+    expect(cellClassName).toMatch(/\[&_button:hover\]:!bg-transparent/)
+    expect(cellClassName).toMatch(/\[&_button:focus-visible\]:!bg-transparent/)
+    // No `ring-2` overlay on the default day_button class (replaced by bg-accent
+    // on focus-visible so selected days don't get a ring-on-top). Target a day cell
+    // button specifically (not month-nav buttons which still use ring styling).
+    const dayCellButton = selectedCells[0].querySelector('button')
+    if (dayCellButton) {
+      expect(dayCellButton.className).not.toMatch(/focus-visible:ring-2/)
+    }
+  })
+})
+
+describe('DatePicker backwards-compat shims', () => {
+  it('backend/inputs/DatePicker defaults to the Figma-aligned Apply/Cancel footer', async () => {
+    renderWithI18n(<LegacyDatePicker value={null} onChange={() => {}} />)
+    await act(async () => {
+      fireEvent.click(getTrigger())
+    })
+    expect(screen.getByRole('button', { name: 'Apply' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument()
+  })
+
+  it('backend/inputs/DatePicker still honours explicit footer="today-clear"', async () => {
+    renderWithI18n(<LegacyDatePicker value={null} onChange={() => {}} footer="today-clear" />)
+    await act(async () => {
+      fireEvent.click(getTrigger())
+    })
+    expect(screen.getByRole('button', { name: 'Today' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Clear' })).toBeInTheDocument()
+  })
+
+  it('backend/inputs/DateTimePicker renders the time input', async () => {
+    renderWithI18n(
+      <LegacyDateTimePicker value={new Date(2026, 4, 9, 10, 30)} onChange={() => {}} />,
+    )
+    expect(screen.getByText('May 9, 2026 10:30')).toBeInTheDocument()
+    await act(async () => {
+      fireEvent.click(getTrigger())
+    })
+    expect(screen.getByLabelText('Hour')).toBeInTheDocument()
+    expect(screen.getByLabelText('Minute')).toBeInTheDocument()
+  })
+
+  it('backend/inputs/DateTimePicker defaults to the Figma-aligned Apply/Cancel footer', async () => {
+    renderWithI18n(<LegacyDateTimePicker value={null} onChange={() => {}} />)
+    await act(async () => {
+      fireEvent.click(getTrigger())
+    })
+    expect(screen.getByRole('button', { name: 'Apply' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument()
+  })
+})

package/src/primitives/__tests__/date-range-picker.test.tsx

@@ -0,0 +1,173 @@
+import * as React from 'react'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+import { DateRangePicker } from '../date-range-picker'
+import { defaultDateRangePresets } from '../date-picker-helpers'
+
+function renderWithI18n(ui: React.ReactElement) {
+  return render(<I18nProvider locale="en" dict={{}}>{ui}</I18nProvider>)
+}
+
+function getTrigger(): HTMLElement {
+  const trigger = document.querySelector('[data-slot="date-range-picker-trigger"]')
+  if (!trigger) throw new Error('DateRangePicker trigger not found')
+  return trigger as HTMLElement
+}
+
+async function openPopover() {
+  await act(async () => {
+    fireEvent.click(getTrigger())
+  })
+}
+
+describe('DateRangePicker primitive', () => {
+  it('renders the placeholder when value is null', () => {
+    renderWithI18n(<DateRangePicker value={null} onChange={() => {}} placeholder="Pick a range" />)
+    expect(screen.getByText('Pick a range')).toBeInTheDocument()
+  })
+
+  it('renders the formatted range when value is provided', () => {
+    renderWithI18n(
+      <DateRangePicker
+        value={{ start: new Date(2026, 4, 1), end: new Date(2026, 4, 9) }}
+        onChange={() => {}}
+      />,
+    )
+    expect(screen.getByText('May 1, 2026 – May 9, 2026')).toBeInTheDocument()
+  })
+
+  it('opens the popover and renders two month grids by default', async () => {
+    renderWithI18n(<DateRangePicker value={null} onChange={() => {}} />)
+    await openPopover()
+    expect(screen.getAllByRole('grid')).toHaveLength(2)
+  })
+
+  it('renders one month grid when numberOfMonths={1}', async () => {
+    renderWithI18n(<DateRangePicker value={null} onChange={() => {}} numberOfMonths={1} />)
+    await openPopover()
+    expect(screen.getAllByRole('grid')).toHaveLength(1)
+  })
+
+  it('renders the preset sidebar with default 8 presets (Figma 446:7412)', async () => {
+    renderWithI18n(<DateRangePicker value={null} onChange={() => {}} />)
+    await openPopover()
+    const sidebar = document.querySelector('[data-slot="date-range-presets"]')
+    expect(sidebar).toBeInTheDocument()
+    const buttons = sidebar!.querySelectorAll('button')
+    expect(buttons.length).toBe(8)
+  })
+
+  it('hides the preset sidebar when showPresets={false}', async () => {
+    renderWithI18n(<DateRangePicker value={null} onChange={() => {}} showPresets={false} />)
+    await openPopover()
+    expect(document.querySelector('[data-slot="date-range-presets"]')).toBeNull()
+  })
+
+  it('renders Apply and Cancel buttons in the footer by default', async () => {
+    renderWithI18n(<DateRangePicker value={null} onChange={() => {}} />)
+    await openPopover()
+    expect(screen.getByRole('button', { name: 'Apply' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument()
+  })
+
+  it('does not render footer when withFooter={false}', async () => {
+    renderWithI18n(<DateRangePicker value={null} onChange={() => {}} withFooter={false} />)
+    await openPopover()
+    expect(screen.queryByRole('button', { name: 'Apply' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Cancel' })).not.toBeInTheDocument()
+  })
+
+  it('Cancel reverts the draft and does not call onChange', async () => {
+    const onChange = jest.fn()
+    renderWithI18n(<DateRangePicker value={null} onChange={onChange} />)
+    await openPopover()
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+    })
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('clicking a preset stages a draft range matching the preset', async () => {
+    const onChange = jest.fn()
+    renderWithI18n(<DateRangePicker value={null} onChange={onChange} />)
+    await openPopover()
+    const sidebar = document.querySelector('[data-slot="date-range-presets"]')
+    expect(sidebar).toBeInTheDocument()
+    const todayPreset = Array.from(sidebar!.querySelectorAll('button'))
+      .find((btn) => btn.textContent?.trim() === 'today')
+      || Array.from(sidebar!.querySelectorAll('button'))[0]
+    expect(todayPreset).toBeDefined()
+    await act(async () => {
+      fireEvent.click(todayPreset!)
+    })
+    // withFooter=true means draft is staged, not committed yet
+    expect(onChange).not.toHaveBeenCalled()
+    // Apply commits the staged preset range
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'Apply' }))
+    })
+    expect(onChange).toHaveBeenCalledTimes(1)
+    const committed = onChange.mock.calls[0][0]
+    expect(committed).toMatchObject({ start: expect.any(Date), end: expect.any(Date) })
+  })
+
+  it('blocks open when disabled', () => {
+    renderWithI18n(<DateRangePicker value={null} onChange={() => {}} disabled />)
+    const trigger = getTrigger()
+    expect(trigger).toBeDisabled()
+    expect(screen.queryByRole('grid')).not.toBeInTheDocument()
+  })
+
+  it('forwards aria-label to the trigger', () => {
+    renderWithI18n(
+      <DateRangePicker value={null} onChange={() => {}} aria-label="Date filter" />,
+    )
+    expect(screen.getByRole('button', { name: 'Date filter' })).toBeInTheDocument()
+  })
+})
+
+describe('defaultDateRangePresets()', () => {
+  it('returns 8 presets (Figma 446:7412)', () => {
+    const presets = defaultDateRangePresets()
+    expect(presets).toHaveLength(8)
+  })
+
+  it('exposes preset id, labelKey, and a callable range function', () => {
+    const presets = defaultDateRangePresets()
+    for (const preset of presets) {
+      expect(typeof preset.id).toBe('string')
+      expect(typeof preset.labelKey).toBe('string')
+      expect(preset.labelKey).toMatch(/^ui\.dateRangePicker\.presets\./)
+      expect(typeof preset.range).toBe('function')
+      const range = preset.range()
+      expect(range.start).toBeInstanceOf(Date)
+      expect(range.end).toBeInstanceOf(Date)
+      expect(range.end.getTime()).toBeGreaterThanOrEqual(range.start.getTime())
+    }
+  })
+
+  it('includes the canonical Figma preset ids', () => {
+    const presets = defaultDateRangePresets()
+    const ids = presets.map((p) => p.id)
+    expect(ids).toEqual([
+      'today',
+      'last_7_days',
+      'last_30_days',
+      'last_3_months',
+      'last_12_months',
+      'month_to_date',
+      'year_to_date',
+      'all_time',
+    ])
+  })
+
+  it('today preset returns a range that contains the current date', () => {
+    const presets = defaultDateRangePresets()
+    const today = presets.find((p) => p.id === 'today')
+    expect(today).toBeDefined()
+    const range = today!.range()
+    const now = Date.now()
+    expect(range.start.getTime()).toBeLessThanOrEqual(now)
+    expect(range.end.getTime()).toBeGreaterThanOrEqual(now)
+  })
+})