Fix Save button in password change form (#5256)

* fix Save button in password change form

* fix type

* change header placement

* expect onSubmit to be called with data

---------

Co-authored-by: Paweł Chyła <chyla1988@gmail.com>

.changeset/rare-mirrors-sell.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+The "Save" button in Change Password form now submits the form data to Saleor.

src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.test.tsx

@@ -0,0 +1,59 @@
+import "@testing-library/jest-dom/extend-expect";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+
+import StaffPasswordResetDialog, {
+  StaffPasswordResetDialogProps,
+} from "./StaffPasswordResetDialog";
+
+const defaultProps = {
+  confirmButtonState: "default",
+  errors: [],
+  open: true,
+  onClose: jest.fn(),
+  onSubmit: jest.fn(),
+} as StaffPasswordResetDialogProps;
+
+jest.mock("react-intl", () => ({
+  useIntl: jest.fn(() => ({
+    formatMessage: jest.fn(x => x.defaultMessage),
+  })),
+  defineMessages: jest.fn(x => x),
+  FormattedMessage: ({ defaultMessage }: { defaultMessage: any }) => <>{defaultMessage}</>,
+}));
+
+describe("StaffPasswordResetDialog", () => {
+  it("renders the form", () => {
+    // Arrange & Act
+    render(<StaffPasswordResetDialog {...defaultProps} />);
+
+    // Assert
+    expect(screen.getByRole("form")).toBeInTheDocument();
+  });
+
+  it("executes onSubmit when submit button is clicked", () => {
+    // Arrange
+    const { getByTestId } = render(<StaffPasswordResetDialog {...defaultProps} />);
+
+    const submitButton = screen.getByTestId("submit");
+    const oldPasswordInput = getByTestId("old-password-input").querySelector("input");
+    const newPasswordInput = getByTestId("new-password-input").querySelector("input");
+
+    // Act
+    fireEvent.change(oldPasswordInput!, {
+      target: { value: "old-password" },
+    });
+    fireEvent.change(newPasswordInput!, {
+      target: { value: "new-password" },
+    });
+    fireEvent.click(submitButton);
+
+    // Assert
+    expect(defaultProps.onSubmit).toHaveBeenCalledTimes(1);
+    expect(defaultProps.onSubmit).toHaveBeenCalledWith({
+      oldPassword: "old-password",
+      newPassword: "new-password",
+    });
+  });
+});

src/staff/components/StaffPasswordResetDialog/StaffPasswordResetDialog.tsx

@@ -11,6 +11,7 @@ import { DialogProps } from "@dashboard/types";
 import { getFormErrors } from "@dashboard/utils/errors";
 import getAccountErrorMessage from "@dashboard/utils/errors/account";
 import { TextField } from "@material-ui/core";
+import { Box } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -41,73 +42,75 @@ const StaffPasswordResetDialog: React.FC<StaffPasswordResetDialogProps> = ({
 
   return (
     <DashboardModal onChange={onClose} open={open}>
-      <Form initial={initialForm} onSubmit={onSubmit}>
-        {({ change, data }) => (
-          <DashboardModal.Content size="sm">
-            <DashboardModal.Header>
-              <FormattedMessage
-                id="+kb2lM"
-                defaultMessage="Change Password"
-                description="dialog header"
-              />
-            </DashboardModal.Header>
+      <DashboardModal.Content size="sm">
+        <DashboardModal.Header>
+          <FormattedMessage
+            id="+kb2lM"
+            defaultMessage="Change Password"
+            description="dialog header"
+          />
+        </DashboardModal.Header>
 
-            <TextField
-              error={!!formErrors.oldPassword}
-              fullWidth
-              helperText={getAccountErrorMessage(formErrors.oldPassword, intl)}
-              label={intl.formatMessage({
-                id: "GXdwyR",
-                defaultMessage: "Previous Password",
-                description: "input label",
-              })}
-              name="oldPassword"
-              data-test-id="old-password-input"
-              type="password"
-              onChange={change}
-              inputProps={{
-                spellCheck: false,
-              }}
-            />
+        <Form initial={initialForm} onSubmit={onSubmit} role="form">
+          {({ change, data }) => (
+            <Box display="flex" flexDirection="column" gap={4}>
+              <TextField
+                error={!!formErrors.oldPassword}
+                fullWidth
+                helperText={getAccountErrorMessage(formErrors.oldPassword, intl)}
+                label={intl.formatMessage({
+                  id: "GXdwyR",
+                  defaultMessage: "Previous Password",
+                  description: "input label",
+                })}
+                name="oldPassword"
+                data-test-id="old-password-input"
+                type="password"
+                onChange={change}
+                inputProps={{
+                  spellCheck: false,
+                }}
+              />
 
-            <TextField
-              error={!!formErrors.newPassword}
-              fullWidth
-              helperText={
-                getAccountErrorMessage(formErrors.newPassword, intl) ||
-                intl.formatMessage({
-                  id: "qEJT8e",
-                  defaultMessage: "New password must be at least 8 characters long",
-                })
-              }
-              label={intl.formatMessage({
-                id: "cMFlOp",
-                defaultMessage: "New Password",
-                description: "input label",
-              })}
-              name="newPassword"
-              data-test-id="new-password-input"
-              type="password"
-              onChange={change}
-              inputProps={{
-                spellCheck: false,
-              }}
-            />
+              <TextField
+                error={!!formErrors.newPassword}
+                fullWidth
+                helperText={
+                  getAccountErrorMessage(formErrors.newPassword, intl) ||
+                  intl.formatMessage({
+                    id: "qEJT8e",
+                    defaultMessage: "New password must be at least 8 characters long",
+                  })
+                }
+                label={intl.formatMessage({
+                  id: "cMFlOp",
+                  defaultMessage: "New Password",
+                  description: "input label",
+                })}
+                name="newPassword"
+                data-test-id="new-password-input"
+                type="password"
+                onChange={change}
+                inputProps={{
+                  spellCheck: false,
+                }}
+              />
 
-            <DashboardModal.Actions>
-              <BackButton onClick={onClose} />
-              <ConfirmButton
-                data-test-id="submit"
-                disabled={data.newPassword.length < 8}
-                transitionState={confirmButtonState}
-                type="submit"
-              >
-                <FormattedMessage {...buttonMessages.save} />
-              </ConfirmButton>
-            </DashboardModal.Actions>
-          </DashboardModal.Content>
-        )}
-      </Form>
+              <DashboardModal.Actions>
+                <BackButton onClick={onClose} />
+                <ConfirmButton
+                  data-test-id="submit"
+                  disabled={data.newPassword.length < 8}
+                  transitionState={confirmButtonState}
+                  type="submit"
+                >
+                  <FormattedMessage {...buttonMessages.save} />
+                </ConfirmButton>
+              </DashboardModal.Actions>
+            </Box>
+          )}
+        </Form>
+      </DashboardModal.Content>
     </DashboardModal>
   );
 };