import { describe, expect, it } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs';

const Example = () => (
  <Tabs defaultValue="overview">
    <TabsList>
      <TabsTrigger value="overview">Overview</TabsTrigger>
      <TabsTrigger value="activity">Activity</TabsTrigger>
      <TabsTrigger value="billing" disabled>
        Billing
      </TabsTrigger>
    </TabsList>
    <TabsContent value="overview">Overview panel</TabsContent>
    <TabsContent value="activity">Activity panel</TabsContent>
    <TabsContent value="billing">Billing panel</TabsContent>
  </Tabs>
);

describe('Tabs', () => {
  it('renders only the selected panel', () => {
    render(<Example />);

    expect(screen.getByText('Overview panel')).toBeInTheDocument();
    expect(screen.queryByText('Activity panel')).not.toBeInTheDocument();
  });

  it('switches panels on click', async () => {
    render(<Example />);

    await userEvent.click(screen.getByRole('tab', { name: 'Activity' }));

    expect(screen.getByText('Activity panel')).toBeInTheDocument();
    expect(screen.queryByText('Overview panel')).not.toBeInTheDocument();
  });

  it('moves between tabs with the arrow keys', async () => {
    render(<Example />);

    await userEvent.click(screen.getByRole('tab', { name: 'Overview' }));
    await userEvent.keyboard('{ArrowRight}');

    expect(screen.getByRole('tab', { name: 'Activity' })).toHaveAttribute(
      'aria-selected',
      'true'
    );
  });

  it('skips a disabled tab', async () => {
    render(<Example />);

    await userEvent.click(screen.getByRole('tab', { name: 'Billing' }));

    expect(screen.getByText('Overview panel')).toBeInTheDocument();
  });
});