diff --git a/packages/react/src/components/DataTable/TableContainer.tsx b/packages/react/src/components/DataTable/TableContainer.tsx index 1bb59b0c832d..77db6fbbf459 100644 --- a/packages/react/src/components/DataTable/TableContainer.tsx +++ b/packages/react/src/components/DataTable/TableContainer.tsx @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2016, 2023 + * Copyright IBM Corp. 2016, 2025 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -64,16 +64,22 @@ const TableContainer = ({ return (
- {title && ( + {(title || description) && (
-

- {title} -

-

- {description} -

+ {title && ( +

+ {title} +

+ )} + {description && ( +

+ {description} +

+ )}
)} {children} diff --git a/packages/react/src/components/DataTable/__tests__/TableContainer-test.js b/packages/react/src/components/DataTable/__tests__/TableContainer-test.js index cdc2b911e91e..0043c571ff2f 100644 --- a/packages/react/src/components/DataTable/__tests__/TableContainer-test.js +++ b/packages/react/src/components/DataTable/__tests__/TableContainer-test.js @@ -1,11 +1,11 @@ /** - * Copyright IBM Corp. 2016, 2023 + * Copyright IBM Corp. 2016, 2025 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ -import { render } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import React from 'react'; import { TableContainer } from '../'; @@ -31,4 +31,80 @@ describe('TableContainer', () => { const { container } = render(); expect(container.firstChild).toHaveAttribute('data-testid', 'test'); }); + + describe('Header', () => { + it('should render a header with only a `title`', () => { + const title = 'Random title'; + + const { container } = render( + +
Child content
+
+ ); + + const headerEl = container.querySelector('[class*="data-table-header"]'); + const titleEl = headerEl.querySelector('h4'); + const descriptionEl = headerEl.querySelector('p'); + + expect(headerEl).toBeInTheDocument(); + expect(headerEl.childElementCount).toBe(1); + expect(titleEl).toHaveTextContent(title); + expect(descriptionEl).toBeNull(); + }); + + it('should render a header with only a `description`', () => { + const description = 'Random description'; + + const { container } = render( + +
Child content
+
+ ); + + const headerEl = container.querySelector('[class*="data-table-header"]'); + const titleEl = headerEl.querySelector('h4'); + const descriptionEl = headerEl.querySelector('p'); + + expect(headerEl).toBeInTheDocument(); + expect(headerEl.childElementCount).toBe(1); + expect(descriptionEl).toHaveTextContent(description); + expect(titleEl).toBeNull(); + }); + + it('should render a header with both a `title` and a `description`', () => { + const title = 'Random title'; + const description = 'Random description'; + + const { container } = render( + +
Child content
+
+ ); + + const headerEl = container.querySelector('[class*="data-table-header"]'); + const titleEl = headerEl.querySelector('h4'); + const descriptionEl = headerEl.querySelector('p'); + + expect(headerEl).toBeInTheDocument(); + expect(headerEl.childElementCount).toBe(2); + expect(titleEl).toHaveTextContent(title); + expect(headerEl.firstChild).toHaveTextContent(title); + expect(descriptionEl).toHaveTextContent(description); + expect(headerEl.lastChild).toHaveTextContent(description); + }); + + it('should not render a header when neither a `title` nor a `description` is provided', () => { + const { container } = render( + +
Child content
+
+ ); + + const headerEl = container.querySelector('[class*="data-table-header"]'); + const childContent = screen.getByTestId('child-content'); + + expect(childContent).toHaveTextContent('Child content'); + expect(headerEl).not.toBeInTheDocument(); + }); + }); }); diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap index 375ec41856a7..58e0c1d007b1 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap @@ -14,10 +14,6 @@ exports[`DataTable behaves as expected selection -- radio buttons should not hav > DataTable with selection -

DataTable with selection -

DataTable with selection -

DataTable with toolbar -