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

describe('UiTableRow', () => {
  test('applies custom class', () => {
    const { getByRole } = render(UiTableRow, {
      props: { class: 'hover:bg-background-surface-muted' },
      slots: { default: '<td>Cell</td>' },
    });

    expect(getByRole('row').className).toContain(
      'hover:bg-background-surface-muted',
    );
  });

  test('uses muted-subtle hover fill by default', () => {
    const { getByRole } = render(UiTableRow, {
      slots: { default: '<td>Cell</td>' },
    });

    expect(getByRole('row').className).toContain(
      'hover:bg-background-surface-muted-subtle',
    );
  });

  test('does not apply row hover fill when hovering a button inside the row', () => {
    const { getByRole } = render(UiTableRow, {
      slots: { default: '<td><button type="button">Expand</button></td>' },
    });

    expect(getByRole('row').className).toContain(
      'has-[button:hover]:hover:bg-transparent',
    );
  });

  test('applies data-state="selected" when selected prop is true', () => {
    const { getByRole } = render(UiTableRow, {
      props: { selected: true },
      slots: { default: '<td>Cell</td>' },
    });

    expect(getByRole('row').getAttribute('data-state')).toBe('selected');
  });

  test('defaults to not selected', () => {
    const { getByRole } = render(UiTableRow, {
      slots: { default: '<td>Cell</td>' },
    });

    expect(getByRole('row').hasAttribute('data-state')).toBe(false);
  });
});
