fix(SW-360): Added test for edit profile form

components/Forms/Edit/Profile/editProfile.test.tsx

@@ -0,0 +1,111 @@
+import { expect } from "@jest/globals"
+import { render, screen, waitFor } from "@testing-library/react"
+import { userEvent } from "@testing-library/user-event"
+
+import { editProfile } from "@/actions/editProfile"
+
+import Form from "."
+
+import { type User } from "@/types/user"
+
+jest.mock("@/actions/editProfile", () => ({
+  editProfile: jest.fn().mockResolvedValue({ status: "" }),
+}))
+
+describe("EditProfile", () => {
+  it("Should submit form with correct data", async () => {
+    const user: User = {
+      email: "test@test.com",
+      name: "Test User",
+      phoneNumber: "+4612345678",
+      dateOfBirth: "1990-01-08",
+      address: {
+        city: "Test City",
+        countryCode: "SE",
+        streetAddress: "Test Street",
+        zipCode: "12345",
+      },
+      journeys: [],
+      nights: 0,
+      shortcuts: [],
+      victories: [],
+      language: "en",
+      firstName: "Test",
+      lastName: "User",
+      memberships: [],
+      profileId: "1",
+    }
+
+    render(<Form user={user} />)
+
+    const newValues = {
+      email: "new@test.com",
+      dateOfBirth: "2000-01-01",
+      address: {
+        city: "New City",
+        countryCode: "SE",
+        streetAddress: "New Street",
+        zipCode: "67890",
+      },
+      phoneNumber: "+469999999",
+      language: "No",
+      password: "oldPassword123!",
+      newPassword: "newPassword123!",
+      retypeNewPassword: "newPassword123!",
+    }
+
+    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, "2000")
+
+    const streetAddressInput = screen.getByTestId("address.streetAddress")
+    await userEvent.clear(streetAddressInput)
+    await userEvent.type(streetAddressInput, newValues.address.streetAddress)
+
+    const cityInput = screen.getByTestId("address.city")
+    await userEvent.clear(cityInput)
+    await userEvent.type(cityInput, newValues.address.city)
+
+    const zipCodeInput = screen.getByTestId("address.zipCode")
+    await userEvent.clear(zipCodeInput)
+    await userEvent.type(zipCodeInput, newValues.address.zipCode)
+
+    const countryInput = screen.getByLabelText("Select a country")
+    await userEvent.click(countryInput)
+    await userEvent.type(countryInput, "Sweden")
+    await userEvent.keyboard("{ArrowDown}{Enter}")
+
+    const emailInput = screen.getByTestId("email")
+    await userEvent.clear(emailInput)
+    await userEvent.type(emailInput, newValues.email)
+
+    const phoneNumberInput = screen.getByTestId("phoneNumber")
+    await userEvent.clear(phoneNumberInput)
+    await userEvent.type(phoneNumberInput, newValues.phoneNumber.slice(3)) // Remove country code
+
+    const languageInput = screen.getByTestId("language")
+    await userEvent.click(languageInput)
+    await userEvent.click(screen.getByTestId("Norwegian"))
+
+    await userEvent.type(screen.getByTestId("password"), newValues.password)
+    await userEvent.type(
+      screen.getByTestId("newPassword"),
+      newValues.newPassword
+    )
+    await userEvent.type(
+      screen.getByTestId("retypeNewPassword"),
+      newValues.retypeNewPassword
+    )
+
+    await userEvent.click(screen.getByText("Save"))
+
+    await waitFor(() => {
+      expect(editProfile).toHaveBeenCalledWith(newValues)
+    })
+  })
+})

components/Forms/Register/index.tsx

@@ -67,6 +67,11 @@ export default function Form() {
         <form
           className={styles.form}
           id="register"
+          /**
+           * Ignoring since ts doesn't recognize that tRPC
+           * parses FormData before reaching the route
+           * @ts-ignore */
+          action={registerUser}
           onSubmit={methods.handleSubmit(handleSubmit)}
         >
           <section className={styles.user}>

components/Forms/Register/register.test.tsx

@@ -18,7 +18,7 @@ describe("Register user form", () => {
     const values = {
       firstName: "John",
       lastName: "Doe",
-      dateOfBirth: "1990-01-08",
+      dateOfBirth: "1990-01-01",
       address: {
         zipCode: "11111",
         countryCode: "SE",

components/TempDesignSystem/Form/Date/index.tsx

@@ -61,7 +61,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
         const newDate = dt(new Date())
           .set("year", newSegments.year!)
           .set("month", newSegments.month!)
-          .set("day", newSegments.date!)
+          .set("date", newSegments.date!)
 
         setValue(name, newDate.format("YYYY-MM-DD"))
       }

components/TempDesignSystem/Form/Phone/index.tsx

@@ -85,6 +85,7 @@ export default function Phone({
             className={styles.select}
             tabIndex={0}
             type="button"
+            data-testid="country-selector"
           >
             <Label required={!!registerOptions.required} size="small">
               {formatMessage({ id: "Country code" })}

components/TempDesignSystem/Form/Select/index.tsx

@@ -25,11 +25,13 @@ export default function Select({
       disabled={field.disabled}
       items={items}
       label={label}
+      aria-label={label}
       name={field.name}
       onBlur={field.onBlur}
       onSelect={field.onChange}
       placeholder={placeholder}
       value={field.value}
+      data-testid={name}
     />
   )
 }

components/TempDesignSystem/Select/index.tsx

@@ -59,7 +59,7 @@ export default function Select({
         selectedKey={value as Key}
       >
         <Body asChild fontOnly>
-          <Button className={styles.input}>
+          <Button className={styles.input} data-testid={name}>
             <div className={styles.inputContentWrapper} tabIndex={tabIndex}>
               <Label required={required} size="small">
                 {label}
@@ -89,6 +89,7 @@ export default function Select({
                   className={styles.listBoxItem}
                   id={item.value}
                   key={item.label}
+                  data-testid={item.label}
                 >
                   {item.label}
                 </ListBoxItem>

jest.config.ts

@@ -154,7 +154,7 @@ const config: Config = {
   // snapshotSerializers: [],
 
   // The test environment that will be used for testing
-  testEnvironment: "jsdom",
+  testEnvironment: "jest-environment-jsdom",
 
   // Options that will be passed to the testEnvironment
   // testEnvironmentOptions: {},

jest.setup.ts

@@ -9,4 +9,11 @@ jest.mock("react-intl", () => ({
 jest.mock("next/navigation", () => ({
   useRouter: jest.fn(),
   usePathname: jest.fn().mockReturnValue("/"),
+  useParams: jest.fn().mockReturnValue({ lang: "en" }),
+}))
+
+jest.mock("@/lib/trpc/client", () => ({
+  trpc: {
+    useUtils: jest.fn(),
+  },
 }))