@jmruthers/pace-core 0.6.6 → 0.6.7

package/src/hooks/__tests__/hooks.integration.test.tsx

@@ -77,21 +77,21 @@ const DebouncedSearch = () => {
   }, [debouncedSearchTerm]);
 
   return (
-    <div>
+    <section>
       <Input
         data-testid="search-input"
         value={searchTerm}
         onChange={(e) => setSearchTerm(e.target.value)}
         placeholder="Search..."
       />
-      <div data-testid="search-term">Current: {searchTerm}</div>
-      <div data-testid="debounced-term">Debounced: {debouncedSearchTerm}</div>
-      <div data-testid="results">
+      <p data-testid="search-term">Current: {searchTerm}</p>
+      <p data-testid="debounced-term">Debounced: {debouncedSearchTerm}</p>
+      <section data-testid="results">
         {searchResults.map((result, index) => (
-          <div key={index} data-testid={`result-${index}`}>{result}</div>
+          <p key={index} data-testid={`result-${index}`}>{result}</p>
         ))}
-      </div>
-    </div>
+      </section>
+    </section>
   );
 };
 
@@ -100,17 +100,17 @@ const ResponsiveComponent = () => {
   const isMobile = useIsMobile();
 
   return (
-    <div>
-      <div data-testid="device-type">
+    <section>
+      <p data-testid="device-type">
         {isMobile ? 'Mobile' : 'Desktop'}
-      </div>
+      </p>
       <Button 
         data-testid="responsive-button"
         className={isMobile ? 'mobile-button' : 'desktop-button'}
       >
         {isMobile ? 'Mobile Action' : 'Desktop Action'}
       </Button>
-    </div>
+    </section>
   );
 };
 
@@ -138,7 +138,7 @@ const ValidatedForm = ({ onSubmit }: ValidatedFormProps = {}) => {
       onSubmit={handleSubmit}
     >
       {(methods) => (
-        <ValidatedFormFields methods={methods} />
+        <ValidatedFormFields methods={methods as any} />
       )}
     </Form>
   );
@@ -151,27 +151,27 @@ const ValidatedFormFields = ({ methods }: { methods: ReturnType<typeof useForm>
   
   return (
     <>
-      <div>
+      <section>
         <Input
           {...methods.register('name')}
           data-testid="name-input"
           placeholder="Name"
         />
         {errors.name && (
-          <div data-testid="name-error">{errors.name.message}</div>
+          <p data-testid="name-error">{String(errors.name.message)}</p>
         )}
-      </div>
-      <div>
+      </section>
+      <section>
         <Input
           {...methods.register('email')}
           data-testid="email-input"
           placeholder="Email"
         />
         {errors.email && (
-          <div data-testid="email-error">{errors.email.message}</div>
+          <p data-testid="email-error">{String(errors.email.message)}</p>
         )}
-      </div>
-      <div>
+      </section>
+      <section>
         <Input
           {...methods.register('age', { valueAsNumber: true })}
           data-testid="age-input"
@@ -179,9 +179,9 @@ const ValidatedFormFields = ({ methods }: { methods: ReturnType<typeof useForm>
           placeholder="Age"
         />
         {errors.age && (
-          <div data-testid="age-error">{errors.age.message}</div>
+          <p data-testid="age-error">{String(errors.age.message)}</p>
         )}
-      </div>
+      </section>
       <Button type="submit" data-testid="submit-button">
         Submit
       </Button>
@@ -211,20 +211,20 @@ const KeyboardShortcutsComponent = () => {
   useKeyboardShortcuts(shortcuts);
 
   return (
-    <div>
+    <section>
       <Button onClick={() => setIsModalOpen(true)} data-testid="open-modal">
         Open Modal
       </Button>
       {isModalOpen && (
-        <div data-testid="modal">
-          <div>Modal Content</div>
+        <section data-testid="modal">
+          <p>Modal Content</p>
           <Button onClick={() => setIsModalOpen(false)} data-testid="close-modal">
             Close
           </Button>
-        </div>
+        </section>
       )}
-      <div data-testid="saved-status">{savedData}</div>
-    </div>
+      <p data-testid="saved-status">{savedData}</p>
+    </section>
   );
 };
 
@@ -238,13 +238,13 @@ const FocusManagementComponent = () => {
   });
 
   return (
-    <div ref={focusManager.containerRef}>
+    <section ref={focusManager.containerRef}>
       <Button data-testid="first-button">First Button</Button>
       <Input data-testid="first-input" placeholder="First Input" />
       <Button data-testid="second-button">Second Button</Button>
       <Input data-testid="second-input" placeholder="Second Input" />
       <Button data-testid="last-button">Last Button</Button>
-    </div>
+    </section>
   );
 };
 
@@ -257,10 +257,10 @@ const PerformanceTestComponent = () => {
   });
 
   return (
-    <div data-testid="performance-component">
+    <section data-testid="performance-component">
       <h1>Performance Test Component</h1>
       <p>This component is being monitored for performance.</p>
-    </div>
+    </section>
   );
 };
 
@@ -269,19 +269,19 @@ const DataTableStateComponent = () => {
   const tableState = useDataTableState({ initialPageSize: 10, data: [] });
 
   return (
-    <div>
-      <div data-testid="sorting-state">
+    <section>
+      <p data-testid="sorting-state">
         Sorting: {JSON.stringify(tableState.state.sorting)}
-      </div>
-      <div data-testid="filters-state">
+      </p>
+      <p data-testid="filters-state">
         Filters: {JSON.stringify(tableState.state.columnFilters)}
-      </div>
-      <div data-testid="page-state">
+      </p>
+      <p data-testid="page-state">
         Page: {tableState.state.pageIndex + 1} of {Math.ceil(100 / tableState.state.pageSize)}
-      </div>
-      <div data-testid="selected-rows">
+      </p>
+      <p data-testid="selected-rows">
         Selected: {tableState.state.selectedRows.length} rows
-      </div>
+      </p>
       <Button 
         onClick={() => tableState.actions.setSorting([{ id: 'name', desc: false }])}
         data-testid="sort-name"
@@ -294,7 +294,7 @@ const DataTableStateComponent = () => {
       >
         Filter Active
       </Button>
-    </div>
+    </section>
   );
 };
 
@@ -332,7 +332,7 @@ describe('Hooks Integration', () => {
       await user.type(searchInput, 'abc');
 
       // Should not show results immediately
-      expect(screen.queryByTestId('result-0')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('result-0')).toBeNull();
 
       // Wait for final debounced value
       await waitFor(() => {
@@ -402,11 +402,11 @@ describe('Hooks Integration', () => {
         const emailError = screen.queryByTestId('email-error');
         const ageError = screen.queryByTestId('age-error');
         
-        expect(nameError).toBeInTheDocument();
+        expect(nameError).toBeDefined();
         expect(nameError).toHaveTextContent('Name must be at least 2 characters');
-        expect(emailError).toBeInTheDocument();
+        expect(emailError).toBeDefined();
         expect(emailError).toHaveTextContent('Invalid email address');
-        expect(ageError).toBeInTheDocument();
+        expect(ageError).toBeDefined();
         expect(ageError).toHaveTextContent('Must be at least 18 years old');
       }, { timeout: 5000 });
     });
@@ -451,13 +451,13 @@ describe('Hooks Integration', () => {
       const openButton = screen.getByTestId('open-modal');
       fireEvent.click(openButton);
 
-      expect(screen.getByTestId('modal')).toBeInTheDocument();
+      expect(screen.getByTestId('modal')).toBeDefined();
 
       // Test Escape key
       fireEvent.keyDown(document, { key: 'Escape' });
 
       await waitFor(() => {
-        expect(screen.queryByTestId('modal')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('modal')).toBeNull();
       });
     });
 
@@ -512,7 +512,7 @@ describe('Hooks Integration', () => {
       
       renderWithProviders(<PerformanceTestComponent />);
 
-      expect(screen.getByTestId('performance-component')).toBeInTheDocument();
+      expect(screen.getByTestId('performance-component')).toBeDefined();
 
       // Simulate slow render
       mockPerformance.now.mockReturnValueOnce(0);
@@ -529,7 +529,7 @@ describe('Hooks Integration', () => {
       // Note: This test may need to be updated based on how useComponentPerformance is used
       // The Logger mock should be checked if logging is enabled
       // For now, we verify the component renders without errors
-      expect(screen.getByTestId('performance-component')).toBeInTheDocument();
+      expect(screen.getByTestId('performance-component')).toBeDefined();
     });
   });