@jmruthers/pace-core 0.6.9 → 0.6.11

package/src/hooks/__tests__/useFocusTrap.unit.test.tsx

@@ -1,828 +0,0 @@
-/**
- * @file UseFocusTrap Hook Unit Tests
- * @package @jmruthers/pace-core
- * @module Hooks/UseFocusTrap
- * @since 0.4.0
- */
-
-import React from 'react';
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, screen, act, waitFor } from '@testing-library/react';
-import { renderWithProviders } from '../../__tests__/helpers/test-utils';
-import '@testing-library/jest-dom';
-import { useFocusTrap } from '../useFocusTrap';
-
-// Create a test component that uses the hook
-const TestComponent = ({ options = {} }: { options?: any }) => {
-  const focusTrap = useFocusTrap(options);
-
-  return (
-    <section ref={focusTrap.containerRef as any} data-testid="container">
-      <button data-testid="button-1">Button 1</button>
-      <input data-testid="input-1" type="text" />
-      <button data-testid="button-2">Button 2</button>
-      <button data-testid="button-3" disabled>Disabled Button</button>
-      <p data-testid="non-focusable">Non-focusable</p>
-    </section>
-  );
-};
-
-describe('useFocusTrap', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-    describe('Basic Functionality', () => {
-    it('should render without errors', () => {
-      expect(() => renderWithProviders(<TestComponent />)).not.toThrow();
-    });
-
-    it('should render with container element', () => {
-      renderWithProviders(<TestComponent />);
-      expect(screen.getByTestId('container')).toBeDefined();
-    });
-
-    it('should render with focusable elements', () => {
-      renderWithProviders(<TestComponent />);
-      expect(screen.getByTestId('button-1')).toBeDefined();
-      expect(screen.getByTestId('input-1')).toBeDefined();
-      expect(screen.getByTestId('button-2')).toBeDefined();
-    });
-
-    it('should handle disabled elements', () => {
-      renderWithProviders(<TestComponent />);
-      const disabledButton = screen.getByTestId('button-3');
-      expect(disabledButton).toBeDefined();
-      expect(disabledButton).toBeDisabled();
-    });
-
-    it('should handle non-focusable elements', () => {
-      renderWithProviders(<TestComponent />);
-      expect(screen.getByTestId('non-focusable')).toBeDefined();
-    });
-  });
-
-  describe('Hook Interface', () => {
-    it('should return focus trap interface', () => {
-      const TestHook = () => {
-        const focusTrap = useFocusTrap();
-        
-        expect(focusTrap.containerRef).toBeDefined();
-        expect(typeof focusTrap.focusFirst).toBe('function');
-        expect(typeof focusTrap.focusLast).toBe('function');
-        expect(typeof focusTrap.getFocusableElements).toBe('function');
-        
-        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
-      };
-
-      renderWithProviders(<TestHook />);
-    });
-
-    it('should handle default options', () => {
-      const TestHook = () => {
-        const focusTrap = useFocusTrap();
-        
-        // Should work with default options
-        expect(focusTrap.containerRef.current).toBeDefined();
-        
-        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
-      };
-
-      renderWithProviders(<TestHook />);
-    });
-
-    it('should handle custom options', () => {
-      const TestHook = () => {
-        const focusTrap = useFocusTrap({
-          isActive: true,
-          autoFocus: true,
-          restoreFocus: true,
-          onEscape: vi.fn(),
-          focusableSelector: 'button:not([disabled])'
-        });
-        
-        expect(focusTrap.containerRef.current).toBeDefined();
-        
-        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
-      };
-
-      renderWithProviders(<TestHook />);
-    });
-  });
-
-  describe('Focus Management Functions', () => {
-    it('should provide focus management functions', () => {
-      const TestHook = () => {
-        const focusTrap = useFocusTrap();
-        
-        // Test that functions exist and can be called
-        expect(() => focusTrap.focusFirst()).not.toThrow();
-        expect(() => focusTrap.focusLast()).not.toThrow();
-        expect(() => focusTrap.getFocusableElements()).not.toThrow();
-        
-        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
-      };
-
-      renderWithProviders(<TestHook />);
-    });
-
-    it('should handle empty focusable elements gracefully', () => {
-      const TestHook = () => {
-        const focusTrap = useFocusTrap();
-        
-        // Should not throw when no focusable elements exist
-        expect(() => focusTrap.focusFirst()).not.toThrow();
-        expect(() => focusTrap.focusLast()).not.toThrow();
-        expect(() => focusTrap.getFocusableElements()).not.toThrow();
-        
-        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
-      };
-
-      renderWithProviders(<TestHook />);
-    });
-  });
-
-  describe('Options Handling', () => {
-    it('should handle isActive option', () => {
-      const TestHook = () => {
-        const focusTrap = useFocusTrap({ isActive: true });
-        expect(focusTrap.containerRef.current).toBeDefined();
-        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
-      };
-
-      renderWithProviders(<TestHook />);
-    });
-
-    it('should handle autoFocus option', () => {
-      const TestHook = () => {
-        const focusTrap = useFocusTrap({ autoFocus: true });
-        expect(focusTrap.containerRef.current).toBeDefined();
-        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
-      };
-
-      renderWithProviders(<TestHook />);
-    });
-
-    it('should handle restoreFocus option', () => {
-      const TestHook = () => {
-        const focusTrap = useFocusTrap({ restoreFocus: true });
-        expect(focusTrap.containerRef.current).toBeDefined();
-        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
-      };
-
-      renderWithProviders(<TestHook />);
-    });
-
-    it('should handle onEscape option', () => {
-      const onEscape = vi.fn();
-      const TestHook = () => {
-        const focusTrap = useFocusTrap({ onEscape });
-        expect(focusTrap.containerRef.current).toBeDefined();
-        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
-      };
-
-      renderWithProviders(<TestHook />);
-    });
-
-    it('should handle custom focusableSelector', () => {
-      const TestHook = () => {
-        const focusTrap = useFocusTrap({ 
-          focusableSelector: 'button:not([disabled])' 
-        });
-        expect(focusTrap.containerRef.current).toBeDefined();
-        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
-      };
-
-      renderWithProviders(<TestHook />);
-    });
-  });
-
-  describe('Integration Tests', () => {
-    it('should work with multiple instances', () => {
-      const TestMultiple = () => {
-        const focusTrap1 = useFocusTrap({ isActive: true });
-        const focusTrap2 = useFocusTrap({ isActive: false });
-        
-        expect(focusTrap1.containerRef.current).toBeDefined();
-        expect(focusTrap2.containerRef.current).toBeDefined();
-        
-        return (
-          <section>
-            <section ref={focusTrap1.containerRef as any} data-testid="container-1" />
-            <section ref={focusTrap2.containerRef as any} data-testid="container-2" />
-          </section>
-        );
-      };
-
-      renderWithProviders(<TestMultiple />);
-      expect(screen.getByTestId('container-1')).toBeDefined();
-      expect(screen.getByTestId('container-2')).toBeDefined();
-    });
-
-    it('should handle component unmounting', () => {
-      const { unmount } = renderWithProviders(<TestComponent />);
-      
-      expect(() => unmount()).not.toThrow();
-    });
-
-    it('should handle all options together', () => {
-      const onEscape = vi.fn();
-      const TestAllOptions = () => {
-        const focusTrap = useFocusTrap({
-          isActive: true,
-          autoFocus: true,
-          restoreFocus: true,
-          onEscape,
-          focusableSelector: 'button:not([disabled])'
-        });
-        
-        expect(focusTrap.containerRef.current).toBeDefined();
-        
-        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
-      };
-
-      renderWithProviders(<TestAllOptions />);
-      expect(screen.getByTestId('container')).toBeDefined();
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('should handle null container ref', () => {
-      const TestNullRef = () => {
-        const focusTrap = useFocusTrap();
-        
-        // Test that functions don't throw even with null ref
-        expect(() => focusTrap.focusFirst()).not.toThrow();
-        expect(() => focusTrap.focusLast()).not.toThrow();
-        expect(() => focusTrap.getFocusableElements()).not.toThrow();
-        
-        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
-      };
-
-      renderWithProviders(<TestNullRef />);
-    });
-
-    it('should handle undefined options', () => {
-      const TestUndefinedOptions = () => {
-        const focusTrap = useFocusTrap(undefined as any);
-        
-        expect(focusTrap.containerRef.current).toBeDefined();
-        
-        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
-      };
-
-      renderWithProviders(<TestUndefinedOptions />);
-    });
-
-    it('should handle partial options', () => {
-      const TestPartialOptions = () => {
-        const focusTrap = useFocusTrap({ isActive: true });
-        
-        expect(focusTrap.containerRef.current).toBeDefined();
-        
-        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
-      };
-
-      renderWithProviders(<TestPartialOptions />);
-    });
-  });
-
-  describe('Focus Restoration', () => {
-    it('should restore focus when deactivated with restoreFocus=true', () => {
-      const TestRestoreFocus = () => {
-        const [isActive, setIsActive] = React.useState(true);
-        const focusTrap = useFocusTrap({ isActive, restoreFocus: true });
-        const restoreButton = React.useRef<HTMLButtonElement>(null);
-
-        React.useEffect(() => {
-          if (restoreButton.current) {
-            restoreButton.current.focus();
-          }
-        }, []);
-
-        return (
-          <section>
-            <button ref={restoreButton} data-testid="restore-button">Restore Target</button>
-            <section ref={focusTrap.containerRef as any} data-testid="container">
-              <button data-testid="button-1">Button 1</button>
-              <button data-testid="button-2">Button 2</button>
-            </section>
-            <button onClick={() => setIsActive(false)} data-testid="deactivate">Deactivate</button>
-          </section>
-        );
-      };
-
-      const { getByTestId } = renderWithProviders(<TestRestoreFocus />);
-      
-      const restoreButton = getByTestId('restore-button');
-      restoreButton.focus();
-      
-      const deactivateButton = getByTestId('deactivate');
-      deactivateButton.click();
-
-      // Focus should be restored to the previously focused element
-      // Note: This is hard to test directly without waiting for effects
-      expect(document.activeElement).toBeDefined();
-    });
-
-    it('should not restore focus when restoreFocus=false', () => {
-      const TestNoRestore = () => {
-        const [isActive, setIsActive] = React.useState(true);
-        const focusTrap = useFocusTrap({ isActive, restoreFocus: false });
-        const restoreButton = React.useRef<HTMLButtonElement>(null);
-
-        React.useEffect(() => {
-          if (restoreButton.current) {
-            restoreButton.current.focus();
-          }
-        }, []);
-
-        return (
-          <section>
-            <button ref={restoreButton} data-testid="restore-button">Restore Target</button>
-            <section ref={focusTrap.containerRef as any} data-testid="container">
-              <button data-testid="button-1">Button 1</button>
-            </section>
-            <button onClick={() => setIsActive(false)} data-testid="deactivate">Deactivate</button>
-          </section>
-        );
-      };
-
-      renderWithProviders(<TestNoRestore />);
-      
-      // When restoreFocus is false, focus should not be restored
-      // This is tested implicitly through the hook's behavior
-    });
-  });
-
-  describe('Auto-focus Behavior', () => {
-    it('should auto-focus first element when autoFocus=true and isActive=true', async () => {
-      const TestAutoFocus = () => {
-        const focusTrap = useFocusTrap({ isActive: true, autoFocus: true });
-        
-        return (
-          <section ref={focusTrap.containerRef as any} data-testid="container">
-            <button data-testid="button-1">Button 1</button>
-            <button data-testid="button-2">Button 2</button>
-          </section>
-        );
-      };
-
-      renderWithProviders(<TestAutoFocus />);
-      
-      // Auto-focus happens after render, so we need to wait
-      await new Promise(resolve => setTimeout(resolve, 10));
-      
-      const button1 = screen.getByTestId('button-1');
-      // The first button should be focused (though timing may vary)
-      expect(button1).toBeDefined();
-    });
-
-    it('should not auto-focus when autoFocus=false', () => {
-      const TestNoAutoFocus = () => {
-        const focusTrap = useFocusTrap({ isActive: true, autoFocus: false });
-        
-        return (
-          <section ref={focusTrap.containerRef as any} data-testid="container">
-            <button data-testid="button-1">Button 1</button>
-          </section>
-        );
-      };
-
-      renderWithProviders(<TestNoAutoFocus />);
-      
-      const button1 = screen.getByTestId('button-1');
-      // When autoFocus is false, focus should not automatically move
-      expect(button1).toBeDefined();
-    });
-
-    it('should not auto-focus when isActive=false', () => {
-      const TestInactive = () => {
-        const focusTrap = useFocusTrap({ isActive: false, autoFocus: true });
-        
-        return (
-          <section ref={focusTrap.containerRef as any} data-testid="container">
-            <button data-testid="button-1">Button 1</button>
-          </section>
-        );
-      };
-
-      renderWithProviders(<TestInactive />);
-      
-      // When inactive, auto-focus should not occur
-      expect(screen.getByTestId('button-1')).toBeDefined();
-    });
-  });
-
-  describe('Custom Focusable Selector', () => {
-    it('should use custom focusable selector', () => {
-      const TestCustomSelector = () => {
-        const focusTrap = useFocusTrap({
-          focusableSelector: 'button.custom-focusable'
-        });
-        
-        return (
-          <section ref={focusTrap.containerRef as any} data-testid="container">
-            <button className="custom-focusable" data-testid="custom-1">Custom 1</button>
-            <button data-testid="regular-1">Regular 1</button>
-            <button className="custom-focusable" data-testid="custom-2">Custom 2</button>
-          </section>
-        );
-      };
-
-      renderWithProviders(<TestCustomSelector />);
-      
-      const elements = screen.getByTestId('container').querySelectorAll('button.custom-focusable');
-      expect(elements.length).toBe(2);
-    });
-
-    it('should filter out non-matching elements with custom selector', () => {
-      const TestCustomFilter = () => {
-        const focusTrap = useFocusTrap({
-          focusableSelector: 'input[type="text"]'
-        });
-        
-        return (
-          <section ref={focusTrap.containerRef as any} data-testid="container">
-            <input type="text" data-testid="text-input" />
-            <input type="checkbox" data-testid="checkbox-input" />
-            <button data-testid="button">Button</button>
-          </section>
-        );
-      };
-
-      renderWithProviders(<TestCustomFilter />);
-      
-      const focusableElements = screen.getByTestId('container').querySelectorAll('input[type="text"]');
-      expect(focusableElements.length).toBe(1);
-    });
-  });
-
-  describe('Keyboard Navigation Edge Cases', () => {
-    it('should handle Tab key when focus is on first element', () => {
-      const TestTabFirst = () => {
-        const focusTrap = useFocusTrap({ isActive: true });
-        
-        return (
-          <section ref={focusTrap.containerRef as any} data-testid="container">
-            <button data-testid="button-1">Button 1</button>
-            <button data-testid="button-2">Button 2</button>
-            <button data-testid="button-3">Button 3</button>
-          </section>
-        );
-      };
-
-      renderWithProviders(<TestTabFirst />);
-      
-      const button1 = screen.getByTestId('button-1');
-      button1.focus();
-      
-      // Simulate Tab key press
-      const tabEvent = new KeyboardEvent('keydown', {
-        key: 'Tab',
-        bubbles: true,
-        cancelable: true
-      });
-      button1.dispatchEvent(tabEvent);
-      
-      // Focus should move to button 2
-      expect(button1).toBeDefined();
-    });
-
-    it('should handle Shift+Tab when focus is on last element', () => {
-      const TestShiftTabLast = () => {
-        const focusTrap = useFocusTrap({ isActive: true });
-        
-        return (
-          <section ref={focusTrap.containerRef as any} data-testid="container">
-            <button data-testid="button-1">Button 1</button>
-            <button data-testid="button-2">Button 2</button>
-            <button data-testid="button-3">Button 3</button>
-          </section>
-        );
-      };
-
-      renderWithProviders(<TestShiftTabLast />);
-      
-      const button3 = screen.getByTestId('button-3');
-      button3.focus();
-      
-      // Simulate Shift+Tab key press
-      const shiftTabEvent = new KeyboardEvent('keydown', {
-        key: 'Tab',
-        shiftKey: true,
-        bubbles: true,
-        cancelable: true
-      });
-      button3.dispatchEvent(shiftTabEvent);
-      
-      // Focus should wrap to first element
-      expect(button3).toBeDefined();
-    });
-
-    it('should handle Escape key with onEscape callback', () => {
-      const onEscape = vi.fn();
-      const TestEscape = () => {
-        const focusTrap = useFocusTrap({ isActive: true, onEscape });
-        
-        return (
-          <section ref={focusTrap.containerRef as any} data-testid="container">
-            <button data-testid="button-1">Button 1</button>
-          </section>
-        );
-      };
-
-      renderWithProviders(<TestEscape />);
-      
-      const container = screen.getByTestId('container');
-      const escapeEvent = new KeyboardEvent('keydown', {
-        key: 'Escape',
-        bubbles: true
-      });
-      container.dispatchEvent(escapeEvent);
-      
-      expect(onEscape).toHaveBeenCalledTimes(1);
-    });
-
-    it('should not handle Escape key when onEscape is not provided', () => {
-      const TestNoEscape = () => {
-        const focusTrap = useFocusTrap({ isActive: true });
-        
-        return (
-          <section ref={focusTrap.containerRef as any} data-testid="container">
-            <button data-testid="button-1">Button 1</button>
-          </section>
-        );
-      };
-
-      renderWithProviders(<TestNoEscape />);
-      
-      const container = screen.getByTestId('container');
-      const escapeEvent = new KeyboardEvent('keydown', {
-        key: 'Escape',
-        bubbles: true
-      });
-      
-      // Should not throw error
-      expect(() => container.dispatchEvent(escapeEvent)).not.toThrow();
-    });
-
-    it('should handle Tab key when no focusable elements exist', () => {
-      const TestNoElements = () => {
-        const focusTrap = useFocusTrap({ isActive: true });
-        
-        return (
-          <section ref={focusTrap.containerRef as any} data-testid="container">
-            <p data-testid="non-focusable">No focusable elements</p>
-          </section>
-        );
-      };
-
-      renderWithProviders(<TestNoElements />);
-      
-      const container = screen.getByTestId('container');
-      const tabEvent = new KeyboardEvent('keydown', {
-        key: 'Tab',
-        bubbles: true,
-        cancelable: true
-      });
-      
-      // Should not throw error
-      expect(() => container.dispatchEvent(tabEvent)).not.toThrow();
-    });
-  });
-
-  describe('Container Ref Handling', () => {
-    it('should handle ref attachment to container', () => {
-      const TestRefAttachment = () => {
-        const focusTrap = useFocusTrap();
-        
-        expect(focusTrap.containerRef).toBeDefined();
-        expect(focusTrap.containerRef.current).toBeNull(); // Before render
-        
-        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
-      };
-
-      renderWithProviders(<TestRefAttachment />);
-      
-      const container = screen.getByTestId('container');
-      expect(container).toBeDefined();
-    });
-
-    it('should handle ref when container is conditionally rendered', () => {
-      const TestConditionalRef = () => {
-        const [show, setShow] = React.useState(true);
-        const focusTrap = useFocusTrap();
-        
-        return (
-          <section>
-            {show && (
-              <section ref={focusTrap.containerRef as any} data-testid="container">
-                <button>Button</button>
-              </section>
-            )}
-            <button onClick={() => setShow(!show)} data-testid="toggle">Toggle</button>
-          </section>
-        );
-      };
-
-      const { getByTestId } = renderWithProviders(<TestConditionalRef />);
-      
-      expect(screen.getByTestId('container')).toBeDefined();
-      
-      act(() => {
-        getByTestId('toggle').click();
-      });
-      
-      expect(screen.queryByTestId('container')).toBeNull();
-    });
-  });
-
-  describe('Focus Management with Dynamic Elements', () => {
-    it('should handle dynamically added focusable elements', () => {
-      const TestDynamicElements = () => {
-        const [elements, setElements] = React.useState(['Button 1']);
-        const focusTrap = useFocusTrap({ isActive: true });
-        
-        return (
-          <section ref={focusTrap.containerRef as any} data-testid="container">
-            {elements.map((label, index) => (
-              <button key={index} data-testid={`button-${index}`}>{label}</button>
-            ))}
-            <button
-              onClick={() => setElements([...elements, `Button ${elements.length + 1}`])}
-              data-testid="add-button"
-            >
-              Add
-            </button>
-          </section>
-        );
-      };
-
-      const { getByTestId } = renderWithProviders(<TestDynamicElements />);
-      
-      expect(screen.getByTestId('button-0')).toBeDefined();
-      
-      act(() => {
-        getByTestId('add-button').click();
-      });
-      
-      expect(screen.getByTestId('button-1')).toBeDefined();
-      
-      // getFocusableElements should return the new elements
-      const container = screen.getByTestId('container');
-      const focusableElements = container.querySelectorAll('button');
-      expect(focusableElements.length).toBeGreaterThan(1);
-    });
-
-    it('should handle dynamically removed focusable elements', async () => {
-      const TestRemoveElements = () => {
-        const [elements, setElements] = React.useState(['Button 1', 'Button 2', 'Button 3']);
-        const focusTrap = useFocusTrap({ isActive: true });
-        
-        return (
-          <section ref={focusTrap.containerRef as any} data-testid="container">
-            {elements.map((label, index) => (
-              <section key={`${label}-${index}`} style={{ display: 'flex', gap: '8px' }}>
-                <button data-testid={`button-${label}`}>
-                  {label}
-                </button>
-                <button
-                  onClick={() => setElements(elements.filter((_, i) => i !== index))}
-                  data-testid={`remove-${index}`}
-                >
-                  Remove
-                </button>
-              </section>
-            ))}
-          </section>
-        );
-      };
-
-      const { getByTestId } = renderWithProviders(<TestRemoveElements />);
-      
-      expect(screen.getByTestId('button-Button 1')).toBeDefined();
-      expect(screen.getByTestId('button-Button 2')).toBeDefined();
-      expect(screen.getByTestId('button-Button 3')).toBeDefined();
-      
-      act(() => {
-        getByTestId('remove-1').click();
-      });
-      
-      // Wait for React to update the DOM after state change
-      await waitFor(() => {
-        expect(screen.queryByTestId('button-Button 2')).toBeNull();
-      });
-      
-      // Verify the removed button is gone and others remain
-      expect(screen.getByTestId('button-Button 1')).toBeDefined();
-      expect(screen.getByTestId('button-Button 3')).toBeDefined();
-      expect(screen.queryByTestId('button-Button 2')).toBeNull();
-    });
-
-    it('should handle elements becoming disabled/enabled', () => {
-      const TestDisabledToggle = () => {
-        const [disabled, setDisabled] = React.useState(false);
-        const focusTrap = useFocusTrap({ isActive: true });
-        
-        return (
-          <section ref={focusTrap.containerRef as any} data-testid="container">
-            <button disabled={disabled} data-testid="toggleable-button">
-              Toggleable Button
-            </button>
-            <button onClick={() => setDisabled(!disabled)} data-testid="toggle">
-              Toggle Disabled
-            </button>
-          </section>
-        );
-      };
-
-      const { getByTestId, rerender } = renderWithProviders(<TestDisabledToggle />);
-      
-      const toggleableButton = getByTestId('toggleable-button');
-      expect(toggleableButton).not.toBeDisabled();
-      
-      act(() => {
-        getByTestId('toggle').click();
-      });
-      
-      // Re-query the button after state update
-      const updatedButton = screen.getByTestId('toggleable-button');
-      expect(updatedButton).toBeDisabled();
-    });
-  });
-
-  describe('Focus Functions', () => {
-    it('should focus first element when focusFirst is called', () => {
-      const TestFocusFirst = () => {
-        const focusTrap = useFocusTrap({ isActive: true });
-        
-        React.useEffect(() => {
-          focusTrap.focusFirst();
-        }, []);
-        
-        return (
-          <section ref={focusTrap.containerRef as any} data-testid="container">
-            <button data-testid="button-1">Button 1</button>
-            <button data-testid="button-2">Button 2</button>
-          </section>
-        );
-      };
-
-      renderWithProviders(<TestFocusFirst />);
-      
-      const button1 = screen.getByTestId('button-1');
-      // focusFirst should focus the first element
-      expect(button1).toBeDefined();
-    });
-
-    it('should focus last element when focusLast is called', () => {
-      const TestFocusLast = () => {
-        const focusTrap = useFocusTrap({ isActive: true });
-        
-        React.useEffect(() => {
-          focusTrap.focusLast();
-        }, []);
-        
-        return (
-          <section ref={focusTrap.containerRef as any} data-testid="container">
-            <button data-testid="button-1">Button 1</button>
-            <button data-testid="button-2">Button 2</button>
-          </section>
-        );
-      };
-
-      renderWithProviders(<TestFocusLast />);
-      
-      const button2 = screen.getByTestId('button-2');
-      // focusLast should focus the last element
-      expect(button2).toBeDefined();
-    });
-
-    it('getFocusableElements should return correct elements', () => {
-      const TestGetFocusable = () => {
-        const focusTrap = useFocusTrap({ isActive: true });
-        const [count, setCount] = React.useState(0);
-        
-        React.useEffect(() => {
-          const elements = focusTrap.getFocusableElements();
-          setCount(elements.length);
-        }, []);
-        
-        return (
-          <section ref={focusTrap.containerRef as any} data-testid="container">
-            <button data-testid="button-1">Button 1</button>
-            <input data-testid="input-1" type="text" />
-            <button data-testid="button-2" disabled>Disabled</button>
-            <p data-testid="non-focusable">Non-focusable</p>
-          </section>
-        );
-      };
-
-      renderWithProviders(<TestGetFocusable />);
-      
-      // getFocusableElements should return 2 (button-1 and input-1, excluding disabled button and div)
-      expect(screen.getByTestId('container')).toBeDefined();
-    });
-  });
-});