@jmruthers/pace-core 0.6.5 → 0.6.7

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

@@ -17,13 +17,13 @@ const TestComponent = ({ options = {} }: { options?: any }) => {
   const focusTrap = useFocusTrap(options);
 
   return (
-    <div ref={focusTrap.containerRef as any} data-testid="container">
+    <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>
-      <div data-testid="non-focusable">Non-focusable</div>
-    </div>
+      <p data-testid="non-focusable">Non-focusable</p>
+    </section>
   );
 };
 
@@ -39,26 +39,26 @@ describe('useFocusTrap', () => {
 
     it('should render with container element', () => {
       renderWithProviders(<TestComponent />);
-      expect(screen.getByTestId('container')).toBeInTheDocument();
+      expect(screen.getByTestId('container')).toBeDefined();
     });
 
     it('should render with focusable elements', () => {
       renderWithProviders(<TestComponent />);
-      expect(screen.getByTestId('button-1')).toBeInTheDocument();
-      expect(screen.getByTestId('input-1')).toBeInTheDocument();
-      expect(screen.getByTestId('button-2')).toBeInTheDocument();
+      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).toBeInTheDocument();
+      expect(disabledButton).toBeDefined();
       expect(disabledButton).toBeDisabled();
     });
 
     it('should handle non-focusable elements', () => {
       renderWithProviders(<TestComponent />);
-      expect(screen.getByTestId('non-focusable')).toBeInTheDocument();
+      expect(screen.getByTestId('non-focusable')).toBeDefined();
     });
   });
 
@@ -72,7 +72,7 @@ describe('useFocusTrap', () => {
         expect(typeof focusTrap.focusLast).toBe('function');
         expect(typeof focusTrap.getFocusableElements).toBe('function');
         
-        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
       };
 
       renderWithProviders(<TestHook />);
@@ -85,7 +85,7 @@ describe('useFocusTrap', () => {
         // Should work with default options
         expect(focusTrap.containerRef.current).toBeDefined();
         
-        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
       };
 
       renderWithProviders(<TestHook />);
@@ -103,7 +103,7 @@ describe('useFocusTrap', () => {
         
         expect(focusTrap.containerRef.current).toBeDefined();
         
-        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
       };
 
       renderWithProviders(<TestHook />);
@@ -120,7 +120,7 @@ describe('useFocusTrap', () => {
         expect(() => focusTrap.focusLast()).not.toThrow();
         expect(() => focusTrap.getFocusableElements()).not.toThrow();
         
-        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
       };
 
       renderWithProviders(<TestHook />);
@@ -135,7 +135,7 @@ describe('useFocusTrap', () => {
         expect(() => focusTrap.focusLast()).not.toThrow();
         expect(() => focusTrap.getFocusableElements()).not.toThrow();
         
-        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
       };
 
       renderWithProviders(<TestHook />);
@@ -147,7 +147,7 @@ describe('useFocusTrap', () => {
       const TestHook = () => {
         const focusTrap = useFocusTrap({ isActive: true });
         expect(focusTrap.containerRef.current).toBeDefined();
-        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
       };
 
       renderWithProviders(<TestHook />);
@@ -157,7 +157,7 @@ describe('useFocusTrap', () => {
       const TestHook = () => {
         const focusTrap = useFocusTrap({ autoFocus: true });
         expect(focusTrap.containerRef.current).toBeDefined();
-        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
       };
 
       renderWithProviders(<TestHook />);
@@ -167,7 +167,7 @@ describe('useFocusTrap', () => {
       const TestHook = () => {
         const focusTrap = useFocusTrap({ restoreFocus: true });
         expect(focusTrap.containerRef.current).toBeDefined();
-        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
       };
 
       renderWithProviders(<TestHook />);
@@ -178,7 +178,7 @@ describe('useFocusTrap', () => {
       const TestHook = () => {
         const focusTrap = useFocusTrap({ onEscape });
         expect(focusTrap.containerRef.current).toBeDefined();
-        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
       };
 
       renderWithProviders(<TestHook />);
@@ -190,7 +190,7 @@ describe('useFocusTrap', () => {
           focusableSelector: 'button:not([disabled])' 
         });
         expect(focusTrap.containerRef.current).toBeDefined();
-        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
       };
 
       renderWithProviders(<TestHook />);
@@ -207,16 +207,16 @@ describe('useFocusTrap', () => {
         expect(focusTrap2.containerRef.current).toBeDefined();
         
         return (
-          <div>
-            <div ref={focusTrap1.containerRef as any} data-testid="container-1" />
-            <div ref={focusTrap2.containerRef as any} data-testid="container-2" />
-          </div>
+          <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')).toBeInTheDocument();
-      expect(screen.getByTestId('container-2')).toBeInTheDocument();
+      expect(screen.getByTestId('container-1')).toBeDefined();
+      expect(screen.getByTestId('container-2')).toBeDefined();
     });
 
     it('should handle component unmounting', () => {
@@ -238,11 +238,11 @@ describe('useFocusTrap', () => {
         
         expect(focusTrap.containerRef.current).toBeDefined();
         
-        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
       };
 
       renderWithProviders(<TestAllOptions />);
-      expect(screen.getByTestId('container')).toBeInTheDocument();
+      expect(screen.getByTestId('container')).toBeDefined();
     });
   });
 
@@ -256,7 +256,7 @@ describe('useFocusTrap', () => {
         expect(() => focusTrap.focusLast()).not.toThrow();
         expect(() => focusTrap.getFocusableElements()).not.toThrow();
         
-        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
       };
 
       renderWithProviders(<TestNullRef />);
@@ -268,7 +268,7 @@ describe('useFocusTrap', () => {
         
         expect(focusTrap.containerRef.current).toBeDefined();
         
-        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
       };
 
       renderWithProviders(<TestUndefinedOptions />);
@@ -280,7 +280,7 @@ describe('useFocusTrap', () => {
         
         expect(focusTrap.containerRef.current).toBeDefined();
         
-        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
       };
 
       renderWithProviders(<TestPartialOptions />);
@@ -301,14 +301,14 @@ describe('useFocusTrap', () => {
         }, []);
 
         return (
-          <div>
+          <section>
             <button ref={restoreButton} data-testid="restore-button">Restore Target</button>
-            <div ref={focusTrap.containerRef as any} data-testid="container">
+            <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>
-            </div>
+            </section>
             <button onClick={() => setIsActive(false)} data-testid="deactivate">Deactivate</button>
-          </div>
+          </section>
         );
       };
 
@@ -338,13 +338,13 @@ describe('useFocusTrap', () => {
         }, []);
 
         return (
-          <div>
+          <section>
             <button ref={restoreButton} data-testid="restore-button">Restore Target</button>
-            <div ref={focusTrap.containerRef as any} data-testid="container">
+            <section ref={focusTrap.containerRef as any} data-testid="container">
               <button data-testid="button-1">Button 1</button>
-            </div>
+            </section>
             <button onClick={() => setIsActive(false)} data-testid="deactivate">Deactivate</button>
-          </div>
+          </section>
         );
       };
 
@@ -361,10 +361,10 @@ describe('useFocusTrap', () => {
         const focusTrap = useFocusTrap({ isActive: true, autoFocus: true });
         
         return (
-          <div ref={focusTrap.containerRef as any} data-testid="container">
+          <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>
-          </div>
+          </section>
         );
       };
 
@@ -375,7 +375,7 @@ describe('useFocusTrap', () => {
       
       const button1 = screen.getByTestId('button-1');
       // The first button should be focused (though timing may vary)
-      expect(button1).toBeInTheDocument();
+      expect(button1).toBeDefined();
     });
 
     it('should not auto-focus when autoFocus=false', () => {
@@ -383,9 +383,9 @@ describe('useFocusTrap', () => {
         const focusTrap = useFocusTrap({ isActive: true, autoFocus: false });
         
         return (
-          <div ref={focusTrap.containerRef as any} data-testid="container">
+          <section ref={focusTrap.containerRef as any} data-testid="container">
             <button data-testid="button-1">Button 1</button>
-          </div>
+          </section>
         );
       };
 
@@ -393,7 +393,7 @@ describe('useFocusTrap', () => {
       
       const button1 = screen.getByTestId('button-1');
       // When autoFocus is false, focus should not automatically move
-      expect(button1).toBeInTheDocument();
+      expect(button1).toBeDefined();
     });
 
     it('should not auto-focus when isActive=false', () => {
@@ -401,16 +401,16 @@ describe('useFocusTrap', () => {
         const focusTrap = useFocusTrap({ isActive: false, autoFocus: true });
         
         return (
-          <div ref={focusTrap.containerRef as any} data-testid="container">
+          <section ref={focusTrap.containerRef as any} data-testid="container">
             <button data-testid="button-1">Button 1</button>
-          </div>
+          </section>
         );
       };
 
       renderWithProviders(<TestInactive />);
       
       // When inactive, auto-focus should not occur
-      expect(screen.getByTestId('button-1')).toBeInTheDocument();
+      expect(screen.getByTestId('button-1')).toBeDefined();
     });
   });
 
@@ -422,11 +422,11 @@ describe('useFocusTrap', () => {
         });
         
         return (
-          <div ref={focusTrap.containerRef as any} data-testid="container">
+          <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>
-          </div>
+          </section>
         );
       };
 
@@ -443,11 +443,11 @@ describe('useFocusTrap', () => {
         });
         
         return (
-          <div ref={focusTrap.containerRef as any} data-testid="container">
+          <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>
-          </div>
+          </section>
         );
       };
 
@@ -464,11 +464,11 @@ describe('useFocusTrap', () => {
         const focusTrap = useFocusTrap({ isActive: true });
         
         return (
-          <div ref={focusTrap.containerRef as any} data-testid="container">
+          <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>
-          </div>
+          </section>
         );
       };
 
@@ -486,7 +486,7 @@ describe('useFocusTrap', () => {
       button1.dispatchEvent(tabEvent);
       
       // Focus should move to button 2
-      expect(button1).toBeInTheDocument();
+      expect(button1).toBeDefined();
     });
 
     it('should handle Shift+Tab when focus is on last element', () => {
@@ -494,11 +494,11 @@ describe('useFocusTrap', () => {
         const focusTrap = useFocusTrap({ isActive: true });
         
         return (
-          <div ref={focusTrap.containerRef as any} data-testid="container">
+          <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>
-          </div>
+          </section>
         );
       };
 
@@ -517,7 +517,7 @@ describe('useFocusTrap', () => {
       button3.dispatchEvent(shiftTabEvent);
       
       // Focus should wrap to first element
-      expect(button3).toBeInTheDocument();
+      expect(button3).toBeDefined();
     });
 
     it('should handle Escape key with onEscape callback', () => {
@@ -526,9 +526,9 @@ describe('useFocusTrap', () => {
         const focusTrap = useFocusTrap({ isActive: true, onEscape });
         
         return (
-          <div ref={focusTrap.containerRef as any} data-testid="container">
+          <section ref={focusTrap.containerRef as any} data-testid="container">
             <button data-testid="button-1">Button 1</button>
-          </div>
+          </section>
         );
       };
 
@@ -549,9 +549,9 @@ describe('useFocusTrap', () => {
         const focusTrap = useFocusTrap({ isActive: true });
         
         return (
-          <div ref={focusTrap.containerRef as any} data-testid="container">
+          <section ref={focusTrap.containerRef as any} data-testid="container">
             <button data-testid="button-1">Button 1</button>
-          </div>
+          </section>
         );
       };
 
@@ -572,9 +572,9 @@ describe('useFocusTrap', () => {
         const focusTrap = useFocusTrap({ isActive: true });
         
         return (
-          <div ref={focusTrap.containerRef as any} data-testid="container">
-            <div data-testid="non-focusable">No focusable elements</div>
-          </div>
+          <section ref={focusTrap.containerRef as any} data-testid="container">
+            <p data-testid="non-focusable">No focusable elements</p>
+          </section>
         );
       };
 
@@ -600,13 +600,13 @@ describe('useFocusTrap', () => {
         expect(focusTrap.containerRef).toBeDefined();
         expect(focusTrap.containerRef.current).toBeNull(); // Before render
         
-        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+        return <section ref={focusTrap.containerRef as any} data-testid="container" />;
       };
 
       renderWithProviders(<TestRefAttachment />);
       
       const container = screen.getByTestId('container');
-      expect(container).toBeInTheDocument();
+      expect(container).toBeDefined();
     });
 
     it('should handle ref when container is conditionally rendered', () => {
@@ -615,20 +615,20 @@ describe('useFocusTrap', () => {
         const focusTrap = useFocusTrap();
         
         return (
-          <div>
+          <section>
             {show && (
-              <div ref={focusTrap.containerRef as any} data-testid="container">
+              <section ref={focusTrap.containerRef as any} data-testid="container">
                 <button>Button</button>
-              </div>
+              </section>
             )}
             <button onClick={() => setShow(!show)} data-testid="toggle">Toggle</button>
-          </div>
+          </section>
         );
       };
 
       const { getByTestId } = renderWithProviders(<TestConditionalRef />);
       
-      expect(screen.getByTestId('container')).toBeInTheDocument();
+      expect(screen.getByTestId('container')).toBeDefined();
       
       act(() => {
         getByTestId('toggle').click();
@@ -645,7 +645,7 @@ describe('useFocusTrap', () => {
         const focusTrap = useFocusTrap({ isActive: true });
         
         return (
-          <div ref={focusTrap.containerRef as any} data-testid="container">
+          <section ref={focusTrap.containerRef as any} data-testid="container">
             {elements.map((label, index) => (
               <button key={index} data-testid={`button-${index}`}>{label}</button>
             ))}
@@ -655,19 +655,19 @@ describe('useFocusTrap', () => {
             >
               Add
             </button>
-          </div>
+          </section>
         );
       };
 
       const { getByTestId } = renderWithProviders(<TestDynamicElements />);
       
-      expect(screen.getByTestId('button-0')).toBeInTheDocument();
+      expect(screen.getByTestId('button-0')).toBeDefined();
       
       act(() => {
         getByTestId('add-button').click();
       });
       
-      expect(screen.getByTestId('button-1')).toBeInTheDocument();
+      expect(screen.getByTestId('button-1')).toBeDefined();
       
       // getFocusableElements should return the new elements
       const container = screen.getByTestId('container');
@@ -681,9 +681,9 @@ describe('useFocusTrap', () => {
         const focusTrap = useFocusTrap({ isActive: true });
         
         return (
-          <div ref={focusTrap.containerRef as any} data-testid="container">
+          <section ref={focusTrap.containerRef as any} data-testid="container">
             {elements.map((label, index) => (
-              <div key={`${label}-${index}`} style={{ display: 'flex', gap: '8px' }}>
+              <section key={`${label}-${index}`} style={{ display: 'flex', gap: '8px' }}>
                 <button data-testid={`button-${label}`}>
                   {label}
                 </button>
@@ -693,17 +693,17 @@ describe('useFocusTrap', () => {
                 >
                   Remove
                 </button>
-              </div>
+              </section>
             ))}
-          </div>
+          </section>
         );
       };
 
       const { getByTestId } = renderWithProviders(<TestRemoveElements />);
       
-      expect(screen.getByTestId('button-Button 1')).toBeInTheDocument();
-      expect(screen.getByTestId('button-Button 2')).toBeInTheDocument();
-      expect(screen.getByTestId('button-Button 3')).toBeInTheDocument();
+      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();
@@ -715,9 +715,9 @@ describe('useFocusTrap', () => {
       });
       
       // Verify the removed button is gone and others remain
-      expect(screen.getByTestId('button-Button 1')).toBeInTheDocument();
-      expect(screen.getByTestId('button-Button 3')).toBeInTheDocument();
-      expect(screen.queryByTestId('button-Button 2')).not.toBeInTheDocument();
+      expect(screen.getByTestId('button-Button 1')).toBeDefined();
+      expect(screen.getByTestId('button-Button 3')).toBeDefined();
+        expect(screen.queryByTestId('button-Button 2')).not.toBeInTheDocument();
     });
 
     it('should handle elements becoming disabled/enabled', () => {
@@ -726,14 +726,14 @@ describe('useFocusTrap', () => {
         const focusTrap = useFocusTrap({ isActive: true });
         
         return (
-          <div ref={focusTrap.containerRef as any} data-testid="container">
+          <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>
-          </div>
+          </section>
         );
       };
 
@@ -762,10 +762,10 @@ describe('useFocusTrap', () => {
         }, []);
         
         return (
-          <div ref={focusTrap.containerRef as any} data-testid="container">
+          <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>
-          </div>
+          </section>
         );
       };
 
@@ -773,7 +773,7 @@ describe('useFocusTrap', () => {
       
       const button1 = screen.getByTestId('button-1');
       // focusFirst should focus the first element
-      expect(button1).toBeInTheDocument();
+      expect(button1).toBeDefined();
     });
 
     it('should focus last element when focusLast is called', () => {
@@ -785,10 +785,10 @@ describe('useFocusTrap', () => {
         }, []);
         
         return (
-          <div ref={focusTrap.containerRef as any} data-testid="container">
+          <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>
-          </div>
+          </section>
         );
       };
 
@@ -796,7 +796,7 @@ describe('useFocusTrap', () => {
       
       const button2 = screen.getByTestId('button-2');
       // focusLast should focus the last element
-      expect(button2).toBeInTheDocument();
+      expect(button2).toBeDefined();
     });
 
     it('getFocusableElements should return correct elements', () => {
@@ -810,19 +810,19 @@ describe('useFocusTrap', () => {
         }, []);
         
         return (
-          <div ref={focusTrap.containerRef as any} data-testid="container">
+          <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>
-            <div data-testid="non-focusable">Non-focusable</div>
-          </div>
+            <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')).toBeInTheDocument();
+      expect(screen.getByTestId('container')).toBeDefined();
     });
   });
 });