test(Datagrid): add test coverage for new hook (carbon-design-system#…

…3879)
lee-chase · Dec 4, 2023 · 1a0ba55 · 1a0ba55
1 parent e455acf
commit 1a0ba55
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 26 deletions.
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.test.js b/packages/ibm-products/src/components/Datagrid/Datagrid.test.js
@@ -371,7 +371,7 @@ const ExpandedRow = ({ ...rest } = {}) => {
     useExpandedRow
   );
 
-  return <Datagrid datagridState={{ ...datagridState }} {...rest} />;
+  return <Datagrid datagridState={datagridState} {...rest} />;
 };
 
 const SelectItemsInAllPages = ({ ...rest } = {}) => {
@@ -1434,37 +1434,44 @@ describe(componentName, () => {
     fireEvent.click(clickableRow);
   });
 
-  function clickRow(rowNumber) {
+  async function clickRow(rowNumber, triggerAnotherExpander) {
+    const user = userEvent.setup({ delay: null });
+    const { click, hover, unhover } = user;
     const rows = screen.getAllByRole('row');
     const bodyRows = rows.filter(
       (r) =>
-        !r.classList.contains('c4p--datagrid__head') &&
-        !r.classList.contains('c4p--datagrid__expanded-row')
+        !r.classList.contains(`${pkg.prefix}--datagrid__head`) &&
+        !r.classList.contains(`${pkg.prefix}--datagrid__expanded-row`)
     );
     const row = bodyRows[rowNumber];
 
-    const rowExpander = row.querySelector(`button[aria-label="Expand row"]`);
-    fireEvent.click(rowExpander);
+    const rowExpander = within(row).getByLabelText('Expand row');
+    await click(rowExpander);
 
     expect(row.nextElementSibling).toHaveClass(`${blockClass}__expanded-row`);
     expect(row.nextElementSibling.textContent).toEqual(
       `Content for ${rowNumber}`
     );
 
-    fireEvent.mouseOver(row.nextElementSibling);
-    fireEvent.mouseLeave(row.nextElementSibling);
+    hover(row.nextElementSibling);
+    unhover(row.nextElementSibling);
 
-    const rowExpanderCollapse = row.querySelector(
-      `button[aria-label="Collapse row"]`
-    );
+    if (triggerAnotherExpander) {
+      const nextRow = bodyRows[rowNumber + 1];
+      const nextRowExpanderExpand =
+        within(nextRow).getByLabelText('Expand row');
+      fireEvent.click(nextRowExpanderExpand);
+      return;
+    }
+    const rowExpanderCollapse = within(row).getByLabelText('Collapse row');
     fireEvent.click(rowExpanderCollapse);
   }
 
   it('should render with expandable rows and test by toggling the row open and closed', () => {
     render(<ExpandedRow data-testid={dataTestId} />);
     clickRow(1);
     clickRow(4);
-    clickRow(8);
+    clickRow(8, true);
   });
 
   function hideSelectAll(rowNumber) {

diff --git a/packages/ibm-products/src/components/Datagrid/useFocusRowExpander.js b/packages/ibm-products/src/components/Datagrid/useFocusRowExpander.js
@@ -13,7 +13,7 @@ import { useEffect } from 'react';
 // flow.
 export const useFocusRowExpander = ({
   instance,
-  lastExpandedRowIndex,
+  lastExpandedRowIndex = 0,
   blockClass,
   activeElement,
 }) => {
@@ -25,20 +25,18 @@ export const useFocusRowExpander = ({
     }
     const tableId = instance?.tableId;
     const rowElements = document.querySelectorAll(`#${tableId} tbody tr`);
-    if (lastExpandedRowIndex) {
-      const rowElementsArray = Array.from(rowElements);
-      const activeRow = rowElementsArray.filter((r) => {
-        if (r.getAttribute('data-nested-row-id') === lastExpandedRowIndex) {
-          return r;
-        }
-        return null;
-      });
-      if (activeRow.length) {
-        const rowExpander = activeRow[0].querySelector(
-          `.${blockClass}__row-expander`
-        );
-        rowExpander.focus();
+    const rowElementsArray = Array.from(rowElements);
+    const activeRow = rowElementsArray.filter((r) => {
+      if (r.getAttribute('data-nested-row-id') === lastExpandedRowIndex) {
+        return r;
       }
+      return null;
+    });
+    if (activeRow.length) {
+      const rowExpander = activeRow[0].querySelector(
+        `.${blockClass}__row-expander`
+      );
+      rowExpander.focus();
     }
   }, [
     instance?.tableId,