1  import { describe, it, expect } from 'vitest';
 2  import { render, screen } from '@testing-library/react';
 3  import { Button } from './Button';
 4  
 5  describe('Button', () => {
 6    it('renders with default props', () => {
 7      render(<Button>Click me</Button>);
 8      expect(screen.getByRole('button')).toHaveTextContent('Click me');
 9    });
10  
11    it('renders with alpha variant', () => {
12      render(<Button variant="alpha">Alpha Button</Button>);
13      const button = screen.getByRole('button');
14      expect(button).toHaveTextContent('Alpha Button');
15      expect(button.className).toContain('bg-[var(--alpha-500)]');
16    });
17  
18    it('renders with delta variant', () => {
19      render(<Button variant="delta">Delta Button</Button>);
20      const button = screen.getByRole('button');
21      expect(button).toHaveTextContent('Delta Button');
22      expect(button.className).toContain('bg-[var(--delta-500)]');
23    });
24  
25    it('shows loading state', () => {
26      render(<Button loading>Submit</Button>);
27      const button = screen.getByRole('button');
28      expect(button).toBeDisabled();
29      expect(button).toHaveTextContent('Loading...');
30    });
31  
32    it('disables button when disabled prop is true', () => {
33      render(<Button disabled>Disabled</Button>);
34      expect(screen.getByRole('button')).toBeDisabled();
35    });
36  
37    it('applies size variants correctly', () => {
38      const { rerender } = render(<Button size="sm">Small</Button>);
39      expect(screen.getByRole('button').className).toContain('h-8');
40  
41      rerender(<Button size="lg">Large</Button>);
42      expect(screen.getByRole('button').className).toContain('h-12');
43    });
44  });