veza/apps/web/src/components/ui/button-loading.test.tsx

import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { ButtonLoading } from './button-loading';

describe('ButtonLoading Component', () => {
  it('renders button with children', () => {
    render(<ButtonLoading>Click me</ButtonLoading>);

    expect(screen.getByText('Click me')).toBeInTheDocument();
  });

  it('shows loading spinner when isLoading is true', () => {
    const { container } = render(<ButtonLoading isLoading={true}>Click me</ButtonLoading>);

    // The Loader2 icon has aria-hidden="true" and animates with animate-spin class
    const spinner = container.querySelector('.animate-spin');
    expect(spinner).toBeInTheDocument();
  });

  it('shows loading text when provided', () => {
    render(
      <ButtonLoading isLoading={true} loadingText="Loading...">
        Click me
      </ButtonLoading>,
    );

    expect(screen.getByText('Loading...')).toBeInTheDocument();
    expect(screen.queryByText('Click me')).not.toBeInTheDocument();
  });

  it('disables button when isLoading is true', () => {
    render(<ButtonLoading isLoading={true}>Click me</ButtonLoading>);

    const button = screen.getByRole('button');
    expect(button).toBeDisabled();
  });

  it('disables button when disabled prop is true', () => {
    render(<ButtonLoading disabled={true}>Click me</ButtonLoading>);

    const button = screen.getByRole('button');
    expect(button).toBeDisabled();
  });

  it('disables button when both isLoading and disabled are true', () => {
    render(
      <ButtonLoading isLoading={true} disabled={true}>
        Click me
      </ButtonLoading>,
    );

    const button = screen.getByRole('button');
    expect(button).toBeDisabled();
  });

  it('applies custom className', () => {
    const { container } = render(
      <ButtonLoading className="custom-class">Click me</ButtonLoading>,
    );

    const button = container.querySelector('button');
    expect(button).toHaveClass('custom-class');
  });
});