gridpilot.gg/apps/website/components/auth/AuthForm.test.tsx

import React from 'react';
import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { AuthForm } from './AuthForm';

describe('AuthForm', () => {
  describe('rendering', () => {
    it('should render with single child', () => {
      const mockSubmit = vi.fn();

      render(
        <AuthForm onSubmit={mockSubmit}>
          <input type="email" placeholder="Email" />
        </AuthForm>
      );

      expect(screen.getByPlaceholderText('Email')).toBeInTheDocument();
    });

    it('should render with multiple children', () => {
      const mockSubmit = vi.fn();

      render(
        <AuthForm onSubmit={mockSubmit}>
          <input type="email" placeholder="Email" />
          <input type="password" placeholder="Password" />
          <button type="submit">Submit</button>
        </AuthForm>
      );

      expect(screen.getByPlaceholderText('Email')).toBeInTheDocument();
      expect(screen.getByPlaceholderText('Password')).toBeInTheDocument();
      expect(screen.getByText('Submit')).toBeInTheDocument();
    });

    it('should render with form elements', () => {
      const mockSubmit = vi.fn();

      render(
        <AuthForm onSubmit={mockSubmit}>
          <label htmlFor="email">Email</label>
          <input id="email" type="email" />
          <label htmlFor="password">Password</label>
          <input id="password" type="password" />
        </AuthForm>
      );

      expect(screen.getByLabelText('Email')).toBeInTheDocument();
      expect(screen.getByLabelText('Password')).toBeInTheDocument();
    });
  });

  describe('form submission', () => {
    it('should call onSubmit when form is submitted', () => {
      const mockSubmit = vi.fn();

      render(
        <AuthForm onSubmit={mockSubmit}>
          <input type="email" placeholder="Email" />
          <button type="submit">Submit</button>
        </AuthForm>
      );

      const form = screen.getByRole('form');
      fireEvent.submit(form);

      expect(mockSubmit).toHaveBeenCalledTimes(1);
    });

    it('should pass event to onSubmit handler', () => {
      const mockSubmit = vi.fn();

      render(
        <AuthForm onSubmit={mockSubmit}>
          <input type="email" placeholder="Email" />
          <button type="submit">Submit</button>
        </AuthForm>
      );

      const form = screen.getByRole('form');
      fireEvent.submit(form);

      expect(mockSubmit).toHaveBeenCalledWith(expect.objectContaining({
        type: 'submit',
      }));
    });

    it('should handle form submission with input values', () => {
      const mockSubmit = vi.fn();

      render(
        <AuthForm onSubmit={mockSubmit}>
          <input type="email" placeholder="Email" defaultValue="test@example.com" />
          <input type="password" placeholder="Password" defaultValue="secret123" />
          <button type="submit">Submit</button>
        </AuthForm>
      );

      const form = screen.getByRole('form');
      fireEvent.submit(form);

      expect(mockSubmit).toHaveBeenCalledTimes(1);
    });

    it('should prevent default form submission', () => {
      const mockSubmit = vi.fn();

      render(
        <AuthForm onSubmit={mockSubmit}>
          <input type="email" placeholder="Email" />
          <button type="submit">Submit</button>
        </AuthForm>
      );

      const form = screen.getByRole('form');
      const submitEvent = new Event('submit', { bubbles: true, cancelable: true });
      const preventDefaultSpy = vi.spyOn(submitEvent, 'preventDefault');

      fireEvent(form, submitEvent);

      expect(preventDefaultSpy).toHaveBeenCalled();
    });
  });

  describe('accessibility', () => {
    it('should have proper form semantics', () => {
      const mockSubmit = vi.fn();

      render(
        <AuthForm onSubmit={mockSubmit}>
          <input type="email" placeholder="Email" />
        </AuthForm>
      );

      const form = screen.getByRole('form');
      expect(form).toBeInTheDocument();
    });

    it('should maintain proper input associations', () => {
      const mockSubmit = vi.fn();

      render(
        <AuthForm onSubmit={mockSubmit}>
          <label htmlFor="email">Email Address</label>
          <input id="email" type="email" />
          <label htmlFor="password">Password</label>
          <input id="password" type="password" />
        </AuthForm>
      );

      expect(screen.getByLabelText('Email Address')).toBeInTheDocument();
      expect(screen.getByLabelText('Password')).toBeInTheDocument();
    });
  });

  describe('edge cases', () => {
    it('should handle empty children', () => {
      const mockSubmit = vi.fn();

      render(<AuthForm onSubmit={mockSubmit}>{null}</AuthForm>);
      // Component should render without errors
    });

    it('should handle undefined children', () => {
      const mockSubmit = vi.fn();

      render(<AuthForm onSubmit={mockSubmit}>{undefined}</AuthForm>);
      // Component should render without errors
    });

    it('should handle nested form elements', () => {
      const mockSubmit = vi.fn();

      render(
        <AuthForm onSubmit={mockSubmit}>
          <div>
            <input type="email" placeholder="Email" />
          </div>
        </AuthForm>
      );

      expect(screen.getByPlaceholderText('Email')).toBeInTheDocument();
    });

    it('should handle complex form structure', () => {
      const mockSubmit = vi.fn();

      render(
        <AuthForm onSubmit={mockSubmit}>
          <fieldset>
            <legend>Credentials</legend>
            <input type="email" placeholder="Email" />
            <input type="password" placeholder="Password" />
          </fieldset>
          <button type="submit">Submit</button>
        </AuthForm>
      );

      expect(screen.getByText('Credentials')).toBeInTheDocument();
      expect(screen.getByPlaceholderText('Email')).toBeInTheDocument();
      expect(screen.getByPlaceholderText('Password')).toBeInTheDocument();
      expect(screen.getByText('Submit')).toBeInTheDocument();
    });

    it('should handle multiple form submissions', () => {
      const mockSubmit = vi.fn();

      render(
        <AuthForm onSubmit={mockSubmit}>
          <input type="email" placeholder="Email" />
          <button type="submit">Submit</button>
        </AuthForm>
      );

      const form = screen.getByRole('form');
      
      fireEvent.submit(form);
      fireEvent.submit(form);
      fireEvent.submit(form);

      expect(mockSubmit).toHaveBeenCalledTimes(3);
    });
  });
});