@jmruthers/pace-core 0.5.118 → 0.5.120

package/src/hooks/__tests__/useKeyboardShortcuts.unit.test.ts

@@ -9,7 +9,7 @@
 
 import { renderHook } from '@testing-library/react';
 import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { useKeyboardShortcuts } from '../useKeyboardShortcuts';
+import { useKeyboardShortcuts, useAccessibilityShortcuts } from '../useKeyboardShortcuts';
 import { fireEvent } from '@testing-library/react';
 
 describe('useKeyboardShortcuts', () => {
@@ -291,5 +291,620 @@ describe('useKeyboardShortcuts', () => {
       expect(handler).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('Complex Modifier Combinations', () => {
+    it('handles Ctrl+Alt+key combination', () => {
+      const handler = vi.fn();
+      const shortcuts = [
+        {
+          key: 'ctrl+alt+s',
+          handler
+        }
+      ];
+
+      renderHook(() => useKeyboardShortcuts(shortcuts));
+
+      const event = new KeyboardEvent('keydown', {
+        key: 's',
+        ctrlKey: true,
+        altKey: true,
+        bubbles: true
+      });
+      document.dispatchEvent(event);
+
+      expect(handler).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles Ctrl+Shift+key combination', () => {
+      const handler = vi.fn();
+      const shortcuts = [
+        {
+          key: 'ctrl+shift+s',
+          handler
+        }
+      ];
+
+      renderHook(() => useKeyboardShortcuts(shortcuts));
+
+      const event = new KeyboardEvent('keydown', {
+        key: 's',
+        ctrlKey: true,
+        shiftKey: true,
+        bubbles: true
+      });
+      document.dispatchEvent(event);
+
+      expect(handler).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles Meta+key combination (Mac)', () => {
+      const handler = vi.fn();
+      const shortcuts = [
+        {
+          key: 'meta+s',
+          handler
+        }
+      ];
+
+      renderHook(() => useKeyboardShortcuts(shortcuts));
+
+      const event = new KeyboardEvent('keydown', {
+        key: 's',
+        metaKey: true,
+        bubbles: true
+      });
+      document.dispatchEvent(event);
+
+      expect(handler).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles Alt+key combination', () => {
+      const handler = vi.fn();
+      const shortcuts = [
+        {
+          key: 'alt+f',
+          handler
+        }
+      ];
+
+      renderHook(() => useKeyboardShortcuts(shortcuts));
+
+      const event = new KeyboardEvent('keydown', {
+        key: 'f',
+        altKey: true,
+        bubbles: true
+      });
+      document.dispatchEvent(event);
+
+      expect(handler).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles Shift+key combination', () => {
+      const handler = vi.fn();
+      const shortcuts = [
+        {
+          key: 'shift+arrowup',
+          handler
+        }
+      ];
+
+      renderHook(() => useKeyboardShortcuts(shortcuts));
+
+      const event = new KeyboardEvent('keydown', {
+        key: 'ArrowUp',
+        shiftKey: true,
+        bubbles: true
+      });
+      document.dispatchEvent(event);
+
+      expect(handler).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not trigger when modifiers do not match', () => {
+      const handler = vi.fn();
+      const shortcuts = [
+        {
+          key: 'ctrl+alt+s',
+          handler
+        }
+      ];
+
+      renderHook(() => useKeyboardShortcuts(shortcuts));
+
+      const event = new KeyboardEvent('keydown', {
+        key: 's',
+        ctrlKey: true,
+        altKey: false, // Missing Alt
+        bubbles: true
+      });
+      document.dispatchEvent(event);
+
+      expect(handler).not.toHaveBeenCalled();
+    });
+
+    it('does not trigger when extra modifiers are pressed', () => {
+      const handler = vi.fn();
+      const shortcuts = [
+        {
+          key: 'ctrl+s',
+          handler
+        }
+      ];
+
+      renderHook(() => useKeyboardShortcuts(shortcuts));
+
+      const event = new KeyboardEvent('keydown', {
+        key: 's',
+        ctrlKey: true,
+        altKey: true, // Extra modifier
+        bubbles: true
+      });
+      document.dispatchEvent(event);
+
+      expect(handler).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Key Parsing Edge Cases', () => {
+    it('handles cmd alias for meta key', () => {
+      const handler = vi.fn();
+      const shortcuts = [
+        {
+          key: 'cmd+s',
+          handler
+        }
+      ];
+
+      renderHook(() => useKeyboardShortcuts(shortcuts));
+
+      const event = new KeyboardEvent('keydown', {
+        key: 's',
+        metaKey: true,
+        bubbles: true
+      });
+      document.dispatchEvent(event);
+
+      expect(handler).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles control alias for ctrl key', () => {
+      const handler = vi.fn();
+      const shortcuts = [
+        {
+          key: 'control+s',
+          handler
+        }
+      ];
+
+      renderHook(() => useKeyboardShortcuts(shortcuts));
+
+      const event = new KeyboardEvent('keydown', {
+        key: 's',
+        ctrlKey: true,
+        bubbles: true
+      });
+      document.dispatchEvent(event);
+
+      expect(handler).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles case-insensitive key matching', () => {
+      const handler = vi.fn();
+      const shortcuts = [
+        {
+          key: 'CTRL+S',
+          handler
+        }
+      ];
+
+      renderHook(() => useKeyboardShortcuts(shortcuts));
+
+      const event = new KeyboardEvent('keydown', {
+        key: 's',
+        ctrlKey: true,
+        bubbles: true
+      });
+      document.dispatchEvent(event);
+
+      expect(handler).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles keys with special characters', () => {
+      const handler = vi.fn();
+      const shortcuts = [
+        {
+          key: '?',
+          handler
+        }
+      ];
+
+      renderHook(() => useKeyboardShortcuts(shortcuts));
+
+      const event = new KeyboardEvent('keydown', {
+        key: '?',
+        bubbles: true
+      });
+      document.dispatchEvent(event);
+
+      expect(handler).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles space key', () => {
+      const handler = vi.fn();
+      const shortcuts = [
+        {
+          key: ' ',
+          handler
+        }
+      ];
+
+      renderHook(() => useKeyboardShortcuts(shortcuts));
+
+      const event = new KeyboardEvent('keydown', {
+        key: ' ',
+        bubbles: true
+      });
+      document.dispatchEvent(event);
+
+      expect(handler).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Event Handling', () => {
+    it('stopPropagation option works correctly', () => {
+      const handler = vi.fn((e) => {
+        // Handler should not affect propagation test
+      });
+      const parentHandler = vi.fn();
+      
+      const shortcuts = [
+        {
+          key: 'Escape',
+          handler,
+          stopPropagation: true
+        }
+      ];
+
+      document.addEventListener('keydown', parentHandler);
+
+      renderHook(() => useKeyboardShortcuts(shortcuts));
+
+      const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
+      document.dispatchEvent(event);
+
+      expect(handler).toHaveBeenCalledTimes(1);
+      // Note: stopPropagation is called on the event, but we can't easily test
+      // event propagation in this context without more complex setup
+
+      document.removeEventListener('keydown', parentHandler);
+    });
+
+    it('events propagate when stopPropagation is false', () => {
+      const handler = vi.fn();
+      const parentHandler = vi.fn();
+      
+      const shortcuts = [
+        {
+          key: 'Escape',
+          handler,
+          stopPropagation: false
+        }
+      ];
+
+      document.addEventListener('keydown', parentHandler);
+
+      renderHook(() => useKeyboardShortcuts(shortcuts));
+
+      const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
+      document.dispatchEvent(event);
+
+      expect(handler).toHaveBeenCalledTimes(1);
+      // Parent handler should also be called since we're not stopping propagation
+      expect(parentHandler).toHaveBeenCalled();
+
+      document.removeEventListener('keydown', parentHandler);
+    });
+
+    it('multiple shortcuts with same key - first match wins', () => {
+      const handler1 = vi.fn();
+      const handler2 = vi.fn();
+      const handler3 = vi.fn();
+      
+      const shortcuts = [
+        {
+          key: 'Escape',
+          handler: handler1
+        },
+        {
+          key: 'Escape',
+          handler: handler2
+        },
+        {
+          key: 'Escape',
+          handler: handler3
+        }
+      ];
+
+      renderHook(() => useKeyboardShortcuts(shortcuts));
+
+      const event = new KeyboardEvent('keydown', { key: 'Escape' });
+      document.dispatchEvent(event);
+
+      expect(handler1).toHaveBeenCalledTimes(1);
+      expect(handler2).not.toHaveBeenCalled();
+      expect(handler3).not.toHaveBeenCalled();
+    });
+
+    it('shortcuts with different keys do not interfere', () => {
+      const escapeHandler = vi.fn();
+      const enterHandler = vi.fn();
+      const spaceHandler = vi.fn();
+      
+      const shortcuts = [
+        {
+          key: 'Escape',
+          handler: escapeHandler
+        },
+        {
+          key: 'Enter',
+          handler: enterHandler
+        },
+        {
+          key: ' ',
+          handler: spaceHandler
+        }
+      ];
+
+      renderHook(() => useKeyboardShortcuts(shortcuts));
+
+      // Test Escape
+      const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape' });
+      document.dispatchEvent(escapeEvent);
+      expect(escapeHandler).toHaveBeenCalledTimes(1);
+      expect(enterHandler).not.toHaveBeenCalled();
+      expect(spaceHandler).not.toHaveBeenCalled();
+
+      // Test Enter
+      const enterEvent = new KeyboardEvent('keydown', { key: 'Enter' });
+      document.dispatchEvent(enterEvent);
+      expect(enterHandler).toHaveBeenCalledTimes(1);
+      expect(escapeHandler).toHaveBeenCalledTimes(1); // Still 1
+
+      // Test Space
+      const spaceEvent = new KeyboardEvent('keydown', { key: ' ' });
+      document.dispatchEvent(spaceEvent);
+      expect(spaceHandler).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('useAccessibilityShortcuts Hook', () => {
+    it('creates shortcuts for all provided handlers', () => {
+      const onEscape = vi.fn();
+      const onEnter = vi.fn();
+      const onSpace = vi.fn();
+      const onArrowUp = vi.fn();
+      const onArrowDown = vi.fn();
+      const onArrowLeft = vi.fn();
+      const onArrowRight = vi.fn();
+      const onHome = vi.fn();
+      const onEnd = vi.fn();
+      const onTab = vi.fn();
+      const onShiftTab = vi.fn();
+
+      renderHook(() =>
+        useAccessibilityShortcuts({
+          onEscape,
+          onEnter,
+          onSpace,
+          onArrowUp,
+          onArrowDown,
+          onArrowLeft,
+          onArrowRight,
+          onHome,
+          onEnd,
+          onTab,
+          onShiftTab
+        })
+      );
+
+      // Test each handler
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+      expect(onEscape).toHaveBeenCalledTimes(1);
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+      expect(onEnter).toHaveBeenCalledTimes(1);
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: ' ' }));
+      expect(onSpace).toHaveBeenCalledTimes(1);
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }));
+      expect(onArrowUp).toHaveBeenCalledTimes(1);
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+      expect(onArrowDown).toHaveBeenCalledTimes(1);
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }));
+      expect(onArrowLeft).toHaveBeenCalledTimes(1);
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
+      expect(onArrowRight).toHaveBeenCalledTimes(1);
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home' }));
+      expect(onHome).toHaveBeenCalledTimes(1);
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'End' }));
+      expect(onEnd).toHaveBeenCalledTimes(1);
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
+      expect(onTab).toHaveBeenCalledTimes(1);
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true }));
+      expect(onShiftTab).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles Escape key handler', () => {
+      const onEscape = vi.fn();
+
+      renderHook(() => useAccessibilityShortcuts({ onEscape }));
+
+      const event = new KeyboardEvent('keydown', { key: 'Escape' });
+      document.dispatchEvent(event);
+
+      expect(onEscape).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles Enter key handler', () => {
+      const onEnter = vi.fn();
+
+      renderHook(() => useAccessibilityShortcuts({ onEnter }));
+
+      const event = new KeyboardEvent('keydown', { key: 'Enter' });
+      document.dispatchEvent(event);
+
+      expect(onEnter).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles Space key handler with preventDefault', () => {
+      const onSpace = vi.fn();
+      const preventDefaultSpy = vi.fn();
+
+      renderHook(() => useAccessibilityShortcuts({ onSpace }));
+
+      const event = new KeyboardEvent('keydown', { key: ' ', cancelable: true });
+      event.preventDefault = preventDefaultSpy;
+      document.dispatchEvent(event);
+
+      expect(onSpace).toHaveBeenCalledTimes(1);
+      expect(preventDefaultSpy).toHaveBeenCalled();
+    });
+
+    it('handles Arrow key handlers', () => {
+      const onArrowUp = vi.fn();
+      const onArrowDown = vi.fn();
+      const onArrowLeft = vi.fn();
+      const onArrowRight = vi.fn();
+
+      renderHook(() =>
+        useAccessibilityShortcuts({
+          onArrowUp,
+          onArrowDown,
+          onArrowLeft,
+          onArrowRight
+        })
+      );
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }));
+      expect(onArrowUp).toHaveBeenCalledTimes(1);
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+      expect(onArrowDown).toHaveBeenCalledTimes(1);
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }));
+      expect(onArrowLeft).toHaveBeenCalledTimes(1);
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
+      expect(onArrowRight).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles Home and End keys', () => {
+      const onHome = vi.fn();
+      const onEnd = vi.fn();
+
+      renderHook(() => useAccessibilityShortcuts({ onHome, onEnd }));
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home' }));
+      expect(onHome).toHaveBeenCalledTimes(1);
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'End' }));
+      expect(onEnd).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles Tab and Shift+Tab keys', () => {
+      const onTab = vi.fn();
+      const onShiftTab = vi.fn();
+
+      renderHook(() => useAccessibilityShortcuts({ onTab, onShiftTab }));
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
+      expect(onTab).toHaveBeenCalledTimes(1);
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true }));
+      expect(onShiftTab).toHaveBeenCalledTimes(1);
+    });
+
+    it('only creates shortcuts for provided handlers', () => {
+      const onEscape = vi.fn();
+      const onEnter = vi.fn();
+
+      renderHook(() => useAccessibilityShortcuts({ onEscape, onEnter }));
+
+      // Should only respond to Escape and Enter
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+      expect(onEscape).toHaveBeenCalledTimes(1);
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+      expect(onEnter).toHaveBeenCalledTimes(1);
+
+      // Should not respond to other keys
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Space' }));
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }));
+      
+      // Only Escape and Enter should have been called
+      expect(onEscape).toHaveBeenCalledTimes(1);
+      expect(onEnter).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Integration', () => {
+    it('useAccessibilityShortcuts integrates with useKeyboardShortcuts', () => {
+      const onEscape = vi.fn();
+      const customHandler = vi.fn();
+
+      // Use accessibility shortcuts
+      renderHook(() => useAccessibilityShortcuts({ onEscape }));
+
+      // Also use regular shortcuts
+      renderHook(() =>
+        useKeyboardShortcuts([
+          {
+            key: 'Enter',
+            handler: customHandler
+          }
+        ])
+      );
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+      expect(onEscape).toHaveBeenCalledTimes(1);
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+      expect(customHandler).toHaveBeenCalledTimes(1);
+    });
+
+    it('multiple accessibility shortcuts work together', () => {
+      const handlers1 = {
+        onEscape: vi.fn(),
+        onEnter: vi.fn()
+      };
+      const handlers2 = {
+        onSpace: vi.fn(),
+        onArrowUp: vi.fn()
+      };
+
+      renderHook(() => useAccessibilityShortcuts(handlers1));
+      renderHook(() => useAccessibilityShortcuts(handlers2));
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+      expect(handlers1.onEscape).toHaveBeenCalledTimes(1);
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+      expect(handlers1.onEnter).toHaveBeenCalledTimes(1);
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: ' ' }));
+      expect(handlers2.onSpace).toHaveBeenCalledTimes(1);
+
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }));
+      expect(handlers2.onArrowUp).toHaveBeenCalledTimes(1);
+    });
+  });
 });