feat(SW-360): Added test for register user form

components/Forms/Register/index.tsx

@@ -48,7 +48,6 @@ export default function Form() {
   const zipCode = intl.formatMessage({ id: "Zip code" })
 
   async function handleSubmit(data: RegisterSchema) {
-    console.log("submit", data)
     const isSuccessResponse = await registerUser(data)
     if (!isSuccessResponse) {
       toast.error("Something went wrong!")
@@ -66,11 +65,6 @@ export default function Form() {
     <section className={styles.container}>
       <FormProvider {...methods}>
         <form
-          /**
-           * Ignoring since ts doesn't recognize that tRPC
-           * parses FormData before reaching the route
-           * @ts-ignore */
-          action={registerUser}
           className={styles.form}
           id="register"
           onSubmit={methods.handleSubmit(handleSubmit)}

components/Forms/Register/register.test.tsx

@@ -0,0 +1,68 @@
+import { expect } from "@jest/globals"
+import { render, screen, waitFor } from "@testing-library/react"
+import { userEvent } from "@testing-library/user-event"
+
+import { registerUser } from "@/actions/registerUser"
+
+import Form from "./index"
+
+// Mock server action to prevent api calls
+jest.mock("@/actions/registerUser", () => ({
+  registerUser: jest.fn().mockResolvedValue(true),
+}))
+
+describe("Register user form", () => {
+  test("Should submit form with correct data", async () => {
+    render(<Form />)
+
+    const values = {
+      firstName: "John",
+      lastName: "Doe",
+      dateOfBirth: "1990-01-08",
+      address: {
+        zipCode: "11111",
+        countryCode: "SE",
+      },
+      email: "john.doe@example.com",
+      phoneNumber: "+46123456789",
+      password: "securePassword123!",
+      termsAccepted: true,
+    }
+
+    await userEvent.type(screen.getByTestId("firstName"), values.firstName)
+    await userEvent.type(screen.getByTestId("lastName"), values.lastName)
+
+    const dateOfBirthInput = screen.getByTestId("dateOfBirth")
+    const daySelect = dateOfBirthInput.querySelector("select[name='date']")!
+    const monthSelect = dateOfBirthInput.querySelector("select[name='month']")!
+    const yearSelect = dateOfBirthInput.querySelector("select[name='year']")!
+
+    await userEvent.selectOptions(daySelect, "1")
+    await userEvent.selectOptions(monthSelect, "1")
+    await userEvent.selectOptions(yearSelect, "1990")
+
+    await userEvent.type(
+      screen.getByTestId("address.zipCode"),
+      values.address.zipCode
+    )
+
+    const countryInput = screen.getByLabelText("Select a country")
+    await userEvent.click(countryInput)
+    await userEvent.type(countryInput, "Sweden")
+    await userEvent.keyboard("{ArrowDown}{Enter}")
+
+    await userEvent.type(screen.getByTestId("email"), values.email)
+    await userEvent.type(
+      screen.getByTestId("phoneNumber"),
+      values.phoneNumber.slice(3)
+    )
+    await userEvent.type(screen.getByTestId("password"), values.password)
+    await userEvent.click(screen.getAllByTestId("termsAccepted")[0])
+
+    await userEvent.click(screen.getByTestId("submit"))
+
+    await waitFor(() => {
+      expect(registerUser).toHaveBeenCalledWith(values)
+    })
+  })
+})