@qwickapps/react-framework 1.3.1 → 1.3.3

package/src/components/__tests__/AccessibilityProvider.test.tsx

@@ -0,0 +1,330 @@
+import React from 'react';
+import { render, screen, fireEvent, act, waitFor } from '@testing-library/react';
+import { AccessibilityProvider, useAccessibility } from '../AccessibilityProvider';
+
+// Test component that uses accessibility hook
+const TestComponent = () => {
+  const {
+    highContrast,
+    reducedMotion,
+    largeText,
+    focusVisible,
+    isKeyboardUser,
+    issues,
+    setHighContrast,
+    setReducedMotion,
+    setLargeText,
+    announce,
+    announcePolite,
+    announceAssertive,
+    addIssue,
+    clearIssues,
+    runAudit
+  } = useAccessibility();
+
+  return (
+    <div>
+      <div data-testid="high-contrast">{highContrast.toString()}</div>
+      <div data-testid="reduced-motion">{reducedMotion.toString()}</div>
+      <div data-testid="large-text">{largeText.toString()}</div>
+      <div data-testid="focus-visible">{focusVisible.toString()}</div>
+      <div data-testid="keyboard-user">{isKeyboardUser.toString()}</div>
+      <div data-testid="issues-count">{issues.length}</div>
+      
+      <button onClick={() => setHighContrast(!highContrast)}>Toggle High Contrast</button>
+      <button onClick={() => setReducedMotion(!reducedMotion)}>Toggle Reduced Motion</button>
+      <button onClick={() => setLargeText(!largeText)}>Toggle Large Text</button>
+      <button onClick={() => announce('Test message')}>Announce</button>
+      <button onClick={() => announcePolite('Polite message')}>Announce Polite</button>
+      <button onClick={() => announceAssertive('Assertive message')}>Announce Assertive</button>
+      <button onClick={() => addIssue({ type: 'test', message: 'Test issue', level: 'error' })}>Add Issue</button>
+      <button onClick={clearIssues}>Clear Issues</button>
+      <button onClick={runAudit}>Run Audit</button>
+    </div>
+  );
+};
+
+// Mock matchMedia
+const mockMatchMedia = (matches: boolean) => {
+  return jest.fn(() => ({
+    matches,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+  }));
+};
+
+// Mock console methods
+const originalError = console.error;
+const originalGroup = console.group;
+const originalGroupEnd = console.groupEnd;
+const originalWarn = console.warn;
+
+beforeEach(() => {
+  // Mock window.matchMedia
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: mockMatchMedia(false),
+  });
+  
+  // Mock console methods
+  console.error = jest.fn();
+  console.group = jest.fn();
+  console.groupEnd = jest.fn();
+  console.warn = jest.fn();
+});
+
+afterEach(() => {
+  // Restore console methods
+  console.error = originalError;
+  console.group = originalGroup;
+  console.groupEnd = originalGroupEnd;
+  console.warn = originalWarn;
+  
+  // Clean up DOM
+  document.body.classList.remove('keyboard-user', 'high-contrast', 'reduced-motion', 'large-text');
+});
+
+describe('AccessibilityProvider', () => {
+  it('renders children correctly', () => {
+    render(
+      <AccessibilityProvider>
+        <div data-testid="child">Test content</div>
+      </AccessibilityProvider>
+    );
+
+    expect(screen.getByTestId('child')).toBeInTheDocument();
+  });
+
+  it('provides initial accessibility state', () => {
+    render(
+      <AccessibilityProvider>
+        <TestComponent />
+      </AccessibilityProvider>
+    );
+
+    expect(screen.getByTestId('high-contrast')).toHaveTextContent('false');
+    expect(screen.getByTestId('reduced-motion')).toHaveTextContent('false');
+    expect(screen.getByTestId('large-text')).toHaveTextContent('false');
+    expect(screen.getByTestId('focus-visible')).toHaveTextContent('true');
+    expect(screen.getByTestId('keyboard-user')).toHaveTextContent('false');
+    expect(screen.getByTestId('issues-count')).toHaveTextContent('0');
+  });
+
+  it('allows toggling high contrast mode', () => {
+    render(
+      <AccessibilityProvider>
+        <TestComponent />
+      </AccessibilityProvider>
+    );
+
+    const button = screen.getByText('Toggle High Contrast');
+    fireEvent.click(button);
+
+    expect(screen.getByTestId('high-contrast')).toHaveTextContent('true');
+    expect(document.body).toHaveClass('high-contrast');
+  });
+
+  it('allows toggling reduced motion mode', () => {
+    render(
+      <AccessibilityProvider>
+        <TestComponent />
+      </AccessibilityProvider>
+    );
+
+    const button = screen.getByText('Toggle Reduced Motion');
+    fireEvent.click(button);
+
+    expect(screen.getByTestId('reduced-motion')).toHaveTextContent('true');
+    expect(document.body).toHaveClass('reduced-motion');
+  });
+
+  it('allows toggling large text mode', () => {
+    render(
+      <AccessibilityProvider>
+        <TestComponent />
+      </AccessibilityProvider>
+    );
+
+    const button = screen.getByText('Toggle Large Text');
+    fireEvent.click(button);
+
+    expect(screen.getByTestId('large-text')).toHaveTextContent('true');
+    expect(document.body).toHaveClass('large-text');
+  });
+
+  it('detects keyboard usage', () => {
+    render(
+      <AccessibilityProvider>
+        <TestComponent />
+      </AccessibilityProvider>
+    );
+
+    // Simulate Tab key press
+    act(() => {
+      fireEvent.keyDown(document, { key: 'Tab' });
+    });
+
+    expect(screen.getByTestId('keyboard-user')).toHaveTextContent('true');
+    expect(document.body).toHaveClass('keyboard-user');
+
+    // Simulate mouse click
+    act(() => {
+      fireEvent.mouseDown(document);
+    });
+
+    expect(screen.getByTestId('keyboard-user')).toHaveTextContent('false');
+    expect(document.body).not.toHaveClass('keyboard-user');
+  });
+
+  it('creates ARIA live regions', () => {
+    render(
+      <AccessibilityProvider>
+        <TestComponent />
+      </AccessibilityProvider>
+    );
+
+    const politeRegion = document.getElementById('qwickapps-aria-live-polite');
+    const assertiveRegion = document.getElementById('qwickapps-aria-live-assertive');
+
+    expect(politeRegion).toBeInTheDocument();
+    expect(politeRegion).toHaveAttribute('aria-live', 'polite');
+    expect(assertiveRegion).toBeInTheDocument();
+    expect(assertiveRegion).toHaveAttribute('aria-live', 'assertive');
+  });
+
+  it('handles polite announcements', async () => {
+    render(
+      <AccessibilityProvider>
+        <TestComponent />
+      </AccessibilityProvider>
+    );
+
+    const button = screen.getByText('Announce Polite');
+    fireEvent.click(button);
+
+    await waitFor(() => {
+      const politeRegion = document.getElementById('qwickapps-aria-live-polite');
+      expect(politeRegion).toHaveTextContent('Polite message');
+    });
+  });
+
+  it('handles assertive announcements', async () => {
+    render(
+      <AccessibilityProvider>
+        <TestComponent />
+      </AccessibilityProvider>
+    );
+
+    const button = screen.getByText('Announce Assertive');
+    fireEvent.click(button);
+
+    await waitFor(() => {
+      const assertiveRegion = document.getElementById('qwickapps-aria-live-assertive');
+      expect(assertiveRegion).toHaveTextContent('Assertive message');
+    });
+  });
+
+  it('manages accessibility issues', () => {
+    render(
+      <AccessibilityProvider>
+        <TestComponent />
+      </AccessibilityProvider>
+    );
+
+    // Add an issue
+    const addButton = screen.getByText('Add Issue');
+    fireEvent.click(addButton);
+    expect(screen.getByTestId('issues-count')).toHaveTextContent('1');
+
+    // Clear issues
+    const clearButton = screen.getByText('Clear Issues');
+    fireEvent.click(clearButton);
+    expect(screen.getByTestId('issues-count')).toHaveTextContent('0');
+  });
+
+  it('runs accessibility audit when enabled', async () => {
+    render(
+      <AccessibilityProvider enableAudit={true}>
+        <TestComponent />
+        {/* Add elements that will trigger audit issues */}
+        <img src="test.jpg" />
+        <button></button>
+        <input type="text" />
+      </AccessibilityProvider>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('issues-count')).not.toHaveTextContent('0');
+    }, { timeout: 2000 });
+  });
+
+  it('does not run audit when disabled', () => {
+    render(
+      <AccessibilityProvider enableAudit={false}>
+        <TestComponent />
+        <img src="test.jpg" />
+        <button></button>
+        <input type="text" />
+      </AccessibilityProvider>
+    );
+
+    expect(screen.getByTestId('issues-count')).toHaveTextContent('0');
+  });
+
+  it('detects system high contrast preference', () => {
+    // Mock high contrast preference
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn((query) => ({
+        matches: query === '(prefers-contrast: high)',
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+      })),
+    });
+
+    render(
+      <AccessibilityProvider>
+        <TestComponent />
+      </AccessibilityProvider>
+    );
+
+    expect(screen.getByTestId('high-contrast')).toHaveTextContent('true');
+  });
+
+  it('detects system reduced motion preference', () => {
+    // Mock reduced motion preference
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn((query) => ({
+        matches: query === '(prefers-reduced-motion: reduce)',
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+      })),
+    });
+
+    render(
+      <AccessibilityProvider>
+        <TestComponent />
+      </AccessibilityProvider>
+    );
+
+    expect(screen.getByTestId('reduced-motion')).toHaveTextContent('true');
+  });
+
+  it('throws error when hook is used outside provider', () => {
+    // Suppress console.error for this test
+    const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    expect(() => {
+      render(<TestComponent />);
+    }).toThrow('useAccessibility must be used within an AccessibilityProvider');
+
+    spy.mockRestore();
+  });
+});

package/src/components/__tests__/Breadcrumbs.test.tsx

@@ -0,0 +1,268 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Breadcrumbs, useBreadcrumbs, type BreadcrumbItem } from '../Breadcrumbs';
+
+// Test component for useBreadcrumbs hook
+const BreadcrumbHookTest = () => {
+  const { breadcrumbs, addBreadcrumb, removeBreadcrumb, setBreadcrumbs, clearBreadcrumbs } = useBreadcrumbs();
+
+  return (
+    <div>
+      <div data-testid="breadcrumb-count">{breadcrumbs.length}</div>
+      <button onClick={() => addBreadcrumb({ label: 'Test', href: '/test' })}>
+        Add Breadcrumb
+      </button>
+      <button onClick={() => removeBreadcrumb(0)}>
+        Remove First
+      </button>
+      <button onClick={() => setBreadcrumbs([{ label: 'Set', href: '/set' }])}>
+        Set Breadcrumbs
+      </button>
+      <button onClick={clearBreadcrumbs}>
+        Clear All
+      </button>
+    </div>
+  );
+};
+
+// Sample breadcrumb data
+const sampleBreadcrumbs: BreadcrumbItem[] = [
+  { label: 'Home', href: '/' },
+  { label: 'Products', href: '/products' },
+  { label: 'Electronics', href: '/products/electronics', current: true },
+];
+
+describe('Breadcrumbs', () => {
+  it('renders breadcrumb items correctly', () => {
+    render(<Breadcrumbs items={sampleBreadcrumbs} />);
+
+    expect(screen.getByText('Home')).toBeInTheDocument();
+    expect(screen.getByText('Products')).toBeInTheDocument();
+    expect(screen.getByText('Electronics')).toBeInTheDocument();
+  });
+
+  it('renders with proper ARIA attributes', () => {
+    render(<Breadcrumbs items={sampleBreadcrumbs} />);
+
+    const nav = screen.getByRole('navigation');
+    expect(nav).toHaveAttribute('aria-label', 'Breadcrumb navigation');
+    
+    // Electronics has current: true, so it should be wrapped in a span with aria-current="page"
+    const currentItemText = screen.getByText('Electronics');
+    const currentItem = currentItemText.parentElement;
+    expect(currentItem?.tagName).toBe('SPAN');
+    expect(currentItem).toHaveAttribute('aria-current', 'page');
+  });
+
+  it('renders custom separator', () => {
+    render(<Breadcrumbs items={sampleBreadcrumbs} separator=">" />);
+    
+    const separators = screen.getAllByText('>');
+    expect(separators).toHaveLength(2); // Should have 2 separators for 3 items
+  });
+
+  it('applies custom className', () => {
+    render(<Breadcrumbs items={sampleBreadcrumbs} className="custom-breadcrumbs" />);
+    
+    const nav = screen.getByRole('navigation');
+    expect(nav).toHaveClass('breadcrumbs', 'custom-breadcrumbs');
+  });
+
+  it('handles navigation clicks with onNavigate', () => {
+    const onNavigate = jest.fn();
+    render(<Breadcrumbs items={sampleBreadcrumbs} onNavigate={onNavigate} />);
+
+    const homeLink = screen.getByText('Home');
+    fireEvent.click(homeLink);
+
+    expect(onNavigate).toHaveBeenCalledWith(
+      sampleBreadcrumbs[0],
+      0
+    );
+  });
+
+  it('handles keyboard navigation', () => {
+    const onNavigate = jest.fn();
+    render(<Breadcrumbs items={sampleBreadcrumbs} onNavigate={onNavigate} />);
+
+    const homeLink = screen.getByText('Home');
+    
+    // Test Enter key
+    fireEvent.keyDown(homeLink, { key: 'Enter' });
+    expect(onNavigate).toHaveBeenCalledWith(sampleBreadcrumbs[0], 0);
+
+    // Test Space key
+    fireEvent.keyDown(homeLink, { key: ' ' });
+    expect(onNavigate).toHaveBeenCalledTimes(2);
+  });
+
+  it('truncates items when maxItems is set', () => {
+    const manyItems: BreadcrumbItem[] = [
+      { label: 'Home', href: '/' },
+      { label: 'Level1', href: '/level1' },
+      { label: 'Level2', href: '/level2' },
+      { label: 'Level3', href: '/level3' },
+      { label: 'Level4', href: '/level4' },
+      { label: 'Current', href: '/current', current: true },
+    ];
+
+    render(<Breadcrumbs items={manyItems} maxItems={4} />);
+
+    expect(screen.getByText('Home')).toBeInTheDocument();
+    expect(screen.getByText('...')).toBeInTheDocument();
+    expect(screen.getByText('Current')).toBeInTheDocument();
+    
+    // Should not show middle items
+    expect(screen.queryByText('Level2')).not.toBeInTheDocument();
+    expect(screen.queryByText('Level3')).not.toBeInTheDocument();
+  });
+
+  it('hides root item when showRoot is false', () => {
+    render(<Breadcrumbs items={sampleBreadcrumbs} showRoot={false} />);
+
+    expect(screen.queryByText('Home')).not.toBeInTheDocument();
+    expect(screen.getByText('Products')).toBeInTheDocument();
+    expect(screen.getByText('Electronics')).toBeInTheDocument();
+  });
+
+  it('renders with icons when provided', () => {
+    const itemsWithIcons: BreadcrumbItem[] = [
+      { 
+        label: 'Home', 
+        href: '/', 
+        icon: <span data-testid="home-icon">🏠</span> 
+      },
+      { 
+        label: 'Products', 
+        href: '/products', 
+        icon: <span data-testid="products-icon">📦</span> 
+      },
+    ];
+
+    render(<Breadcrumbs items={itemsWithIcons} />);
+
+    expect(screen.getByTestId('home-icon')).toBeInTheDocument();
+    expect(screen.getByTestId('products-icon')).toBeInTheDocument();
+  });
+
+  it('does not render when only one item or less', () => {
+    const { container } = render(<Breadcrumbs items={[{ label: 'Home', href: '/' }]} />);
+    expect(container.firstChild).toBeNull();
+
+    const { container: emptyContainer } = render(<Breadcrumbs items={[]} />);
+    expect(emptyContainer.firstChild).toBeNull();
+  });
+
+  it('renders non-clickable items correctly', () => {
+    const nonClickableItems: BreadcrumbItem[] = [
+      { label: 'Home', href: '/' }, // Clickable: has href, not current
+      { label: 'Current', current: true }, // Non-clickable: current is true
+    ];
+
+    render(<Breadcrumbs items={nonClickableItems} />);
+
+    // Home should be clickable - find the parent element (the <a> tag)
+    const homeElement = screen.getByText('Home').parentElement;
+    expect(homeElement?.tagName).toBe('A');
+    
+    // Current should not be clickable - find the parent element (should be <span>)
+    const currentElement = screen.getByText('Current').parentElement;
+    expect(currentElement?.tagName).toBe('SPAN');
+  });
+
+  it('prevents navigation for ellipsis items', () => {
+    const onNavigate = jest.fn();
+    const manyItems: BreadcrumbItem[] = [
+      { label: 'Home', href: '/' },
+      { label: 'Level1', href: '/level1' },
+      { label: 'Level2', href: '/level2' },
+      { label: 'Level3', href: '/level3' },
+      { label: 'Current', href: '/current', current: true },
+    ];
+
+    render(<Breadcrumbs items={manyItems} maxItems={3} onNavigate={onNavigate} />);
+
+    const ellipsis = screen.getByText('...');
+    fireEvent.click(ellipsis);
+
+    expect(onNavigate).not.toHaveBeenCalled();
+  });
+
+  it('handles default link behavior when no onNavigate is provided', () => {
+    // Create a mock for window.location.href
+    const originalLocation = window.location;
+    delete (window as any).location;
+    window.location = { ...originalLocation, href: '' } as any;
+
+    const itemsWithHref: BreadcrumbItem[] = [
+      { label: 'Home', href: '/' },
+      { label: 'Current', href: '/current' }, // Need at least 2 items for breadcrumbs to render
+    ];
+
+    render(<Breadcrumbs items={itemsWithHref} />);
+
+    const homeLink = screen.getByText('Home');
+    fireEvent.keyDown(homeLink, { key: 'Enter' });
+
+    // Should attempt to navigate using href
+    expect(window.location.href).toBe('/');
+
+    // Restore original location
+    window.location = originalLocation;
+  });
+});
+
+describe('useBreadcrumbs hook', () => {
+  it('provides initial empty breadcrumbs', () => {
+    render(<BreadcrumbHookTest />);
+
+    expect(screen.getByTestId('breadcrumb-count')).toHaveTextContent('0');
+  });
+
+  it('allows adding breadcrumbs', () => {
+    render(<BreadcrumbHookTest />);
+
+    const addButton = screen.getByText('Add Breadcrumb');
+    fireEvent.click(addButton);
+
+    expect(screen.getByTestId('breadcrumb-count')).toHaveTextContent('1');
+  });
+
+  it('allows removing breadcrumbs', () => {
+    render(<BreadcrumbHookTest />);
+
+    // Add a breadcrumb first
+    const addButton = screen.getByText('Add Breadcrumb');
+    fireEvent.click(addButton);
+    expect(screen.getByTestId('breadcrumb-count')).toHaveTextContent('1');
+
+    // Remove it
+    const removeButton = screen.getByText('Remove First');
+    fireEvent.click(removeButton);
+    expect(screen.getByTestId('breadcrumb-count')).toHaveTextContent('0');
+  });
+
+  it('allows setting breadcrumbs', () => {
+    render(<BreadcrumbHookTest />);
+
+    const setButton = screen.getByText('Set Breadcrumbs');
+    fireEvent.click(setButton);
+
+    expect(screen.getByTestId('breadcrumb-count')).toHaveTextContent('1');
+  });
+
+  it('allows clearing all breadcrumbs', () => {
+    render(<BreadcrumbHookTest />);
+
+    // Add multiple breadcrumbs
+    const addButton = screen.getByText('Add Breadcrumb');
+    fireEvent.click(addButton);
+    fireEvent.click(addButton);
+    expect(screen.getByTestId('breadcrumb-count')).toHaveTextContent('2');
+
+    // Clear all
+    const clearButton = screen.getByText('Clear All');
+    fireEvent.click(clearButton);
+    expect(screen.getByTestId('breadcrumb-count')).toHaveTextContent('0');
+  });
+});