From 968a1ffd2e0bfa5a715fc329a8347a211378a784 Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Wed, 25 May 2022 13:01:10 -0500
Subject: [PATCH] refactor(react): update table primitive tests

---
 .../DataTable/__tests__/TableBody-test.js     | 24 +++++++++----
 .../DataTable/__tests__/TableCell-test.js     | 28 +++++++++++----
 .../DataTable/__tests__/TableHead-test.js     | 24 +++++++++----
 .../DataTable/__tests__/TableRow-test.js      | 26 ++++++++++----
 .../__snapshots__/TableBody-test.js.snap      | 26 --------------
 .../__snapshots__/TableCell-test.js.snap      | 36 -------------------
 .../__snapshots__/TableHead-test.js.snap      | 24 -------------
 .../__snapshots__/TableRow-test.js.snap       | 32 -----------------
 8 files changed, 78 insertions(+), 142 deletions(-)
 delete mode 100644 packages/react/src/components/DataTable/__tests__/__snapshots__/TableBody-test.js.snap
 delete mode 100644 packages/react/src/components/DataTable/__tests__/__snapshots__/TableCell-test.js.snap
 delete mode 100644 packages/react/src/components/DataTable/__tests__/__snapshots__/TableHead-test.js.snap
 delete mode 100644 packages/react/src/components/DataTable/__tests__/__snapshots__/TableRow-test.js.snap

diff --git a/packages/react/src/components/DataTable/__tests__/TableBody-test.js b/packages/react/src/components/DataTable/__tests__/TableBody-test.js
index 4409599aa02f..f792deb4cac0 100644
--- a/packages/react/src/components/DataTable/__tests__/TableBody-test.js
+++ b/packages/react/src/components/DataTable/__tests__/TableBody-test.js
@@ -5,17 +5,29 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import { Table, TableBody } from '../';
 
-describe('DataTable.TableBody', () => {
-  it('should render', () => {
-    const wrapper = mount(
-      <Table>
+describe('TableBody', () => {
+  it('should support a custom className on the outermost element', () => {
+    render(
+      <Table data-testid="table">
         <TableBody className="custom-class" />
       </Table>
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.getByTestId('table').firstChild).toHaveClass('custom-class');
+  });
+
+  it('should spread props onto the outermost element', () => {
+    render(
+      <Table data-testid="table">
+        <TableBody data-testid="test" />
+      </Table>
+    );
+    expect(screen.getByTestId('table').firstChild).toHaveAttribute(
+      'data-testid',
+      'test'
+    );
   });
 });
diff --git a/packages/react/src/components/DataTable/__tests__/TableCell-test.js b/packages/react/src/components/DataTable/__tests__/TableCell-test.js
index b6f13346da76..444e83623916 100644
--- a/packages/react/src/components/DataTable/__tests__/TableCell-test.js
+++ b/packages/react/src/components/DataTable/__tests__/TableCell-test.js
@@ -5,21 +5,37 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import { Table, TableBody, TableRow, TableCell } from '../';
 
-describe('DataTable.TableCell', () => {
-  it('should render', () => {
-    const wrapper = mount(
+describe('TableCell', () => {
+  it('should support a custom className on the outermost element', () => {
+    render(
       <Table>
         <TableBody>
-          <TableRow>
+          <TableRow data-testid="tr">
             <TableCell className="custom-class" />
           </TableRow>
         </TableBody>
       </Table>
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.getByTestId('tr').firstChild).toHaveClass('custom-class');
+  });
+
+  it('should spread props onto the outermost element', () => {
+    render(
+      <Table>
+        <TableBody>
+          <TableRow data-testid="tr">
+            <TableCell data-testid="test" />
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+    expect(screen.getByTestId('tr').firstChild).toHaveAttribute(
+      'data-testid',
+      'test'
+    );
   });
 });
diff --git a/packages/react/src/components/DataTable/__tests__/TableHead-test.js b/packages/react/src/components/DataTable/__tests__/TableHead-test.js
index 4ee43772c087..93765b5f5bfa 100644
--- a/packages/react/src/components/DataTable/__tests__/TableHead-test.js
+++ b/packages/react/src/components/DataTable/__tests__/TableHead-test.js
@@ -5,17 +5,29 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import { Table, TableHead } from '../';
 
-describe('DataTable.TableHead', () => {
-  it('should render', () => {
-    const wrapper = mount(
-      <Table>
+describe('TableHead', () => {
+  it('should support a custom className on the outermost element', () => {
+    render(
+      <Table data-testid="table">
         <TableHead className="custom-class" />
       </Table>
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.getByTestId('table').firstChild).toHaveClass('custom-class');
+  });
+
+  it('should spread props onto the outermost element', () => {
+    render(
+      <Table data-testid="table">
+        <TableHead data-testid="test" />
+      </Table>
+    );
+    expect(screen.getByTestId('table').firstChild).toHaveAttribute(
+      'data-testid',
+      'test'
+    );
   });
 });
diff --git a/packages/react/src/components/DataTable/__tests__/TableRow-test.js b/packages/react/src/components/DataTable/__tests__/TableRow-test.js
index b40df2c70330..5aeea226b897 100644
--- a/packages/react/src/components/DataTable/__tests__/TableRow-test.js
+++ b/packages/react/src/components/DataTable/__tests__/TableRow-test.js
@@ -5,19 +5,33 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 import { Table, TableBody, TableRow } from '../';
 
-describe('DataTable.TableRow', () => {
-  it('should render', () => {
-    const wrapper = mount(
+describe('TableRow', () => {
+  it('should support a custom className on the outermost element', () => {
+    render(
       <Table>
-        <TableBody>
+        <TableBody data-testid="tbody">
           <TableRow className="custom-class" />
         </TableBody>
       </Table>
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.getByTestId('tbody').firstChild).toHaveClass('custom-class');
+  });
+
+  it('should spread props onto the outermost element', () => {
+    render(
+      <Table>
+        <TableBody data-testid="tbody">
+          <TableRow data-testid="test" />
+        </TableBody>
+      </Table>
+    );
+    expect(screen.getByTestId('tbody').firstChild).toHaveAttribute(
+      'data-testid',
+      'test'
+    );
   });
 });
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBody-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBody-test.js.snap
deleted file mode 100644
index f69c684ca33a..000000000000
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableBody-test.js.snap
+++ /dev/null
@@ -1,26 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DataTable.TableBody should render 1`] = `
-<Table
-  isSortable={false}
-  overflowMenuOnHover={true}
->
-  <div
-    className="cds--data-table-content"
-  >
-    <table
-      className="cds--data-table"
-    >
-      <TableBody
-        aria-live="polite"
-        className="custom-class"
-      >
-        <tbody
-          aria-live="polite"
-          className="custom-class"
-        />
-      </TableBody>
-    </table>
-  </div>
-</Table>
-`;
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableCell-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableCell-test.js.snap
deleted file mode 100644
index 31cfa4f24c95..000000000000
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableCell-test.js.snap
+++ /dev/null
@@ -1,36 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DataTable.TableCell should render 1`] = `
-<Table
-  isSortable={false}
-  overflowMenuOnHover={true}
->
-  <div
-    className="cds--data-table-content"
-  >
-    <table
-      className="cds--data-table"
-    >
-      <TableBody
-        aria-live="polite"
-      >
-        <tbody
-          aria-live="polite"
-        >
-          <TableRow>
-            <tr>
-              <TableCell
-                className="custom-class"
-              >
-                <td
-                  className="custom-class"
-                />
-              </TableCell>
-            </tr>
-          </TableRow>
-        </tbody>
-      </TableBody>
-    </table>
-  </div>
-</Table>
-`;
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableHead-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableHead-test.js.snap
deleted file mode 100644
index bfc5ded4179f..000000000000
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableHead-test.js.snap
+++ /dev/null
@@ -1,24 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DataTable.TableHead should render 1`] = `
-<Table
-  isSortable={false}
-  overflowMenuOnHover={true}
->
-  <div
-    className="cds--data-table-content"
-  >
-    <table
-      className="cds--data-table"
-    >
-      <TableHead
-        className="custom-class"
-      >
-        <thead
-          className="custom-class"
-        />
-      </TableHead>
-    </table>
-  </div>
-</Table>
-`;
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableRow-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableRow-test.js.snap
deleted file mode 100644
index 2cc707c8a949..000000000000
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableRow-test.js.snap
+++ /dev/null
@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DataTable.TableRow should render 1`] = `
-<Table
-  isSortable={false}
-  overflowMenuOnHover={true}
->
-  <div
-    className="cds--data-table-content"
-  >
-    <table
-      className="cds--data-table"
-    >
-      <TableBody
-        aria-live="polite"
-      >
-        <tbody
-          aria-live="polite"
-        >
-          <TableRow
-            className="custom-class"
-          >
-            <tr
-              className="custom-class"
-            />
-          </TableRow>
-        </tbody>
-      </TableBody>
-    </table>
-  </div>
-</Table>
-`;