@linzjs/step-ag-grid 8.4.2 → 8.4.3

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

@@ -0,0 +1,171 @@
+import "@linzjs/lui/dist/scss/base.scss";
+import "@linzjs/lui/dist/fonts";
+
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import {
+  GridFormPopoverMenu,
+  PopoutMenuSeparator,
+  SelectedMenuOptionResult,
+} from "../../../components/gridForm/GridFormPopoverMenu";
+import { GridContextProvider } from "../../../contexts/GridContextProvider";
+import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { useRef } from "react";
+import { userEvent, within } from "@storybook/testing-library";
+import { expect, jest } from "@storybook/jest";
+import { GridBaseRow } from "../../../components/Grid";
+import { GridFormSubComponentTextInput } from "../../../components/gridForm/GridFormSubComponentTextInput";
+import { GridFormSubComponentTextArea } from "../../../components/gridForm/GridFormSubComponentTextArea";
+
+export default {
+  title: "GridForm / Interactions",
+  component: GridFormPopoverMenu,
+  args: {},
+} as ComponentMeta<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 enabledAction = jest
+  .fn<Promise<void>, [{ selectedRows: GridBaseRow[]; menuOption: SelectedMenuOptionResult<GridBaseRow> }]>()
+  .mockResolvedValue(undefined);
+
+const disabledAction = jest
+  .fn<Promise<void>, [{ selectedRows: GridBaseRow[]; menuOption: SelectedMenuOptionResult<GridBaseRow> }]>()
+  .mockResolvedValue(undefined);
+
+const Template: ComponentStory<typeof GridFormPopoverMenu> = (props) => {
+  const anchorRef = useRef<HTMLHeadingElement>(null);
+
+  return (
+    <div className={"react-menu-inline-test"}>
+      <GridContextProvider>
+        <h6 ref={anchorRef}>Test</h6>
+        <GridPopoverContext.Provider
+          value={
+            {
+              anchorRef,
+              value: null,
+              updateValue,
+            } as any as GridPopoverContextType<any>
+          }
+        >
+          <GridFormPopoverMenu
+            {...props}
+            options={async () => [
+              { label: "Enabled", value: 1, action: enabledAction },
+              PopoutMenuSeparator,
+              { label: "Disabled", value: 0, disabled: true, action: disabledAction },
+              {
+                label: "Sub text input",
+                value: 0,
+                subComponent: () => (
+                  <GridFormSubComponentTextInput placeholder={"Text input"} maxLength={5} required defaultValue={""} />
+                ),
+              },
+              {
+                label: "Sub text area",
+                value: 0,
+                subComponent: () => (
+                  <GridFormSubComponentTextArea placeholder={"Text area"} maxLength={5} required defaultValue={""} />
+                ),
+              },
+              { label: "ERROR! this should be hidden", value: 3, hidden: true },
+            ]}
+          />
+        </GridPopoverContext.Provider>
+      </GridContextProvider>
+    </div>
+  );
+};
+
+export const GridFormPopoverMenuInteractions_ = Template.bind({});
+GridFormPopoverMenuInteractions_.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  const getOption = (name: string) => canvas.findByRole("menuitem", { name });
+
+  const enabledMenuOption = await getOption("Enabled");
+  expect(enabledMenuOption).toBeInTheDocument();
+  userEvent.click(enabledMenuOption);
+  expect(enabledAction).toHaveBeenCalled();
+
+  enabledAction.mockClear();
+  const disabledMenuOption = await getOption("Disabled");
+  expect(disabledMenuOption).toBeInTheDocument();
+  userEvent.click(disabledMenuOption);
+  expect(disabledAction).not.toHaveBeenCalled();
+
+  // Sub input tests
+  const subTextInput = await getOption("Sub text input");
+  expect(subTextInput).toBeInTheDocument();
+  expect(canvas.queryByPlaceholderText("Text input")).not.toBeInTheDocument();
+
+  const subTextArea = await getOption("Sub text area");
+  expect(subTextArea).toBeInTheDocument();
+  expect(canvas.queryByPlaceholderText("Text area")).not.toBeInTheDocument();
+
+  userEvent.click(subTextInput);
+  const textInput = await canvas.findByPlaceholderText("Text input");
+  expect(textInput).toBeInTheDocument();
+  expect(await canvas.findByText("Must not be empty")).toBeInTheDocument();
+  expect(canvas.queryByPlaceholderText("Text area")).not.toBeInTheDocument();
+
+  userEvent.type(textInput, "Hello");
+  expect(await canvas.findByText("Press enter or tab to save")).toBeInTheDocument();
+
+  // Test tab to save
+  updateValue.mockClear();
+  userEvent.tab();
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 1); // 1 = Tab
+
+  // Test shift+tab to save
+  updateValue.mockClear();
+  userEvent.tab({ shift: true });
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), -1); // -1 = Shift + tab
+
+  // Test escape to not save
+  updateValue.mockClear();
+  userEvent.type(textInput, "{Escape}");
+  expect(updateValue).not.toHaveBeenCalled();
+
+  // Test invalid value doesn't save
+  updateValue.mockClear();
+  userEvent.clear(textInput);
+  userEvent.type(textInput, "{Enter}");
+  expect(updateValue).not.toHaveBeenCalled();
+
+  // Sub text area tests
+  subTextArea.click();
+
+  const textArea = await canvas.findByPlaceholderText("Text area");
+  expect(textArea).toBeInTheDocument();
+  expect(await canvas.findByText("Must not be empty")).toBeInTheDocument();
+  expect(canvas.queryByPlaceholderText("Text input")).not.toBeInTheDocument();
+
+  userEvent.type(textArea, "Hello");
+  expect(await canvas.findByText("Press tab to save")).toBeInTheDocument();
+
+  // Test tab to save
+  updateValue.mockClear();
+  userEvent.tab();
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 1); // 1 = Tab
+
+  // Test shift+tab to save
+  updateValue.mockClear();
+  userEvent.tab({ shift: true });
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), -1); // -1 = Shift + tab
+
+  // Test escape to not save
+  updateValue.mockClear();
+  userEvent.type(textArea, "{Escape}");
+  expect(updateValue).not.toHaveBeenCalled();
+
+  // Test invalid value doesn't save
+  updateValue.mockClear();
+  userEvent.clear(textArea);
+  userEvent.type(textArea, "{Enter}");
+  expect(updateValue).not.toHaveBeenCalled();
+};

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

@@ -0,0 +1,78 @@
+import "@linzjs/lui/dist/scss/base.scss";
+import "@linzjs/lui/dist/fonts";
+
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { GridFormTextArea } from "../../../components/gridForm/GridFormTextArea";
+import { GridContextProvider } from "../../../contexts/GridContextProvider";
+import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { useRef } from "react";
+import { userEvent, within } from "@storybook/testing-library";
+import { expect, jest } from "@storybook/jest";
+
+export default {
+  title: "GridForm / Interactions",
+  component: GridFormTextArea,
+  args: {},
+} as ComponentMeta<typeof GridFormTextArea>;
+
+const updateValue = jest.fn();
+
+const Template: ComponentStory<typeof GridFormTextArea> = (props) => {
+  const anchorRef = useRef<HTMLHeadingElement>(null);
+
+  return (
+    <div className={"react-menu-inline-test"}>
+      <GridContextProvider>
+        <h6 ref={anchorRef}>Test</h6>
+        <GridPopoverContext.Provider
+          value={
+            {
+              anchorRef,
+              value: null,
+              updateValue,
+            } as any as GridPopoverContextType<any>
+          }
+        >
+          <GridFormTextArea {...props} required={true} />
+        </GridPopoverContext.Provider>
+      </GridContextProvider>
+    </div>
+  );
+};
+
+export const GridFormTextAreaInteractions_ = Template.bind({});
+GridFormTextAreaInteractions_.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  expect(await canvas.findByText("Must not be empty")).toBeInTheDocument();
+
+  const inputField = canvas.getByPlaceholderText("Type here");
+  userEvent.type(inputField, "Hello");
+
+  expect(await canvas.findByText("Press tab to save")).toBeInTheDocument();
+
+  // Test tab to save
+  updateValue.mockClear();
+  userEvent.tab();
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 1); // 1 = Tab
+
+  // Test shift+tab to save
+  updateValue.mockClear();
+  userEvent.tab({ shift: true });
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), -1); // -1 = Shift + tab
+
+  // Test escape not to save
+  updateValue.mockClear();
+  userEvent.type(inputField, "{Escape}");
+  expect(updateValue).not.toHaveBeenCalled();
+
+  // Test invalid value doesn't save
+  updateValue.mockClear();
+  userEvent.clear(inputField);
+
+  expect(canvas.getByText("Must not be empty")).toBeInTheDocument();
+  userEvent.tab();
+  expect(updateValue).not.toHaveBeenCalled();
+  userEvent.tab({ shift: true });
+  expect(updateValue).not.toHaveBeenCalled();
+};

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

@@ -0,0 +1,85 @@
+import "@linzjs/lui/dist/scss/base.scss";
+import "@linzjs/lui/dist/fonts";
+
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { GridFormTextInput } from "../../../components/gridForm/GridFormTextInput";
+import { GridContextProvider } from "../../../contexts/GridContextProvider";
+import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopoverContext";
+import { useRef } from "react";
+import { userEvent, within } from "@storybook/testing-library";
+import { expect, jest } from "@storybook/jest";
+
+export default {
+  title: "GridForm / Interactions",
+  component: GridFormTextInput,
+  args: {},
+} as ComponentMeta<typeof GridFormTextInput>;
+
+const updateValue = jest.fn();
+
+const Template: ComponentStory<typeof GridFormTextInput> = (props) => {
+  const anchorRef = useRef<HTMLHeadingElement>(null);
+
+  return (
+    <div className={"react-menu-inline-test"}>
+      <GridContextProvider>
+        <h6 ref={anchorRef}>Test</h6>
+        <GridPopoverContext.Provider
+          value={
+            {
+              anchorRef,
+              value: null,
+              updateValue,
+            } as any as GridPopoverContextType<any>
+          }
+        >
+          <GridFormTextInput {...props} required={true} />
+        </GridPopoverContext.Provider>
+      </GridContextProvider>
+    </div>
+  );
+};
+
+export const GridFormTextInputInteractions_ = Template.bind({});
+GridFormTextInputInteractions_.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  expect(await canvas.findByText("Must not be empty")).toBeInTheDocument();
+
+  const inputField = canvas.getByPlaceholderText("Type here");
+  userEvent.type(inputField, "Hello");
+
+  expect(canvas.getByText("Press enter or tab to save")).toBeInTheDocument();
+
+  // Test enter to save
+  updateValue.mockClear();
+  userEvent.type(inputField, "{Enter}");
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 0); // 0 = Enter
+
+  // Test tab to save
+  updateValue.mockClear();
+  userEvent.tab();
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 1); // 1 = Tab
+
+  // Test shift+tab to save
+  updateValue.mockClear();
+  userEvent.tab({ shift: true });
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), -1); // -1 = Shift + tab
+
+  // Test escape not to save
+  updateValue.mockClear();
+  userEvent.type(inputField, "{Escape}");
+  expect(updateValue).not.toHaveBeenCalled();
+
+  // Test invalid value doesn't save
+  updateValue.mockClear();
+  userEvent.clear(inputField);
+
+  expect(canvas.getByText("Must not be empty")).toBeInTheDocument();
+  userEvent.type(inputField, "{Enter}");
+  expect(updateValue).not.toHaveBeenCalled();
+  userEvent.tab();
+  expect(updateValue).not.toHaveBeenCalled();
+  userEvent.tab({ shift: true });
+  expect(updateValue).not.toHaveBeenCalled();
+};

package/src/stories/grid/{gridForm → gridFormStatic}/GridFormDropDown.stories.tsx

@@ -9,7 +9,7 @@ import { useRef } from "react";
 import { GridBaseRow } from "../../../components/Grid";
 
 export default {
-  title: "GridForm / Testing",
+  title: "GridForm / Static Tests",
   component: GridFormDropDown,
   args: {},
 } as ComponentMeta<typeof GridFormDropDown>;

package/src/stories/grid/{gridForm → gridFormStatic}/GridFormEditBearing.stories.tsx

@@ -9,7 +9,7 @@ import { useRef } from "react";
 import { GridPopoverEditBearingEditorParams } from "../../../components/gridPopoverEdit/GridPopoverEditBearing";
 
 export default {
-  title: "GridForm / Testing",
+  title: "GridForm / Static Tests",
   component: GridFormEditBearing,
   args: {},
 } as ComponentMeta<typeof GridFormEditBearing>;

package/src/stories/grid/{gridForm → gridFormStatic}/GridFormEditBearingCorrection.stories.tsx

@@ -9,7 +9,7 @@ import { useRef } from "react";
 import { GridPopoverEditBearingCorrectionEditorParams } from "../../../components/gridPopoverEdit/GridPopoverEditBearing";
 
 export default {
-  title: "GridForm / Testing",
+  title: "GridForm / Static Tests",
   component: GridFormEditBearing,
   args: {},
 } as ComponentMeta<typeof GridFormEditBearing>;

package/src/stories/grid/{gridForm → gridFormStatic}/GridFormMessage.stories.tsx

@@ -8,7 +8,7 @@ import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopover
 import { useRef } from "react";
 
 export default {
-  title: "GridForm / Testing",
+  title: "GridForm / Static Tests",
   component: GridFormMessage,
   args: {},
 } as ComponentMeta<typeof GridFormMessage>;

package/src/stories/grid/{gridForm → gridFormStatic}/GridFormMultiSelect.stories.tsx

@@ -9,7 +9,7 @@ import { useRef } from "react";
 import { GridBaseRow } from "../../../components/Grid";
 
 export default {
-  title: "GridForm / Testing",
+  title: "GridForm / Static Tests",
   component: GridFormMultiSelect,
   args: {},
 } as ComponentMeta<typeof GridFormMultiSelect>;

package/src/stories/grid/{gridForm → gridFormStatic}/GridFormPopoverMenu.stories.tsx

@@ -13,7 +13,7 @@ import { GridPopoverContext, GridPopoverContextType } from "contexts/GridPopover
 import { GridBaseRow } from "../../../components/Grid";
 
 export default {
-  title: "GridForm / Testing",
+  title: "GridForm / Static Tests",
   component: GridFormPopoverMenu,
   args: {},
 } as ComponentMeta<typeof GridFormPopoverMenu>;

package/src/stories/grid/{gridForm → gridFormStatic}/GridFormTextArea.stories.tsx

@@ -9,7 +9,7 @@ import { useRef } from "react";
 import { GridBaseRow } from "../../../components/Grid";
 
 export default {
-  title: "GridForm / Testing",
+  title: "GridForm / Static Tests",
   component: GridFormTextArea,
   args: {},
 } as ComponentMeta<typeof GridFormTextArea>;

package/src/stories/grid/{gridForm → gridFormStatic}/GridFormTextInput.stories.tsx

@@ -9,7 +9,7 @@ import { useRef } from "react";
 import { GridBaseRow } from "../../../components/Grid";
 
 export default {
-  title: "GridForm / Testing",
+  title: "GridForm / Static Tests",
   component: GridFormTextInput,
   args: {},
 } as ComponentMeta<typeof GridFormTextInput>;