117 lines
3.6 KiB
TypeScript
117 lines
3.6 KiB
TypeScript
import { render, screen, fireEvent } from '@testing-library/react';
|
|
import { describe, it, expect, vi } from 'vitest';
|
|
import { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs';
|
|
|
|
describe('Tabs Component', () => {
|
|
it('renders tabs', () => {
|
|
render(
|
|
<Tabs defaultValue="tab1">
|
|
<TabsList>
|
|
<TabsTrigger value="tab1">Tab 1</TabsTrigger>
|
|
<TabsTrigger value="tab2">Tab 2</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="tab1">Content 1</TabsContent>
|
|
<TabsContent value="tab2">Content 2</TabsContent>
|
|
</Tabs>,
|
|
);
|
|
|
|
expect(screen.getByText('Tab 1')).toBeInTheDocument();
|
|
expect(screen.getByText('Tab 2')).toBeInTheDocument();
|
|
});
|
|
|
|
it('shows default tab content', () => {
|
|
render(
|
|
<Tabs defaultValue="tab1">
|
|
<TabsList>
|
|
<TabsTrigger value="tab1">Tab 1</TabsTrigger>
|
|
<TabsTrigger value="tab2">Tab 2</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="tab1">Content 1</TabsContent>
|
|
<TabsContent value="tab2">Content 2</TabsContent>
|
|
</Tabs>,
|
|
);
|
|
|
|
expect(screen.getByText('Content 1')).toBeInTheDocument();
|
|
expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('switches tabs on click', () => {
|
|
render(
|
|
<Tabs defaultValue="tab1">
|
|
<TabsList>
|
|
<TabsTrigger value="tab1">Tab 1</TabsTrigger>
|
|
<TabsTrigger value="tab2">Tab 2</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="tab1">Content 1</TabsContent>
|
|
<TabsContent value="tab2">Content 2</TabsContent>
|
|
</Tabs>,
|
|
);
|
|
|
|
const tab2 = screen.getByText('Tab 2');
|
|
fireEvent.click(tab2);
|
|
|
|
expect(screen.getByText('Content 2')).toBeInTheDocument();
|
|
expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('calls onValueChange when tab changes', () => {
|
|
const handleChange = vi.fn();
|
|
render(
|
|
<Tabs defaultValue="tab1" onValueChange={handleChange}>
|
|
<TabsList>
|
|
<TabsTrigger value="tab1">Tab 1</TabsTrigger>
|
|
<TabsTrigger value="tab2">Tab 2</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="tab1">Content 1</TabsContent>
|
|
<TabsContent value="tab2">Content 2</TabsContent>
|
|
</Tabs>,
|
|
);
|
|
|
|
const tab2 = screen.getByText('Tab 2');
|
|
fireEvent.click(tab2);
|
|
|
|
expect(handleChange).toHaveBeenCalledWith('tab2');
|
|
});
|
|
|
|
it('handles controlled value', () => {
|
|
const { rerender } = render(
|
|
<Tabs value="tab1">
|
|
<TabsList>
|
|
<TabsTrigger value="tab1">Tab 1</TabsTrigger>
|
|
<TabsTrigger value="tab2">Tab 2</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="tab1">Content 1</TabsContent>
|
|
<TabsContent value="tab2">Content 2</TabsContent>
|
|
</Tabs>,
|
|
);
|
|
|
|
expect(screen.getByText('Content 1')).toBeInTheDocument();
|
|
|
|
rerender(
|
|
<Tabs value="tab2">
|
|
<TabsList>
|
|
<TabsTrigger value="tab1">Tab 1</TabsTrigger>
|
|
<TabsTrigger value="tab2">Tab 2</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="tab1">Content 1</TabsContent>
|
|
<TabsContent value="tab2">Content 2</TabsContent>
|
|
</Tabs>,
|
|
);
|
|
|
|
expect(screen.getByText('Content 2')).toBeInTheDocument();
|
|
});
|
|
|
|
it('applies custom className', () => {
|
|
render(
|
|
<Tabs className="custom-tabs" defaultValue="tab1">
|
|
<TabsList>
|
|
<TabsTrigger value="tab1">Tab 1</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="tab1">Content</TabsContent>
|
|
</Tabs>,
|
|
);
|
|
|
|
const tabs = screen.getByText('Tab 1').closest('.custom-tabs');
|
|
expect(tabs).toBeInTheDocument();
|
|
});
|
|
});
|