add tests

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

@@ -0,0 +1,224 @@
+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);
+    });
+  });
+});