@linzjs/step-ag-grid 24.0.0 → 25.0.0

package/src/styles/react-menu-customisations.scss

@@ -1,25 +1,22 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
-@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/FontVars" as fonts;
-@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/SpacingVars" as spacing;
-@use "../../node_modules/@linzjs/lui/dist/scss/Foundation/Utilities" as *;
+@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
 
 /**
  * Here is where we can override the styles of react-menu
  */
 .step-ag-grid-react-menu.szh-menu {
   z-index: 900;
-  color: colors.$base-type-color;
-  @include fonts.font-regular();
+  color: lui.$base-type-color;
+  @include lui.font-regular();
 
   div,
   a[role="menuitem"] {
     text-decoration: none;
-    color: colors.$base-type-color;
-    @include fonts.font-regular();
+    color: lui.$base-type-color;
+    @include lui.font-regular();
   }
 
   li[role="menuitem"]:hover {
-    background-color: colors.$polar;
+    background-color: lui.$polar;
   }
 
   .szh-menu__header {
@@ -31,85 +28,73 @@
 /**
  * Here are styles for lui select menu
  */
-.lui-select-menu.szh-menu-container {
-  @include breakpoint(sm) {
-    position: absolute;
-  }
-}
-
 .lui-select-menu.szh-menu {
   z-index: 900;
   width: 92vw;
   overflow-y: scroll;
 
-  @include breakpoint(sm) {
-    overflow: visible;
-    height: auto;
-    width: 240px;
-  }
-
-  color: colors.$base-type-color;
-  @include fonts.font-light();
+  color: lui.$base-type-color;
+  @include lui.font-light();
 }
 
 .lui-select-menuItem {
-  padding: spacing.$unit-xs spacing.$unit-sm spacing.$unit-xs spacing.$unit-xs;
+  padding: lui.$unit-xs lui.$unit-sm lui.$unit-xs lui.$unit-xs;
   display: flex;
   line-height: 1;
   transition: all 0.2s ease-in-out;
-  fill: colors.$fuscous;
+  fill: lui.$fuscous;
 
   &:hover {
-    background-color: colors.$polar;
+    background-color: lui.$polar;
   }
 }
 
 .lui-select-menuItem--error {
   p {
-    color: colors.$error;
+    color: lui.$error;
   }
 
   .LuiIcon {
-    fill: colors.$error;
+    fill: lui.$error;
   }
 }
 
 .lui-select-menuItemText {
-  @include fonts.font-regular();
-  color: colors.$charcoal;
+  @include lui.font-regular();
+  color: lui.$charcoal;
   margin: 0;
-  padding-left: spacing.$unit-lg;
+  padding-left: lui.$unit-lg;
 
   // if no icon, give it 4px to align with the group header
   &--noPadding {
-    padding-left: spacing.$unit-xxs;
+    padding-left: lui.$unit-xxs;
   }
 }
 
 .lui-select-icon + .lui-select-menuItemText {
-  padding-left: spacing.$unit-xs;
+  padding-left: lui.$unit-xs;
 }
 
 .lui-select-menu-group {
   height: 32px;
-  color: colors.$fuscous;
+  color: lui.$fuscous;
   padding-left: 0.75rem;
   text-transform: none;
-  @include fonts.font-semibold();
+  @include lui.font-semibold();
 }
 
 .lui-select-submenu {
   flex: 1;
 
   div[role="menuitem"] {
-    padding: spacing.$unit-xs spacing.$unit-xs spacing.$unit-xs 2.5rem;
+    padding: lui.$unit-xs lui.$unit-xs lui.$unit-xs 2.5rem;
     text-decoration: none;
-    @include fonts.font-regular();
+    @include lui.font-regular();
     height: 40px;
   }
   // overwrite the hover color
   .szh-menu__item--hover {
-    background-color: colors.$polar;
+    background-color: lui.$polar;
   }
 }
 
@@ -119,7 +104,7 @@
   div[role="menuitem"] {
     padding-left: 0;
     text-decoration: none;
-    @include fonts.font-regular();
+    @include lui.font-regular();
     height: 40px;
   }
 }
@@ -130,6 +115,6 @@
 
 
 .step-ag-grid-react-menu-sub-header-icon {
-  margin: spacing.$unit-xs;
-  fill: colors.$fuscous;
+  margin: lui.$unit-xs;
+  fill: lui.$fuscous;
 }

package/src/utils/__tests__/storybookTestUtil.ts

@@ -0,0 +1,4 @@
+import { expect, waitFor } from '@storybook/test';
+
+export const waitForGridReady = ({ canvasElement }: { canvasElement: HTMLElement }) =>
+  waitFor(() => expect(canvasElement.querySelector('.Grid-ready')).toBeInTheDocument(), { timeout: 5000 });

package/src/utils/__tests__/testQuick.ts

@@ -0,0 +1,157 @@
+/**
+ * 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;
+  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+  tagName?: 'button' | 'span' | 'div' | 'input' | 'textarea' | any;
+  text?: string | RegExp;
+  icon?: IconName;
+  ariaLabel?: string;
+  role?: string;
+  classes?: string;
+  child?: IQueryQuick;
+}
+
+const escapeSelectorParam = (param: string): string => param.replace(/["\\]/g, '\\$&');
+
+export const getMatcher = (matcherText: string | RegExp) => {
+  const textMatcher =
+    typeof matcherText === 'string'
+      ? (text?: string) => text != null && text.toLowerCase() === matcherText.toLowerCase()
+      : (text?: string) => text != null && matcherText.test(text);
+  return (e: HTMLElement) => textMatcher(e.innerHTML?.trim()) || textMatcher(e.innerText?.trim());
+};
+
+/**
+ * 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);
+
+  if (lastIQueryQuick.text != null) {
+    const matcher = getMatcher(lastIQueryQuick.text);
+    els = els.filter(matcher);
+  }
+
+  return {
+    selector: [
+      selector,
+      typeof lastIQueryQuick.text === 'string' ? JSON.stringify(lastIQueryQuick.text) : lastIQueryQuick.text,
+    ]
+      .filter((r) => r)
+      .join(' '),
+    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}\n${els
+      .map((el, index) => `${index}: ${el.parentElement?.innerHTML}\n\n`)
+      .join()}`;
+  }
+  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).selector}`);
+  }
+  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 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() + 5000;
+  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/__tests__/testUtil.ts

@@ -0,0 +1,294 @@
+import { act, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { isEqual } from 'lodash-es';
+
+import { findQuick, getAllQuick, getMatcher, getQuick, IQueryQuick, queryQuick } from './testQuick';
+
+let user = userEvent;
+/**
+ * allow external userEvent to be used
+ * @param customisedUserEvent
+ */
+export const setUpUserEvent = (customisedUserEvent: any) => {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  user = customisedUserEvent;
+};
+
+export const countRows = (within?: HTMLElement): number => {
+  return getAllQuick({ tagName: `div[row-id]:not(:empty)` }, within).length;
+};
+
+export const findRowByIndex = async (rowIndex: number | string, within?: HTMLElement): Promise<HTMLDivElement> => {
+  await waitFor(() => {
+    expect(getAllQuick({ classes: '.ag-row' }).length > 0).toBe(true);
+  });
+  //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: `.ag-center-cols-container div[row-index='${rowIndex}']:not(:empty)` },
+      within,
+    );
+    let combineChildren = [...Array.from(row.children)];
+
+    const leftCols = queryQuick<HTMLDivElement>(
+      { tagName: `.ag-pinned-left-cols-container div[row-index='${rowIndex}']` },
+      within,
+    );
+    if (leftCols) {
+      combineChildren = [...Array.from(leftCols.children), ...combineChildren];
+    }
+
+    const rightCols = queryQuick<HTMLDivElement>(
+      { tagName: `.ag-pinned-right-cols-container div[row-index='${rowIndex}']` },
+      within,
+    );
+    if (rightCols) {
+      combineChildren = [...Array.from(rightCols.children), ...combineChildren];
+    }
+
+    row.replaceChildren(...combineChildren);
+  });
+  return row;
+};
+
+export const findRow = async (rowId: number | string, within?: HTMLElement): Promise<HTMLDivElement> => {
+  await waitFor(() => {
+    expect(getAllQuick({ classes: '.ag-row' }).length > 0).toBe(true);
+  });
+  //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: `.ag-center-cols-container div[row-id='${rowId}']:not(:empty)` },
+      within,
+    );
+    let combineChildren = [...Array.from(row.children)];
+
+    const leftCols = queryQuick<HTMLDivElement>(
+      { tagName: `.ag-pinned-left-cols-container div[row-id='${rowId}']` },
+      within,
+    );
+    if (leftCols) {
+      combineChildren = [...Array.from(leftCols.children), ...combineChildren];
+    }
+
+    const rightCols = queryQuick<HTMLDivElement>(
+      { tagName: `.ag-pinned-right-cols-container div[row-id='${rowId}']` },
+      within,
+    );
+    if (rightCols) {
+      combineChildren = [...Array.from(rightCols.children), ...combineChildren];
+    }
+
+    row.replaceChildren(...combineChildren);
+  });
+  return row;
+};
+
+export const queryRow = (rowId: number | string, within?: HTMLElement): 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> => {
+  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> =>
+  _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 findCellContains = async (
+  rowId: number | string,
+  colId: string,
+  text: string | RegExp,
+  within?: HTMLElement,
+) => {
+  return await waitFor(
+    async () => {
+      const row = await findRow(rowId, within);
+      return getQuick({ tagName: `[col-id='${colId}']`, text }, row);
+    },
+    { timeout: 10000 },
+  );
+};
+
+export const selectCell = async (rowId: string | number, colId: string, within?: HTMLElement): Promise<void> => {
+  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 waitFor(
+    async () => {
+      const cell = await findCell(rowId, colId, within);
+      await user.dblClick(cell);
+      await waitFor(findOpenPopover, { timeout: 1000 });
+    },
+    { timeout: 10000 },
+  );
+};
+
+export const isCellReadOnly = async (rowId: number | string, colId: string, within?: HTMLElement): Promise<boolean> => {
+  const cell = await findCell(rowId, colId, within);
+  return cell.className.includes('GridCell-readonly');
+};
+
+export const findOpenPopover = () => findQuick({ classes: '.szh-menu--state-open' });
+
+export const queryMenuOption = async (menuOptionText: string | RegExp): Promise<HTMLElement | null> => {
+  const openMenu = await findOpenPopover();
+  const els = await within(openMenu).findAllByRole('menuitem');
+  const matcher = getMatcher(menuOptionText);
+  const result = els.find(matcher);
+  return result ?? null;
+};
+
+export const findMenuOption = async (menuOptionText: string | RegExp): Promise<HTMLElement> => {
+  return await waitFor(
+    async () => {
+      const menuOption = await queryMenuOption(menuOptionText);
+      if (menuOption == null) {
+        throw Error(`Unable to find menu option ${menuOptionText}`);
+      }
+      return menuOption;
+    },
+    { timeout: 5000 },
+  );
+};
+
+export const validateMenuOptions = async (
+  rowId: number | string,
+  colId: string,
+  expectedMenuOptions: Array<string>,
+): Promise<boolean> => {
+  await editCell(rowId, colId);
+  const openMenu = await findOpenPopover();
+  const actualOptions = (await within(openMenu).findAllByRole('menuitem')).map((menuItem) => menuItem.textContent);
+  return isEqual(actualOptions, expectedMenuOptions);
+};
+
+export const clickMenuOption = async (menuOptionText: string | RegExp): Promise<void> => {
+  const menuOption = await findMenuOption(menuOptionText);
+  await user.click(menuOption);
+};
+
+export const openAndClickMenuOption = async (
+  rowId: number | string,
+  colId: string,
+  menuOptionText: string | RegExp,
+  within?: HTMLElement,
+): Promise<void> => {
+  await editCell(rowId, colId, within);
+  await clickMenuOption(menuOptionText);
+};
+
+export const openAndFindMenuOption = async (
+  rowId: number | string,
+  colId: string,
+  menuOptionText: string | RegExp,
+  within?: HTMLElement,
+): Promise<HTMLElement> => {
+  await editCell(rowId, colId, within);
+  return await findMenuOption(menuOptionText);
+};
+
+export const getMultiSelectOptions = async () => {
+  const openMenu = await findOpenPopover();
+  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 findOpenPopover();
+  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 && (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) {
+    throw Error(`Label not found for text: ${labelText}`);
+  }
+  if (labels.length > 1) {
+    throw Error(`Multiple labels found for text: ${labelText}`);
+  }
+  const inputId = labels[0].getAttribute('for');
+  await typeInput(value, { child: { tagName: `input[id='${inputId}'], textarea[id='${inputId}']` } });
+};
+
+export const typeInputByPlaceholder = async (value: string, placeholder: string): Promise<void> =>
+  typeInput(value, {
+    child: { tagName: `input[placeholder='${placeholder}'], textarea[placeholder='${placeholder}']` },
+  });
+
+export const typeOtherInput = async (value: string): Promise<void> =>
+  typeInput(value, { classes: '.subComponent', child: { tagName: "input[type='text']" } });
+
+export const typeOtherTextArea = async (value: string): Promise<void> =>
+  typeInput(value, { classes: '.subComponent', child: { tagName: 'textarea' } });
+
+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> => {
+  const button = await findActionButton(text, container);
+  await user.click(button);
+};
+
+export const waitForGridReady = async (props?: { grid?: HTMLElement; timeout?: number }) =>
+  waitFor(() => expect(getAllQuick({ classes: '.Grid-ready' }, props?.grid)).toBeDefined(), {
+    timeout: props?.timeout ?? 5000,
+  });
+
+export const waitForGridRows = async (props?: { grid?: HTMLElement; timeout?: number }) =>
+  waitFor(() => expect(getAllQuick({ classes: '.ag-row' }, props?.grid).length > 0).toBe(true), {
+    timeout: props?.timeout ?? 5000,
+  });