chore: test edit profile names form

Author: serapieTuyishime

__mocks__/colors.tsx

@@ -0,0 +1,17 @@
+import { Colors } from "@/types/community";
+
+export const mockColors = (): Colors => ({
+    textAccent: "#bada55",
+    text: "#bada55",
+    accent: "#bada55",
+    primary: "#bada55",
+    secondary: "#bada55",
+    highlight: "#bada55",
+    muted: "#bada55",
+    cover: {
+        text: "#bada55",
+        accent: "#bada55",
+        primary: "#bada55",
+        background: "#bada55",
+    }
+})

__tests__/components/popus/NamesForm.test.tsx

@@ -1,7 +1,7 @@
 import "@testing-library/jest-dom"
 import { renderWithRedux } from "../../../__mocks__/renderWithRedux"
 import EditProfile from "@/components/popups/profile-settings/NamesForm"
-import { screen } from "@testing-library/react"
+import { fireEvent, screen } from "@testing-library/react"
 
 jest.mock("next/router", () => ({
     useRouter: () => ({
@@ -16,10 +16,33 @@ jest.mock("next/router", () => ({
     }),
 }));
 const handleClose = jest.fn()
+jest.mock("../../../src/components/ui/button/Arrow", () => {
+    return {
+        __esModule: true,
+        default: () => {
+            return <div />;
+        },
+    };
+});
+beforeEach(() => {
+    renderWithRedux(<EditProfile show onClose={handleClose} />)
+})
 describe("NamesForm", () => {
     it("should render the names edit form", () => {
-        renderWithRedux(<EditProfile show onClose={handleClose} />)
         const form = screen.getByTestId('names-edit-form')
         expect(form).toBeInTheDocument()
     })
+
+    it("should render the form with 2 inputs", () => {
+        const form = screen.getByTestId('names-edit-form')
+        const firstNameInput = form.querySelectorAll("div [data-testid='first-name']")
+        const lastNameInput = form.querySelectorAll("div [data-testid='last-name']")
+        expect(firstNameInput).toHaveLength(1)
+        expect(lastNameInput).toHaveLength(1)
+    })
+    it("it should close the modal when its open", () => {
+        expect(screen.getByTestId('names-edit-form')).toBeInTheDocument()
+        fireEvent.click(screen.getByTestId('close-button'))
+        expect(handleClose).toHaveBeenCalled()
+    })
 })

src/components/popups/profile-settings/NamesForm.tsx

@@ -70,6 +70,7 @@ export default function EditProfile({ show, onClose }: EditProfileProps): ReactE
         <form onSubmit={handleSubmit(onSave)} data-testid="names-edit-form">
           <div className="mb-2.5">
             <Input
+              testId="first-name"
               label={`${t("profile.edit.label.fist-name")}`}
               error={errors.firstName?.message}
               type="firstName"
@@ -85,6 +86,7 @@ export default function EditProfile({ show, onClose }: EditProfileProps): ReactE
           </div>
           <div className="mb-8">
             <Input
+              testId="last-name"
               label={`${t("profile.edit.label.last-name")}`}
               error={errors.lastName?.message}
               type="lastName"
@@ -98,7 +100,7 @@ export default function EditProfile({ show, onClose }: EditProfileProps): ReactE
             />
           </div>
           <div className="flex pb-2 items-center justify-between">
-            <span className="cursor-pointer text-sm font-medium text-primary" onClick={onClose}>
+            <span className="cursor-pointer text-sm font-medium text-primary" onClick={onClose} data-testid="close-button">
               {t("profile.edit.close")}
             </span>
             <ArrowButton loading={loading} disabled={loading} variant="outline-primary">

src/components/ui/Input.tsx

@@ -16,6 +16,7 @@ interface InputProps extends Omit<HTMLProps<HTMLInputElement>, "onInput"> {
   error?: string;
   inputClass?: string;
   fontSize?: string;
+  testId?: string;
 }
 
 /**
@@ -35,7 +36,7 @@ interface InputProps extends Omit<HTMLProps<HTMLInputElement>, "onInput"> {
  * @returns {ReactElement}
  */
 const Input = forwardRef<HTMLInputElement, InputProps>(function (
-  { type = "text", label, disabled = false, placeholder = null!, error, inputClass, value, fontSize = "lg", ...props },
+  { type = "text", label, disabled = false, placeholder = null!, error, inputClass, value, fontSize = "lg", testId = "input", ...props },
   ref
 ) {
   const [isFocused, setIsFocused] = useState(false);
@@ -82,7 +83,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function (
   );
 
   return (
-    <div className="relative">
+    <div data-testid={testId} className="relative" >
       <div className={inputComponentClassName}>
         {label && <label className={labelClasssName}>{label}</label>}
         <input