veza/apps/web/src/features/auth/components/OAuthButton.test.tsx
2025-12-12 21:34:34 -05:00

59 lines
1.9 KiB
TypeScript

import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { OAuthButton } from './OAuthButton';
describe('OAuthButton', () => {
const mockOnClick = vi.fn();
beforeEach(() => {
vi.clearAllMocks();
});
it('should render Google button with correct label', () => {
render(<OAuthButton provider="google" onClick={mockOnClick} />);
expect(screen.getByText('Continuer avec Google')).toBeInTheDocument();
});
it('should render GitHub button with correct label', () => {
render(<OAuthButton provider="github" onClick={mockOnClick} />);
expect(screen.getByText('Continuer avec GitHub')).toBeInTheDocument();
});
it('should call onClick when Google button is clicked', async () => {
const user = userEvent.setup();
render(<OAuthButton provider="google" onClick={mockOnClick} />);
const button = screen.getByText('Continuer avec Google');
await user.click(button);
expect(mockOnClick).toHaveBeenCalledTimes(1);
});
it('should call onClick when GitHub button is clicked', async () => {
const user = userEvent.setup();
render(<OAuthButton provider="github" onClick={mockOnClick} />);
const button = screen.getByText('Continuer avec GitHub');
await user.click(button);
expect(mockOnClick).toHaveBeenCalledTimes(1);
});
it('should have type="button" to prevent form submission', () => {
render(<OAuthButton provider="google" onClick={mockOnClick} />);
const button = screen.getByText('Continuer avec Google');
expect(button).toHaveAttribute('type', 'button');
});
it('should use secondary variant', () => {
render(<OAuthButton provider="google" onClick={mockOnClick} />);
const button = screen.getByText('Continuer avec Google');
// AuthButton with variant="secondary" should have gray classes
expect(button.className).toContain('bg-gray');
});
});