@jmruthers/pace-core 0.5.61 → 0.5.62

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

@@ -0,0 +1,287 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { BrowserRouter } from 'react-router-dom';
+
+// Mock React Router hooks
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+    Outlet: () => <div data-testid="mock-outlet">Mock Outlet Content</div>
+  };
+});
+
+// Mock UnifiedAuthProvider
+const mockSignOut = vi.fn().mockResolvedValue({ error: null });
+const mockUpdatePassword = vi.fn().mockResolvedValue({ error: null });
+const mockUser = {
+  id: 'test-user-id',
+  email: 'test@example.com',
+  user_metadata: { display_name: 'Test User' }
+};
+
+vi.mock('../../../providers/UnifiedAuthProvider', () => ({
+  useUnifiedAuth: () => ({
+    user: mockUser,
+    signOut: mockSignOut,
+    updatePassword: mockUpdatePassword
+  })
+}));
+
+// Mock OrganisationProvider
+const mockOrganisation = {
+  id: 'test-org-id',
+  name: 'Test Organisation',
+  display_name: 'Test Organisation',
+  description: 'Test organisation for testing',
+  subscription_tier: 'basic',
+  settings: {},
+  is_active: true,
+  created_at: '2023-01-01T00:00:00Z',
+  updated_at: '2023-01-01T00:00:00Z'
+};
+
+const mockOrganisationContext = {
+  selectedOrganisation: mockOrganisation,
+  organisations: [mockOrganisation],
+  userMemberships: [{
+    id: 'test-membership-id',
+    user_id: 'test-user-id',
+    organisation_id: 'test-org-id',
+    role: 'org_admin',
+    granted_at: '2023-01-01T00:00:00Z',
+    status: 'active' as const,
+    created_at: '2023-01-01T00:00:00Z',
+    updated_at: '2023-01-01T00:00:00Z'
+  }],
+  isLoading: false,
+  error: null,
+  hasValidOrganisationContext: true,
+  setSelectedOrganisation: vi.fn(),
+  switchOrganisation: vi.fn().mockResolvedValue(undefined),
+  getUserRole: vi.fn().mockReturnValue('member'),
+  validateOrganisationAccess: vi.fn().mockReturnValue(true),
+  ensureOrganisationContext: vi.fn().mockReturnValue(mockOrganisation),
+  refreshOrganisations: vi.fn().mockResolvedValue(undefined),
+  getPrimaryOrganisation: vi.fn().mockReturnValue(mockOrganisation),
+  isOrganisationSecure: vi.fn().mockReturnValue(true)
+};
+
+vi.mock('../../../providers/OrganisationProvider', () => ({
+  OrganisationProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  useOrganisations: () => mockOrganisationContext
+}));
+
+// Mock usePermissionCache
+vi.mock('../../../hooks/usePermissionCache', () => ({
+  usePermissionCache: () => ({
+    checkPermission: vi.fn().mockResolvedValue(true),
+    hasPermission: vi.fn().mockReturnValue(true),
+    getPermissions: vi.fn().mockReturnValue(['read', 'write']),
+    refreshPermissions: vi.fn().mockResolvedValue(undefined)
+  })
+}));
+
+// Mock child components with proper accessibility attributes
+vi.mock('../../Header', () => ({
+  Header: vi.fn(({ appName, user, onSignOut, onChangePassword, onNavigate, currentPath }) => (
+    <header data-testid="mock-header" role="banner" aria-label={`${appName ?? 'Test App'} header`}>
+      <div data-testid="app-name" aria-label="Application name">{appName ?? 'Test App'}</div>
+      <div data-testid="user-info" aria-label="User information">
+        {user?.user_metadata?.display_name || user?.email}
+      </div>
+      <button 
+        data-testid="sign-out-button" 
+        onClick={() => onSignOut()}
+        aria-label="Sign out of application"
+      >
+        Sign Out
+      </button>
+      <button 
+        data-testid="change-password-button" 
+        onClick={() => onChangePassword('newpassword123')}
+        aria-label="Change password"
+      >
+        Change Password
+      </button>
+      <button 
+        data-testid="navigate-button" 
+        onClick={() => onNavigate({ id: 'home', label: 'Home', href: '/' })}
+        aria-label="Navigate to home"
+      >
+        Navigate
+      </button>
+      <div data-testid="current-path" aria-label="Current page path">{currentPath}</div>
+    </header>
+  ))
+}));
+
+vi.mock('../../Footer', () => ({
+  Footer: vi.fn(() => (
+    <footer data-testid="mock-footer" role="contentinfo" aria-label="Application footer">
+      Mock Footer
+    </footer>
+  ))
+}));
+
+// Mock window.location
+Object.defineProperty(window, 'location', {
+  value: {
+    pathname: '/test-path'
+  },
+  writable: true
+});
+
+import { PaceAppLayout } from '../PaceAppLayout';
+
+// Wrapper component to provide Router context
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <BrowserRouter>
+    {children}
+  </BrowserRouter>
+);
+
+describe('PaceAppLayout Accessibility', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockNavigate.mockClear();
+  });
+
+  describe('Semantic HTML Structure', () => {
+    it('renders with proper semantic HTML elements', () => {
+      render(
+        <TestWrapper>
+          <PaceAppLayout appName="Test App" />
+        </TestWrapper>
+      );
+      
+      // Check for proper semantic elements
+      expect(screen.getByRole('banner')).toBeInTheDocument();
+      expect(screen.getByRole('contentinfo')).toBeInTheDocument();
+      expect(screen.getByRole('main')).toBeInTheDocument();
+    });
+
+    it('provides proper main content area', () => {
+      render(
+        <TestWrapper>
+          <PaceAppLayout appName="Test App" />
+        </TestWrapper>
+      );
+      
+      const main = screen.getByRole('main');
+      expect(main).toBeInTheDocument();
+      expect(main).toHaveClass('px-4', 'w-[min(var(--app-width),100%)]', 'mx-auto', 'py-8');
+    });
+  });
+
+  describe('ARIA Attributes and Labels', () => {
+    it('provides proper ARIA labels for header elements', () => {
+      render(
+        <TestWrapper>
+          <PaceAppLayout appName="Test App" />
+        </TestWrapper>
+      );
+      
+      expect(screen.getByLabelText('Application name')).toBeInTheDocument();
+      expect(screen.getByLabelText('User information')).toBeInTheDocument();
+      expect(screen.getByLabelText('Current page path')).toBeInTheDocument();
+    });
+
+    it('provides proper ARIA labels for interactive elements', () => {
+      render(
+        <TestWrapper>
+          <PaceAppLayout appName="Test App" />
+        </TestWrapper>
+      );
+      
+      expect(screen.getByLabelText('Sign out of application')).toBeInTheDocument();
+      expect(screen.getByLabelText('Change password')).toBeInTheDocument();
+      expect(screen.getByLabelText('Navigate to home')).toBeInTheDocument();
+    });
+
+    it('provides proper ARIA labels for footer', () => {
+      render(
+        <TestWrapper>
+          <PaceAppLayout appName="Test App" />
+        </TestWrapper>
+      );
+      
+      expect(screen.getByLabelText('Application footer')).toBeInTheDocument();
+    });
+  });
+
+  describe('Screen Reader Support', () => {
+    it('provides meaningful text for screen readers', () => {
+      render(
+        <TestWrapper>
+          <PaceAppLayout appName="Test App" />
+        </TestWrapper>
+      );
+      
+      // Check that user information is properly displayed
+      expect(screen.getByLabelText('User information')).toHaveTextContent('Test User');
+      
+      // Check that app name is properly displayed
+      expect(screen.getByLabelText('Application name')).toHaveTextContent('Test App');
+    });
+
+    it('provides current path information for screen readers', () => {
+      render(
+        <TestWrapper>
+          <PaceAppLayout appName="Test App" />
+        </TestWrapper>
+      );
+      
+      expect(screen.getByLabelText('Current page path')).toHaveTextContent('/test-path');
+    });
+  });
+
+  describe('Keyboard Navigation', () => {
+    it('provides proper focus management', () => {
+      render(
+        <TestWrapper>
+          <PaceAppLayout appName="Test App" />
+        </TestWrapper>
+      );
+      
+      // Check that buttons can receive focus
+      const signOutButton = screen.getByLabelText('Sign out of application');
+      signOutButton.focus();
+      expect(document.activeElement).toBe(signOutButton);
+    });
+  });
+
+  describe('Color and Contrast', () => {
+    it('ensures proper contrast ratios are maintained', () => {
+      render(
+        <TestWrapper>
+          <PaceAppLayout appName="Test App" />
+        </TestWrapper>
+      );
+      
+      // This would typically be tested with a visual regression test
+      // or with a tool like axe-core, but we can verify the structure
+      const main = screen.getByRole('main');
+      expect(main).toBeInTheDocument();
+      expect(main).toHaveClass('px-4', 'w-[min(var(--app-width),100%)]', 'mx-auto', 'py-8');
+    });
+  });
+
+  describe('Responsive Design Accessibility', () => {
+    it('maintains accessibility on different screen sizes', () => {
+      render(
+        <TestWrapper>
+          <PaceAppLayout appName="Test App" />
+        </TestWrapper>
+      );
+      
+      // Check that the layout structure remains accessible
+      const main = screen.getByRole('main');
+      expect(main).toBeInTheDocument();
+      expect(main).toHaveClass('px-4', 'w-[min(var(--app-width),100%)]', 'mx-auto', 'py-8');
+    });
+  });
+});