goodgo-platform/apps/web/components/ui/__tests__/tabs.spec.tsx

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, expect, it, vi } from 'vitest';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '../tabs';

function renderTabs(value = 'tab1', onValueChange = vi.fn()) {
  return {
    onValueChange,
    ...render(
      <Tabs value={value} onValueChange={onValueChange}>
        <TabsList>
          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
          <TabsTrigger value="tab3">Tab 3</TabsTrigger>
        </TabsList>
        <TabsContent value="tab1">Content 1</TabsContent>
        <TabsContent value="tab2">Content 2</TabsContent>
        <TabsContent value="tab3">Content 3</TabsContent>
      </Tabs>,
    ),
  };
}

describe('Tabs', () => {
  it('renders the active tab content', () => {
    renderTabs('tab1');
    expect(screen.getByText('Content 1')).toBeInTheDocument();
    expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
  });

  it('hides inactive tab content', () => {
    renderTabs('tab2');
    expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
    expect(screen.getByText('Content 2')).toBeInTheDocument();
  });

  it('calls onValueChange when a trigger is clicked', async () => {
    const onValueChange = vi.fn();
    renderTabs('tab1', onValueChange);
    await userEvent.click(screen.getByText('Tab 2'));
    expect(onValueChange).toHaveBeenCalledWith('tab2');
  });

  it('renders all trigger buttons', () => {
    renderTabs();
    expect(screen.getByText('Tab 1')).toBeInTheDocument();
    expect(screen.getByText('Tab 2')).toBeInTheDocument();
    expect(screen.getByText('Tab 3')).toBeInTheDocument();
  });

  it('applies active styles to selected trigger', () => {
    renderTabs('tab1');
    expect(screen.getByRole('tab', { name: 'Tab 1' })).toHaveClass('bg-background');
    expect(screen.getByRole('tab', { name: 'Tab 2' })).not.toHaveClass('bg-background');
  });

  it('applies custom className to TabsList', () => {
    render(
      <Tabs value="tab1" onValueChange={vi.fn()}>
        <TabsList className="custom-list" data-testid="list">
          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
        </TabsList>
        <TabsContent value="tab1">Content</TabsContent>
      </Tabs>,
    );
    expect(screen.getByTestId('list')).toHaveClass('custom-list');
  });

  it('applies custom className to TabsContent', () => {
    render(
      <Tabs value="tab1" onValueChange={vi.fn()}>
        <TabsList>
          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
        </TabsList>
        <TabsContent value="tab1" className="custom-content" data-testid="content">
          Content
        </TabsContent>
      </Tabs>,
    );
    expect(screen.getByTestId('content')).toHaveClass('custom-content');
  });

  describe('ARIA attributes', () => {
    it('sets role="tablist" on TabsList', () => {
      renderTabs();
      expect(screen.getByRole('tablist')).toBeInTheDocument();
    });

    it('sets role="tab" with aria-selected on triggers', () => {
      renderTabs('tab1');
      const tab1 = screen.getByRole('tab', { name: 'Tab 1' });
      const tab2 = screen.getByRole('tab', { name: 'Tab 2' });
      expect(tab1).toHaveAttribute('aria-selected', 'true');
      expect(tab2).toHaveAttribute('aria-selected', 'false');
    });

    it('sets aria-controls on triggers matching tabpanel ids', () => {
      renderTabs('tab1');
      const tab1 = screen.getByRole('tab', { name: 'Tab 1' });
      const panel = screen.getByRole('tabpanel');
      expect(tab1).toHaveAttribute('aria-controls', panel.id);
    });

    it('sets role="tabpanel" with aria-labelledby on content', () => {
      renderTabs('tab1');
      const panel = screen.getByRole('tabpanel');
      const tab1 = screen.getByRole('tab', { name: 'Tab 1' });
      expect(panel).toHaveAttribute('aria-labelledby', tab1.id);
    });

    it('sets tabIndex correctly (0 for selected, -1 for others)', () => {
      renderTabs('tab1');
      expect(screen.getByRole('tab', { name: 'Tab 1' })).toHaveAttribute('tabindex', '0');
      expect(screen.getByRole('tab', { name: 'Tab 2' })).toHaveAttribute('tabindex', '-1');
      expect(screen.getByRole('tab', { name: 'Tab 3' })).toHaveAttribute('tabindex', '-1');
    });
  });

  describe('Arrow-key navigation', () => {
    it('moves to next tab on ArrowRight', async () => {
      const onValueChange = vi.fn();
      renderTabs('tab1', onValueChange);
      screen.getByRole('tab', { name: 'Tab 1' }).focus();
      await userEvent.keyboard('{ArrowRight}');
      expect(onValueChange).toHaveBeenCalledWith('tab2');
    });

    it('moves to previous tab on ArrowLeft', async () => {
      const onValueChange = vi.fn();
      renderTabs('tab2', onValueChange);
      screen.getByRole('tab', { name: 'Tab 2' }).focus();
      await userEvent.keyboard('{ArrowLeft}');
      expect(onValueChange).toHaveBeenCalledWith('tab1');
    });

    it('wraps around from last to first on ArrowRight', async () => {
      const onValueChange = vi.fn();
      renderTabs('tab3', onValueChange);
      screen.getByRole('tab', { name: 'Tab 3' }).focus();
      await userEvent.keyboard('{ArrowRight}');
      expect(onValueChange).toHaveBeenCalledWith('tab1');
    });

    it('wraps around from first to last on ArrowLeft', async () => {
      const onValueChange = vi.fn();
      renderTabs('tab1', onValueChange);
      screen.getByRole('tab', { name: 'Tab 1' }).focus();
      await userEvent.keyboard('{ArrowLeft}');
      expect(onValueChange).toHaveBeenCalledWith('tab3');
    });

    it('moves to first tab on Home', async () => {
      const onValueChange = vi.fn();
      renderTabs('tab3', onValueChange);
      screen.getByRole('tab', { name: 'Tab 3' }).focus();
      await userEvent.keyboard('{Home}');
      expect(onValueChange).toHaveBeenCalledWith('tab1');
    });

    it('moves to last tab on End', async () => {
      const onValueChange = vi.fn();
      renderTabs('tab1', onValueChange);
      screen.getByRole('tab', { name: 'Tab 1' }).focus();
      await userEvent.keyboard('{End}');
      expect(onValueChange).toHaveBeenCalledWith('tab3');
    });
  });
});