import { describe, expect, it, vi } from 'vitest'
import { render, screen, fireEvent } from '@testing-library/react'
import { Table } from './Table'

describe('Table', () => {
  it('renders a semantic table with caption as accessible name', () => {
    render(
      <Table caption="Users">
        <Table.Head>
          <Table.Row>
            <Table.Th scope="col">Name</Table.Th>
          </Table.Row>
        </Table.Head>
        <Table.Body>
          <Table.Row>
            <Table.Td>Ada</Table.Td>
          </Table.Row>
        </Table.Body>
      </Table>,
    )
    expect(screen.getByRole('table', { name: 'Users' })).toBeDefined()
    expect(screen.getByRole('columnheader', { name: 'Name' }).getAttribute('scope')).toBe('col')
  })

  it('exposes sortable header button with aria-sort (edge: desc sort)', () => {
    const onSort = vi.fn()
    render(
      <Table>
        <Table.Head>
          <Table.Row>
            <Table.Th sort="desc" onSort={onSort}>
              Name
            </Table.Th>
          </Table.Row>
        </Table.Head>
      </Table>,
    )
    const header = screen.getByRole('columnheader', { name: 'Name' })
    expect(header.getAttribute('aria-sort')).toBe('descending')
    fireEvent.click(screen.getByRole('button', { name: 'Name' }))
    expect(onSort).toHaveBeenCalledTimes(1)
  })
})