@linzjs/step-ag-grid 24.0.0 → 25.0.0

package/src/utils/__tests__/vitestUtil.ts

@@ -0,0 +1,295 @@
+import { act, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { isEqual } from 'lodash-es';
+import { expect } from 'vitest';
+
+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,
+  });

package/src/utils/bearing.test.ts

@@ -1,3 +1,5 @@
+import { describe, expect, test, vi } from 'vitest';
+
 import {
   bearingCorrectionRangeValidator,
   bearingRangeValidator,
@@ -57,7 +59,7 @@ describe('bearing', () => {
     });
 
     // calls custom invalid
-    const fn = jest.fn();
+    const fn = vi.fn();
     bearingStringValidator('1.2', fn);
     expect(fn).toHaveBeenCalledWith(1.2);
   });

package/src/utils/textMatcher.test.ts

@@ -1,5 +1,6 @@
-import { textMatch } from './textMatcher';
+import { describe, expect, test } from 'vitest';
 
+import { textMatch } from './textMatcher';
 /**
  * "L" => L*
  * "=L" => L

package/src/utils/textValidator.test.ts

@@ -1,3 +1,5 @@
+import { describe, expect, test, vi } from 'vitest';
+
 import { GridBaseRow } from '../components/Grid';
 import { TextInputValidator, TextInputValidatorProps } from './textValidator';
 
@@ -88,18 +90,15 @@ describe('TextInputValidator', () => {
       },
     ] as (TextInputValidatorProps<GridBaseRow> & { tests: [string, string | undefined][] })[];
 
-    validate.forEach((v, i) => {
+    validate.forEach((v) => {
       for (const test of v.tests) {
-        expect(
-          TextInputValidator(v, test[0], { id: 0 }, {}),
-          `Test ${i}: "${test[0]}" should return "${test[1]}"`,
-        ).toBe(test[1]);
+        expect(TextInputValidator(v, test[0], { id: 0 }, {})).toBe(test[1]);
       }
     });
   });
 
   test('validator is called', () => {
-    const fn = jest.fn();
+    const fn = vi.fn();
     TextInputValidator({ invalid: fn }, '', { id: 0 }, {});
     expect(fn).toHaveBeenCalled();
   });

package/src/utils/util.test.ts

@@ -1,5 +1,6 @@
-import { isFloat, sanitiseFileName } from './util';
+import { describe, expect, test } from 'vitest';
 
+import { isFloat, sanitiseFileName } from './util';
 describe('sanitiseFileName', () => {
   test('isFloat', () => {
     expect(isFloat('')).toBe(false);

package/dist/src/utils/storybookTestUtil.d.ts

@@ -1,3 +0,0 @@
-export declare const waitForGridReady: ({ canvasElement }: {
-    canvasElement: HTMLElement;
-}) => Promise<void>;

package/dist/src/utils/testQuick.d.ts

@@ -1,62 +0,0 @@
-/**
- * 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';
-/**
- * Filters for query quick operations.
- */
-export interface IQueryQuick {
-    testId?: string;
-    tagName?: 'button' | 'span' | 'div' | 'input' | 'textarea' | any;
-    text?: string | RegExp;
-    icon?: IconName;
-    ariaLabel?: string;
-    role?: string;
-    classes?: string;
-    child?: IQueryQuick;
-}
-export declare const getMatcher: (matcherText: string | RegExp) => (e: HTMLElement) => boolean;
-/**
- * Query by filter.
- *
- * @param filter Filter
- * @param container Optional container to look in
- * @return HTMLElement if found else null
- */
-export declare const queryQuick: <T extends HTMLElement>(filter: IQueryQuick, container?: HTMLElement) => T | null;
-/**
- * Query all by filter.
- *
- * @param filter Filter
- * @param container Optional container to look in
- * @return HTMLElement array
- */
-export declare const queryAllQuick: <T extends HTMLElement>(filter: IQueryQuick, container?: HTMLElement) => T[];
-/**
- * Get all by filter.
- *
- * @param filter Filter
- * @param container Optional container to look in
- * @return HTMLElement array.  Throws exception if nothing is found.
- */
-export declare const getAllQuick: <T extends HTMLElement>(filter: IQueryQuick, container?: HTMLElement) => T[];
-/**
- * Get by filter.
- *
- * @param filter Filter
- * @param container Optional container to look in
- * @return HTMLElement.  Throws exception if not found.
- */
-export declare const getQuick: (filter: IQueryQuick, container?: HTMLElement) => HTMLElement;
-/**
- * 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 declare const findQuick: <T extends HTMLElement>(filter: IQueryQuick, container?: HTMLElement) => Promise<T>;

package/dist/src/utils/testUtil.d.ts

@@ -1,46 +0,0 @@
-/**
- * allow external userEvent to be used
- * @param customisedUserEvent
- */
-export declare const setUpUserEvent: (customisedUserEvent: any) => void;
-export declare const countRows: (within?: HTMLElement) => number;
-export declare const findRowByIndex: (rowIndex: number | string, within?: HTMLElement) => Promise<HTMLDivElement>;
-export declare const findRow: (rowId: number | string, within?: HTMLElement) => Promise<HTMLDivElement>;
-export declare const queryRow: (rowId: number | string, within?: HTMLElement) => HTMLDivElement | null;
-export declare const selectRow: (rowId: string | number, within?: HTMLElement) => Promise<void>;
-export declare const deselectRow: (rowId: string | number, within?: HTMLElement) => Promise<void>;
-export declare const findCell: (rowId: number | string, colId: string, within?: HTMLElement) => Promise<HTMLElement>;
-export declare const findCellContains: (rowId: number | string, colId: string, text: string | RegExp, within?: HTMLElement) => Promise<HTMLElement>;
-export declare const selectCell: (rowId: string | number, colId: string, within?: HTMLElement) => Promise<void>;
-export declare const editCell: (rowId: number | string, colId: string, within?: HTMLElement) => Promise<void>;
-export declare const isCellReadOnly: (rowId: number | string, colId: string, within?: HTMLElement) => Promise<boolean>;
-export declare const findOpenPopover: () => Promise<HTMLElement>;
-export declare const queryMenuOption: (menuOptionText: string | RegExp) => Promise<HTMLElement | null>;
-export declare const findMenuOption: (menuOptionText: string | RegExp) => Promise<HTMLElement>;
-export declare const validateMenuOptions: (rowId: number | string, colId: string, expectedMenuOptions: Array<string>) => Promise<boolean>;
-export declare const clickMenuOption: (menuOptionText: string | RegExp) => Promise<void>;
-export declare const openAndClickMenuOption: (rowId: number | string, colId: string, menuOptionText: string | RegExp, within?: HTMLElement) => Promise<void>;
-export declare const openAndFindMenuOption: (rowId: number | string, colId: string, menuOptionText: string | RegExp, within?: HTMLElement) => Promise<HTMLElement>;
-export declare const getMultiSelectOptions: () => Promise<{
-    v: string;
-    c: boolean;
-}[]>;
-export declare const findMultiSelectOption: (value: string) => Promise<HTMLElement>;
-export declare const clickMultiSelectOption: (value: string) => Promise<void>;
-export declare const typeOnlyInput: (value: string) => Promise<void>;
-export declare const typeInputByLabel: (value: string, labelText: string) => Promise<void>;
-export declare const typeInputByPlaceholder: (value: string, placeholder: string) => Promise<void>;
-export declare const typeOtherInput: (value: string) => Promise<void>;
-export declare const typeOtherTextArea: (value: string) => Promise<void>;
-export declare const closeMenu: () => Promise<void>;
-export declare const closePopover: () => Promise<void>;
-export declare const findActionButton: (text: string, container?: HTMLElement) => Promise<HTMLElement>;
-export declare const clickActionButton: (text: string, container?: HTMLElement) => Promise<void>;
-export declare const waitForGridReady: (props?: {
-    grid?: HTMLElement;
-    timeout?: number;
-}) => Promise<void>;
-export declare const waitForGridRows: (props?: {
-    grid?: HTMLElement;
-    timeout?: number;
-}) => Promise<void>;