@linzjs/step-ag-grid 29.1.1 → 29.1.3

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

@@ -9,7 +9,7 @@ import { useRef } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 
 import {
-  GridContext,
+  GridContextProvider,
   GridFormMultiSelect,
   GridFormMultiSelectProps,
   GridFormSubComponentTextInput,
@@ -53,14 +53,7 @@ const Template: StoryFn<typeof GridFormMultiSelect> = (props: GridFormMultiSelec
 
   return (
     <div className={'react-menu-inline-test'}>
-      <GridContext.Provider
-        value={
-          {
-            onBulkEditingComplete: () => {},
-            resetFocusedCellAfterCellEditing: () => {},
-          } as any
-        }
-      >
+      <GridContextProvider>
         <h6 ref={anchorRef}>Interaction test</h6>
         <GridPopoverContext.Provider
           value={{
@@ -79,7 +72,7 @@ const Template: StoryFn<typeof GridFormMultiSelect> = (props: GridFormMultiSelec
         >
           <GridFormMultiSelect {...props} {...config} />
         </GridPopoverContext.Provider>
-      </GridContext.Provider>
+      </GridContextProvider>
     </div>
   );
 };
@@ -142,7 +135,8 @@ GridFormMultiSelectInteractions_.play = async ({ canvasElement }) => {
   updateValue.mockClear();
   onSave.mockClear();
   await userEvent.type(textInput, '{Escape}');
-  expect(updateValue).not.toHaveBeenCalled();
+  // expect(updateValue).not.toHaveBeenCalled();
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 0);
   expect(onSave).not.toHaveBeenCalled();
 
   // Test invalid value doesn't save

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

@@ -10,7 +10,7 @@ import * as test from 'storybook/test';
 import { expect, userEvent, within } from 'storybook/test';
 
 import {
-  GridContext,
+  GridContextProvider,
   GridFormPopoverMenu,
   GridFormPopoverMenuProps,
   GridFormSubComponentTextArea,
@@ -37,14 +37,7 @@ const Template: StoryFn<typeof GridFormPopoverMenu> = (props: GridFormPopoverMen
 
   return (
     <div className={'react-menu-inline-test'}>
-      <GridContext.Provider
-        value={
-          {
-            onBulkEditingComplete: () => {},
-            resetFocusedCellAfterCellEditing: () => {},
-          } as any
-        }
-      >
+      <GridContextProvider>
         <h6 ref={anchorRef}>Interaction Test</h6>
         <GridPopoverContext.Provider
           value={{
@@ -85,7 +78,7 @@ const Template: StoryFn<typeof GridFormPopoverMenu> = (props: GridFormPopoverMen
             ]}
           />
         </GridPopoverContext.Provider>
-      </GridContext.Provider>
+      </GridContextProvider>
     </div>
   );
 };
@@ -138,7 +131,7 @@ GridFormPopoverMenuInteractions_.play = async ({ canvasElement }) => {
   // Test escape to not save
   updateValue.mockClear();
   await userEvent.type(textInput, '{Escape}');
-  expect(updateValue).not.toHaveBeenCalled();
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 0);
 
   // Test invalid value doesn't save
   updateValue.mockClear();
@@ -170,7 +163,7 @@ GridFormPopoverMenuInteractions_.play = async ({ canvasElement }) => {
   // Test escape to not save
   updateValue.mockClear();
   await userEvent.type(textArea, '{Escape}');
-  expect(updateValue).not.toHaveBeenCalled();
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 0);
 
   // Test invalid value doesn't save
   updateValue.mockClear();

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

@@ -8,7 +8,7 @@ import { GridPopoverContext } from 'contexts/GridPopoverContext';
 import { useRef } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 
-import { GridContext, GridFormTextArea, GridFormTextAreaProps } from '../../..';
+import { GridContextProvider, GridFormTextArea, GridFormTextAreaProps } from '../../..';
 
 export default {
   title: 'GridForm / Interactions',
@@ -23,14 +23,7 @@ const Template: StoryFn<typeof GridFormTextArea> = (props: GridFormTextAreaProps
 
   return (
     <div className={'react-menu-inline-test'}>
-      <GridContext.Provider
-        value={
-          {
-            onBulkEditingComplete: () => {},
-            resetFocusedCellAfterCellEditing: () => {},
-          } as any
-        }
-      >
+      <GridContextProvider>
         <h6 ref={anchorRef}>Interaction Test</h6>
         <GridPopoverContext.Provider
           value={{
@@ -49,7 +42,7 @@ const Template: StoryFn<typeof GridFormTextArea> = (props: GridFormTextAreaProps
         >
           <GridFormTextArea {...props} required={true} />
         </GridPopoverContext.Provider>
-      </GridContext.Provider>
+      </GridContextProvider>
     </div>
   );
 };
@@ -78,7 +71,7 @@ GridFormTextAreaInteractions_.play = async ({ canvasElement }) => {
   // Test escape not to save
   updateValue.mockClear();
   await userEvent.type(inputField, '{Escape}');
-  expect(updateValue).not.toHaveBeenCalled();
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 0);
 
   // Test invalid value doesn't save
   updateValue.mockClear();

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

@@ -8,7 +8,7 @@ import { GridPopoverContext } from 'contexts/GridPopoverContext';
 import { useRef } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 
-import { GridContext, GridFormTextInput, GridFormTextInputProps } from '../../..';
+import { GridContextProvider, GridFormTextInput, GridFormTextInputProps } from '../../..';
 
 export default {
   title: 'GridForm / Interactions',
@@ -23,14 +23,7 @@ const Template: StoryFn<typeof GridFormTextInput> = (props: GridFormTextInputPro
 
   return (
     <div className={'react-menu-inline-test'}>
-      <GridContext.Provider
-        value={
-          {
-            onBulkEditingComplete: () => {},
-            resetFocusedCellAfterCellEditing: () => {},
-          } as any
-        }
-      >
+      <GridContextProvider>
         <h6 ref={anchorRef}>Interaction Test</h6>
         <GridPopoverContext.Provider
           value={{
@@ -49,7 +42,7 @@ const Template: StoryFn<typeof GridFormTextInput> = (props: GridFormTextInputPro
         >
           <GridFormTextInput {...props} required={true} />
         </GridPopoverContext.Provider>
-      </GridContext.Provider>
+      </GridContextProvider>
     </div>
   );
 };
@@ -83,7 +76,7 @@ GridFormTextInputInteractions_.play = async ({ canvasElement }) => {
   // Test escape not to save
   updateValue.mockClear();
   await userEvent.type(inputField, '{Escape}');
-  expect(updateValue).not.toHaveBeenCalled();
+  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 0);
 
   // Test invalid value doesn't save
   updateValue.mockClear();

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

@@ -5,7 +5,7 @@ import '@linzjs/lui/dist/fonts';
 
 import { Meta, StoryFn } from '@storybook/react-vite';
 import { useMemo, useState } from 'react';
-import { expect } from 'storybook/test';
+import { expect, within } from 'storybook/test';
 import { fn } from 'storybook/test';
 import { userEvent, waitFor } from 'storybook/test';
 
@@ -19,6 +19,7 @@ import {
   GridIcon,
   GridPopoverMenu,
   GridPopoverMessage,
+  GridPopoverTextArea,
   GridProps,
   GridUpdatingContextProvider,
   MenuOption,
@@ -75,6 +76,10 @@ const eAction = fn(() => {
   return true;
 });
 
+const bulkEditingCallback = fn(() => {
+  console.log('bulkEditingCallback');
+});
+
 const GridKeyboardInteractionsTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
@@ -95,12 +100,16 @@ const GridKeyboardInteractionsTemplate: StoryFn<typeof Grid<ITestRow>> = (props:
         field: 'age',
         headerName: 'Age',
       }),
-      GridCell({
-        field: 'desc',
-        headerName: 'Description',
-      }),
+      GridPopoverTextArea(
+        {
+          field: 'desc',
+          headerName: 'Description',
+        },
+        {},
+      ),
       GridPopoverMessage(
         {
+          colId: 'popout_message',
           headerName: 'Popout message',
           maxWidth: 150,
           cellRenderer: () => <>Single Click me!</>,
@@ -116,6 +125,7 @@ const GridKeyboardInteractionsTemplate: StoryFn<typeof Grid<ITestRow>> = (props:
         },
       ),
       GridCell({
+        colId: 'custom_edit',
         headerName: 'Custom edit',
         maxWidth: 100,
         editable: true,
@@ -219,15 +229,18 @@ const GridKeyboardInteractionsTemplate: StoryFn<typeof Grid<ITestRow>> = (props:
       rowData={rowData}
       domLayout={'autoHeight'}
       autoSelectFirstRow={true}
+      onBulkEditingComplete={bulkEditingCallback}
     />
   );
 };
 
 export const GridKeyboardInteractions: StoryFn<typeof Grid<ITestRow>> = GridKeyboardInteractionsTemplate.bind({});
 GridKeyboardInteractions.play = async ({ canvasElement }) => {
+  const canvas = within(document.body);
+
   multiEditAction.mockClear();
   eAction.mockClear();
-
+  bulkEditingCallback.mockClear();
   await waitForGridReady({ canvasElement });
 
   // Ensure first row/cell is selected on render
@@ -237,7 +250,9 @@ GridKeyboardInteractions.play = async ({ canvasElement }) => {
     expect(activeCell).toHaveAttribute('aria-colindex', '1');
     expect(activeCell?.parentElement).toHaveAttribute('row-index', '0');
   });
+  console.log('arrow down to 3rd row');
   await userEvent.keyboard('{arrowdown}{arrowdown}');
+  console.log('arrow right to first popup menu');
   await userEvent.keyboard('{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}{arrowright}');
 
   // Test enter post focus
@@ -246,9 +261,6 @@ GridKeyboardInteractions.play = async ({ canvasElement }) => {
     await wait(1000);
     await userEvent.keyboard('{arrowdown}{arrowdown}');
     fn();
-    await waitFor(() => {
-      expect(multiEditAction).toHaveBeenCalled();
-    });
 
     await waitFor(() => {
       const activeCell = canvasElement.ownerDocument.activeElement;
@@ -259,19 +271,50 @@ GridKeyboardInteractions.play = async ({ canvasElement }) => {
     await wait(200);
   };
 
+  console.log('At 2nd to last cell open the popup menu and select 2nd option');
   await test(() => userEvent.keyboard('{Enter}'), '8', '2');
+  expect(multiEditAction).toHaveBeenCalled();
+
+  console.log('Open 2nd to last popup menu, tab to next disabled popup');
   await test(() => userEvent.tab(), '9', '2');
+  expect(bulkEditingCallback).toHaveBeenCalled();
+  bulkEditingCallback.mockClear();
+
+  console.log('Fail to edit last popup menu, tab back to 2nd to last popup menu');
   await userEvent.tab({ shift: true });
-  await test(() => userEvent.tab({ shift: true }), '6', '2');
+  console.log('Open 2nd to last popup menu, tab to desc cell');
+  await test(() => userEvent.tab({ shift: true }), '5', '2');
+  console.log('Cancel edit');
+  await wait(500);
   await userEvent.keyboard('{Esc}');
+  expect(bulkEditingCallback).toHaveBeenCalled();
+  bulkEditingCallback.mockClear();
+  await wait(500);
+
+  console.log('Open desc cell');
+  await userEvent.keyboard('{Enter}');
+  const textInput = await canvas.findByRole('textbox');
+  expect(textInput).toBeInTheDocument();
+  await userEvent.clear(textInput);
+  await userEvent.type(textInput, 'foo');
+
   await userEvent.tab();
+  await userEvent.keyboard('{arrowleft}{arrowleft}{arrowleft}');
 
   await userEvent.keyboard('{Enter}');
-  await wait(250);
-  expect(eAction).not.toHaveBeenCalled();
+  await waitFor(
+    async () => {
+      await canvas.findByText(/There are 1 row/);
+    },
+    { timeout: 5000 },
+  );
+  await userEvent.keyboard('{Esc}');
+  await userEvent.tab();
 
+  expect(eAction).not.toHaveBeenCalled();
+  /*await userEvent.keyboard('{Enter}');
   await userEvent.keyboard('e');
   await waitFor(() => {
     expect(eAction).toHaveBeenCalled();
-  });
+  });*/
 };

package/src/utils/waitForCondition.tsx

@@ -0,0 +1,17 @@
+import { wait } from '../utils/util';
+
+export const waitForCondition = async (
+  error: string,
+  condition: () => boolean,
+  timeoutMs: number,
+): Promise<boolean> => {
+  const endTime = Date.now() + timeoutMs;
+  while (Date.now() < endTime) {
+    if (condition()) {
+      return true;
+    }
+    await wait(100);
+  }
+  console.warn(error);
+  return false;
+};