chore(test): add test for change email form using rtl (#4263)

frontend/components/forms/ChangeEmailForm/ChangeEmailForm.tests.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import ChangeEmailForm from "./ChangeEmailForm";
+
+describe("<ChangeEmailForm />", () => {
+  const props = {
+    handleSubmit: jest.fn(),
+    onCancel: jest.fn(),
+  };
+  const password = "p@ssw0rd";
+  it("renders the component correctly", () => {
+    render(<ChangeEmailForm {...props} />);
+
+    expect(screen.getByLabelText("Password")).toBeInTheDocument();
+
+    expect(screen.getByRole("button", { name: "Submit" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument();
+  });
+
+  it("it should not submit the form when the password form field have not been filled out", async () => {
+    render(<ChangeEmailForm {...props} />);
+
+    // when
+    fireEvent.click(screen.getByRole("button", { name: "Submit" }));
+    // then
+    expect(
+      await screen.findByText("Password must be present")
+    ).toBeInTheDocument();
+    expect(props.handleSubmit).not.toHaveBeenCalled();
+  });
+
+  it("it should submit the form when the password form field have not been filled out", async () => {
+    render(<ChangeEmailForm {...props} />);
+
+    // when
+    userEvent.type(screen.getByLabelText("Password"), password);
+    fireEvent.click(screen.getByRole("button", { name: "Submit" }));
+    // then
+    expect(props.handleSubmit).toHaveBeenCalledWith({ password: "p@ssw0rd" });
+  });
+
+  it("it should call onCancel function when Cancel button is pressed", async () => {
+    render(<ChangeEmailForm {...props} />);
+
+    // when
+    userEvent.type(screen.getByLabelText("Password"), password);
+    fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+    // then
+    expect(props.onCancel).toHaveBeenCalled();
+  });
+});