815d449c3d
- Created comprehensive tests for ForgotPasswordForm component - Created comprehensive tests for AuthButton component - Created comprehensive tests for AuthFormField component - Created comprehensive tests for AuthErrorMessage component - Created comprehensive tests for TwoFactorVerify component All 48 tests pass. Covers all auth components that were missing tests. Phase: PHASE-5 Priority: P2 Progress: 242/267 (90.64%)
112 lines
3.2 KiB
TypeScript
112 lines
3.2 KiB
TypeScript
/**
|
|
* Tests for AuthButton Component
|
|
* FE-TEST-005: Test auth button component
|
|
*/
|
|
|
|
import { describe, it, expect, vi } from 'vitest';
|
|
import { render, screen } from '@testing-library/react';
|
|
import userEvent from '@testing-library/user-event';
|
|
import { AuthButton } from './AuthButton';
|
|
|
|
describe('AuthButton', () => {
|
|
it('should render button with children', () => {
|
|
render(<AuthButton>Click me</AuthButton>);
|
|
expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
|
|
});
|
|
|
|
it('should call onClick when clicked', async () => {
|
|
const handleClick = vi.fn();
|
|
const user = userEvent.setup();
|
|
|
|
render(<AuthButton onClick={handleClick}>Click me</AuthButton>);
|
|
|
|
await user.click(screen.getByRole('button'));
|
|
expect(handleClick).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it('should show loading state', () => {
|
|
render(<AuthButton loading>Submit</AuthButton>);
|
|
|
|
const button = screen.getByRole('button');
|
|
expect(button).toBeDisabled();
|
|
expect(button).toHaveAttribute('aria-busy', 'true');
|
|
expect(screen.getByText('Chargement...')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should be disabled when disabled prop is true', () => {
|
|
render(<AuthButton disabled>Submit</AuthButton>);
|
|
|
|
const button = screen.getByRole('button');
|
|
expect(button).toBeDisabled();
|
|
expect(button).toHaveAttribute('aria-disabled', 'true');
|
|
});
|
|
|
|
it('should be disabled when loading', () => {
|
|
render(<AuthButton loading>Submit</AuthButton>);
|
|
|
|
const button = screen.getByRole('button');
|
|
expect(button).toBeDisabled();
|
|
expect(button).toHaveAttribute('aria-disabled', 'true');
|
|
});
|
|
|
|
it('should apply primary variant by default', () => {
|
|
render(<AuthButton>Submit</AuthButton>);
|
|
|
|
const button = screen.getByRole('button');
|
|
expect(button.className).toContain('bg-blue-600');
|
|
});
|
|
|
|
it('should apply secondary variant', () => {
|
|
render(<AuthButton variant="secondary">Submit</AuthButton>);
|
|
|
|
const button = screen.getByRole('button');
|
|
expect(button.className).toContain('bg-gray-200');
|
|
});
|
|
|
|
it('should apply custom className', () => {
|
|
render(<AuthButton className="custom-class">Submit</AuthButton>);
|
|
|
|
const button = screen.getByRole('button');
|
|
expect(button.className).toContain('custom-class');
|
|
});
|
|
|
|
it('should pass through other button props', () => {
|
|
render(
|
|
<AuthButton type="submit" data-testid="auth-button">
|
|
Submit
|
|
</AuthButton>,
|
|
);
|
|
|
|
const button = screen.getByTestId('auth-button');
|
|
expect(button).toHaveAttribute('type', 'submit');
|
|
});
|
|
|
|
it('should not call onClick when disabled', async () => {
|
|
const handleClick = vi.fn();
|
|
const user = userEvent.setup();
|
|
|
|
render(
|
|
<AuthButton onClick={handleClick} disabled>
|
|
Submit
|
|
</AuthButton>,
|
|
);
|
|
|
|
await user.click(screen.getByRole('button'));
|
|
expect(handleClick).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('should not call onClick when loading', async () => {
|
|
const handleClick = vi.fn();
|
|
const user = userEvent.setup();
|
|
|
|
render(
|
|
<AuthButton onClick={handleClick} loading>
|
|
Submit
|
|
</AuthButton>,
|
|
);
|
|
|
|
await user.click(screen.getByRole('button'));
|
|
expect(handleClick).not.toHaveBeenCalled();
|
|
});
|
|
});
|
|
|