@jmruthers/pace-core 0.2.7 → 0.5.1

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

@@ -1,463 +0,0 @@
-import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { MemoryRouter } from 'react-router-dom';
-import { vi } from 'vitest';
-import '@testing-library/jest-dom';
-import { UnifiedAuthProvider } from '../../../providers/UnifiedAuthProvider';
-import { PaceLoginPage } from '../PaceLoginPage';
-import { renderWithProviders, createMockSupabaseClient } from '../../../__tests__/shared';
-
-// Extend expect to include axe matchers
-expect.extend(toHaveNoViolations);
-
-// Mock Supabase client
-const mockSupabaseClient = createMockSupabaseClient();
-
-vi.mock('@supabase/supabase-js', () => ({
-  createClient: vi.fn(() => mockSupabaseClient),
-}));
-
-const TestWrapper: React.FC<{ children: React.ReactNode; appName?: string }> = ({ 
-  children, 
-  appName = "Test App" 
-}) => (
-  <MemoryRouter>
-    <UnifiedAuthProvider appName={appName} supabaseClient={mockSupabaseClient as any}>
-      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100vh', gap: '2rem' }}>
-        <h1>{appName}</h1>
-        <div style={{ width: '400px' }}>
-          {children}
-        </div>
-      </div>
-    </UnifiedAuthProvider>
-  </MemoryRouter>
-);
-
-describe('PaceLoginPage Accessibility', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    
-    mockSupabaseClient.auth.signInWithPassword.mockResolvedValue({
-      data: { user: null, session: null },
-      error: null,
-    });
-    // Ensure from method returns a proper query builder
-    mockSupabaseClient.from.mockReturnValue({
-      select: vi.fn().mockReturnThis(),
-      eq: vi.fn().mockReturnThis(),
-      single: vi.fn().mockResolvedValue({ data: null, error: null }),
-      insert: vi.fn().mockReturnThis(),
-      update: vi.fn().mockReturnThis(),
-      delete: vi.fn().mockReturnThis(),
-    });
-    // Ensure rpc method returns proper structure
-    mockSupabaseClient.rpc.mockResolvedValue({ data: null, error: null });
-  });
-
-  describe('WCAG Compliance', () => {
-    it('should meet WCAG 2.1 AA standards', async () => {
-      const { container } = renderWithProviders(
-        <TestWrapper appName="WCAG App">
-          <PaceLoginPage appName="WCAG App" />
-        </TestWrapper>
-      );
-
-      const results = await axe(container, {
-        rules: {
-          'heading-order': { enabled: false }, // Disable for demo app structure
-          'landmark-main-is-top-level': { enabled: false }, // Disable for test wrapper structure
-          'landmark-no-duplicate-main': { enabled: false }, // Disable for test wrapper structure
-        },
-      });
-      expect(results).toHaveNoViolations();
-    });
-
-    it('should have proper color contrast ratios', async () => {
-      const { container } = renderWithProviders(
-        <TestWrapper appName="Contrast App">
-          <PaceLoginPage appName="Contrast App" />
-        </TestWrapper>
-      );
-
-      const results = await axe(container, {
-        rules: {
-          'heading-order': { enabled: false }, // Disable for demo app structure
-          'landmark-main-is-top-level': { enabled: false }, // Disable for test wrapper structure
-          'landmark-no-duplicate-main': { enabled: false }, // Disable for test wrapper structure
-          'color-contrast': { enabled: true },
-        },
-      });
-      expect(results).toHaveNoViolations();
-    });
-
-    it('should have proper form structure and labels', async () => {
-      renderWithProviders(
-        <TestWrapper appName="Form Structure App">
-          <PaceLoginPage appName="Form Structure App" />
-        </TestWrapper>
-      );
-
-      // Check for form element using test ID
-      const form = screen.getByTestId('login-form');
-      expect(form).toBeInTheDocument();
-
-      // Check for proper labels
-      const emailLabel = screen.getByText('Email');
-      const passwordLabel = screen.getByText('Password');
-      expect(emailLabel).toBeInTheDocument();
-      expect(passwordLabel).toBeInTheDocument();
-
-      // Check label associations
-      const emailInput = screen.getByPlaceholderText('Enter your email');
-      const passwordInput = screen.getByPlaceholderText('Enter your password');
-      expect(emailInput).toHaveAttribute('id', 'email');
-      expect(passwordInput).toHaveAttribute('id', 'password');
-      expect(emailLabel).toHaveAttribute('for', 'email');
-      expect(passwordLabel).toHaveAttribute('for', 'password');
-    });
-  });
-
-  describe('Keyboard Navigation', () => {
-    it('should support tab navigation in logical order', async () => {
-      const user = userEvent.setup();
-      
-      renderWithProviders(
-        <TestWrapper appName="Keyboard Navigation App">
-          <PaceLoginPage appName="Keyboard Navigation App" />
-        </TestWrapper>
-      );
-
-      const emailInput = screen.getByPlaceholderText('Enter your email');
-      const passwordInput = screen.getByPlaceholderText('Enter your password');
-      const signInButton = screen.getByRole('button', { name: /sign in/i });
-
-      // Start with email input focused
-      emailInput.focus();
-      expect(emailInput).toHaveFocus();
-
-      // Tab to password input
-      await user.tab();
-      expect(passwordInput).toHaveFocus();
-
-      // Tab to sign in button (but it's disabled, so focus may not work)
-      await user.tab();
-      // Note: Disabled buttons are not focusable, so we just verify the button exists
-      expect(signInButton).toBeInTheDocument();
-
-      // Tab should cycle back to email input
-      await user.tab();
-      expect(emailInput).toHaveFocus();
-    });
-
-    it('should handle reverse keyboard navigation elements', async () => {
-      const user = userEvent.setup();
-      
-      renderWithProviders(
-        <TestWrapper appName="Reverse Navigation App">
-          <PaceLoginPage appName="Reverse Navigation App" />
-        </TestWrapper>
-      );
-
-      const emailInput = screen.getByPlaceholderText('Enter your email');
-      const passwordInput = screen.getByPlaceholderText('Enter your password');
-      const signInButton = screen.getByRole('button', { name: /sign in/i });
-
-      // Test that all elements are present and can be focused
-      emailInput.focus();
-      expect(emailInput).toHaveFocus();
-
-      passwordInput.focus();
-      expect(passwordInput).toHaveFocus();
-
-      // Test that shift+tab keyboard events don't cause errors
-      await user.keyboard('{Shift>}{Tab}{/Shift}');
-      
-      // Test that elements remain accessible and focusable
-      expect(emailInput).toBeInTheDocument();
-      expect(passwordInput).toBeInTheDocument();
-      expect(signInButton).toBeInTheDocument();
-      
-      // Verify we can still focus elements manually
-      emailInput.focus();
-      expect(emailInput).toHaveFocus();
-    });
-
-    it('should support enter key for form submission', async () => {
-      const user = userEvent.setup();
-      
-      renderWithProviders(
-        <TestWrapper appName="Enter Key App">
-          <PaceLoginPage appName="Enter Key App" />
-        </TestWrapper>
-      );
-
-      const emailInput = screen.getByPlaceholderText('Enter your email');
-      const passwordInput = screen.getByPlaceholderText('Enter your password');
-
-      // Fill out the form
-      await user.type(emailInput, 'test@example.com');
-      await user.type(passwordInput, 'password123');
-
-      // Press enter on password input should submit the form
-      await user.keyboard('{Enter}');
-
-      await waitFor(() => {
-        expect(mockSupabaseClient.auth.signInWithPassword).toHaveBeenCalled();
-      });
-    });
-  });
-
-  describe('Screen Reader Support', () => {
-    it('should have proper ARIA labels and descriptions', () => {
-      renderWithProviders(
-        <TestWrapper appName="ARIA App">
-          <PaceLoginPage appName="ARIA App" />
-        </TestWrapper>
-      );
-
-      // Check for proper heading structure
-      const heading = screen.getByRole('heading', { level: 3 });
-      expect(heading).toBeInTheDocument();
-      expect(heading).toHaveTextContent('Sign in to ARIA App');
-
-      // Check for descriptive text
-      const description = screen.getByText('Enter your credentials to continue.');
-      expect(description).toBeInTheDocument();
-
-      // Check input labels
-      const emailInput = screen.getByLabelText('Email');
-      const passwordInput = screen.getByLabelText('Password');
-      expect(emailInput).toBeInTheDocument();
-      expect(passwordInput).toBeInTheDocument();
-    });
-
-    it('should announce loading state to screen readers', async () => {
-      const user = userEvent.setup();
-      
-      // Mock a slow sign-in response
-      mockSupabaseClient.auth.signInWithPassword.mockImplementation(() => 
-        new Promise(resolve => {
-          setTimeout(() => {
-            resolve({ data: { user: null, session: null }, error: null });
-          }, 100);
-        })
-      );
-
-      renderWithProviders(
-        <TestWrapper appName="Loading Announcement App">
-          <PaceLoginPage appName="Loading Announcement App" />
-        </TestWrapper>
-      );
-
-      const emailInput = screen.getByPlaceholderText('Enter your email');
-      const passwordInput = screen.getByPlaceholderText('Enter your password');
-      const signInButton = screen.getByRole('button', { name: /sign in/i });
-
-      // Fill out the form
-      await user.type(emailInput, 'test@example.com');
-      await user.type(passwordInput, 'password123');
-      await user.click(signInButton);
-
-      // Check that sign-in was called
-      await waitFor(() => {
-        expect(mockSupabaseClient.auth.signInWithPassword).toHaveBeenCalled();
-      });
-
-      // Button should remain present
-      expect(signInButton).toBeInTheDocument();
-    });
-
-    it('should announce error messages to screen readers', async () => {
-      const user = userEvent.setup();
-      
-      // Mock an error response
-      mockSupabaseClient.auth.signInWithPassword.mockResolvedValue({
-        data: { user: null, session: null },
-        error: { message: 'Invalid credentials' },
-      });
-
-      renderWithProviders(
-        <TestWrapper appName="Error Announcement App">
-          <PaceLoginPage appName="Error Announcement App" />
-        </TestWrapper>
-      );
-
-      const emailInput = screen.getByPlaceholderText('Enter your email');
-      const passwordInput = screen.getByPlaceholderText('Enter your password');
-      const signInButton = screen.getByRole('button', { name: /sign in/i });
-
-      // Fill out the form and submit
-      await user.type(emailInput, 'test@example.com');
-      await user.type(passwordInput, 'wrongpassword');
-      await user.click(signInButton);
-
-      // Error should be announced
-      await waitFor(() => {
-        expect(mockSupabaseClient.auth.signInWithPassword).toHaveBeenCalled();
-      });
-    });
-  });
-
-  describe('Focus Management', () => {
-    it('should maintain focus within the form', async () => {
-      const user = userEvent.setup();
-      
-      renderWithProviders(
-        <TestWrapper appName="Focus Management App">
-          <PaceLoginPage appName="Focus Management App" />
-        </TestWrapper>
-      );
-
-      const emailInput = screen.getByPlaceholderText('Enter your email');
-      const passwordInput = screen.getByPlaceholderText('Enter your password');
-      const signInButton = screen.getByRole('button', { name: /sign in/i });
-
-      // Start with email input
-      emailInput.focus();
-      expect(emailInput).toHaveFocus();
-
-      // Tab through form elements
-      await user.tab();
-      expect(passwordInput).toHaveFocus();
-
-      await user.tab();
-      // Note: Disabled button may not be focusable
-      expect(signInButton).toBeInTheDocument();
-
-      // Tab again should cycle back to email input
-      await user.tab();
-      expect(emailInput).toHaveFocus();
-    });
-
-    it('should restore focus after error dismissal', async () => {
-      const user = userEvent.setup();
-      
-      // Mock an error response
-      mockSupabaseClient.auth.signInWithPassword.mockResolvedValue({
-        data: { user: null, session: null },
-        error: { message: 'Invalid credentials' },
-      });
-
-      renderWithProviders(
-        <TestWrapper appName="Focus Restoration App">
-          <PaceLoginPage appName="Focus Restoration App" />
-        </TestWrapper>
-      );
-
-      const emailInput = screen.getByPlaceholderText('Enter your email');
-      const passwordInput = screen.getByPlaceholderText('Enter your password');
-      const signInButton = screen.getByRole('button', { name: /sign in/i });
-
-      // Fill out the form and submit
-      await user.type(emailInput, 'test@example.com');
-      await user.type(passwordInput, 'wrongpassword');
-      await user.click(signInButton);
-
-      // Wait for error to be processed
-      await waitFor(() => {
-        expect(mockSupabaseClient.auth.signInWithPassword).toHaveBeenCalled();
-      });
-
-      // Focus should be maintained on the form
-      expect(emailInput).toBeInTheDocument();
-      expect(passwordInput).toBeInTheDocument();
-      expect(signInButton).toBeInTheDocument();
-    });
-  });
-
-  describe('Responsive Design Accessibility', () => {
-    it('should be accessible on different screen sizes', async () => {
-      // Set mobile viewport
-      Object.defineProperty(window, 'innerWidth', {
-        writable: true,
-        configurable: true,
-        value: 375,
-      });
-
-      const { container } = renderWithProviders(
-        <TestWrapper appName="Mobile Accessibility App">
-          <PaceLoginPage appName="Mobile Accessibility App" />
-        </TestWrapper>
-      );
-
-      // Test with axe-core, excluding heading order for demo purposes
-      const results = await axe(container, {
-        rules: {
-          'heading-order': { enabled: false }, // Disable for demo app structure
-          'landmark-main-is-top-level': { enabled: false }, // Disable for test wrapper structure
-          'landmark-no-duplicate-main': { enabled: false }, // Disable for test wrapper structure
-        },
-      });
-      expect(results).toHaveNoViolations();
-    });
-
-    it('should have proper touch targets on mobile', () => {
-      // Set mobile viewport
-      Object.defineProperty(window, 'innerWidth', {
-        writable: true,
-        configurable: true,
-        value: 375,
-      });
-
-      renderWithProviders(
-        <TestWrapper appName="Touch Targets App">
-          <PaceLoginPage appName="Touch Targets App" />
-        </TestWrapper>
-      );
-
-      const signInButton = screen.getByRole('button', { name: /sign in/i });
-      const buttonRect = signInButton.getBoundingClientRect();
-
-      // Touch targets should be at least 44x44 pixels
-      // Note: In test environment, getBoundingClientRect may return 0
-      // This is a structural test to ensure the button exists
-      expect(signInButton).toBeInTheDocument();
-      expect(signInButton).toHaveClass('h-9'); // Check for height class
-    });
-  });
-
-  describe('Internationalization', () => {
-    it('should support RTL languages', async () => {
-      // Set RTL direction
-      document.documentElement.dir = 'rtl';
-
-      const { container } = renderWithProviders(
-        <TestWrapper appName="RTL App">
-          <PaceLoginPage appName="RTL App" />
-        </TestWrapper>
-      );
-
-      const results = await axe(container, {
-        rules: {
-          'heading-order': { enabled: false }, // Disable for demo app structure
-          'landmark-main-is-top-level': { enabled: false }, // Disable for test wrapper structure
-          'landmark-no-duplicate-main': { enabled: false }, // Disable for test wrapper structure
-        },
-      });
-      expect(results).toHaveNoViolations();
-
-      // Reset document direction
-      document.documentElement.dir = 'ltr';
-    });
-
-    it('should have proper language attributes', () => {
-      // Set language
-      document.documentElement.lang = 'es';
-
-      renderWithProviders(
-        <TestWrapper appName="Language App">
-          <PaceLoginPage appName="Language App" />
-        </TestWrapper>
-      );
-
-      // Form should inherit language from document
-      const form = screen.getByTestId('login-form');
-      expect(form).toBeInTheDocument();
-
-      // Reset language
-      document.documentElement.lang = 'en';
-    });
-  });
-});