@linzjs/step-ag-grid 18.1.0 → 19.1.0

package/src/stories/grid/gridFormInteraction/GridFormMultiSelectInteraction.stories.tsx

@@ -2,19 +2,17 @@ import "../../../react-menu3/styles/index.scss";
 import "../../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
-import { expect, jest } from "@storybook/jest";
-import { Meta, StoryFn } from "@storybook/react";
-import { userEvent, within } from "@storybook/testing-library";
-import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { StoryFn } from "@storybook/react";
+import { expect, fn, userEvent, within } from "@storybook/test";
+import { GridPopoverContext } from "contexts/GridPopoverContext";
 import { useRef } from "react";
 
 import "@linzjs/lui/dist/fonts";
 
 import {
-  GridContextProvider,
+  GridContext,
   GridFormMultiSelect,
   GridFormMultiSelectProps,
-  GridFormMultiSelectSaveProps,
   GridFormSubComponentTextInput,
   MultiSelectOption,
   wait,
@@ -24,14 +22,12 @@ export default {
   title: "GridForm / Interactions",
   component: GridFormMultiSelect,
   args: {},
-} as Meta<typeof GridFormMultiSelect>;
+};
 
-const updateValue = jest
-  .fn<void, [saveFn: (selectedRows: any[]) => Promise<boolean>, _tabDirection: 1 | 0 | -1]>()
-  .mockImplementation((saveFn: (selectedRows: any[]) => Promise<boolean>, _tabDirection: 1 | 0 | -1) => saveFn([]));
+const updateValue = fn((saveFn: (selectedRows: any[]) => Promise<boolean>, _tabDirection: 1 | 0 | -1) => saveFn([]));
 
-const onSave = jest.fn<Promise<boolean>, [GridFormMultiSelectSaveProps<any>]>().mockImplementation(async () => true);
-const onSelectFilter = jest.fn();
+const onSave = fn();
+const onSelectFilter = fn();
 
 let options: MultiSelectOption[] = [];
 const Template: StoryFn<typeof GridFormMultiSelect> = (props: GridFormMultiSelectProps<any>) => {
@@ -58,30 +54,36 @@ const Template: StoryFn<typeof GridFormMultiSelect> = (props: GridFormMultiSelec
 
   return (
     <div className={"react-menu-inline-test"}>
-      <GridContextProvider>
-        <div>
-          <h6 ref={anchorRef}>Interaction test</h6>
-          <GridPopoverContext.Provider
-            value={
-              {
-                anchorRef: anchorRef,
-                updateValue,
-                data: { value: "" },
-                value: "",
-                field: "value",
-                selectedRows: [],
-              } as any as GridPopoverContextType<any>
-            }
-          >
-            <GridFormMultiSelect {...props} {...config} />
-          </GridPopoverContext.Provider>
-        </div>
-      </GridContextProvider>
+      <GridContext.Provider
+        value={
+          {
+            stopEditing: () => {},
+            cancelEdit: () => {},
+          } as any
+        }
+      >
+        <h6 ref={anchorRef}>Interaction test</h6>
+        <GridPopoverContext.Provider
+          value={{
+            anchorRef,
+            updateValue,
+            data: { value: "" },
+            value: "",
+            field: "value",
+            selectedRows: [],
+            saving: false,
+            setSaving: () => {},
+            formatValue: (value) => value,
+          }}
+        >
+          <GridFormMultiSelect {...props} {...config} />
+        </GridPopoverContext.Provider>
+      </GridContext.Provider>
     </div>
   );
 };
 
-export const GridFormMultiSelectInteractions_ = Template.bind({});
+export const GridFormMultiSelectInteractions_: typeof Template = Template.bind({});
 GridFormMultiSelectInteractions_.play = async ({ canvasElement }) => {
   updateValue.mockClear();
   onSave.mockClear();

package/src/stories/grid/gridFormInteraction/GridFormPopoverMenuInteraction.stories.tsx

@@ -2,17 +2,17 @@ import "../../../react-menu3/styles/index.scss";
 import "../../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
-import { expect, jest } from "@storybook/jest";
-import { Meta, StoryFn } from "@storybook/react";
-import { userEvent, within } from "@storybook/testing-library";
-import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { StoryFn } from "@storybook/react";
+import * as test from "@storybook/test";
+import { expect, userEvent, within } from "@storybook/test";
+import { GridPopoverContext } from "contexts/GridPopoverContext";
 import { useRef } from "react";
 
 import "@linzjs/lui/dist/fonts";
 
 import {
   GridBaseRow,
-  GridContextProvider,
+  GridContext,
   GridFormPopoverMenu,
   GridFormPopoverMenuProps,
   GridFormSubComponentTextArea,
@@ -25,20 +25,18 @@ export default {
   title: "GridForm / Interactions",
   component: GridFormPopoverMenu,
   args: {},
-} as Meta<typeof GridFormPopoverMenu>;
+};
 
-const updateValue = jest
-  .fn<void, [saveFn: (selectedRows: any[]) => Promise<boolean>, _tabDirection: 1 | 0 | -1]>()
-  .mockImplementation(async (saveFn: (selectedRows: any[]) => Promise<boolean>, _tabDirection: 1 | 0 | -1) => {
-    await saveFn([]);
-  });
+const updateValue = test.fn((saveFn: (selectedRows: any[]) => Promise<boolean>, _tabDirection: 1 | 0 | -1) =>
+  saveFn([]),
+);
 
-const enabledAction = jest
-  .fn<Promise<void>, [{ selectedRows: GridBaseRow[]; menuOption: SelectedMenuOptionResult<GridBaseRow> }]>()
+const enabledAction = test
+  .fn<[{ selectedRows: GridBaseRow[]; menuOption: SelectedMenuOptionResult<GridBaseRow> }], Promise<void>>()
   .mockResolvedValue(undefined);
 
-const disabledAction = jest
-  .fn<Promise<void>, [{ selectedRows: GridBaseRow[]; menuOption: SelectedMenuOptionResult<GridBaseRow> }]>()
+const disabledAction = test
+  .fn<[{ selectedRows: GridBaseRow[]; menuOption: SelectedMenuOptionResult<GridBaseRow> }], Promise<void>>()
   .mockResolvedValue(undefined);
 
 const Template: StoryFn<typeof GridFormPopoverMenu> = (props: GridFormPopoverMenuProps<any>) => {
@@ -46,16 +44,27 @@ const Template: StoryFn<typeof GridFormPopoverMenu> = (props: GridFormPopoverMen
 
   return (
     <div className={"react-menu-inline-test"}>
-      <GridContextProvider>
+      <GridContext.Provider
+        value={
+          {
+            stopEditing: () => {},
+            cancelEdit: () => {},
+          } as any
+        }
+      >
         <h6 ref={anchorRef}>Interaction Test</h6>
         <GridPopoverContext.Provider
-          value={
-            {
-              anchorRef,
-              value: null,
-              updateValue,
-            } as any as GridPopoverContextType<any>
-          }
+          value={{
+            anchorRef,
+            value: null,
+            updateValue,
+            data: { value: "" },
+            field: "value",
+            selectedRows: [],
+            saving: false,
+            setSaving: () => {},
+            formatValue: (value) => value,
+          }}
         >
           <GridFormPopoverMenu
             {...props}
@@ -81,12 +90,12 @@ const Template: StoryFn<typeof GridFormPopoverMenu> = (props: GridFormPopoverMen
             ]}
           />
         </GridPopoverContext.Provider>
-      </GridContextProvider>
+      </GridContext.Provider>
     </div>
   );
 };
 
-export const GridFormPopoverMenuInteractions_ = Template.bind({});
+export const GridFormPopoverMenuInteractions_: typeof Template = Template.bind({});
 GridFormPopoverMenuInteractions_.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
 

package/src/stories/grid/gridFormInteraction/GridFormTextAreaInteraction.stories.tsx

@@ -2,48 +2,58 @@ import "../../../react-menu3/styles/index.scss";
 import "../../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
-import { expect, jest } from "@storybook/jest";
-import { Meta, StoryFn } from "@storybook/react";
-import { userEvent, within } from "@storybook/testing-library";
-import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { StoryFn } from "@storybook/react";
+import { expect, fn, userEvent, within } from "@storybook/test";
+import { GridPopoverContext } from "contexts/GridPopoverContext";
 import { useRef } from "react";
 
 import "@linzjs/lui/dist/fonts";
 
-import { GridContextProvider, GridFormTextArea, GridFormTextAreaProps } from "../../..";
+import { GridContext, GridFormTextArea, GridFormTextAreaProps } from "../../..";
 
 export default {
   title: "GridForm / Interactions",
   component: GridFormTextArea,
   args: {},
-} as Meta<typeof GridFormTextArea>;
+};
 
-const updateValue = jest.fn();
+const updateValue = fn();
 
 const Template: StoryFn<typeof GridFormTextArea> = (props: GridFormTextAreaProps<any>) => {
   const anchorRef = useRef<HTMLHeadingElement>(null);
 
   return (
     <div className={"react-menu-inline-test"}>
-      <GridContextProvider>
+      <GridContext.Provider
+        value={
+          {
+            stopEditing: () => {},
+            cancelEdit: () => {},
+          } as any
+        }
+      >
         <h6 ref={anchorRef}>Interaction Test</h6>
         <GridPopoverContext.Provider
-          value={
-            {
-              anchorRef,
-              value: null,
-              updateValue,
-            } as any as GridPopoverContextType<any>
-          }
+          value={{
+            anchorRef,
+            value: null,
+            updateValue,
+            data: { value: null },
+            field: "value",
+            selectedRows: [],
+            saving: false,
+            setSaving: () => {},
+            formatValue: (value) => value,
+          }}
         >
           <GridFormTextArea {...props} required={true} />
         </GridPopoverContext.Provider>
-      </GridContextProvider>
+      </GridContext.Provider>
     </div>
   );
 };
 
-export const GridFormTextAreaInteractions_ = Template.bind({});
+export const GridFormTextAreaInteractions_: typeof Template = Template.bind({});
 GridFormTextAreaInteractions_.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
 

package/src/stories/grid/gridFormInteraction/GridFormTextInputInteraction.stories.tsx

@@ -2,48 +2,58 @@ import "../../../react-menu3/styles/index.scss";
 import "../../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
-import { expect, jest } from "@storybook/jest";
-import { Meta, StoryFn } from "@storybook/react";
-import { userEvent, within } from "@storybook/testing-library";
-import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { StoryFn } from "@storybook/react";
+import { expect, fn, userEvent, within } from "@storybook/test";
+import { GridPopoverContext } from "contexts/GridPopoverContext";
 import { useRef } from "react";
 
 import "@linzjs/lui/dist/fonts";
 
-import { GridContextProvider, GridFormTextInput, GridFormTextInputProps } from "../../..";
+import { GridContext, GridFormTextInput, GridFormTextInputProps } from "../../..";
 
 export default {
   title: "GridForm / Interactions",
   component: GridFormTextInput,
   args: {},
-} as Meta<typeof GridFormTextInput>;
+};
 
-const updateValue = jest.fn();
+const updateValue = fn();
 
 const Template: StoryFn<typeof GridFormTextInput> = (props: GridFormTextInputProps<any>) => {
   const anchorRef = useRef<HTMLHeadingElement>(null);
 
   return (
     <div className={"react-menu-inline-test"}>
-      <GridContextProvider>
+      <GridContext.Provider
+        value={
+          {
+            stopEditing: () => {},
+            cancelEdit: () => {},
+          } as any
+        }
+      >
         <h6 ref={anchorRef}>Interaction Test</h6>
         <GridPopoverContext.Provider
-          value={
-            {
-              anchorRef,
-              value: null,
-              updateValue,
-            } as any as GridPopoverContextType<any>
-          }
+          value={{
+            anchorRef,
+            value: null,
+            updateValue,
+            data: { value: null },
+            field: "value",
+            selectedRows: [],
+            saving: false,
+            setSaving: () => {},
+            formatValue: (value) => value,
+          }}
         >
           <GridFormTextInput {...props} required={true} />
         </GridPopoverContext.Provider>
-      </GridContextProvider>
+      </GridContext.Provider>
     </div>
   );
 };
 
-export const GridFormTextInputInteractions_ = Template.bind({});
+export const GridFormTextInputInteractions_: typeof Template = Template.bind({});
 GridFormTextInputInteractions_.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
 

package/src/stories/grid/interactions/GridKeyboardInteractions.stories.tsx

@@ -2,9 +2,10 @@ import "../../../styles/GridTheme.scss";
 import "../../../styles/index.scss";
 import "@linzjs/lui/dist/scss/base.scss";
 
-import { expect, jest } from "@storybook/jest";
 import { Meta, StoryFn } from "@storybook/react";
-import { userEvent, waitFor } from "@storybook/testing-library";
+import { expect } from "@storybook/test";
+import * as test from "@storybook/test";
+import { userEvent, waitFor } from "@storybook/test";
 import { useMemo, useState } from "react";
 
 import "@linzjs/lui/dist/fonts";
@@ -65,11 +66,11 @@ interface ITestRow {
   dd: string;
 }
 
-const multiEditAction = jest.fn().mockImplementation(async () => {
+const multiEditAction = test.fn().mockImplementation(async () => {
   await wait(500);
 });
 
-const eAction = jest.fn<boolean, []>().mockReturnValue(true);
+const eAction = test.fn<[], boolean>().mockReturnValue(true);
 
 const GridKeyboardInteractionsTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
@@ -221,7 +222,7 @@ const GridKeyboardInteractionsTemplate: StoryFn<typeof Grid> = (props: GridProps
   );
 };
 
-export const GridKeyboardInteractions = GridKeyboardInteractionsTemplate.bind({});
+export const GridKeyboardInteractions: StoryFn<typeof Grid> = GridKeyboardInteractionsTemplate.bind({});
 GridKeyboardInteractions.play = async ({ canvasElement }) => {
   multiEditAction.mockReset();
   eAction.mockReset();

package/src/stories/react-menu/ReactMenu.stories.tsx

@@ -1,8 +1,9 @@
 import "../../react-menu3/styles/index.scss";
 
-import { expect, jest } from "@storybook/jest";
 import { Meta, StoryFn } from "@storybook/react";
-import { userEvent, within } from "@storybook/testing-library";
+import { expect } from "@storybook/test";
+import * as test from "@storybook/test";
+import { userEvent, within } from "@storybook/test";
 
 import { Grid } from "../../components/Grid";
 import { Menu, MenuButton, MenuDivider, MenuItem, SubMenu } from "../../react-menu3";
@@ -17,8 +18,8 @@ export default {
   },
 } as Meta<typeof Grid>;
 
-const menuItemClickAction = jest.fn();
-const newFileAction = jest.fn();
+const menuItemClickAction = test.fn();
+const newFileAction = test.fn();
 
 const ReactMenuTemplate: StoryFn<typeof Grid> = () => {
   return (

package/src/utils/storybookTestUtil.ts

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

package/src/utils/testUtil.ts

@@ -28,19 +28,19 @@ export const findRow = async (rowId: number | string, within?: HTMLElement): Pro
       { tagName: `.ag-center-cols-container div[row-id='${rowId}']:not(:empty)` },
       within,
     );
-    let combineChildren = [...row.children];
+    let combineChildren = Array.from(row.children);
 
     const leftCols = queryQuick<HTMLDivElement>(
       { tagName: `.ag-pinned-left-cols-container div[row-id='${rowId}']` },
       within,
     );
-    if (leftCols) combineChildren = [...leftCols.children, ...combineChildren];
+    if (leftCols) combineChildren = [...Array.from(row.children), ...combineChildren];
 
     const rightCols = queryQuick<HTMLDivElement>(
       { tagName: `.ag-pinned-right-cols-container div[row-id='${rowId}']` },
       within,
     );
-    if (rightCols) combineChildren = [...rightCols.children, ...combineChildren];
+    if (rightCols) combineChildren = [...Array.from(row.children), ...combineChildren];
 
     row.replaceChildren(...combineChildren);
   });