erp-nutzfahrzeuge/frontend/tests/auth.test.tsx

import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { ToastProvider, useToast } from '@/components/ui/Toast';
import { I18nProvider, useI18n } from '@/lib/i18n';
import { Button } from '@/components/ui/Button';
import { Input } from '@/components/ui/Input';
import { Card } from '@/components/ui/Card';

// Test Button component
describe('Button', () => {
  it('renders children', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByText('Click me')).toBeInTheDocument();
  });

  it('shows loading spinner', () => {
    render(<Button loading>Submit</Button>);
    expect(screen.getByText('Submit')).toBeInTheDocument();
    expect(screen.getByRole('button')).toBeDisabled();
  });

  it('handles click events', () => {
    const onClick = vi.fn();
    render(<Button onClick={onClick}>Click</Button>);
    fireEvent.click(screen.getByText('Click'));
    expect(onClick).toHaveBeenCalledTimes(1);
  });
});

// Test Input component
describe('Input', () => {
  it('renders label and input', () => {
    render(<Input label="Email" placeholder="test@test.com" />);
    expect(screen.getByText('Email')).toBeInTheDocument();
    expect(screen.getByPlaceholderText('test@test.com')).toBeInTheDocument();
  });

  it('shows error message', () => {
    render(<Input label="Email" error="Invalid email" />);
    expect(screen.getByText('Invalid email')).toBeInTheDocument();
  });
});

// Test Card component
describe('Card', () => {
  it('renders title and children', () => {
    render(<Card title="Test Title"><p>Card content</p></Card>);
    expect(screen.getByText('Test Title')).toBeInTheDocument();
    expect(screen.getByText('Card content')).toBeInTheDocument();
  });
});

// Test Toast
describe('Toast', () => {
  it('shows toast on action', async () => {
    function TestComponent() {
      const { showToast } = useToast();
      return (
        <button onClick={() => showToast('Test message', 'success')} data-testid="trigger">
          Show Toast
        </button>
      );
    }
    render(
      <ToastProvider>
        <TestComponent />
      </ToastProvider>
    );
    fireEvent.click(screen.getByTestId('trigger'));
    await waitFor(() => {
      expect(screen.getByText('Test message')).toBeInTheDocument();
    });
  });
});

// Test i18n
describe('i18n', () => {
  it('translates keys in German', () => {
    function TestComponent() {
      const { t } = useI18n();
      return <span data-testid="translated">{t('login.title')}</span>;
    }
    render(
      <I18nProvider initialLocale="de">
        <TestComponent />
      </I18nProvider>
    );
    expect(screen.getByTestId('translated').textContent).toBe('Anmelden');
  });

  it('translates keys in English', () => {
    function TestComponent() {
      const { t } = useI18n();
      return <span data-testid="translated">{t('login.title')}</span>;
    }
    render(
      <I18nProvider initialLocale="en">
        <TestComponent />
      </I18nProvider>
    );
    expect(screen.getByTestId('translated').textContent).toBe('Sign In');
  });

  it('switches locale live', () => {
    function TestComponent() {
      const { t, locale, setLocale } = useI18n();
      return (
        <div>
          <span data-testid="translated">{t('login.submit')}</span>
          <button data-testid="switch" onClick={() => setLocale(locale === 'de' ? 'en' : 'de')}>
            Switch
          </button>
        </div>
      );
    }
    render(
      <I18nProvider initialLocale="de">
        <TestComponent />
      </I18nProvider>
    );
    expect(screen.getByTestId('translated').textContent).toBe('Anmelden');
    fireEvent.click(screen.getByTestId('switch'));
    expect(screen.getByTestId('translated').textContent).toBe('Sign In');
  });
});