import { createSignal } from 'solid-js'
import { render } from '@solidjs/testing-library'
import { Tabs } from '@/components/ui/tabs'

describe('Tabs', () => {
  it('changes selection when option is clicked', () => {
    const Harness = () => {
      const [value, setValue] = createSignal('all')

      return (
        <Tabs
          label="Media"
          value={value()}
          onChange={setValue}
          options={[
            { value: 'all', label: 'All' },
            { value: 'movie', label: 'Movies' },
          ]}
        />
      )
    }

    const { getByRole } = render(() => <Harness />)
    const movies = getByRole('tab', { name: 'Movies' })

    movies.click()

    expect(movies.getAttribute('aria-selected')).toBe('true')
  })
})
