test: convert TableHeader to RTL (#13204)

* feat(ContentSwitcher): preliminary unstable refactor * feat: update TableHeader to RTL * weird commit * feat: update to RTL * Update packages/react/src/components/DataTable/__tests__/TableHeader-test.js Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> --------- Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com>
carbon-design-system · Feb 23, 2023 · 9e4f0fa · 9e4f0fa
1 parent f32a1b3
commit 9e4f0fa
Show file tree

Hide file tree

Showing 2 changed files with 195 additions and 233 deletions.
diff --git 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(
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableHeader {...mockProps}>Header</TableHeader>
-          </TableRow>
-        </TableHead>
-      </Table>
-    );
-    expect(simpleHeader).toMatchSnapshot();
-
-    const sortHeader = mount(
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableHeader {...mockProps} isSortHeader>
-              Header
-            </TableHeader>
-          </TableRow>
-        </TableHead>
-      </Table>
-    );
-    expect(sortHeader).toMatchSnapshot();
-  });
+describe('TableHeader', () => {
+  describe('renders as expected - Component API', () => {
+    it('should render', () => {
+      const { container } = render(
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableHeader data-testid="test-id">Header</TableHeader>
+            </TableRow>
+          </TableHead>
+        </Table>
+      );
+      expect(container).toMatchSnapshot();
+    });
+
+    it('should spread extra props onto outermost element', () => {
+      render(
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableHeader data-testid="test-id" test="test" />
+            </TableRow>
+          </TableHead>
+        </Table>
+      );
+
+      expect(screen.getByTestId('test-id')).toHaveAttribute('test', 'test');
+    });
+
+    it('should render children as expected', () => {
+      render(
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableHeader data-testid="test-id">
+                add appropriate children
+              </TableHeader>
+            </TableRow>
+          </TableHead>
+        </Table>
+      );
+
+      expect(screen.getByText('add appropriate children')).toBeInTheDocument();
+    });
+
+    it('should support a custom `className` prop on the outermost element', () => {
+      render(
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableHeader data-testid="test-id" className="custom-class" />
+            </TableRow>
+          </TableHead>
+        </Table>
+      );
+
+      expect(screen.getByTestId('test-id')).toHaveClass('custom-class');
+    });
+
+    it('should respect colSpan prop', () => {
+      render(
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableHeader data-testid="test-id" colSpan={4} />
+            </TableRow>
+          </TableHead>
+        </Table>
+      );
+
+      expect(screen.getByTestId('test-id')).toHaveAttribute('colSpan', '4');
+    });
+
+    it('should respect id prop', () => {
+      render(
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableHeader data-testid="test-id" id={'id'} />
+            </TableRow>
+          </TableHead>
+        </Table>
+      );
 
-  it('should have an active class if it is the sort header and the sort state is not NONE', () => {
-    const wrapper = mount(
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableHeader {...mockProps} isSortHeader>
-              Header
-            </TableHeader>
-          </TableRow>
-        </TableHead>
-      </Table>
-    );
-    expect(wrapper).toMatchSnapshot();
+      expect(screen.getByTestId('test-id')).toHaveAttribute('id', 'id');
+    });
+
+    it('should respect isSortHeader prop', () => {
+      render(
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableHeader
+                data-testid="test-id"
+                isSortHeader
+                isSortable
+                sortDirection={'DESC'}
+              />
+            </TableRow>
+          </TableHead>
+        </Table>
+      );
+
+      expect(screen.getByTestId('test-id')).toHaveClass(
+        'cds--table-sort--descending'
+      );
+    });
+
+    it('should respect isSortable prop', () => {
+      render(
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableHeader data-testid="test-id" isSortable />
+            </TableRow>
+          </TableHead>
+        </Table>
+      );
+
+      expect(screen.getByTestId('test-id')).toHaveClass('cds--table-sort');
+    });
+
+    it('should respect scope prop', () => {
+      render(
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableHeader data-testid="test-id" scope={'row'} />
+            </TableRow>
+          </TableHead>
+        </Table>
+      );
+
+      expect(screen.getByTestId('test-id')).toHaveAttribute('scope', 'row');
+    });
+
+    it('should respect translateWithId prop', () => {
+      const translateWithId = () => {
+        return 'id translation';
+      };
+
+      render(
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableHeader
+                data-testid="test-id"
+                translateWithId={translateWithId}
+                isSortable
+              />
+            </TableRow>
+          </TableHead>
+        </Table>
+      );
+
+      expect(screen.getByText('id translation')).toBeInTheDocument();
+    });
   });
 
-  it('should have an active and ascending class if sorting by ASC', () => {
-    const wrapper = mount(
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableHeader {...mockProps} isSortHeader sortDirection="ASC">
-              Header
-            </TableHeader>
-          </TableRow>
-        </TableHead>
-      </Table>
-    );
-    expect(wrapper).toMatchSnapshot();
+  describe('behaves as expected', () => {
+    it('should call onClick when expected', () => {
+      const onClick = jest.fn();
+      render(
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableHeader data-testid="test-id" onClick={onClick} isSortable />
+            </TableRow>
+          </TableHead>
+        </Table>
+      );
+
+      userEvent.click(screen.getByRole('button'), 'test');
+      expect(onClick).toHaveBeenCalled();
+    });
   });
 });