Fix EditDialog#onAfterSave not called on form submission (#1441)

The `onAfterSave` callback was only called when submitting a form inside an `EditDialog` by clicking the save button, but not when submitting the form by hitting the enter key. We fix this by adding the callback to the `EditDialogFormApi` and calling it after the form has been successfully submitted.
vivid-planet · Nov 28, 2023 · e33cd65 · e33cd65
1 parent 167a804
commit e33cd65
Show file tree

Hide file tree

Showing 11 changed files with 245 additions and 71 deletions.
diff --git a/.changeset/spotty-cougars-mate.md b/.changeset/spotty-cougars-mate.md
@@ -0,0 +1,8 @@
+---
+"@comet/admin": patch
+---
+
+Fix `EditDialog#onAfterSave` not called on form submission
+
+The `onAfterSave` callback was only called when submitting a form inside an `EditDialog` by clicking the save button, but not when submitting the form by hitting the enter key.
+We fix this by adding the callback to the `EditDialogFormApi` and calling it after the form has been successfully submitted.
diff --git a/packages/admin/admin/.eslintrc.json b/packages/admin/admin/.eslintrc.json
@@ -5,5 +5,13 @@
         "@typescript-eslint/no-explicit-any": "off",
         "@typescript-eslint/no-non-null-assertion": "off",
         "@comet/no-other-module-relative-import": "off"
-    }
+    },
+    "overrides": [
+        {
+            "files": ["*.test.ts", "*.test.tsx"],
+            "rules": {
+                "@calm/react-intl/missing-formatted-message": "off"
+            }
+        }
+    ]
 }
diff --git a/packages/admin/admin/jest.config.ts b/packages/admin/admin/jest.config.ts
@@ -1,6 +1,20 @@
-module.exports = {
+import type { JestConfigWithTsJest } from "ts-jest";
+
+const jestConfig: JestConfigWithTsJest = {
     preset: "ts-jest",
     testEnvironment: "jsdom",
     testPathIgnorePatterns: ["/node_modules/", "/lib/"],
     setupFilesAfterEnv: ["<rootDir>/setupTests.ts"],
+    transform: {
+        "^.+\\.tsx?$": [
+            "ts-jest",
+            {
+                tsconfig: "tsconfig.test.json",
+            },
+        ],
+    },
+    // See https://testing-library.com/docs/react-testing-library/setup/#configuring-jest-with-test-utils
+    moduleDirectories: ["node_modules", "utils", __dirname],
 };
+
+module.exports = jestConfig;
diff --git a/packages/admin/admin/package.json b/packages/admin/admin/package.json
@@ -54,9 +54,11 @@
         "@mui/styles": "^5.0.0",
         "@mui/system": "^5.0.0",
         "@mui/x-data-grid": "^5.0.0",
+        "@testing-library/dom": "^9.3.3",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^12.1.5",
         "@testing-library/react-hooks": "^8.0.0",
+        "@testing-library/user-event": "^14.5.1",
         "@types/debounce": "^1.2.0",
         "@types/file-saver": "^2.0.1",
         "@types/final-form-set-field-data": "^1.0.0",

diff --git a/packages/admin/admin/src/EditDialog.test.tsx b/packages/admin/admin/src/EditDialog.test.tsx
@@ -0,0 +1,89 @@
+import { Button } from "@mui/material";
+import userEvent from "@testing-library/user-event";
+import * as React from "react";
+import { render, screen, waitFor } from "test-utils";
+
+import { useEditDialog } from "./EditDialog";
+import { FinalForm } from "./FinalForm";
+import { Field } from "./form/Field";
+import { FinalFormInput } from "./form/FinalFormInput";
+
+describe("EditDialog", () => {
+    describe("onAfterSave", () => {
+        test("Should call onAfterSave when clicking save button", async () => {
+            const user = userEvent.setup();
+            const onAfterSave = jest.fn();
+
+            function Story() {
+                const [EditDialog, , editDialogApi] = useEditDialog();
+
+                return (
+                    <>
+                        <Button onClick={() => editDialogApi.openAddDialog()}>Open dialog</Button>
+                        <EditDialog onAfterSave={onAfterSave}>
+                            <FinalForm
+                                mode="edit"
+                                onSubmit={async () => {
+                                    // noop
+                                }}
+                            >
+                                <Field name="name" component={FinalFormInput} autoFocus />
+                            </FinalForm>
+                        </EditDialog>
+                    </>
+                );
+            }
+
+            const rendered = render(<Story />);
+
+            user.click(rendered.getByText("Open dialog"));
+
+            // Edit dialog title -> dialog is open
+            await rendered.findByText("Add");
+
+            user.keyboard("Test");
+
+            user.click(screen.getByText("Save"));
+
+            await waitFor(() => expect(onAfterSave).toHaveBeenCalledTimes(1));
+        });
+
+        test("Should call onAfterSave when pressing Enter", async () => {
+            const user = userEvent.setup();
+            const onAfterSave = jest.fn();
+
+            function Story() {
+                const [EditDialog, , editDialogApi] = useEditDialog();
+
+                return (
+                    <>
+                        <Button onClick={() => editDialogApi.openAddDialog()}>Open dialog</Button>
+                        <EditDialog onAfterSave={onAfterSave}>
+                            <FinalForm
+                                mode="edit"
+                                onSubmit={async () => {
+                                    // noop
+                                }}
+                            >
+                                <Field name="name" component={FinalFormInput} autoFocus />
+                            </FinalForm>
+                        </EditDialog>
+                    </>
+                );
+            }
+
+            const rendered = render(<Story />);
+
+            user.click(rendered.getByText("Open dialog"));
+
+            // Edit dialog title -> dialog is open
+            await rendered.findByText("Add");
+
+            user.keyboard("Test");
+
+            user.keyboard("{Enter}");
+
+            await waitFor(() => expect(onAfterSave).toHaveBeenCalledTimes(1));
+        });
+    });
+});
diff --git a/packages/admin/admin/src/EditDialog.tsx b/packages/admin/admin/src/EditDialog.tsx
@@ -85,7 +85,7 @@ export function useEditDialog(): [React.ComponentType<EditDialogProps>, { id?: s
         return (props: EditDialogProps) => {
             return (
                 <Selection>
-                    <EditDialogFormApiProvider>
+                    <EditDialogFormApiProvider onAfterSave={props.onAfterSave}>
                         <EditDialogInner {...props} selection={selection} selectionApi={selectionApi} api={api} />
                     </EditDialogFormApiProvider>
                 </Selection>
@@ -138,7 +138,6 @@ const EditDialogInner: React.FunctionComponent<EditDialogProps & IHookProps> = (
                 if (!disableCloseAfterSave) {
                     api.closeDialog({ delay: true });
                 }
-                onAfterSave?.();
             });
         }
     };

diff --git a/packages/admin/admin/src/EditDialogFormApiContext.tsx b/packages/admin/admin/src/EditDialogFormApiContext.tsx
@@ -7,14 +7,19 @@ export interface EditDialogFormApi {
     hasErrors: boolean;
     onFormStatusChange: (status: FormStatus) => void;
     resetFormStatus: () => void;
+    onAfterSave?: () => void;
 }
 
 export const EditDialogFormApiContext = React.createContext<EditDialogFormApi | null>(null);
 export function useEditDialogFormApi() {
     return React.useContext(EditDialogFormApiContext);
 }
 
-export const EditDialogFormApiProvider: React.FunctionComponent = ({ children }) => {
+type EditDialogFormApiProviderProps = {
+    onAfterSave?: () => void;
+};
+
+export const EditDialogFormApiProvider: React.FunctionComponent<EditDialogFormApiProviderProps> = ({ children, onAfterSave }) => {
     const [status, setStatus] = React.useState<FormStatus | null>(null);
 
     const onFormStatusChange = React.useCallback((status: FormStatus) => {
@@ -31,8 +36,9 @@ export const EditDialogFormApiProvider: React.FunctionComponent = ({ children })
             hasErrors: status === "error",
             onFormStatusChange,
             resetFormStatus,
+            onAfterSave,
         };
-    }, [onFormStatusChange, resetFormStatus, status]);
+    }, [onFormStatusChange, resetFormStatus, status, onAfterSave]);
 
     return <EditDialogFormApiContext.Provider value={editDialogFormApi}>{children}</EditDialogFormApiContext.Provider>;
 };
diff --git a/packages/admin/admin/src/FinalForm.tsx b/packages/admin/admin/src/FinalForm.tsx
@@ -235,6 +235,7 @@ export function FinalForm<FormValues = AnyObject>(props: IProps<FormValues>) {
                     }
 
                     onAfterSubmit(values, form);
+                    editDialogFormApi?.onAfterSave?.();
                 });
                 return data;
             })

diff --git a/packages/admin/admin/src/utils/test-utils.tsx b/packages/admin/admin/src/utils/test-utils.tsx
@@ -0,0 +1,28 @@
+// Inspired by https://testing-library.com/docs/react-testing-library/setup/#custom-render
+import { createTheme } from "@mui/material";
+import { render, RenderOptions, RenderResult } from "@testing-library/react";
+import React from "react";
+import { IntlProvider } from "react-intl";
+
+import { MuiThemeProvider } from "../mui/ThemeProvider";
+import { RouterMemoryRouter } from "../router/MemoryRouter";
+
+const messages = {};
+const theme = createTheme();
+
+function DefaultWrapper({ children }: { children: React.ReactNode }) {
+    return (
+        <IntlProvider locale="en" messages={messages}>
+            <MuiThemeProvider theme={theme}>
+                <RouterMemoryRouter>{children}</RouterMemoryRouter>
+            </MuiThemeProvider>
+        </IntlProvider>
+    );
+}
+
+function customRender(ui: React.ReactElement, options?: Omit<RenderOptions, "queries">): RenderResult {
+    return render(ui, { wrapper: DefaultWrapper, ...options });
+}
+
+export * from "@testing-library/react";
+export { customRender as render };
diff --git a/packages/admin/admin/tsconfig.json b/packages/admin/admin/tsconfig.json
@@ -2,7 +2,12 @@
     "extends": "../tsconfig.base.json",
     "compilerOptions": {
         "outDir": "lib",
-        "rootDir": "src"
+        "rootDir": "src",
+        "baseUrl": "src",
+        "paths": {
+            // See https://testing-library.com/docs/react-testing-library/setup/#configuring-jest-with-test-utils
+            "test-utils": ["./utils/test-utils"]
+        }
     },
     "include": ["./src"],
     "exclude": []