Button.test.tsx•3.2 kB
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { Button } from './index';
describe('Button', () => {
it('renders with default props', () => {
render(<Button>Click me</Button>);
const button = screen.getByRole('button', { name: /click me/i });
expect(button).toBeInTheDocument();
expect(button).toHaveClass('bg-primary-600');
});
it('renders with different variants', () => {
const { rerender } = render(<Button variant="primary">Primary</Button>);
expect(screen.getByRole('button')).toHaveClass('bg-primary-600');
rerender(<Button variant="secondary">Secondary</Button>);
expect(screen.getByRole('button')).toHaveClass('bg-secondary-100');
rerender(<Button variant="tertiary">Tertiary</Button>);
expect(screen.getByRole('button')).toHaveClass('bg-transparent');
});
it('renders with different sizes', () => {
const { rerender } = render(<Button size="sm">Small</Button>);
expect(screen.getByRole('button')).toHaveClass('h-8');
rerender(<Button size="md">Medium</Button>);
expect(screen.getByRole('button')).toHaveClass('h-10');
rerender(<Button size="lg">Large</Button>);
expect(screen.getByRole('button')).toHaveClass('h-12');
});
it('renders with full width', () => {
render(<Button fullWidth>Full Width</Button>);
expect(screen.getByRole('button')).toHaveClass('w-full');
});
it('renders in loading state', () => {
render(<Button isLoading>Loading</Button>);
const button = screen.getByRole('button');
expect(button).toBeDisabled();
expect(button).toHaveClass('cursor-wait');
expect(screen.getByRole('status')).toBeInTheDocument();
});
it('renders in disabled state', () => {
render(<Button disabled>Disabled</Button>);
const button = screen.getByRole('button');
expect(button).toBeDisabled();
expect(button).toHaveClass('opacity-50');
});
it('renders with left icon', () => {
const leftIcon = <span data-testid="left-icon">←</span>;
render(<Button leftIcon={leftIcon}>With Left Icon</Button>);
expect(screen.getByTestId('left-icon')).toBeInTheDocument();
});
it('renders with right icon', () => {
const rightIcon = <span data-testid="right-icon">→</span>;
render(<Button rightIcon={rightIcon}>With Right Icon</Button>);
expect(screen.getByTestId('right-icon')).toBeInTheDocument();
});
it('handles click events', () => {
const handleClick = jest.fn();
render(<Button onClick={handleClick}>Click me</Button>);
fireEvent.click(screen.getByRole('button'));
expect(handleClick).toHaveBeenCalledTimes(1);
});
it('does not handle click events when disabled', () => {
const handleClick = jest.fn();
render(<Button disabled onClick={handleClick}>Click me</Button>);
fireEvent.click(screen.getByRole('button'));
expect(handleClick).not.toHaveBeenCalled();
});
it('does not handle click events when loading', () => {
const handleClick = jest.fn();
render(<Button isLoading onClick={handleClick}>Click me</Button>);
fireEvent.click(screen.getByRole('button'));
expect(handleClick).not.toHaveBeenCalled();
});
});