@linzjs/step-ag-grid 7.0.4 → 7.1.0

package/package.json

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

package/src/components/gridForm/GridFormDropDown.tsx

@@ -247,7 +247,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
                   data-testid={"filteredMenu-free-text-input"}
                   defaultValue={filter}
                   data-disableenterautosave={true}
-                  data-allowtabtoSave={true}
+                  data-allowtabtosave={true}
                   onChange={(e) => setFilter(e.target.value)}
                   onKeyDown={handleKeyDown}
                   onKeyUp={handleKeyUp}

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -250,7 +250,7 @@ const FilterInput = (props: {
               data-testid={"filteredMenu-free-text-input"}
               value={filter}
               data-disableenterautosave={true}
-              data-allowtabtoSave={true}
+              data-allowtabtosave={true}
               onChange={(e) => setFilter(e.target.value)}
               onKeyUp={handleKeyUp}
             />

package/src/index.ts

@@ -45,3 +45,4 @@ export * from "./lui/ActionButton";
 
 export * from "./utils/bearing";
 export * from "./utils/util";
+export * from "./utils/testUtil";

package/src/react-menu3/components/ControlledMenu.tsx

@@ -138,7 +138,7 @@ export const ControlledMenuFr = (
 
       const isTextArea = activeElement.nodeName === "TEXTAREA";
       const suppressEnterAutoSave = activeElement.getAttribute("data-disableenterautosave") || isTextArea;
-      const allowTabToSave = activeElement.getAttribute("data-allowtabtoSave");
+      const allowTabToSave = activeElement.getAttribute("data-allowtabtosave");
       const invokeSave = (reason: string) => {
         if (!saveButtonRef?.current) return;
         saveButtonRef.current?.setAttribute("data-reason", reason);

package/src/utils/testQuick.ts

@@ -0,0 +1,146 @@
+/**
+ * General query all by selected.  Internal use, use quick operations instead.
+ *
+ * @param selector Selector to use
+ * @param container Optional container
+ * @return HTMLElement array
+ */
+import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
+import { wait } from "./util";
+
+const queryAllBySelector = <T extends HTMLElement>(selector: string, container: HTMLElement = document.body): T[] =>
+  Array.from(container.querySelectorAll<T>(selector));
+
+/**
+ * Filters for query quick operations.
+ */
+export interface IQueryQuick {
+  testId?: string;
+  tagName?: "button" | "span" | "div" | "input" | "textarea" | any;
+  textEquals?: string;
+  textContains?: string;
+  icon?: IconName;
+  ariaLabel?: string;
+  role?: string;
+  classes?: string;
+  child?: IQueryQuick;
+}
+
+const escapeSelectorParam = (param: string): string => param.replace(/["\\]/g, "\\$&");
+
+/**
+ * Build selector for quick operations.
+ *
+ * @param props Filters to convert to selector.
+ * @param container Optional container to search in.
+ */
+const quickSelector = <T extends HTMLElement>(
+  props: IQueryQuick,
+  container?: HTMLElement,
+): { selector: string; els: T[] } => {
+  let selector = "";
+  let lastIQueryQuick = props;
+  for (let loop: IQueryQuick | undefined = props; loop; loop = loop.child) {
+    lastIQueryQuick = loop;
+    loop.tagName && (selector += loop.tagName);
+    loop.ariaLabel && (selector += `[aria-label='${escapeSelectorParam(loop.ariaLabel)}']`);
+    loop.role && (selector += `[role="${escapeSelectorParam(loop.role)}"]`);
+    loop.testId && (selector += `[data-testid="${escapeSelectorParam(loop.testId)}"]`);
+    loop.icon && (selector += `[data-icon='${loop.icon}']`);
+    loop.classes && (selector += loop.classes);
+    selector += " ";
+  }
+
+  if (selector.trim() == "") {
+    throw "get/query/findQuick needs at least one defined parameter";
+  }
+
+  let els = queryAllBySelector<T>(selector, container);
+
+  const textMatch = lastIQueryQuick.textEquals?.toLowerCase();
+  if (textMatch != null) {
+    els = els.filter((el) => el.innerHTML.toLowerCase() === textMatch || el.innerText.toLowerCase() === textMatch);
+  }
+  const textContains = lastIQueryQuick.textContains?.toLowerCase();
+  if (textContains != null) {
+    els = els.filter(
+      (el) =>
+        el.innerHTML.toLowerCase().indexOf(textContains) != -1 ||
+        el.innerText.toLowerCase().indexOf(textContains) != -1,
+    );
+  }
+
+  return { selector, els };
+};
+
+/**
+ * Query by filter.
+ *
+ * @param filter Filter
+ * @param container Optional container to look in
+ * @return HTMLElement if found else null
+ */
+export const queryQuick = <T extends HTMLElement>(filter: IQueryQuick, container?: HTMLElement): T | null => {
+  const { els, selector } = quickSelector<T>(filter, container);
+  if (els.length > 1) {
+    throw `Found multiple(${els.length}) elements by selector ${selector}`;
+  }
+  return els[0] ?? null;
+};
+
+/**
+ * Query all by filter.
+ *
+ * @param filter Filter
+ * @param container Optional container to look in
+ * @return HTMLElement array
+ */
+export const queryAllQuick = <T extends HTMLElement>(filter: IQueryQuick, container?: HTMLElement): T[] =>
+  quickSelector<T>(filter, container)?.els;
+
+/**
+ * Get all by filter.
+ *
+ * @param filter Filter
+ * @param container Optional container to look in
+ * @return HTMLElement array.  Throws exception if nothing is found.
+ */
+export const getAllQuick = <T extends HTMLElement>(filter: IQueryQuick, container?: HTMLElement): T[] => {
+  const els = queryAllQuick(filter, container);
+  if (els.length == 0) {
+    throw Error(`getAllQuick not found, selector: ${quickSelector(filter)}`);
+  }
+  return els as T[];
+};
+
+/**
+ * Get by filter.
+ *
+ * @param filter Filter
+ * @param container Optional container to look in
+ * @return HTMLElement.  Throws exception if not found.
+ */
+export const getQuick = (filter: IQueryQuick, container?: HTMLElement): HTMLElement => {
+  const el = queryQuick(filter, container);
+  if (el == null) {
+    throw Error(`getQuick  not found, selector: ${quickSelector(filter).selector}`);
+  }
+  return el;
+};
+
+/**
+ * Find by filter.  Waits up to 4 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;
+  while (Date.now() < endTime) {
+    const el = queryQuick<T>(filter, container);
+    if (el) return el;
+    await wait(50);
+  }
+  throw Error(`findQuick not found, selector: ${quickSelector(filter).selector}`);
+};

package/src/utils/testUtil.ts

@@ -0,0 +1,135 @@
+import { act, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { findQuick, getAllQuick, getQuick, queryQuick } from "./testQuick";
+
+export const findRow = async (rowId: number | string, within?: HTMLElement): Promise<HTMLDivElement> => {
+  return findQuick<HTMLDivElement>({ tagName: `div[row-id='${rowId}']:not(:empty)` }, within);
+};
+
+export const queryRow = async (rowId: number | string, within?: HTMLElement): Promise<HTMLDivElement | null> => {
+  return queryQuick<HTMLDivElement>({ tagName: `div[row-id='${rowId}']:not(:empty)` }, within);
+};
+
+const _selectRow = async (
+  select: "select" | "deselect" | "toggle",
+  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)) {
+      userEvent.click(row);
+    }
+  });
+};
+
+export const selectRow = async (rowId: string | number, within?: HTMLElement): Promise<void> =>
+  _selectRow("select", rowId, within);
+
+export const deselectRow = async (rowId: string | number, within?: HTMLElement): Promise<void> =>
+  _selectRow("deselect", rowId, within);
+
+export const findCell = async (rowId: number | string, colId: string, within?: HTMLElement): Promise<HTMLElement> => {
+  const row = await findRow(rowId, within);
+  return await findQuick({ tagName: `[col-id='${colId}']` }, row);
+};
+
+export const selectCell = async (rowId: string | number, colId: string, within?: HTMLElement): Promise<void> => {
+  await act(async () => {
+    const cell = await findCell(rowId, colId, within);
+    userEvent.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);
+    userEvent.dblClick(cell);
+    await findOpenMenu();
+  });
+};
+
+const findOpenMenu = async (): Promise<HTMLElement> => findQuick({ classes: ".szh-menu--state-open" });
+
+export const queryMenuOption = async (menuOptionText: string): Promise<HTMLElement | null> => {
+  const openMenu = await findOpenMenu();
+  const els = await within(openMenu).findAllByRole("menuitem");
+  const result = els.find(
+    (e: HTMLElement) => e.innerHTML?.trim() === menuOptionText || e.innerText?.trim() === menuOptionText,
+  );
+  return result ?? null;
+};
+
+export const findMenuOption = async (menuOptionText: string): Promise<HTMLElement> => {
+  const menuOption = await queryMenuOption(menuOptionText);
+  if (menuOption == null) {
+    throw Error(`Unable to find menu option ${menuOptionText}`);
+  }
+  return menuOption;
+};
+
+export const clickMenuOption = async (menuOptionText: string): Promise<void> => {
+  await act(async () => {
+    const menuOption = await findMenuOption(menuOptionText);
+    menuOption && userEvent.click(menuOption);
+  });
+};
+
+export const openAndClickMenuOption = async (
+  rowId: number | string,
+  colId: string,
+  menuOptionText: string,
+  within?: HTMLElement,
+): Promise<void> => {
+  await editCell(rowId, colId, within);
+  await clickMenuOption(menuOptionText);
+};
+
+export const getMultiSelectOptions = async () => {
+  const openMenu = await findOpenMenu();
+  return getAllQuick<HTMLInputElement>({ role: "menuitem", child: { tagName: "input,textarea" } }, openMenu).map(
+    (input) => {
+      return {
+        v: input.value,
+        c: input.checked ?? true,
+      };
+    },
+  );
+};
+
+export const findMultiSelectOption = async (value: string): Promise<HTMLElement> => {
+  const openMenu = await findOpenMenu();
+  return getQuick({ role: "menuitem", child: { tagName: `input[value='${value}']` } }, openMenu);
+};
+
+export const clickMultiSelectOption = async (value: string): Promise<void> => {
+  const menuItem = await findMultiSelectOption(value);
+  menuItem.parentElement && userEvent.click(menuItem.parentElement);
+};
+
+export const typeOtherInput = async (value: string): Promise<void> => {
+  const openMenu = await findOpenMenu();
+  const otherInput = await findQuick({ tagName: "input[type='text']" }, openMenu);
+  userEvent.type(otherInput, value);
+};
+
+export const typeOtherTextArea = async (value: string): Promise<void> => {
+  const openMenu = await findOpenMenu();
+  const otherTextArea = await findQuick({ tagName: "textarea" }, openMenu);
+  userEvent.type(otherTextArea, value);
+};
+
+export const closeMenu = (): void => {
+  userEvent.click(document.body);
+};
+
+export const findActionButton = (text: string, container: HTMLElement): Promise<HTMLElement> =>
+  findQuick({ tagName: "button", child: { classes: ".ActionButton-minimalAreaDisplay", textEquals: text } }, container);
+
+export const clickActionButton = async (text: string, container: HTMLElement): Promise<void> => {
+  await act(async () => {
+    const button = await findActionButton(text, container);
+    userEvent.click(button);
+  });
+};