test: cover scrollableInline logic

tkajtoch · tkajtoch · commit 63bbd970d4cd · 2026-03-03T01:04:27.000+01:00
diff --git a/packages/eui/src/components/basic_table/basic_table.test.tsx b/packages/eui/src/components/basic_table/basic_table.test.tsx
@@ -862,6 +862,28 @@ describe('EuiBasicTable', () => {
     });
   });
 
+  // Should be in sync with the same test suite
+  // in src/components/table/table.test.tsx
+  // and src/components/basic_table/in_memory_table.test.tsx
+  // to ensure equal behavior
+  describe('scrollableInline', () => {
+    it('updates table width styles when enabled', () => {
+      const { getByRole, rerender } = render(
+        <EuiBasicTable items={[]} columns={[]} />
+      );
+      let table = getByRole('table');
+
+      expect(table).toHaveStyleRule('inline-size', '100%');
+      expect(table).not.toHaveStyleRule('min-inline-size');
+
+      rerender(<EuiBasicTable items={[]} columns={[]} scrollableInline />);
+      table = getByRole('table');
+
+      expect(table).toHaveStyleRule('inline-size', 'auto');
+      expect(table).toHaveStyleRule('min-inline-size', '100%');
+    });
+  });
+
   it('renders (kitchen sink) with pagination, selection, sorting, actions, and footer', () => {
     const props: EuiBasicTableProps<AgeItem> = {
       items: [
diff --git a/packages/eui/src/components/basic_table/in_memory_table.test.tsx b/packages/eui/src/components/basic_table/in_memory_table.test.tsx
@@ -1673,4 +1673,26 @@ describe('EuiInMemoryTable', () => {
       expect(searchbox.value).toBe('');
     });
   });
+
+  // Should be in sync with the same test suite
+  // in src/components/table/table.test.tsx
+  // and src/components/basic_table/basic_table.test.tsx
+  // to ensure equal behavior
+  describe('scrollableInline', () => {
+    it('updates table width styles when enabled', () => {
+      const { getByRole, rerender } = render(
+        <EuiInMemoryTable items={[]} columns={[]} />
+      );
+      let table = getByRole('table');
+
+      expect(table).toHaveStyleRule('inline-size', '100%');
+      expect(table).not.toHaveStyleRule('min-inline-size');
+
+      rerender(<EuiInMemoryTable items={[]} columns={[]} scrollableInline />);
+      table = getByRole('table');
+
+      expect(table).toHaveStyleRule('inline-size', 'auto');
+      expect(table).toHaveStyleRule('min-inline-size', '100%');
+    });
+  });
 });
diff --git a/packages/eui/src/components/table/table.test.tsx b/packages/eui/src/components/table/table.test.tsx
@@ -69,6 +69,26 @@ describe('EuiTable', () => {
     });
   });
 
+  // Should be in sync with the same test suite
+  // in src/components/basic_table/basic_table.test.tsx
+  // and src/components/basic_table/in_memory_table.test.tsx
+  // to ensure equal behavior
+  describe('scrollableInline', () => {
+    it('updates table width styles when enabled', () => {
+      const { getByRole, rerender } = render(<EuiTable />);
+      let table = getByRole('table');
+
+      expect(table).toHaveStyleRule('inline-size', '100%');
+      expect(table).not.toHaveStyleRule('min-inline-size');
+
+      rerender(<EuiTable scrollableInline />);
+      table = getByRole('table');
+
+      expect(table).toHaveStyleRule('inline-size', 'auto');
+      expect(table).toHaveStyleRule('min-inline-size', '100%');
+    });
+  });
+
   it('always renders responsive tables styles if set to `true`', () => {
     window.innerWidth = 2000;
     const { getByRole } = render(<EuiTable responsiveBreakpoint={true} />);
