From f786df1f1575247a85cc3ce302575707da93e737 Mon Sep 17 00:00:00 2001
From: Alessandra Davila <adavila91@gmail.com>
Date: Thu, 23 Feb 2023 11:02:23 -0600
Subject: [PATCH] test(TableExpandRow): update tests to RTL (#13197)

* test(TableExpandRow): update tests to RTL

* Update TableExpandRow-test.js

* Update TableExpandRow-test.js

---------

Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com>
---
 .../__tests__/TableExpandRow-test.js          | 143 +++++++++++-------
 .../__snapshots__/TableExpandRow-test.js.snap | 136 ++++++-----------
 2 files changed, 136 insertions(+), 143 deletions(-)

diff --git a/packages/react/src/components/DataTable/__tests__/TableExpandRow-test.js b/packages/react/src/components/DataTable/__tests__/TableExpandRow-test.js
index 550cecbb1018..94da9bfe4bba 100644
--- a/packages/react/src/components/DataTable/__tests__/TableExpandRow-test.js
+++ b/packages/react/src/components/DataTable/__tests__/TableExpandRow-test.js
@@ -6,8 +6,11 @@
  */
 
 import React from 'react';
-import { mount } from 'enzyme';
 import { Table, TableBody, TableExpandRow, TableExpandedRow } from '../';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+
+const prefix = 'cds';
 
 describe('DataTable.TableExpandRow', () => {
   let mockProps;
@@ -21,59 +24,95 @@ describe('DataTable.TableExpandRow', () => {
     };
   });
 
-  it('should render', () => {
-    const wrapper = mount(
-      <Table>
-        <TableBody>
-          <TableExpandRow {...mockProps} />
-          <TableExpandedRow colSpan={1} />
-        </TableBody>
-      </Table>
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
+  describe('renders as expected - Component API', () => {
+    it('should render', () => {
+      const { container } = render(
+        <Table>
+          <TableBody>
+            <TableExpandRow {...mockProps} />
+            <TableExpandedRow colSpan={1} />
+          </TableBody>
+        </Table>
+      );
+
+      expect(container).toMatchSnapshot();
+    });
+
+    it('should respect ariaLabel prop', () => {
+      render(
+        <Table>
+          <TableBody>
+            <TableExpandRow {...mockProps} />
+            <TableExpandedRow colSpan={1} />
+          </TableBody>
+        </Table>
+      );
+
+      expect(screen.getByRole('button')).toHaveAttribute(
+        'aria-label',
+        mockProps.ariaLabel
+      );
+    });
+
+    it('should support a custom `className` prop on the outermost element', () => {
+      render(
+        <Table>
+          <TableBody>
+            <TableExpandRow {...mockProps} />
+            <TableExpandedRow colSpan={1} />
+          </TableBody>
+        </Table>
+      );
 
-  it('should initially not define `data-previous-value`', () => {
-    const wrapper = mount(
-      <Table>
-        <TableBody>
-          <TableExpandRow {...mockProps} />
-          <TableExpandedRow colSpan={1} />
-        </TableBody>
-      </Table>
-    );
-    expect(
-      Object.keys(wrapper.find('TableCell').first().props()).indexOf(
-        'data-previous-value'
-      ) !== -1
-    ).toBe(true);
-    expect(
-      wrapper.find('TableCell').first().prop('data-previous-value')
-    ).not.toBeDefined();
+      expect(screen.getAllByRole('row')[0]).toHaveClass('custom-class');
+    });
+
+    it('should respect expandHeader prop', () => {
+      render(
+        <Table>
+          <TableBody>
+            <TableExpandRow {...mockProps} />
+            <TableExpandedRow colSpan={1} />
+          </TableBody>
+        </Table>
+      );
+
+      expect(screen.getAllByRole('cell')[0]).toHaveAttribute(
+        'headers',
+        'expand'
+      );
+    });
+
+    it('should respect isExpanded prop', () => {
+      render(
+        <Table>
+          <TableBody>
+            <TableExpandRow {...mockProps} />
+            <TableExpandedRow colSpan={1} />
+          </TableBody>
+        </Table>
+      );
+
+      expect(screen.getAllByRole('row')[0]).not.toHaveClass(
+        `${prefix}--expandable-row`
+      );
+    });
   });
 
-  it('should expand when the expand button is clicked', () => {
-    const initialWrapper = mount(
-      <Table>
-        <TableBody>
-          <TableExpandRow {...mockProps} />
-          <TableExpandedRow colSpan={1} />
-        </TableBody>
-      </Table>
-    );
-    initialWrapper.find('button').simulate('click');
-    expect(mockProps.onExpand).toHaveBeenCalledTimes(1);
-
-    const expandedWrapper = mount(
-      <Table>
-        <TableBody>
-          <TableExpandRow {...mockProps} isExpanded />
-          <TableExpandedRow colSpan={1} />
-        </TableBody>
-      </Table>
-    );
-    expect(
-      expandedWrapper.find('TableCell').first().prop('data-previous-value')
-    ).toBe('collapsed');
+  describe('behaves as expected', () => {
+    it('should expand when button is clicked and onExpand to be called', () => {
+      render(
+        <Table>
+          <TableBody>
+            <TableExpandRow {...mockProps} />
+            <TableExpandedRow colSpan={1} />
+          </TableBody>
+        </Table>
+      );
+
+      expect(mockProps.onExpand).toHaveBeenCalledTimes(0);
+      userEvent.click(screen.getByRole('button'));
+      expect(mockProps.onExpand).toHaveBeenCalledTimes(1);
+    });
   });
 });
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandRow-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandRow-test.js.snap
index cc24e49dc456..2646e8e091eb 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandRow-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableExpandRow-test.js.snap
@@ -1,107 +1,61 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DataTable.TableExpandRow should render 1`] = `
-<Table
-  isSortable={false}
-  overflowMenuOnHover={true}
->
+exports[`DataTable.TableExpandRow renders as expected - Component API should render 1`] = `
+<div>
   <div
-    className="cds--data-table-content"
+    class="cds--data-table-content"
   >
     <table
-      aria-describedby={null}
-      aria-labelledby={null}
-      className="cds--data-table"
+      class="cds--data-table"
     >
-      <TableBody
+      <tbody
         aria-live="polite"
       >
-        <tbody
-          aria-live="polite"
+        <tr
+          class="cds--parent-row custom-class"
+          data-parent-row="true"
         >
-          <TableExpandRow
-            ariaLabel="Aria label"
-            className="custom-class"
-            isExpanded={false}
-            onExpand={[MockFunction]}
+          <td
+            class="cds--table-expand"
+            headers="expand"
           >
-            <tr
-              className="cds--parent-row custom-class"
-              data-parent-row={true}
+            <button
+              aria-label="Aria label"
+              class="cds--table-expand__button"
+              type="button"
             >
-              <TableCell
-                className="cds--table-expand"
-                headers="expand"
+              <svg
+                aria-hidden="true"
+                class="cds--table-expand__svg"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                preserveAspectRatio="xMidYMid meet"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <td
-                  className="cds--table-expand"
-                  headers="expand"
-                >
-                  <button
-                    aria-label="Aria label"
-                    className="cds--table-expand__button"
-                    onClick={[MockFunction]}
-                    type="button"
-                  >
-                    <ForwardRef(ChevronRight)
-                      className="cds--table-expand__svg"
-                    >
-                      <Icon
-                        className="cds--table-expand__svg"
-                        fill="currentColor"
-                        height={16}
-                        preserveAspectRatio="xMidYMid meet"
-                        viewBox="0 0 16 16"
-                        width={16}
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <svg
-                          aria-hidden={true}
-                          className="cds--table-expand__svg"
-                          fill="currentColor"
-                          focusable="false"
-                          height={16}
-                          preserveAspectRatio="xMidYMid meet"
-                          viewBox="0 0 16 16"
-                          width={16}
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"
-                          />
-                        </svg>
-                      </Icon>
-                    </ForwardRef(ChevronRight)>
-                  </button>
-                </td>
-              </TableCell>
-            </tr>
-          </TableExpandRow>
-          <TableExpandedRow
-            colSpan={1}
+                <path
+                  d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"
+                />
+              </svg>
+            </button>
+          </td>
+        </tr>
+        <tr
+          class="cds--expandable-row"
+          data-child-row="true"
+        >
+          <td
+            colspan="1"
           >
-            <tr
-              className="cds--expandable-row"
-              data-child-row={true}
-              onMouseEnter={[Function]}
-              onMouseLeave={[Function]}
-            >
-              <TableCell
-                colSpan={1}
-              >
-                <td
-                  colSpan={1}
-                >
-                  <div
-                    className="cds--child-row-inner-container"
-                  />
-                </td>
-              </TableCell>
-            </tr>
-          </TableExpandedRow>
-        </tbody>
-      </TableBody>
+            <div
+              class="cds--child-row-inner-container"
+            />
+          </td>
+        </tr>
+      </tbody>
     </table>
   </div>
-</Table>
+</div>
 `;