veza/apps/web/src/features/auth/components/OAuthButton.test.tsx

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');
  });
});