@linzjs/step-ag-grid 15.1.0 → 15.1.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "15.1.0",
+  "version": "15.1.2",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/utils/testQuick.ts

@@ -131,14 +131,14 @@ export const getQuick = (filter: IQueryQuick, container?: HTMLElement): HTMLElem
 };
 
 /**
- * Find by filter.  Waits up to 4 seconds to find filter.
+ * Find by filter.  Waits up to 5 seconds to find filter.
  *
  * @param filter Filter
  * @param container Optional container to look in
  * @return HTMLElement.  Throws exception if not found.
  */
 export const findQuick = async <T extends HTMLElement>(filter: IQueryQuick, container?: HTMLElement): Promise<T> => {
-  const endTime = Date.now() + 4000;
+  const endTime = Date.now() + 5000;
   while (Date.now() < endTime) {
     const el = queryQuick<T>(filter, container);
     if (el) return el;

package/src/utils/testUtil.ts

@@ -1,20 +1,24 @@
-import { act, waitFor, within } from "@testing-library/react";
+import { waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { isEqual } from "lodash-es";
 
 import { IQueryQuick, findQuick, getAllQuick, getMatcher, getQuick, queryQuick } from "./testQuick";
 
+let user = userEvent;
+/**
+ * allow external userEvent to be used
+ * @param customisedUserEvent
+ */
+export const setUpUserEvent = (customisedUserEvent: any) => {
+  user = customisedUserEvent;
+};
+
 export const countRows = async (within?: HTMLElement): Promise<number> => {
   return getAllQuick({ tagName: `div[row-id]:not(:empty)` }, within).length;
 };
 
 export const findRow = async (rowId: number | string, within?: HTMLElement): Promise<HTMLDivElement> => {
-  //if this is not wrapped in an act console errors are logged during testing
-  let row!: HTMLDivElement;
-  await act(async () => {
-    row = await findQuick<HTMLDivElement>({ tagName: `div[row-id='${rowId}']:not(:empty)` }, within);
-  });
-  return row;
+  return await findQuick<HTMLDivElement>({ tagName: `div[row-id='${rowId}']:not(:empty)` }, within);
 };
 
 export const queryRow = async (rowId: number | string, within?: HTMLElement): Promise<HTMLDivElement | null> => {
@@ -26,19 +30,17 @@ const _selectRow = async (
   rowId: string | number,
   within?: HTMLElement,
 ): Promise<void> => {
-  await act(async () => {
-    const row = await findRow(rowId, within);
-    const isSelected = row.className.includes("ag-row-selected");
-    if (select === "toggle" || (select === "select" && !isSelected) || (select === "deselect" && isSelected)) {
-      const cell = await findCell(rowId, "selection", within);
-      await userEvent.click(cell);
-      await waitFor(async () => {
-        const row = await findRow(rowId, within);
-        const nowSelected = row.className.includes("ag-row-selected");
-        if (nowSelected == isSelected) throw `Row ${rowId} won't select`;
-      });
-    }
-  });
+  const row = await findRow(rowId, within);
+  const isSelected = row.className.includes("ag-row-selected");
+  if (select === "toggle" || (select === "select" && !isSelected) || (select === "deselect" && isSelected)) {
+    const cell = await findCell(rowId, "selection", within);
+    await user.click(cell);
+    await waitFor(async () => {
+      const row = await findRow(rowId, within);
+      const nowSelected = row.className.includes("ag-row-selected");
+      if (nowSelected === isSelected) throw `Row ${rowId} won't select`;
+    });
+  }
 };
 
 export const selectRow = async (rowId: string | number, within?: HTMLElement): Promise<void> =>
@@ -48,13 +50,8 @@ export const deselectRow = async (rowId: string | number, within?: HTMLElement):
   _selectRow("deselect", rowId, within);
 
 export const findCell = async (rowId: number | string, colId: string, within?: HTMLElement): Promise<HTMLElement> => {
-  //if this is not wrapped in an act console errors are logged during testing
-  let cell!: HTMLElement;
-  await act(async () => {
-    const row = await findRow(rowId, within);
-    cell = await findQuick({ tagName: `[col-id='${colId}']` }, row);
-  });
-  return cell;
+  const row = await findRow(rowId, within);
+  return await findQuick({ tagName: `[col-id='${colId}']` }, row);
 };
 
 export const findCellContains = async (
@@ -73,17 +70,13 @@ export const findCellContains = async (
 };
 
 export const selectCell = async (rowId: string | number, colId: string, within?: HTMLElement): Promise<void> => {
-  await act(async () => {
-    const cell = await findCell(rowId, colId, within);
-    await userEvent.click(cell);
-  });
+  const cell = await findCell(rowId, colId, within);
+  await user.click(cell);
 };
 
 export const editCell = async (rowId: number | string, colId: string, within?: HTMLElement): Promise<void> => {
-  await act(async () => {
-    const cell = await findCell(rowId, colId, within);
-    await userEvent.dblClick(cell);
-  });
+  const cell = await findCell(rowId, colId, within);
+  await user.dblClick(cell);
   await waitFor(findOpenPopover);
 };
 
@@ -127,10 +120,8 @@ export const validateMenuOptions = async (
 };
 
 export const clickMenuOption = async (menuOptionText: string | RegExp): Promise<void> => {
-  await act(async () => {
-    const menuOption = await findMenuOption(menuOptionText);
-    await userEvent.click(menuOption);
-  });
+  const menuOption = await findMenuOption(menuOptionText);
+  await user.click(menuOption);
 };
 
 export const openAndClickMenuOption = async (
@@ -172,26 +163,25 @@ export const findMultiSelectOption = async (value: string): Promise<HTMLElement>
 
 export const clickMultiSelectOption = async (value: string): Promise<void> => {
   const menuItem = await findMultiSelectOption(value);
-  menuItem.parentElement && (await userEvent.click(menuItem.parentElement));
-};
-
-const typeInput = async (value: string, filter: IQueryQuick): Promise<void> =>
-  act(async () => {
-    const openMenu = await findOpenPopover();
-    const input = await findQuick(filter, openMenu);
-    await userEvent.clear(input);
-    //'typing' an empty string will cause a console error, and it's also unnecessary after the previous clear call
-    if (value.length > 0) {
-      await userEvent.type(input, value);
-    }
-  });
+  menuItem.parentElement && (await user.click(menuItem.parentElement));
+};
+
+const typeInput = async (value: string, filter: IQueryQuick): Promise<void> => {
+  const openMenu = await findOpenPopover();
+  const input = await findQuick(filter, openMenu);
+  await user.clear(input);
+  //'typing' an empty string will cause a console error, and it's also unnecessary after the previous clear call
+  if (value.length > 0) {
+    await user.type(input, value);
+  }
+};
 
 export const typeOnlyInput = async (value: string): Promise<void> =>
   typeInput(value, { child: { tagName: "input[type='text'], textarea" } });
 
 export const typeInputByLabel = async (value: string, labelText: string): Promise<void> => {
-  const labels = getAllQuick({ child: { tagName: "label" } }).filter((l) => l.textContent == labelText);
-  if (labels.length == 0) {
+  const labels = getAllQuick({ child: { tagName: "label" } }).filter((l) => l.textContent === labelText);
+  if (labels.length === 0) {
     throw Error(`Label not found for text: ${labelText}`);
   }
   if (labels.length > 1) {
@@ -212,15 +202,13 @@ export const typeOtherInput = async (value: string): Promise<void> =>
 export const typeOtherTextArea = async (value: string): Promise<void> =>
   typeInput(value, { classes: ".subComponent", child: { tagName: "textarea" } });
 
-export const closeMenu = () => userEvent.click(document.body);
-export const closePopover = () => userEvent.click(document.body);
+export const closeMenu = () => user.click(document.body);
+export const closePopover = () => user.click(document.body);
 
 export const findActionButton = (text: string, container?: HTMLElement): Promise<HTMLElement> =>
   findQuick({ tagName: "button", child: { classes: ".ActionButton-minimalAreaDisplay", text: text } }, container);
 
 export const clickActionButton = async (text: string, container?: HTMLElement): Promise<void> => {
-  await act(async () => {
-    const button = await findActionButton(text, container);
-    await userEvent.click(button);
-  });
+  const button = await findActionButton(text, container);
+  await user.click(button);
 };