@jmruthers/pace-core 0.6.9 → 0.6.11

package/src/components/Table/Table.test.tsx

@@ -11,6 +11,7 @@
 
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import '@testing-library/jest-dom';
 import {
@@ -35,25 +36,11 @@ describe('[component] Table', () => {
   });
 
   describe('Rendering', () => {
-    it('renders with default props', () => {
-      render(
-        <Table>
-          <TableBody>
-            <TableRow>
-              <TableCell>Test content</TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      );
-
-      const table = screen.getByRole('table');
-      expect(table).toBeInTheDocument();
-      expect(table).toBeVisible();
-    });
-
-    it('renders with custom className', () => {
+    it('renders with default props, custom className, ref forwarding, and additional props', () => {
+      const ref = React.createRef<HTMLTableElement>();
+      
       render(
-        <Table className="custom-table-class">
+        <Table ref={ref} className="custom-table-class" data-testid="custom-table" aria-label="Test table">
           <TableBody>
             <TableRow>
               <TableCell>Test content</TableCell>
@@ -65,56 +52,13 @@ describe('[component] Table', () => {
       const table = screen.getByRole('table');
       expect(table).toBeInTheDocument();
       expect(table).toBeVisible();
-    });
-
-    it('forwards ref correctly', () => {
-      const ref = React.createRef<HTMLTableElement>();
-      
-      render(
-        <Table ref={ref}>
-          <TableBody>
-            <TableRow>
-              <TableCell>Test content</TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      );
-
+      expect(screen.getByTestId('custom-table')).toHaveAttribute('aria-label', 'Test table');
       expect(ref.current).toBeInstanceOf(HTMLTableElement);
     });
-
-    it('forwards additional props', () => {
-      render(
-        <Table data-testid="custom-table" aria-label="Test table">
-          <TableBody>
-            <TableRow>
-              <TableCell>Test content</TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      );
-
-      const table = screen.getByTestId('custom-table');
-      expect(table).toHaveAttribute('aria-label', 'Test table');
-    });
   });
 
   describe('Accessibility', () => {
-    it('has proper table role', () => {
-      render(
-        <Table>
-          <TableBody>
-            <TableRow>
-              <TableCell>Test content</TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      );
-
-      expect(screen.getByRole('table')).toBeInTheDocument();
-    });
-
-    it('supports table caption', () => {
+    it('has proper table role and supports table caption', () => {
       render(
         <Table>
           <TableCaption>Test table caption</TableCaption>
@@ -126,6 +70,7 @@ describe('[component] Table', () => {
         </Table>
       );
 
+      expect(screen.getByRole('table')).toBeInTheDocument();
       expect(screen.getByText('Test table caption')).toBeInTheDocument();
     });
   });
@@ -137,10 +82,12 @@ describe('[component] TableHeader', () => {
   });
 
   describe('Rendering', () => {
-    it('renders with default props', () => {
+    it('renders with default props, custom className, and forwards ref correctly', () => {
+      const ref = React.createRef<HTMLTableSectionElement>();
+      
       render(
         <Table>
-          <TableHeader>
+          <TableHeader ref={ref} className="custom-header-class">
             <TableRow>
               <TableHead>Header 1</TableHead>
               <TableHead>Header 2</TableHead>
@@ -152,37 +99,6 @@ describe('[component] TableHeader', () => {
       const header = screen.getByRole('columnheader', { name: 'Header 1' }).closest('thead');
       expect(header).toBeInTheDocument();
       expect(header).toBeVisible();
-    });
-
-    it('renders with custom className', () => {
-      render(
-        <Table>
-          <TableHeader className="custom-header-class">
-            <TableRow>
-              <TableHead>Header 1</TableHead>
-            </TableRow>
-          </TableHeader>
-        </Table>
-      );
-
-      const header = screen.getByRole('columnheader', { name: 'Header 1' }).closest('thead');
-      expect(header).toBeInTheDocument();
-      expect(header).toBeVisible();
-    });
-
-    it('forwards ref correctly', () => {
-      const ref = React.createRef<HTMLTableSectionElement>();
-      
-      render(
-        <Table>
-          <TableHeader ref={ref}>
-            <TableRow>
-              <TableHead>Header 1</TableHead>
-            </TableRow>
-          </TableHeader>
-        </Table>
-      );
-
       expect(ref.current).toBeInstanceOf(HTMLTableSectionElement);
     });
   });
@@ -212,10 +128,12 @@ describe('[component] TableBody', () => {
   });
 
   describe('Rendering', () => {
-    it('renders with default props', () => {
+    it('renders with default props, custom className, and forwards ref correctly', () => {
+      const ref = React.createRef<HTMLTableSectionElement>();
+      
       render(
         <Table>
-          <TableBody>
+          <TableBody ref={ref} className="custom-body-class">
             <TableRow>
               <TableCell>Cell 1</TableCell>
               <TableCell>Cell 2</TableCell>
@@ -227,37 +145,6 @@ describe('[component] TableBody', () => {
       const body = screen.getByText('Cell 1').closest('tbody');
       expect(body).toBeInTheDocument();
       expect(body).toBeVisible();
-    });
-
-    it('renders with custom className', () => {
-      render(
-        <Table>
-          <TableBody className="custom-body-class">
-            <TableRow>
-              <TableCell>Cell 1</TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      );
-
-      const body = screen.getByText('Cell 1').closest('tbody');
-      expect(body).toBeInTheDocument();
-      expect(body).toBeVisible();
-    });
-
-    it('forwards ref correctly', () => {
-      const ref = React.createRef<HTMLTableSectionElement>();
-      
-      render(
-        <Table>
-          <TableBody ref={ref}>
-            <TableRow>
-              <TableCell>Cell 1</TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      );
-
       expect(ref.current).toBeInstanceOf(HTMLTableSectionElement);
     });
   });
@@ -286,10 +173,12 @@ describe('[component] TableFooter', () => {
   });
 
   describe('Rendering', () => {
-    it('renders with default props', () => {
+    it('renders with default props, custom className, and forwards ref correctly', () => {
+      const ref = React.createRef<HTMLTableSectionElement>();
+      
       render(
         <Table>
-          <TableFooter>
+          <TableFooter ref={ref} className="custom-footer-class">
             <TableRow>
               <TableCell>Footer 1</TableCell>
               <TableCell>Footer 2</TableCell>
@@ -301,37 +190,6 @@ describe('[component] TableFooter', () => {
       const footer = screen.getByText('Footer 1').closest('tfoot');
       expect(footer).toBeInTheDocument();
       expect(footer).toBeVisible();
-    });
-
-    it('renders with custom className', () => {
-      render(
-        <Table>
-          <TableFooter className="custom-footer-class">
-            <TableRow>
-              <TableCell>Footer 1</TableCell>
-            </TableRow>
-          </TableFooter>
-        </Table>
-      );
-
-      const footer = screen.getByText('Footer 1').closest('tfoot');
-      expect(footer).toBeInTheDocument();
-      expect(footer).toBeVisible();
-    });
-
-    it('forwards ref correctly', () => {
-      const ref = React.createRef<HTMLTableSectionElement>();
-      
-      render(
-        <Table>
-          <TableFooter ref={ref}>
-            <TableRow>
-              <TableCell>Footer 1</TableCell>
-            </TableRow>
-          </TableFooter>
-        </Table>
-      );
-
       expect(ref.current).toBeInstanceOf(HTMLTableSectionElement);
     });
   });
@@ -360,11 +218,13 @@ describe('[component] TableRow', () => {
   });
 
   describe('Rendering', () => {
-    it('renders with default props', () => {
-      render(
+    it('renders with default props, custom className, ref forwarding, and handles selected state', () => {
+      const ref = React.createRef<HTMLTableRowElement>();
+      
+      const { rerender } = render(
         <Table>
           <TableBody>
-            <TableRow>
+            <TableRow ref={ref} className="custom-row-class">
               <TableCell>Cell 1</TableCell>
               <TableCell>Cell 2</TableCell>
             </TableRow>
@@ -372,45 +232,12 @@ describe('[component] TableRow', () => {
         </Table>
       );
 
-      const row = screen.getByText('Cell 1').closest('tr');
+      let row = screen.getByText('Cell 1').closest('tr');
       expect(row).toBeInTheDocument();
       expect(row).toBeVisible();
-    });
-
-    it('renders with custom className', () => {
-      render(
-        <Table>
-          <TableBody>
-            <TableRow className="custom-row-class">
-              <TableCell>Cell 1</TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      );
-
-      const row = screen.getByText('Cell 1').closest('tr');
-      expect(row).toBeInTheDocument();
-      expect(row).toBeVisible();
-    });
-
-    it('forwards ref correctly', () => {
-      const ref = React.createRef<HTMLTableRowElement>();
-      
-      render(
-        <Table>
-          <TableBody>
-            <TableRow ref={ref}>
-              <TableCell>Cell 1</TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      );
-
       expect(ref.current).toBeInstanceOf(HTMLTableRowElement);
-    });
 
-    it('handles selected state', () => {
-      render(
+      rerender(
         <Table>
           <TableBody>
             <TableRow data-state="selected">
@@ -419,8 +246,7 @@ describe('[component] TableRow', () => {
           </TableBody>
         </Table>
       );
-
-      const row = screen.getByText('Cell 1').closest('tr');
+      row = screen.getByText('Cell 1').closest('tr');
       expect(row).toHaveAttribute('data-state', 'selected');
     });
   });
@@ -449,57 +275,26 @@ describe('[component] TableHead', () => {
   });
 
   describe('Rendering', () => {
-    it('renders with default props', () => {
-      render(
+    it('renders with default props, custom className, ref forwarding, and handles checkbox role styling', () => {
+      const ref = React.createRef<HTMLTableCellElement>();
+      
+      const { rerender } = render(
         <Table>
           <TableHeader>
             <TableRow>
-              <TableHead>Header 1</TableHead>
+              <TableHead ref={ref} className="custom-head-class">Header 1</TableHead>
               <TableHead>Header 2</TableHead>
             </TableRow>
           </TableHeader>
         </Table>
       );
 
-      const header = screen.getByRole('columnheader', { name: 'Header 1' });
-      expect(header).toBeInTheDocument();
-      expect(header).toBeVisible();
-    });
-
-    it('renders with custom className', () => {
-      render(
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead className="custom-head-class">Header 1</TableHead>
-            </TableRow>
-          </TableHeader>
-        </Table>
-      );
-
-      const header = screen.getByRole('columnheader', { name: 'Header 1' });
+      let header = screen.getByRole('columnheader', { name: 'Header 1' });
       expect(header).toBeInTheDocument();
       expect(header).toBeVisible();
-    });
-
-    it('forwards ref correctly', () => {
-      const ref = React.createRef<HTMLTableCellElement>();
-      
-      render(
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead ref={ref}>Header 1</TableHead>
-            </TableRow>
-          </TableHeader>
-        </Table>
-      );
-
       expect(ref.current).toBeInstanceOf(HTMLTableCellElement);
-    });
 
-    it('handles checkbox role styling', () => {
-      render(
+      rerender(
         <Table>
           <TableHeader>
             <TableRow>
@@ -510,8 +305,7 @@ describe('[component] TableHead', () => {
           </TableHeader>
         </Table>
       );
-
-      const header = screen.getByRole('columnheader');
+      header = screen.getByRole('columnheader');
       expect(header).toBeInTheDocument();
       expect(header).toBeVisible();
     });
@@ -542,57 +336,26 @@ describe('[component] TableCell', () => {
   });
 
   describe('Rendering', () => {
-    it('renders with default props', () => {
-      render(
+    it('renders with default props, custom className, ref forwarding, and handles checkbox role styling', () => {
+      const ref = React.createRef<HTMLTableCellElement>();
+      
+      const { rerender } = render(
         <Table>
           <TableBody>
             <TableRow>
-              <TableCell>Cell 1</TableCell>
+              <TableCell ref={ref} className="custom-cell-class">Cell 1</TableCell>
               <TableCell>Cell 2</TableCell>
             </TableRow>
           </TableBody>
         </Table>
       );
 
-      const cell = screen.getByText('Cell 1');
+      let cell = screen.getByText('Cell 1');
       expect(cell).toBeInTheDocument();
       expect(cell).toBeVisible();
-    });
-
-    it('renders with custom className', () => {
-      render(
-        <Table>
-          <TableBody>
-            <TableRow>
-              <TableCell className="custom-cell-class">Cell 1</TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      );
-
-      const cell = screen.getByText('Cell 1');
-      expect(cell).toBeInTheDocument();
-      expect(cell).toBeVisible();
-    });
-
-    it('forwards ref correctly', () => {
-      const ref = React.createRef<HTMLTableCellElement>();
-      
-      render(
-        <Table>
-          <TableBody>
-            <TableRow>
-              <TableCell ref={ref}>Cell 1</TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      );
-
       expect(ref.current).toBeInstanceOf(HTMLTableCellElement);
-    });
 
-    it('handles checkbox role styling', () => {
-      render(
+      rerender(
         <Table>
           <TableBody>
             <TableRow>
@@ -603,8 +366,7 @@ describe('[component] TableCell', () => {
           </TableBody>
         </Table>
       );
-
-      const cell = screen.getByRole('cell');
+      cell = screen.getByRole('cell');
       expect(cell).toBeInTheDocument();
       expect(cell).toBeVisible();
     });
@@ -635,10 +397,12 @@ describe('[component] TableCaption', () => {
   });
 
   describe('Rendering', () => {
-    it('renders with default props', () => {
+    it('renders with default props, custom className, and forwards ref correctly', () => {
+      const ref = React.createRef<HTMLTableCaptionElement>();
+      
       render(
         <Table>
-          <TableCaption>Test table caption</TableCaption>
+          <TableCaption ref={ref} className="custom-caption-class">Test table caption</TableCaption>
           <TableBody>
             <TableRow>
               <TableCell>Cell 1</TableCell>
@@ -650,39 +414,6 @@ describe('[component] TableCaption', () => {
       const caption = screen.getByText('Test table caption');
       expect(caption).toBeInTheDocument();
       expect(caption).toBeVisible();
-    });
-
-    it('renders with custom className', () => {
-      render(
-        <Table>
-          <TableCaption className="custom-caption-class">Test caption</TableCaption>
-          <TableBody>
-            <TableRow>
-              <TableCell>Cell 1</TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      );
-
-      const caption = screen.getByText('Test caption');
-      expect(caption).toBeInTheDocument();
-      expect(caption).toBeVisible();
-    });
-
-    it('forwards ref correctly', () => {
-      const ref = React.createRef<HTMLTableCaptionElement>();
-      
-      render(
-        <Table>
-          <TableCaption ref={ref}>Test caption</TableCaption>
-          <TableBody>
-            <TableRow>
-              <TableCell>Cell 1</TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      );
-
       expect(ref.current).toBeInstanceOf(HTMLTableCaptionElement);
     });
   });
@@ -825,4 +556,351 @@ describe('Table Integration', () => {
     expect(screen.getByRole('table')).toBeInTheDocument();
     expect(screen.getByText('No data available')).toBeInTheDocument();
   });
+
+  it('handles table with only header', () => {
+    render(
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Column 1</TableHead>
+            <TableHead>Column 2</TableHead>
+          </TableRow>
+        </TableHeader>
+      </Table>
+    );
+
+    expect(screen.getByRole('table')).toBeInTheDocument();
+    expect(screen.getAllByRole('columnheader')).toHaveLength(2);
+  });
+
+  it('handles table with only footer', () => {
+    render(
+      <Table>
+        <TableFooter>
+          <TableRow>
+            <TableCell>Total</TableCell>
+            <TableCell>$100</TableCell>
+          </TableRow>
+        </TableFooter>
+      </Table>
+    );
+
+    expect(screen.getByRole('table')).toBeInTheDocument();
+    expect(screen.getAllByRole('cell')).toHaveLength(2);
+  });
+
+  it('handles table with caption only', () => {
+    render(
+      <Table>
+        <TableCaption>Table description</TableCaption>
+      </Table>
+    );
+
+    expect(screen.getByRole('table')).toBeInTheDocument();
+    expect(screen.getByText('Table description')).toBeInTheDocument();
+  });
+
+  it('handles table with multiple rows', () => {
+    render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell>Row 1, Cell 1</TableCell>
+            <TableCell>Row 1, Cell 2</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Row 2, Cell 1</TableCell>
+            <TableCell>Row 2, Cell 2</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Row 3, Cell 1</TableCell>
+            <TableCell>Row 3, Cell 2</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+
+    expect(screen.getByRole('table')).toBeInTheDocument();
+    expect(screen.getAllByRole('row')).toHaveLength(3);
+    expect(screen.getAllByRole('cell')).toHaveLength(6);
+  });
+
+  it('handles table with colspan in cells', () => {
+    render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell colSpan={2}>Spanned cell</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Cell 1</TableCell>
+            <TableCell>Cell 2</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+
+    const spannedCell = screen.getByText('Spanned cell');
+    expect(spannedCell).toHaveAttribute('colSpan', '2');
+  });
+
+  it('handles table with rowspan in cells', () => {
+    render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell rowSpan={2}>Rowspan cell</TableCell>
+            <TableCell>Cell 1</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Cell 2</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+
+    const rowspanCell = screen.getByText('Rowspan cell');
+    expect(rowspanCell).toHaveAttribute('rowSpan', '2');
+  });
+
+  it('handles table with selected row state', () => {
+    render(
+      <Table>
+        <TableBody>
+          <TableRow data-state="selected">
+            <TableCell>Selected row</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Normal row</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+
+    const selectedRow = screen.getByText('Selected row').closest('tr');
+    expect(selectedRow).toHaveAttribute('data-state', 'selected');
+  });
+
+  it('handles table with custom className on all components', () => {
+    render(
+      <Table className="custom-table">
+        <TableCaption className="custom-caption">Caption</TableCaption>
+        <TableHeader className="custom-header">
+          <TableRow className="custom-header-row">
+            <TableHead className="custom-head">Header</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody className="custom-body">
+          <TableRow className="custom-row">
+            <TableCell className="custom-cell">Cell</TableCell>
+          </TableRow>
+        </TableBody>
+        <TableFooter className="custom-footer">
+          <TableRow className="custom-footer-row">
+            <TableCell className="custom-footer-cell">Footer</TableCell>
+          </TableRow>
+        </TableFooter>
+      </Table>
+    );
+
+    expect(screen.getByRole('table')).toHaveClass('custom-table');
+    expect(screen.getByText('Caption')).toHaveClass('custom-caption');
+    expect(screen.getByText('Header').closest('thead')).toHaveClass('custom-header');
+    expect(screen.getByText('Cell').closest('tbody')).toHaveClass('custom-body');
+    expect(screen.getByText('Footer').closest('tfoot')).toHaveClass('custom-footer');
+  });
+
+  it('handles table with interactive elements in cells', async () => {
+    const user = userEvent.setup();
+    const handleClick = vi.fn();
+    
+    render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell>
+              <button onClick={handleClick}>Click me</button>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Click me' }));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('handles table with links in cells', () => {
+    render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell>
+              <a href="/test">Link</a>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+
+    const link = screen.getByRole('link', { name: 'Link' });
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', '/test');
+  });
+
+  it('handles table with images in cells', () => {
+    render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell>
+              <img src="/test.jpg" alt="Test image" />
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+
+    const image = screen.getByAltText('Test image');
+    expect(image).toBeInTheDocument();
+    expect(image).toHaveAttribute('src', '/test.jpg');
+  });
+
+  it('handles table with form inputs in cells', () => {
+    render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell>
+              <input type="text" placeholder="Enter text" />
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+
+    const input = screen.getByPlaceholderText('Enter text');
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveAttribute('type', 'text');
+  });
+
+  it('handles table with very long content', () => {
+    const longContent = 'A'.repeat(1000);
+    render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell>{longContent}</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+
+    expect(screen.getByText(longContent)).toBeInTheDocument();
+  });
+
+  it('handles table with special characters in content', () => {
+    const specialContent = '<>&"\'';
+    render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell>{specialContent}</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+
+    expect(screen.getByText(specialContent)).toBeInTheDocument();
+  });
+
+  it('handles table with numeric content', () => {
+    render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell>123</TableCell>
+            <TableCell>456.78</TableCell>
+            <TableCell>-999</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+
+    expect(screen.getByText('123')).toBeInTheDocument();
+    expect(screen.getByText('456.78')).toBeInTheDocument();
+    expect(screen.getByText('-999')).toBeInTheDocument();
+  });
+
+  it('handles table with empty cells', () => {
+    render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell></TableCell>
+            <TableCell>Non-empty</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+
+    const cells = screen.getAllByRole('cell');
+    expect(cells).toHaveLength(2);
+    expect(cells[0]).toHaveTextContent('');
+    expect(cells[1]).toHaveTextContent('Non-empty');
+  });
+
+  it('handles table with aria-label on table element', () => {
+    render(
+      <Table aria-label="Data table">
+        <TableBody>
+          <TableRow>
+            <TableCell>Data</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+
+    expect(screen.getByRole('table', { name: 'Data table' })).toBeInTheDocument();
+  });
+
+  it('handles table with aria-labelledby on table element', () => {
+    render(
+      <div>
+        <h2 id="table-title">My Table</h2>
+        <Table aria-labelledby="table-title">
+          <TableBody>
+            <TableRow>
+              <TableCell>Data</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>
+    );
+
+    const table = screen.getByRole('table');
+    expect(table).toHaveAttribute('aria-labelledby', 'table-title');
+  });
+
+  it('handles table with scope attributes on headers', () => {
+    render(
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead scope="col">Column Header</TableHead>
+            <TableHead scope="row">Row Header</TableHead>
+          </TableRow>
+        </TableHeader>
+      </Table>
+    );
+
+    const colHeader = screen.getByRole('columnheader', { name: 'Column Header' });
+    // TableHead with scope="row" is still rendered as a columnheader in the header row
+    // but we can verify the scope attribute is set correctly
+    const rowHeader = screen.getByText('Row Header');
+    
+    expect(colHeader).toHaveAttribute('scope', 'col');
+    expect(rowHeader).toHaveAttribute('scope', 'row');
+    expect(rowHeader.tagName).toBe('TH');
+  });
 });