@jmruthers/pace-core 0.2.7 → 0.5.1

package/src/components/Form/__tests__/Form.accessibility.test.tsx

@@ -1,820 +0,0 @@
-/**
- * @file Form Accessibility Tests
- * @package @jmruthers/pace-core
- * @module Form
- * @since 0.1.0
- */
-
-import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
-import { edgeCaseUtils } from '../../__tests__/EdgeCaseTesting.enhanced.test';
-import { errorTestingUtils, TestErrorBoundary } from '../../__tests__/ErrorTesting.enhanced.test';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect, beforeAll, afterAll, vi } from 'vitest';
-import { renderWithProviders } from '../../../__tests__/shared';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { z } from 'zod';
-import { Form, FormField, FormErrorSummary, FormLiveRegion, FormFieldset } from '../index';
-
-// Extend expect to include axe matchers
-expect.extend(toHaveNoViolations);
-
-// Mock console.error to reduce noise in tests
-const originalError = console.error;
-beforeAll(() => {
-  console.error = (...args: any[]) => {
-    if (
-      typeof args[0] === 'string' &&
-      args[0].includes('Warning: ReactDOM.render is no longer supported')
-    ) {
-      return;
-    }
-    originalError.call(console, ...args);
-  };
-});
-
-afterAll(() => {
-  console.error = originalError;
-});
-
-describe('Form Accessibility', () => {
-  const user = userEvent.setup();
-
-  describe('Form Component', () => {
-    it('should have no accessibility violations', async () => {
-      const schema = z.object({
-        name: z.string().min(1, 'Name is required'),
-        email: z.string().email('Invalid email'),
-      });
-
-      const { container } = renderWithProviders(
-        <Form
-          schema={schema}
-          onSubmit={() => {}}
-          defaultValues={{ name: '', email: '' }}
-        >
-          <FormField name="name" label="Name" validation={{ required: true }} />
-          <FormField name="email" label="Email" type="email" validation={{ required: true }} />
-          <button type="submit">Submit</button>
-        </Form>
-      );
-
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    });
-
-    it('should have proper form element', () => {
-      const { container } = renderWithProviders(
-        <Form onSubmit={() => {}}>
-          <FormField name="test" label="Test" />
-          <button type="submit">Submit</button>
-        </Form>
-      );
-
-      const form = container.querySelector('form');
-      expect(form).toBeInTheDocument();
-      // Note: HTML form elements don't need explicit role="form" as it's implicit
-    });
-
-    it('should handle keyboard navigation properly', async () => {
-      const handleSubmit = vi.fn();
-      
-      renderWithProviders(
-        <Form onSubmit={handleSubmit}>
-          <FormField name="name" label="Name" />
-          <FormField name="email" label="Email" type="email" />
-          <button type="submit">Submit</button>
-        </Form>
-      );
-
-      const nameInput = screen.getByLabelText('Name');
-      const emailInput = screen.getByLabelText('Email');
-      const submitButton = screen.getByRole('button', { name: 'Submit' });
-
-      // Tab navigation
-      await user.tab();
-      expect(nameInput).toHaveFocus();
-
-      await user.tab();
-      expect(emailInput).toHaveFocus();
-
-      await user.tab();
-      expect(submitButton).toHaveFocus();
-    });
-
-    it('should be accessible for screen readers', async () => {
-      const handleSubmit = vi.fn();
-      
-      const { container } = renderWithProviders(
-        <Form onSubmit={handleSubmit}>
-          <FormField name="name" label="Name" />
-          <button type="submit">Submit</button>
-        </Form>
-      );
-
-      const form = container.querySelector('form');
-      expect(form).toBeInTheDocument();
-    });
-  });
-
-  describe('FormField Component', () => {
-    it('should have proper label-input association', () => {
-      renderWithProviders(
-        <Form onSubmit={() => {}}>
-          <FormField name="test" label="Test Field" />
-        </Form>
-      );
-
-      const label = screen.getByText('Test Field');
-      const input = screen.getByLabelText('Test Field');
-
-      expect(label).toBeInTheDocument();
-      expect(input).toBeInTheDocument();
-      expect(input).toHaveAttribute('id', 'test');
-      expect(label).toHaveAttribute('for', 'test');
-    });
-
-    it('should indicate required fields with asterisk and aria-label', () => {
-      renderWithProviders(
-        <Form onSubmit={() => {}}>
-          <FormField 
-            name="required" 
-            label="Required Field" 
-            validation={{ required: true }} 
-          />
-        </Form>
-      );
-
-      const requiredIndicator = screen.getByText('*');
-      expect(requiredIndicator).toBeInTheDocument();
-      expect(requiredIndicator).toHaveAttribute('aria-label', 'required');
-      expect(requiredIndicator).toHaveClass('text-destructive');
-    });
-
-    it('should display error messages with proper ARIA attributes', async () => {
-      const schema = z.object({
-        test: z.string().min(1, 'Required'),
-      });
-
-      renderWithProviders(
-        <Form schema={schema} onSubmit={() => {}}>
-          <FormField name="test" label="Test Field" />
-          <button type="submit">Submit</button>
-        </Form>
-      );
-
-      const submitButton = screen.getByRole('button', { name: 'Submit' });
-      await user.click(submitButton);
-
-      await waitFor(() => {
-        const errorMessage = screen.getByText('Required');
-        expect(errorMessage).toBeInTheDocument();
-        expect(errorMessage).toHaveAttribute('role', 'alert');
-      });
-    });
-
-    it('should apply error styling to inputs with validation errors', async () => {
-      const schema = z.object({
-        test: z.string().min(1, 'This field is required'),
-      });
-
-      renderWithProviders(
-        <Form schema={schema} onSubmit={() => {}}>
-          <FormField name="test" label="Test Field" />
-          <button type="submit">Submit</button>
-        </Form>
-      );
-
-      const submitButton = screen.getByRole('button', { name: 'Submit' });
-      await user.click(submitButton);
-
-      await waitFor(() => {
-        const input = screen.getByLabelText('Test Field');
-        expect(input).toHaveClass('border-destructive');
-        expect(input).toHaveClass('focus-visible:ring-destructive');
-      });
-    });
-
-    it('should support custom input types with proper accessibility', () => {
-      renderWithProviders(
-        <Form onSubmit={() => {}}>
-          <FormField name="email" label="Email" type="email" />
-          <FormField name="password" label="Password" type="password" />
-          <FormField name="number" label="Age" type="number" />
-        </Form>
-      );
-
-      const emailInput = screen.getByLabelText('Email');
-      const passwordInput = screen.getByLabelText('Password');
-      const numberInput = screen.getByLabelText('Age');
-
-      expect(emailInput).toHaveAttribute('type', 'email');
-      expect(passwordInput).toHaveAttribute('type', 'password');
-      expect(numberInput).toHaveAttribute('type', 'number');
-    });
-
-    it('should support placeholder text for better UX', () => {
-      renderWithProviders(
-        <Form onSubmit={() => {}}>
-          <FormField 
-            name="search" 
-            label="Search" 
-            placeholder="Enter search term..." 
-          />
-        </Form>
-      );
-
-      const input = screen.getByPlaceholderText('Enter search term...');
-      expect(input).toBeInTheDocument();
-    });
-
-    it('should support disabled state with proper accessibility', () => {
-      renderWithProviders(
-        <Form onSubmit={() => {}}>
-          <FormField 
-            name="disabled" 
-            label="Disabled Field" 
-            inputProps={{ disabled: true }} 
-          />
-        </Form>
-      );
-
-      const input = screen.getByLabelText('Disabled Field');
-      expect(input).toBeDisabled();
-      expect(input).toHaveClass('disabled:cursor-not-allowed');
-      expect(input).toHaveClass('disabled:opacity-50');
-    });
-  });
-
-  describe('FormErrorSummary Component', () => {
-    it('should have no accessibility violations', async () => {
-      const errors = {
-        name: { message: 'Name is required' },
-        email: { message: 'Invalid email format' },
-      };
-
-      const { container } = renderWithProviders(
-        <FormErrorSummary errors={errors} />
-      );
-
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    });
-
-    it('should render error list with proper ARIA attributes', () => {
-      const errors = {
-        name: { message: 'Name is required' },
-        email: { message: 'Invalid email format' },
-      };
-
-      renderWithProviders(<FormErrorSummary errors={errors} />);
-
-      const alert = screen.getByRole('alert');
-      expect(alert).toBeInTheDocument();
-
-      const list = screen.getByRole('list');
-      expect(list).toBeInTheDocument();
-
-      const listItems = screen.getAllByRole('listitem');
-      expect(listItems).toHaveLength(2);
-    });
-
-    it('should not render when no errors are present', () => {
-      const { container } = renderWithProviders(<FormErrorSummary errors={{}} />);
-      // Check that the FormErrorSummary component itself doesn't render content
-      const errorSummary = container.querySelector('[data-testid="form-error-summary"]');
-      expect(errorSummary).toBeNull();
-    });
-
-    it('should support custom title with proper heading structure', () => {
-      const errors = { name: { message: 'Name is required' } };
-
-      renderWithProviders(
-        <FormErrorSummary 
-          errors={errors} 
-          title="Please correct the following issues:" 
-        />
-      );
-
-      const heading = screen.getByRole('heading', { level: 3 });
-      expect(heading).toHaveTextContent('Please correct the following issues:');
-    });
-
-    it('should show field names when requested', () => {
-      const errors = {
-        name: { message: 'Name is required' },
-        email: { message: 'Invalid email format' },
-      };
-
-      renderWithProviders(<FormErrorSummary errors={errors} showFieldNames />);
-
-      expect(screen.getByText('name: Name is required')).toBeInTheDocument();
-      expect(screen.getByText('email: Invalid email format')).toBeInTheDocument();
-    });
-  });
-
-  describe('FormLiveRegion Component', () => {
-    it('should have no accessibility violations when rendered', async () => {
-      const mockForm = {
-        formState: {
-          isSubmitting: true,
-          isSubmitSuccessful: false,
-          errors: {},
-          isValid: false,
-          isDirty: false,
-          touchedFields: {},
-        },
-      } as any;
-
-      const { container } = renderWithProviders(
-        <FormLiveRegion form={mockForm} />
-      );
-
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    });
-
-    it('should render live region with proper ARIA attributes when there is a message', () => {
-      const mockForm = {
-        formState: {
-          isSubmitting: true,
-          isSubmitSuccessful: false,
-          errors: {},
-          isValid: false,
-          isDirty: false,
-          touchedFields: {},
-        },
-      } as any;
-
-      renderWithProviders(<FormLiveRegion form={mockForm} />);
-
-      const liveRegion = screen.getByRole('status');
-      expect(liveRegion).toHaveAttribute('aria-live', 'polite');
-      expect(liveRegion).toHaveAttribute('aria-atomic', 'true');
-    });
-
-    it('should support assertive politeness level', () => {
-      const mockForm = {
-        formState: {
-          isSubmitting: true,
-          isSubmitSuccessful: false,
-          errors: {},
-          isValid: false,
-          isDirty: false,
-          touchedFields: {},
-        },
-      } as any;
-
-      renderWithProviders(<FormLiveRegion form={mockForm} politeness="assertive" />);
-
-      const liveRegion = screen.getByRole('status');
-      expect(liveRegion).toHaveAttribute('aria-live', 'assertive');
-    });
-
-    it('should be positioned off-screen for screen readers', () => {
-      const mockForm = {
-        formState: {
-          isSubmitting: true,
-          isSubmitSuccessful: false,
-          errors: {},
-          isValid: false,
-          isDirty: false,
-          touchedFields: {},
-        },
-      } as any;
-
-      renderWithProviders(<FormLiveRegion form={mockForm} />);
-
-      const liveRegion = screen.getByRole('status');
-      expect(liveRegion).toHaveStyle({
-        position: 'absolute',
-        left: '-10000px',
-        width: '1px',
-        height: '1px',
-        overflow: 'hidden',
-      });
-    });
-
-    it('should not render when no message is present', () => {
-      const mockForm = {
-        formState: {
-          isSubmitting: false,
-          isSubmitSuccessful: false,
-          errors: {},
-          isValid: false,
-          isDirty: false,
-          touchedFields: {},
-        },
-      } as any;
-
-      const { container } = renderWithProviders(<FormLiveRegion form={mockForm} />);
-      // Check that the FormLiveRegion component itself doesn't render content
-      const liveRegion = container.querySelector('[data-testid="form-live-region"]');
-      expect(liveRegion).toBeNull();
-    });
-  });
-
-  describe('FormFieldset Component', () => {
-    it('should have no accessibility violations', async () => {
-      const { container } = renderWithProviders(
-        <Form onSubmit={() => {}}>
-          <FormFieldset legend="Personal Information">
-            <FormField name="name" label="Name" />
-            <FormField name="email" label="Email" />
-          </FormFieldset>
-        </Form>
-      );
-
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    });
-
-    it('should render fieldset with proper legend', () => {
-      renderWithProviders(
-        <Form onSubmit={() => {}}>
-          <FormFieldset legend="Personal Information">
-            <FormField name="name" label="Name" />
-          </FormFieldset>
-        </Form>
-      );
-
-      const fieldset = screen.getByRole('group');
-      expect(fieldset).toBeInTheDocument();
-
-      const legend = screen.getByText('Personal Information');
-      expect(legend).toBeInTheDocument();
-    });
-
-    it('should indicate required fieldsets with asterisk', () => {
-      renderWithProviders(
-        <Form onSubmit={() => {}}>
-          <FormFieldset legend="Personal Information" required>
-            <FormField name="name" label="Name" />
-          </FormFieldset>
-        </Form>
-      );
-
-      const requiredIndicator = screen.getByText('*');
-      expect(requiredIndicator).toBeInTheDocument();
-      expect(requiredIndicator).toHaveClass('text-destructive');
-    });
-
-    it('should support description with proper ARIA association', () => {
-      renderWithProviders(
-        <Form onSubmit={() => {}}>
-          <FormFieldset 
-            legend="Personal Information" 
-            description="Please provide your contact details"
-          >
-            <FormField name="name" label="Name" />
-          </FormFieldset>
-        </Form>
-      );
-
-      const fieldset = screen.getByRole('group');
-      const description = screen.getByText('Please provide your contact details');
-
-      expect(description).toBeInTheDocument();
-      expect(fieldset).toHaveAttribute('aria-describedby', description.id);
-    });
-
-    it('should support custom className and props', () => {
-      renderWithProviders(
-        <Form onSubmit={() => {}}>
-          <FormFieldset 
-            legend="Test" 
-            className="custom-class"
-            data-testid="test-fieldset"
-          >
-            <FormField name="name" label="Name" />
-          </FormFieldset>
-        </Form>
-      );
-
-      const fieldset = screen.getByTestId('test-fieldset');
-      expect(fieldset).toHaveClass('custom-class');
-      expect(fieldset).toHaveClass('space-y-4');
-      expect(fieldset).toHaveClass('border');
-      expect(fieldset).toHaveClass('border-input');
-      expect(fieldset).toHaveClass('rounded-lg');
-      expect(fieldset).toHaveClass('p-4');
-    });
-  });
-
-  describe('Form Integration Accessibility', () => {
-    it('should handle complex form validation with proper accessibility', async () => {
-      const schema = z.object({
-        name: z.string().min(1, 'Required'),
-        email: z.string().email('Invalid email format'),
-        age: z.number().min(18, 'Must be at least 18 years old'),
-      });
-
-      const handleSubmit = vi.fn();
-
-      renderWithProviders(
-        <Form schema={schema} onSubmit={handleSubmit}>
-          <FormFieldset legend="Personal Information" required>
-            <FormField name="name" label="Full Name" validation={{ required: true }} />
-            <FormField name="email" label="Email Address" type="email" validation={{ required: true }} />
-            <FormField name="age" label="Age" type="number" validation={{ required: true }} />
-          </FormFieldset>
-          <button type="submit">Submit</button>
-        </Form>
-      );
-
-      const submitButton = screen.getByRole('button', { name: 'Submit' });
-      await user.click(submitButton);
-
-      // 1. All fields empty: expect 3 'Required' errors
-      await waitFor(() => {
-        const requiredErrors = screen.getAllByText('Required');
-        expect(requiredErrors).toHaveLength(3);
-        requiredErrors.forEach((el) => {
-          expect(el).toHaveAttribute('role', 'alert');
-        });
-      });
-
-      // 2. Fill in invalid values for email and age, submit again
-      const emailInput = screen.getByRole('textbox', { name: /email/i });
-      const ageInput = screen.getByRole('spinbutton', { name: /age/i });
-      await user.clear(emailInput);
-      await user.type(emailInput, 'not-an-email');
-      await user.clear(ageInput);
-      await user.type(ageInput, '10');
-      await user.click(submitButton);
-
-      await waitFor(() => {
-        expect(screen.getByText('Invalid email format')).toBeInTheDocument();
-        expect(screen.getByText('Expected number, received string')).toBeInTheDocument();
-      });
-
-      // Check that error messages have proper ARIA attributes
-      const errorMessages = screen.getAllByRole('alert');
-      expect(errorMessages.length).toBeGreaterThan(0);
-    });
-
-    it('should support keyboard-only navigation', async () => {
-      renderWithProviders(
-        <Form onSubmit={() => {}}>
-          <FormFieldset legend="Contact Information">
-            <FormField name="name" label="Name" />
-            <FormField name="email" label="Email" type="email" />
-          </FormFieldset>
-          <button type="submit">Submit</button>
-        </Form>
-      );
-
-      const nameInput = screen.getByLabelText('Name');
-      const emailInput = screen.getByLabelText('Email');
-      const submitButton = screen.getByRole('button', { name: 'Submit' });
-
-      // Test tab navigation
-      await user.tab();
-      expect(nameInput).toHaveFocus();
-
-      await user.tab();
-      expect(emailInput).toHaveFocus();
-
-      await user.tab();
-      expect(submitButton).toHaveFocus();
-
-      // Test shift+tab for reverse navigation
-      await user.tab({ shift: true });
-      expect(emailInput).toHaveFocus();
-    });
-
-    it('should announce form state changes to screen readers', async () => {
-      const schema = z.object({
-        name: z.string().min(1, 'Name is required'),
-      });
-
-      const mockForm = {
-        formState: {
-          isSubmitting: true,
-          isSubmitSuccessful: false,
-          errors: {},
-          isValid: false,
-          isDirty: false,
-          touchedFields: {},
-        },
-      } as any;
-
-      renderWithProviders(
-        <Form schema={schema} onSubmit={() => {}}>
-          <FormLiveRegion form={mockForm} />
-          <FormField name="name" label="Name" />
-          <button type="submit">Submit</button>
-        </Form>
-      );
-
-      const liveRegion = screen.getByRole('status');
-      expect(liveRegion).toBeInTheDocument();
-    });
-  });
-describe('Form Error Handling', () => {
-  const user = userEvent.setup();
-  let restoreConsole: (() => void) | null = null;
-
-  beforeEach(() => {
-    restoreConsole = errorTestingUtils.suppressConsoleErrors();
-  });
-
-  afterEach(() => {
-    if (restoreConsole) {
-      restoreConsole();
-    }
-  });
-
-  it('should handle component errors gracefully', () => {
-    const ErrorComponent = () => {
-      throw new Error('Form component error');
-    };
-
-    renderWithProviders(
-      <TestErrorBoundary>
-        <ErrorComponent />
-      </TestErrorBoundary>
-    );
-
-    expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
-    expect(screen.getByText('Error: Form component error')).toBeInTheDocument();
-  });
-
-  it('should handle async errors', async () => {
-    const AsyncErrorComponent = ({ shouldFail }: { shouldFail: boolean }) => {
-      const [error, setError] = React.useState<Error | null>(null);
-
-      React.useEffect(() => {
-        if (shouldFail) {
-          setError(new Error('Async error'));
-        }
-      }, [shouldFail]);
-
-      if (error) {
-        throw error;
-      }
-
-      return <div>Async component</div>;
-    };
-
-    renderWithProviders(
-      <TestErrorBoundary>
-        <AsyncErrorComponent shouldFail={true} />
-      </TestErrorBoundary>
-    );
-
-    await waitFor(() => {
-      expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
-    });
-  });
-
-  it('should handle user interaction errors', async () => {
-    const ErrorComponent = errorTestingUtils.createErrorThrowingComponent(
-      'Form interaction error',
-      'click'
-    );
-
-    renderWithProviders(
-      <TestErrorBoundary>
-        <ErrorComponent />
-      </TestErrorBoundary>
-    );
-
-    await user.click(screen.getByTestId('error-button'));
-
-    await waitFor(() => {
-      expect(screen.getByTestId('error-display')).toBeInTheDocument();
-    });
-  });
-
-  it('should recover from errors when props change', async () => {
-    const TestComponent = ({ shouldError }: { shouldError: boolean }) => {
-      if (shouldError) {
-        throw new Error('Form prop error');
-      }
-      return <div>Normal content</div>;
-    };
-
-    await errorTestingUtils.testErrorRecovery(
-      TestComponent,
-      { shouldError: true },
-      { shouldError: false }
-    );
-
-    expect(screen.getByText('Normal content')).toBeInTheDocument();
-  });
-});
-describe('Form Edge Cases', () => {
-  describe('Extreme Data Values', () => {
-    it('should handle very long strings', () => {
-      const longString = edgeCaseUtils.generateExtremeData.longString(1000);
-      
-      const { container } = renderWithProviders(<Form>{longString}</Form>);
-      expect(container.querySelector('form')).toBeInTheDocument();
-    });
-
-    it('should handle empty and null values', () => {
-      const emptyValues = edgeCaseUtils.generateExtremeData.emptyValues();
-      
-      emptyValues.forEach(value => {
-        const { container, unmount } = renderWithProviders(<Form>{value as any}</Form>);
-        expect(container.querySelector('form')).toBeInTheDocument();
-        unmount();
-      });
-    });
-
-    it('should handle special characters', () => {
-      const specialChars = edgeCaseUtils.generateExtremeData.specialChars();
-      
-      const { container } = renderWithProviders(<Form>{specialChars}</Form>);
-      expect(container.querySelector('form')).toBeInTheDocument();
-    });
-
-    it('should handle unicode characters', () => {
-      const unicodeChars = edgeCaseUtils.generateExtremeData.unicodeChars();
-      
-      const { container } = renderWithProviders(<Form>{unicodeChars}</Form>);
-      expect(container.querySelector('form')).toBeInTheDocument();
-    });
-  });
-
-  describe('Extreme Numbers', () => {
-    it('should handle very large numbers', () => {
-      const largeNumbers = edgeCaseUtils.generateExtremeData.largeNumbers();
-      
-      largeNumbers.forEach(number => {
-        const { container, unmount } = renderWithProviders(<Form value={number} />);
-        expect(container.querySelector('form')).toBeInTheDocument();
-        unmount();
-      });
-    });
-
-    it('should handle very small numbers', () => {
-      const smallNumbers = edgeCaseUtils.generateExtremeData.smallNumbers();
-      
-      smallNumbers.forEach(number => {
-        const { container, unmount } = renderWithProviders(<Form value={number} />);
-        expect(container.querySelector('form')).toBeInTheDocument();
-        unmount();
-      });
-    });
-  });
-
-  describe('Rapid State Changes', () => {
-    it('should handle rapid prop changes', async () => {
-      const stateProps = [
-        { children: 'State 1' },
-        { children: 'State 2' },
-        { children: 'State 3' },
-        { children: 'State 4' },
-        { children: 'State 5' },
-      ];
-
-      await edgeCaseUtils.testRapidStateChanges(Form, stateProps);
-    });
-
-    it('should handle rapid user interactions', async () => {
-      const { container } = renderWithProviders(<Form />);
-      
-      // Form should render successfully
-      expect(container.querySelector('form')).toBeInTheDocument();
-    });
-  });
-
-  describe('Memory Management', () => {
-    it('should not leak memory with repeated renders', () => {
-      edgeCaseUtils.testMemoryLeaks(Form, { children: 'Memory test' });
-    });
-  });
-
-  describe('Boundary Conditions', () => {
-    it('should handle boundary prop values', () => {
-      const boundaryProps = [
-        { children: '' },
-        { children: 0 },
-        { children: false },
-        { children: [] },{ className: '' },
-        { 'data-testid': '' },
-      ];
-
-      edgeCaseUtils.testBoundaryConditions(Form, boundaryProps);
-    });
-  });
-
-  describe('Complex Data Structures', () => {
-    it('should handle deeply nested objects', () => {
-      const deepObject = edgeCaseUtils.generateExtremeData.deepObject(5);
-      
-      const { container } = renderWithProviders(<Form data={deepObject} />);
-      expect(container.querySelector('form')).toBeInTheDocument();
-    });
-
-    it('should handle large arrays', () => {
-      const largeArray = edgeCaseUtils.generateExtremeData.largeArray(1000);
-      
-      const { container } = renderWithProviders(<Form items={largeArray} />);
-      expect(container.querySelector('form')).toBeInTheDocument();
-    });
-  });
-});
-});