import { describe, expect, test } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/svelte';
import TabStrip from './TabStrip.svelte';

const items = [
  { id: 'artists', label: 'Artists', count: 3 },
  { id: 'albums', label: 'Albums' }
];

describe('TabStrip', () => {
  test('a tablist with the selected tab marked, and counts where given', () => {
    render(TabStrip, { props: { items, value: 'artists', ariaLabel: 'Liked' } });
    expect(screen.getByRole('tablist', { name: 'Liked' })).toBeInTheDocument();
    expect(screen.getByRole('tab', { name: /artists/i })).toHaveAttribute('aria-selected', 'true');
    expect(screen.getByRole('tab', { name: /albums/i })).toHaveAttribute('aria-selected', 'false');
    expect(screen.getAllByTestId('tab-count').map((c) => c.textContent?.trim())).toEqual(['3']);
  });

  test('clicking a tab selects it', async () => {
    render(TabStrip, { props: { items, value: 'artists', ariaLabel: 'Liked' } });
    await fireEvent.click(screen.getByRole('tab', { name: /albums/i }));
    expect(screen.getByRole('tab', { name: /albums/i })).toHaveAttribute('aria-selected', 'true');
    expect(screen.getByRole('tab', { name: /artists/i })).toHaveAttribute('aria-selected', 'false');
  });
});