test: add tests

coder · BrunoQuaresma · Apr 15, 2022 · Apr 12, 2022 · Apr 12, 2022 · Apr 12, 2022
commit 2ae098749e06a5b44ccccb57652e523214225845
@@ -2,6 +2,13 @@ import axios, { AxiosRequestHeaders } from "axios"
 import { mutate } from "swr"
 import * as Types from "./types"
 
+export const Language = {
+  errorsByCode: {
+    default: "Invalid value",
+    exists: "This value is already in use",
+  },
+}
+
 const CONTENT_TYPE_JSON: AxiosRequestHeaders = {
   "Content-Type": "application/json",
 }
@@ -78,3 +85,25 @@ export const updateProfile = async (userId: string, data: Types.UpdateProfileReq
   const response = await axios.put(`/api/v2/users/${userId}/profile`, data)
   return response.data
 }
+
+const getApiError = (error: unknown): Types.ApiError | undefined => {
+  if (axios.isAxiosError(error)) {
+    return error.response?.data
+  }
+}
+
+export const getFormErrorsFromApiError = (error: unknown): Record<string, string> | undefined => {
+  const apiError = getApiError(error)
+
+  if (apiError && apiError.errors) {
+    return apiError.errors.reduce((errors, error) => {
+      return {
+        ...errors,
+        [error.field]:
+          error.code in Language.errorsByCode
+            ? Language.errorsByCode[error.code as keyof typeof Language.errorsByCode]
+            : Language.errorsByCode.default,
+      }
+    }, {})
+  }
+}
@@ -1,3 +1,11 @@
+export interface ApiError {
+  message: string
+  errors?: Array<{
+    field: string
+    code: string
+  }>
+}
+
 /**
  * `BuildInfoResponse` must be kept in sync with the go struct in buildinfo.go.
  */

@@ -1,6 +1,6 @@
 import TextField from "@material-ui/core/TextField"
-import { FormikContextType, useFormik } from "formik"
-import React from "react"
+import { FormikContextType, FormikErrors, useFormik } from "formik"
+import React, { useEffect } from "react"
 import * as Yup from "yup"
 import { getFormHelpers, onChangeTrimmed } from "../Form"
 import { FormStack } from "../Form/FormStack"
@@ -27,19 +27,28 @@ const validationSchema = Yup.object({
   username: Yup.string().trim(),
 })
 
+export type AccountFormErrors = FormikErrors<AccountFormValues>
 export interface AccountFormProps {
   isLoading: boolean
   initialValues: AccountFormValues
   onSubmit: (values: AccountFormValues) => Promise<void>
+  errors?: AccountFormErrors
 }
 
-export const AccountForm: React.FC<AccountFormProps> = ({ isLoading, onSubmit, initialValues }) => {
+export const AccountForm: React.FC<AccountFormProps> = ({ isLoading, onSubmit, initialValues, errors }) => {
   const form: FormikContextType<AccountFormValues> = useFormik<AccountFormValues>({
     initialValues,
     validationSchema,
     onSubmit,
   })
 
+  // Sync errors from parent
+  useEffect(() => {
+    if (errors) {
+      form.setErrors(errors)
+    }
+  }, [errors, form])
+
   return (
     <>
       <form onSubmit={form.handleSubmit}>

@@ -7,41 +7,84 @@ import { renderWithAuth } from "../../test_helpers/render"
 import * as AuthXService from "../../xServices/auth/authXService"
 import { PreferencesAccountPage } from "./account"
 
+const renderPage = () => {
+  return renderWithAuth(
+    <>
+      <PreferencesAccountPage />
+      <GlobalSnackbar />
+    </>,
+  )
+}
+
+const newData = {
+  name: "User",
+  email: "user@coder.com",
+  username: "user",
+}
+
+const fillTheForm = async () => {
+  await waitFor(() => screen.findByLabelText("Name"))
+  fireEvent.change(screen.getByLabelText("Name"), { target: { value: newData.name } })
+  fireEvent.change(screen.getByLabelText("Email"), { target: { value: newData.email } })
+  fireEvent.change(screen.getByLabelText("Username"), { target: { value: newData.username } })
+  fireEvent.click(screen.getByText(AccountForm.Language.updatePreferences))
+}
+
 describe("PreferencesAccountPage", () => {
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
   describe("when it is a success", () => {
     it("shows the success message", async () => {
-      const newUserProfile = {
-        name: "User",
-        email: "user@coder.com",
-        username: "user",
-      }
-
       jest.spyOn(API, "updateProfile").mockImplementationOnce((userId, data) =>
         Promise.resolve({
           id: userId,
           ...data,
           created_at: new Date().toString(),
         }),
       )
-
-      const { user } = renderWithAuth(
-        <>
-          <PreferencesAccountPage />
-          <GlobalSnackbar />
-        </>,
-      )
-
-      // Wait for the form to load
-      await waitFor(() => screen.findByLabelText("Name"))
-      fireEvent.change(screen.getByLabelText("Name"), { target: { value: newUserProfile.name } })
-      fireEvent.change(screen.getByLabelText("Email"), { target: { value: newUserProfile.email } })
-      fireEvent.change(screen.getByLabelText("Username"), { target: { value: newUserProfile.username } })
-      fireEvent.click(screen.getByText(AccountForm.Language.updatePreferences))
+      const { user } = renderPage()
+      await fillTheForm()
 
       const successMessage = await screen.findByText(AuthXService.Language.successProfileUpdate)
       expect(successMessage).toBeDefined()
       expect(API.updateProfile).toBeCalledTimes(1)
-      expect(API.updateProfile).toBeCalledWith(user.id, newUserProfile)
+      expect(API.updateProfile).toBeCalledWith(user.id, newData)
+    })
+  })
+
+  describe("when the email is already taken", () => {
+    it("shows an error", async () => {
+      jest.spyOn(API, "updateProfile").mockRejectedValueOnce({
+        isAxiosError: true,
+        response: { data: { errors: [{ code: "exists", field: "email" }] } },
+      })
+
+      const { user } = renderPage()
+      await fillTheForm()
+
+      const errorMessage = await screen.findByText(API.Language.errorsByCode.exists)
+      expect(errorMessage).toBeDefined()
+      expect(API.updateProfile).toBeCalledTimes(1)
+      expect(API.updateProfile).toBeCalledWith(user.id, newData)
+    })
+  })
+
+  describe("when the username is already taken", () => {
+    it("shows an error", async () => {
+      jest.spyOn(API, "updateProfile").mockRejectedValueOnce({
+        isAxiosError: true,
+        response: { data: { errors: [{ code: "exists", field: "username" }] } },
+      })
+
+      const { user } = renderPage()
+      await fillTheForm()
+
+      const errorMessage = await screen.findByText(API.Language.errorsByCode.exists)
+      expect(errorMessage).toBeDefined()
+      expect(API.updateProfile).toBeCalledTimes(1)
+      expect(API.updateProfile).toBeCalledWith(user.id, newData)
     })
   })
 })
@@ -1,5 +1,6 @@
 import { useActor } from "@xstate/react"
 import React, { useContext } from "react"
+import { getFormErrorsFromApiError } from "../../api"
 import { AccountForm } from "../../components/Preferences/AccountForm"
 import { Section } from "../../components/Section"
 import { XServiceContext } from "../../xServices/StateContext"
@@ -13,6 +14,7 @@ export const PreferencesAccountPage: React.FC = () => {
   const xServices = useContext(XServiceContext)
   const [authState, authSend] = useActor(xServices.authXService)
   const { me } = authState.context
+  const formErrors = getFormErrorsFromApiError(authState.context.updateProfileError)
 
   if (!me) {
     throw new Error("No current user found")
@@ -22,6 +24,7 @@ export const PreferencesAccountPage: React.FC = () => {
     <>
       <Section title={Language.title} description={Language.description}>
         <AccountForm
+          errors={formErrors}
           isLoading={authState.matches("signedIn.profile.updatingProfile")}
           initialValues={{ name: me.name ?? "", username: me.username, email: me.email }}
           onSubmit={async (data) => {