import '@testing-library/jest-dom/vitest';
import { render } from '@testing-library/vue';
import { describe, expect, test } from 'vitest';
import UiTableHead from '../UiTableHead.vue';

describe('UiTableHead', () => {
  test('applies custom class', () => {
    const { getByRole } = render(UiTableHead, {
      props: { class: 'text-right' },
      slots: { default: 'Amount' },
    });

    expect(getByRole('columnheader')).toHaveClass('text-right');
  });

  test('applies colspan and rowspan attributes', () => {
    const { container } = render(UiTableHead, {
      props: { colspan: 2, rowspan: 3 },
      slots: { default: 'Merged Header' },
    });

    const th = container.querySelector('th');
    expect(th).toHaveAttribute('colspan', '2');
    expect(th).toHaveAttribute('rowspan', '3');
  });

  test('defaults to scope="col"', () => {
    const { getByRole } = render(UiTableHead, {
      slots: { default: 'Name' },
    });

    expect(getByRole('columnheader')).toHaveAttribute('scope', 'col');
  });

  test('applies custom scope attribute', () => {
    const { getByRole } = render(UiTableHead, {
      props: { scope: 'row' },
      slots: { default: 'Row Header' },
    });

    expect(getByRole('rowheader')).toHaveAttribute('scope', 'row');
  });
});
