import { describe, it, expect } from 'vitest'
import { render } from '@testing-library/react'
import { TableSkeleton } from './skeleton'

describe('<TableSkeleton>', () => {
  it('renders the default 5×4 grid of skeleton cells', () => {
    const { container, getByLabelText } = render(<TableSkeleton />)
    expect(getByLabelText('Table skeleton')).toBeTruthy()
    // 4 header + (5×4) body = 24 cells, each containing one Skeleton.
    expect(container.querySelectorAll('.MuiSkeleton-root').length).toBe(24)
  })

  it('honours custom rows × columns', () => {
    const { container } = render(<TableSkeleton rows={2} columns={3} />)
    // 3 header + (2×3) body = 9.
    expect(container.querySelectorAll('.MuiSkeleton-root').length).toBe(9)
  })

  it('forwards the size prop to MUI Table', () => {
    const { container } = render(<TableSkeleton size='small' />)
    // MUI Table doesn't apply a `sizeSmall` class but does set `padding=none`
    // on header cells when size='small'. Confirm a TableCell got the small
    // padding class so we know the size prop propagated.
    expect(container.querySelector('.MuiTableCell-sizeSmall')).not.toBeNull()
  })
})