diff --git a/packages/react/src/components/DataTable/__tests__/TableHeader-test.js b/packages/react/src/components/DataTable/__tests__/TableHeader-test.js
index 36d2845e4e94..dae64cc87441 100644
--- a/packages/react/src/components/DataTable/__tests__/TableHeader-test.js
+++ b/packages/react/src/components/DataTable/__tests__/TableHeader-test.js
@@ -1,78 +1,189 @@
/**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2022, 2023
*
* 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 React from 'react';
-import { mount } from 'enzyme';
-import { Table, TableHead, TableHeader, TableRow } from '../';
-
-describe('DataTable.TableHeader', () => {
- let mockProps;
-
- beforeEach(() => {
- mockProps = {
- isSortHeader: false,
- onClick: jest.fn(),
- sortDirection: 'NONE',
- };
- });
+import { Table, TableHead, TableRow, TableHeader } from '../';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
- it('should render', () => {
- const simpleHeader = mount(
-
- );
- expect(simpleHeader).toMatchSnapshot();
-
- const sortHeader = mount(
-
- );
- expect(sortHeader).toMatchSnapshot();
- });
+describe('TableHeader', () => {
+ describe('renders as expected - Component API', () => {
+ it('should render', () => {
+ const { container } = render(
+
+ );
+ expect(container).toMatchSnapshot();
+ });
+
+ it('should spread extra props onto outermost element', () => {
+ render(
+
+ );
+
+ expect(screen.getByTestId('test-id')).toHaveAttribute('test', 'test');
+ });
+
+ it('should render children as expected', () => {
+ render(
+
+
+
+
+ add appropriate children
+
+
+
+
+ );
+
+ expect(screen.getByText('add appropriate children')).toBeInTheDocument();
+ });
+
+ it('should support a custom `className` prop on the outermost element', () => {
+ render(
+
+ );
+
+ expect(screen.getByTestId('test-id')).toHaveClass('custom-class');
+ });
+
+ it('should respect colSpan prop', () => {
+ render(
+
+ );
+
+ expect(screen.getByTestId('test-id')).toHaveAttribute('colSpan', '4');
+ });
+
+ it('should respect id prop', () => {
+ render(
+
+ );
- it('should have an active class if it is the sort header and the sort state is not NONE', () => {
- const wrapper = mount(
-
- );
- expect(wrapper).toMatchSnapshot();
+ expect(screen.getByTestId('test-id')).toHaveAttribute('id', 'id');
+ });
+
+ it('should respect isSortHeader prop', () => {
+ render(
+
+ );
+
+ expect(screen.getByTestId('test-id')).toHaveClass(
+ 'cds--table-sort--descending'
+ );
+ });
+
+ it('should respect isSortable prop', () => {
+ render(
+
+ );
+
+ expect(screen.getByTestId('test-id')).toHaveClass('cds--table-sort');
+ });
+
+ it('should respect scope prop', () => {
+ render(
+
+ );
+
+ expect(screen.getByTestId('test-id')).toHaveAttribute('scope', 'row');
+ });
+
+ it('should respect translateWithId prop', () => {
+ const translateWithId = () => {
+ return 'id translation';
+ };
+
+ render(
+
+ );
+
+ expect(screen.getByText('id translation')).toBeInTheDocument();
+ });
});
- it('should have an active and ascending class if sorting by ASC', () => {
- const wrapper = mount(
-
- );
- expect(wrapper).toMatchSnapshot();
+ describe('behaves as expected', () => {
+ it('should call onClick when expected', () => {
+ const onClick = jest.fn();
+ render(
+
+ );
+
+ userEvent.click(screen.getByRole('button'), 'test');
+ expect(onClick).toHaveBeenCalled();
+ });
});
});
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableHeader-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableHeader-test.js.snap
index 27236e172f21..fb2393c64646 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableHeader-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableHeader-test.js.snap
@@ -1,177 +1,28 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`DataTable.TableHeader should have an active and ascending class if sorting by ASC 1`] = `
-
+exports[`TableHeader renders as expected - Component API should render 1`] = `
+
-
-
-
-
-
- |
-
- Header
-
- |
-
-
-
-
-
+
+
+ |
+
+ |
+
+
-
-`;
-
-exports[`DataTable.TableHeader should have an active class if it is the sort header and the sort state is not NONE 1`] = `
-
-
-
-
-
-
-
-
- |
-
- Header
-
- |
-
-
-
-
-
-
-
-`;
-
-exports[`DataTable.TableHeader should render 1`] = `
-
-
-
-
-
-
-
-
- |
-
- Header
-
- |
-
-
-
-
-
-
-
-`;
-
-exports[`DataTable.TableHeader should render 2`] = `
-
-
-
-
-
-
-
-
- |
-
- Header
-
- |
-
-
-
-
-
-
-
+
`;