@jmruthers/pace-core 0.2.7 → 0.5.1

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

@@ -1,121 +0,0 @@
-import { errorTestingUtils, TestErrorBoundary } from '../../__tests__/ErrorTesting.enhanced.test';
-import { userEvent } from '@testing-library/user-event';
-import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { Tooltip } from '../Tooltip';
-import { renderWithProviders  } from "../../../__tests__/shared";
-
-describe('Tooltip Accessibility', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('renders tooltip with proper structure', () => {
-    renderWithProviders(
-      <Tooltip content="Tooltip text">
-        <button>Hover me</button>
-      </Tooltip>
-    );
-    
-    // Check that the trigger content is rendered
-    const trigger = screen.getByText('Hover me');
-    expect(trigger).toBeInTheDocument();
-    
-    // Tooltip content is not immediately available in DOM due to Radix UI behavior
-    // This is expected behavior for accessibility-first tooltips
-  });
-describe('Tooltip 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('Tooltip component error');
-    };
-
-    renderWithProviders(
-      <TestErrorBoundary>
-        <ErrorComponent />
-      </TestErrorBoundary>
-    );
-
-    expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
-    expect(screen.getByText('Error: Tooltip 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(
-      'Tooltip 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('Tooltip prop error');
-      }
-      return <div>Normal content</div>;
-    };
-
-    await errorTestingUtils.testErrorRecovery(
-      TestComponent,
-      { shouldError: true },
-      { shouldError: false }
-    );
-
-    expect(screen.getByText('Normal content')).toBeInTheDocument();
-  });
-});
-}); 

package/src/components/Tooltip/__tests__/Tooltip.unit.test.tsx

@@ -1,185 +0,0 @@
-import { errorTestingUtils, TestErrorBoundary } from '../../__tests__/ErrorTesting.enhanced.test';
-import { userEvent } from '@testing-library/user-event';
-import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { Tooltip } from '../Tooltip';
-import { renderWithProviders  } from "../../../__tests__/shared";
-
-describe('Tooltip Component', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('renders without crashing', () => {
-    renderWithProviders(
-      <Tooltip content="Tooltip text">
-        <button>Hover me</button>
-      </Tooltip>
-    );
-    expect(screen.getByText('Hover me')).toBeInTheDocument();
-  });
-
-  it('should render with basic content', () => {
-    renderWithProviders(
-      <Tooltip content="Test tooltip">
-        <button>Hover me</button>
-      </Tooltip>
-    );
-    
-    expect(screen.getByRole('button', { name: 'Hover me' })).toBeInTheDocument();
-  });
-
-  it('should handle accessibility', () => {
-    renderWithProviders(
-      <Tooltip content="Accessible tooltip">
-        <span>Accessible content</span>
-      </Tooltip>
-    );
-    
-    expect(screen.getByText('Accessible content')).toBeInTheDocument();
-  });
-
-  it('should support custom content', () => {
-    renderWithProviders(
-      <Tooltip content="Custom tooltip content">
-        <div>Custom trigger</div>
-      </Tooltip>
-    );
-    
-    expect(screen.getByText('Custom trigger')).toBeInTheDocument();
-  });
-
-  it('should handle dynamic content', () => {
-    renderWithProviders(
-      <Tooltip content="Dynamic tooltip">
-        <span>Dynamic content</span>
-      </Tooltip>
-    );
-    
-    expect(screen.getByText('Dynamic content')).toBeInTheDocument();
-  });
-
-  it('should support complex interactions', () => {
-    renderWithProviders(
-      <Tooltip content="Interactive tooltip">
-        <button>Interactive button</button>
-      </Tooltip>
-    );
-    
-    expect(screen.getByRole('button', { name: 'Interactive button' })).toBeInTheDocument();
-  });
-
-  it('should handle multiple instances', () => {
-    renderWithProviders(
-      <Tooltip content="Multiple tooltip">
-        <span>Multiple instance</span>
-      </Tooltip>
-    );
-    
-    expect(screen.getByText('Multiple instance')).toBeInTheDocument();
-  });
-
-  it('should support custom styling', () => {
-    renderWithProviders(
-      <Tooltip content="Styled tooltip">
-        <div>Styled content</div>
-      </Tooltip>
-    );
-    
-    expect(screen.getByText('Styled content')).toBeInTheDocument();
-  });
-describe('Tooltip 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('Tooltip component error');
-    };
-
-    renderWithProviders(
-      <TestErrorBoundary>
-        <ErrorComponent />
-      </TestErrorBoundary>
-    );
-
-    expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
-    expect(screen.getByText('Error: Tooltip 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(
-      'Tooltip 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('Tooltip prop error');
-      }
-      return <div>Normal content</div>;
-    };
-
-    await errorTestingUtils.testErrorRecovery(
-      TestComponent,
-      { shouldError: true },
-      { shouldError: false }
-    );
-
-    expect(screen.getByText('Normal content')).toBeInTheDocument();
-  });
-});
-});

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

@@ -1,139 +0,0 @@
-import React from 'react';
-import '@testing-library/jest-dom';
-import { screen, within, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { UserMenu, UserMenuLoading } from '../UserMenu';
-import { renderWithProviders  } from "../../../__tests__/shared";
-import { axe, toHaveNoViolations } from 'jest-axe';
-
-const mockUser = {
-  id: '1',
-  email: 'a11y@example.com',
-  app_metadata: {},
-  user_metadata: {
-    display_name: 'A11y User',
-    full_name: 'A11y User Full',
-    avatar_url: 'https://example.com/avatar.jpg'
-  },
-  aud: 'authenticated',
-  created_at: '2023-01-01T00:00:00Z'
-} as any;
-
-describe('UserMenu Accessibility Tests', () => {
-  const user = userEvent.setup();
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('has a button trigger with accessible name', () => {
-    renderWithProviders(<UserMenu user={mockUser} />);
-    const trigger = screen.getByRole('combobox', { name: /a11y user/i });
-    expect(trigger).toBeInTheDocument();
-  });
-
-  it('menu and menuitems have correct roles and labels', async () => {
-    renderWithProviders(<UserMenu user={mockUser} />);
-    const trigger = screen.getByRole('combobox', { name: /a11y user/i });
-    await user.click(trigger);
-    const menu = screen.getByRole('listbox');
-    expect(menu).toBeInTheDocument();
-    const items = within(menu).getAllByRole('option');
-    expect(items.length).toBeGreaterThan(0);
-    expect(screen.getByText('Change Password')).toBeInTheDocument();
-    expect(screen.getByText('Sign out')).toBeInTheDocument();
-  });
-
-  it('dropdown label is accessible and contains user info', async () => {
-    renderWithProviders(<UserMenu user={mockUser} />);
-    const trigger = screen.getByRole('combobox', { name: /a11y user/i });
-    await user.click(trigger);
-    // There may be multiple elements with the text 'A11y User'
-    expect(screen.getAllByText('A11y User').length).toBeGreaterThan(0);
-    expect(screen.getByText('a11y@example.com')).toBeInTheDocument();
-  });
-
-  it('avatar has meaningful alt text or fallback initial', () => {
-    renderWithProviders(<UserMenu user={mockUser} />);
-    // AvatarImage alt is displayName, but fallback may be rendered in test
-    const img = screen.queryByAltText('A11y User');
-    if (img) {
-      expect(img).toBeInTheDocument();
-    } else {
-      // Fallback initial 'A' should be present
-      expect(screen.getAllByText('A').length).toBeGreaterThan(0);
-    }
-  });
-
-  it('supports tab navigation and keyboard activation', async () => {
-    renderWithProviders(<UserMenu user={mockUser} />);
-    const trigger = screen.getByRole('combobox', { name: /a11y user/i });
-    trigger.focus();
-    expect(trigger).toHaveFocus();
-    await user.keyboard('[Enter]');
-    const menu = screen.getByRole('listbox');
-    expect(menu).toBeInTheDocument();
-    // Tab to first menuitem
-    await user.tab();
-    const items = within(menu).getAllByRole('option');
-    expect(items[0]).toBeInTheDocument();
-    // Note: Focus management in Select component may not move focus to individual options
-  });
-
-  it('supports arrow key navigation in menu', async () => {
-    renderWithProviders(<UserMenu user={mockUser} />);
-    const trigger = screen.getByRole('combobox', { name: /a11y user/i });
-    await user.click(trigger);
-    const menu = screen.getByRole('listbox');
-    const items = within(menu).getAllByRole('option');
-    expect(items[0]).toBeInTheDocument();
-    expect(items[1]).toBeInTheDocument();
-    // Note: Arrow key navigation in Select component may not move focus to individual options
-    await user.keyboard('[ArrowUp]');
-    expect(items[0]).toBeInTheDocument();
-  });
-
-  it('traps focus in password dialog and supports Escape to close', async () => {
-    renderWithProviders(<UserMenu user={mockUser} />);
-    const trigger = screen.getByRole('combobox', { name: /a11y user/i });
-    await user.click(trigger);
-    // Open dialog
-    const changePasswordButton = screen.getByText('Change Password');
-    await user.click(changePasswordButton);
-
-    // Wait for dialog to open
-    await waitFor(() => {
-      const dialog = screen.getByRole('dialog', { hidden: true });
-      expect(dialog).toBeInTheDocument();
-    });
-
-    // Focus should be on the first input in the dialog
-    const passwordInput = screen.getByLabelText('New Password');
-    expect(passwordInput).toHaveFocus();
-
-    // Close dialog
-    await user.keyboard('[Escape]');
-    await waitFor(() => {
-      expect(screen.queryByRole('dialog', { hidden: true })).not.toBeInTheDocument();
-    });
-  });
-
-  it('announces loading state in UserMenu.Loading', () => {
-    renderWithProviders(<UserMenuLoading />);
-    const status = screen.getByRole('status');
-    expect(status).toHaveAttribute('aria-live', 'polite');
-    expect(status).toHaveAttribute('aria-label', 'Loading user menu');
-    expect(screen.getByText(/loading/i)).toBeInTheDocument();
-  });
-
-  // Automated axe check if available
-  // Uncomment if jest-axe or @axe-core/react is installed
-  // import { axe, toHaveNoViolations } from 'jest-axe';
-  // expect.extend(toHaveNoViolations);
-  // it('has no axe violations', async () => {
-  //   const { container } = renderWithProviders(<UserMenu user={mockUser} />);
-  //   const results = await axe(container);
-  //   expect(results).toHaveNoViolations();
-  // });
-}); 

package/src/components/UserMenu/__tests__/UserMenu.integration.test.tsx

@@ -1,188 +0,0 @@
-import React from 'react';
-import '@testing-library/jest-dom';
-import { screen, waitFor, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { UserMenu } from '../UserMenu';
-import { renderWithProviders  } from "../../../__tests__/shared";
-import { UnifiedAuthProvider } from '../../../providers/UnifiedAuthProvider';
-
-const mockUser = {
-  id: '1',
-  email: 'integration@example.com',
-  app_metadata: {},
-  user_metadata: {
-    display_name: 'Integration User',
-    full_name: 'Integration User Full',
-    avatar_url: 'https://example.com/avatar.jpg'
-  },
-  aud: 'authenticated',
-  created_at: '2023-01-01T00:00:00Z'
-} as any;
-
-describe('UserMenu Integration Tests', () => {
-  const user = userEvent.setup();
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('full user flow: open menu, change password, sign out', async () => {
-    const onSignOut = vi.fn().mockResolvedValue(undefined);
-    const onChangePassword = vi.fn().mockResolvedValue({ error: null });
-    
-    renderWithProviders(<UserMenu user={mockUser} onSignOut={onSignOut} onChangePassword={onChangePassword} />);
-    
-    // Open menu
-    const trigger = screen.getByRole('combobox', { name: /integration user/i });
-    await user.click(trigger);
-    
-    // Change password
-    const changePasswordButton = screen.getByText('Change Password');
-    await user.click(changePasswordButton);
-    
-    const newPasswordInput = screen.getByLabelText('New Password');
-    const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-    await user.type(newPasswordInput, 'integration123');
-    await user.type(confirmPasswordInput, 'integration123');
-    
-    const submitButton = screen.getByRole('button', { name: /change password/i, hidden: true });
-    await user.click(submitButton);
-    
-    await waitFor(() => {
-      expect(onChangePassword).toHaveBeenCalledWith('integration123', 'integration123');
-    }, { timeout: 3000 });
-    
-    // Open menu again and sign out
-    await user.click(trigger);
-    const signOutButton = screen.getByText('Sign out');
-    await user.click(signOutButton);
-    
-    expect(onSignOut).toHaveBeenCalled();
-  }, 10000);
-
-  it('menu closes after sign out', async () => {
-    const onSignOut = vi.fn().mockResolvedValue(undefined);
-    renderWithProviders(<UserMenu user={mockUser} onSignOut={onSignOut} />);
-    const trigger = screen.getByRole('combobox', { name: /integration user/i });
-    await user.click(trigger);
-    expect(screen.getByText('Sign out')).toBeInTheDocument();
-    const signOutButton = screen.getByText('Sign out');
-    await user.click(signOutButton);
-    // Menu should close (menu not in DOM)
-    await waitFor(() => {
-      expect(screen.queryByText('Sign out')).not.toBeInTheDocument();
-    });
-  });
-
-  it('password dialog closes on success, stays open on error', async () => {
-    const onChangePassword = vi.fn()
-      .mockResolvedValueOnce({ error: { message: 'fail' } })
-      .mockResolvedValueOnce({ error: null });
-    renderWithProviders(<UserMenu user={mockUser} onChangePassword={onChangePassword} />);
-    const trigger = screen.getByRole('combobox', { name: /integration user/i });
-    await user.click(trigger);
-    const changePasswordButton = screen.getByText('Change Password');
-    await user.click(changePasswordButton);
-    
-    // Wait for dialog to open
-    await waitFor(() => {
-      expect(screen.getByRole('dialog', { hidden: true })).toBeInTheDocument();
-    });
-
-    // First attempt - should fail and dialog stays open
-    const newPasswordInput = screen.getByLabelText('New Password');
-    const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-    await user.type(newPasswordInput, 'failpassword');
-    await user.type(confirmPasswordInput, 'failpassword');
-    const submitButton = screen.getByRole('button', { name: /change password/i, hidden: true });
-    await user.click(submitButton);
-    
-    // Dialog should remain open after error
-    await waitFor(() => {
-      expect(onChangePassword).toHaveBeenCalledWith('failpassword', 'failpassword');
-      expect(screen.getByRole('dialog', { hidden: true })).toBeInTheDocument();
-    });
-
-    // Second attempt - should succeed and dialog closes
-    await user.clear(newPasswordInput);
-    await user.clear(confirmPasswordInput);
-    await user.type(newPasswordInput, 'successpassword');
-    await user.type(confirmPasswordInput, 'successpassword');
-    await user.click(submitButton);
-    
-    // Dialog should close after success
-    await waitFor(() => {
-      expect(onChangePassword).toHaveBeenCalledWith('successpassword', 'successpassword');
-      expect(screen.queryByRole('dialog', { hidden: true })).not.toBeInTheDocument();
-    });
-  });
-
-  it('shows error message for password change failure', async () => {
-    const mockChangePassword = vi.fn().mockResolvedValue({
-      error: { message: 'Password change failed' }
-    });
-
-    renderWithProviders(
-      <UserMenu
-        user={mockUser}
-        onChangePassword={mockChangePassword}
-      />
-    );
-
-    const trigger = screen.getByRole('combobox', { name: /integration user/i });
-    await user.click(trigger);
-
-    const changePasswordButton = screen.getByText('Change Password');
-    await user.click(changePasswordButton);
-
-    // Wait for dialog to open and fill form
-    await waitFor(() => {
-      expect(screen.getByRole('dialog', { hidden: true })).toBeInTheDocument();
-    });
-
-    const newPasswordInput = screen.getByLabelText('New Password');
-    const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-    await user.type(newPasswordInput, 'failpassword');
-    await user.type(confirmPasswordInput, 'failpassword');
-    const submitButton = screen.getByRole('button', { name: /change password/i, hidden: true });
-    await user.click(submitButton);
-    await waitFor(() => {
-      expect(screen.getByText('Password change failed')).toBeInTheDocument();
-    });
-
-    // Dialog should remain open
-    expect(screen.getByRole('dialog', { hidden: true })).toBeInTheDocument();
-  });
-
-  it('keyboard navigation through menu and dialog', async () => {
-    renderWithProviders(<UserMenu user={mockUser} />);
-
-    const trigger = screen.getByRole('combobox', { name: /integration user/i });
-    await user.click(trigger);
-
-    // Click on Change Password option to open dialog
-    const changePasswordOption = screen.getByText('Change Password');
-    await user.click(changePasswordOption);
-    
-    // Wait for dialog to appear
-    const dialog = await screen.findByRole('dialog', { hidden: true });
-    expect(dialog).toBeInTheDocument();
-    const passwordInput = screen.getByLabelText('New Password');
-    expect(passwordInput).toHaveFocus();
-
-    // Close dialog with Escape
-    await user.keyboard('[Escape]');
-    expect(screen.queryByRole('dialog', { hidden: true })).not.toBeInTheDocument();
-  });
-
-  it('works with providers (renderWithProviders)', () => {
-    renderWithProviders(<UserMenu user={mockUser} />, { user: mockUser, isAuthenticated: true });
-    expect(screen.getByRole('combobox', { name: /integration user/i })).toBeInTheDocument();
-  });
-
-  it('does not open menu if user is null', () => {
-    renderWithProviders(<UserMenu user={null} />);
-    expect(screen.queryByRole('button')).not.toBeInTheDocument();
-  });
-});