Karm/user

web/__test__/components/FormInput.test.tsx

@@ -0,0 +1,45 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import FormInput from "../../src/components/FormInput";
+import React from "react";
+
+describe("FormInput Component", () => {
+  it("renders input field", () => {
+    render(<FormInput placeholder="e.g Clark" name="firstName" />);
+    expect(screen.getByPlaceholderText(/e.g Clark/i)).toBeInTheDocument();
+  });
+
+  it("shows error message", () => {
+    render(
+      <FormInput
+        placeholder="e.g Clark"
+        name="firstName"
+        errorMessage="First Name is Required"
+      />
+    );
+    expect(screen.getByText(/First Name is Required/i)).toBeInTheDocument();
+  });
+
+  it("handles input change", () => {
+    const handleChange = vi.fn();
+    render(
+      <FormInput
+        placeholder="e.g Clark"
+        name="firstName"
+        onChange={handleChange}
+      />
+    );
+    const input = screen.getByPlaceholderText(/e.g Clark/i);
+    fireEvent.change(input, { target: { value: "John" } });
+
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders radio options", () => {
+    const options = ["International", "Domestic"];
+    render(<FormInput type="radio" name="residency" options={options} />);
+
+    expect(screen.getByLabelText(/International/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Domestic/i)).toBeInTheDocument();
+  });
+});

web/__test__/components/UserInformationForm.test.tsx

@@ -0,0 +1,34 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import UserInformationForm from "../../src/components/UserInformationForm";
+import React from "react";
+
+describe("UserInformationForm Component", () => {
+  it("renders the form", () => {
+    render(<UserInformationForm />);
+    expect(screen.getByText(/Thanks for joining/i)).toBeInTheDocument();
+  });
+
+  it("validates form fields", async () => {
+    render(<UserInformationForm />);
+
+    const submitButton = screen.getByText(/Purchase membership/i);
+    fireEvent.click(submitButton);
+
+    expect(
+      await screen.findByText(/First Name is Required/i)
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByText(/Last Name is Required/i)
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByText(/Your University is Required/i)
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByText(/Your Graduation Year is Required/i)
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByText(/Membership Type is Required/i)
+    ).toBeInTheDocument();
+  });
+});

web/package.json

@@ -22,6 +22,7 @@
     "react": "^18.2.0",
     "react-cookies": "^0.1.1",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.52.1",
     "react-icons": "^5.2.1",
     "react-markdown": "^9.0.1",
     "react-router": "^6.22.0",

web/src/components/FormInput.tsx

@@ -1,3 +1,5 @@
+import React, { forwardRef } from "react";
+
 interface FormInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string;
   placeholder?: string;
@@ -9,52 +11,60 @@ interface FormInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   errorMessage?: string;
 }
 
-const FormInput: React.FC<FormInputProps> = ({
-  label,
-  placeholder,
-  type = "text",
-  id,
-  className = "mt-2 w-full px-3 py-2 border border-black rounded-lg focus:outline-none focus:border-black focus:ring-black",
-  options = [""],
-  ...props
-}) => {
-  if (type === "radio" && options.length > 0) {
-    return (
-      <div className="mb-4 mt-4">
-        <div className="mt-2">
-          {options.map((option, index) => (
-            <label
-              key={option}
-              className={`inline-flex items-center ${index !== 0 ? "ml-6" : ""}`}
-            >
-              <input type="radio" name={props.name} value={option} />
-              <span className="ml-2">{option}</span>
+const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
+  (
+    {
+      label,
+      placeholder,
+      type = "text",
+      id,
+      className = "mt-2 w-full px-3 py-2 border border-black rounded-lg focus:outline-none focus:border-black focus:ring-black",
+      options = [""],
+      errorMessage,
+      ...props
+    },
+    ref
+  ) => {
+    if (type === "radio" && options.length > 0) {
+      return (
+        <div className="mb-4 mt-4">
+          <div className="mt-2 flex flex-col md:flex-row md:items-center">
+            {options.map((option, index) => (
+              <label
+                key={option}
+                className={`inline-flex items-center ${index !== 0 ? "ml-0 md:ml-6" : ""}`}
+              >
+                <input type="radio" ref={ref} {...props} value={option} />
+                <span className="ml-2">{option}</span>
+              </label>
+            ))}
+          </div>
+          {errorMessage && <span className="text-red-500">{errorMessage}</span>}
+        </div>
+      );
+    } else {
+      return (
+        <div className="form-input">
+          {label && (
+            <label htmlFor={id} className="">
+              {label}
             </label>
-          ))}
+          )}
+          <input
+            placeholder={placeholder}
+            type={type}
+            id={id}
+            className={` ${className}`}
+            ref={ref}
+            {...props}
+          />
+          {errorMessage && <span className="text-red-500">{errorMessage}</span>}
         </div>
-      </div>
-    );
-  } else {
-    return (
-      <div className="form-input">
-        {label && (
-          <label htmlFor={id} className="">
-            {label}
-          </label>
-        )}
-        <input
-          placeholder={placeholder}
-          type={type}
-          id={id}
-          className={` ${className}`}
-          {...props}
-        />
-        {props.errorMessage && (
-          <span className="text-red-500">{props.errorMessage}</span>
-        )}
-      </div>
-    );
+      );
+    }
   }
-};
+);
+
+FormInput.displayName = "FormInput";
 
 export default FormInput;