Passed tests by adding labels and for

UoaWDCC · Jul 24, 2024 · 50b27b7 · 50b27b7
1 parent 4573b40
commit 50b27b7
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 118 deletions.
diff --git a/web/__test__/components/FormInput.test.tsx b/web/__test__/components/FormInput.test.tsx
@@ -1,4 +1,4 @@
-import { describe, expect, it } from "vitest";
+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";

diff --git a/web/__test__/components/UserInformationForm.test.tsx b/web/__test__/components/UserInformationForm.test.tsx
@@ -1,30 +1,24 @@
-import { describe, expect, it } from "vitest";
+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();
+    expect(screen.getByText(/Thanks for joining/i)).toBeInTheDocument();
   });
 
-  it("validates form fields", () => {
+  it("validates form fields", async () => {
     render(<UserInformationForm />);
 
     const submitButton = screen.getByText(/Purchase membership/i);
     fireEvent.click(submitButton);
 
-    expect(screen.getByText(/First Name is Required/i)).toBeInTheDocument();
-    expect(screen.getByText(/Last Name is Required/i)).toBeInTheDocument();
-    expect(
-      screen.getByText(/Your University is Required/i)
-    ).toBeInTheDocument();
-    expect(
-      screen.getByText(/Your Graduation Year is Required/i)
-    ).toBeInTheDocument();
-    expect(
-      screen.getByText(/Membership Type is Required/i)
-    ).toBeInTheDocument();
+    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();
   });
 });
diff --git a/web/src/components/FormInput.tsx b/web/src/components/FormInput.tsx
@@ -25,24 +25,40 @@ const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
     },
     ref
   ) => {
-    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>
-    );
+    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>
+      );
+    }
   }
 );
 

diff --git a/web/src/components/UserInformationForm.tsx b/web/src/components/UserInformationForm.tsx
@@ -1,24 +1,19 @@
-import React from "react";
-import { useForm, Controller } from "react-hook-form";
-import axios from "axios";
-import FormInput from "../components/FormInput";
+import { useForm, Controller } from 'react-hook-form';
+import axios from 'axios';
+import FormInput from '../components/FormInput';
 
 function UserInformationForm() {
-  const {
-    handleSubmit,
-    control,
-    formState: { errors },
-  } = useForm({
+  const { handleSubmit, control, formState: { errors } } = useForm({
     defaultValues: {
-      firstName: "",
-      lastName: "",
-      university: "",
-      graduationYear: "",
-      UPI: "",
-      studentID: "",
-      studyOption: "",
-      residency: "",
-      duration: "",
+      firstName: '',
+      lastName: '',
+      university: '',
+      graduationYear: '',
+      UPI: '',
+      studentID: '',
+      studyOption: '',
+      residency: '',
+      duration: '',
     },
   });
 
@@ -54,38 +49,27 @@ function UserInformationForm() {
           We just need a bit more info about your membership—it'll be quick!
         </h2>
 
-        <form
-          onSubmit={handleSubmit(onSubmit)}
-          className="flex flex-col space-y-4"
-        >
+        <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col space-y-4">
           <div className="flex flex-col space-y-4 md:flex-row md:space-x-7 md:space-y-0">
             <div className="flex flex-1 flex-col">
               <label className="text-gray-700">First Name</label>
               <Controller
                 name="firstName"
                 control={control}
                 rules={{ required: "First Name is Required" }}
-                render={({ field }) => (
-                  <FormInput {...field} placeholder="e.g Clark" />
-                )}
+                render={({ field }) => <FormInput {...field} placeholder="e.g Clark" />}
               />
-              {errors.firstName && (
-                <span className="text-red-500">{errors.firstName.message}</span>
-              )}
+              {errors.firstName && <span className="text-red-500">{errors.firstName.message}</span>}
             </div>
             <div className="flex flex-1 flex-col">
               <label className="text-gray-700">Last Name</label>
               <Controller
                 name="lastName"
                 control={control}
                 rules={{ required: "Last Name is Required" }}
-                render={({ field }) => (
-                  <FormInput {...field} placeholder="e.g Kent" />
-                )}
+                render={({ field }) => <FormInput {...field} placeholder="e.g Kent" />}
               />
-              {errors.lastName && (
-                <span className="text-red-500">{errors.lastName.message}</span>
-              )}
+              {errors.lastName && <span className="text-red-500">{errors.lastName.message}</span>}
             </div>
           </div>
 
@@ -96,60 +80,37 @@ function UserInformationForm() {
                 name="university"
                 control={control}
                 rules={{ required: "Your University is Required" }}
-                render={({ field }) => (
-                  <FormInput
-                    {...field}
-                    placeholder="e.g University of Auckland"
-                  />
-                )}
+                render={({ field }) => <FormInput {...field} placeholder="e.g University of Auckland" />}
               />
-              {errors.university && (
-                <span className="text-red-500">
-                  {errors.university.message}
-                </span>
-              )}
+              {errors.university && <span className="text-red-500">{errors.university.message}</span>}
             </div>
             <div className="flex flex-1 flex-col">
-              <label className="text-gray-700">
-                What year are you in (or alumni) 📅
-              </label>
+              <label className="text-gray-700">What year are you in (or alumni) 📅</label>
               <Controller
                 name="graduationYear"
                 control={control}
                 rules={{ required: "Your Graduation Year is Required" }}
-                render={({ field }) => (
-                  <FormInput {...field} placeholder="e.g Year 3" />
-                )}
+                render={({ field }) => <FormInput {...field} placeholder="e.g Year 3" />}
               />
-              {errors.graduationYear && (
-                <span className="text-red-500">
-                  {errors.graduationYear.message}
-                </span>
-              )}
+              {errors.graduationYear && <span className="text-red-500">{errors.graduationYear.message}</span>}
             </div>
           </div>
 
           <div className="flex flex-col space-y-4 md:flex-row md:space-x-7 md:space-y-0">
             <div className="flex flex-1 flex-col">
-              <label className="text-gray-700">
-                Student ID (if you have one) 🆔
-              </label>
+              <label className="text-gray-700">Student ID (if you have one) 🆔</label>
               <Controller
                 name="studentID"
                 control={control}
-                render={({ field }) => (
-                  <FormInput {...field} placeholder="e.g 1234566789.." />
-                )}
+                render={({ field }) => <FormInput {...field} placeholder="e.g 1234566789.." />}
               />
             </div>
             <div className="flex flex-1 flex-col">
               <label className="text-gray-700">UPI (if you have one) 🆔</label>
               <Controller
                 name="UPI"
                 control={control}
-                render={({ field }) => (
-                  <FormInput {...field} placeholder="e.g abcd123.." />
-                )}
+                render={({ field }) => <FormInput {...field} placeholder="e.g abcd123.." />}
               />
             </div>
           </div>
@@ -160,28 +121,18 @@ function UserInformationForm() {
               <Controller
                 name="studyOption"
                 control={control}
-                render={({ field }) => (
-                  <FormInput
-                    {...field}
-                    placeholder="e.g Software Engineering"
-                  />
-                )}
+                render={({ field }) => <FormInput {...field} placeholder="e.g Software Engineering" />}
               />
             </div>
             <div className="flex flex-1 flex-col">
-              <label className="text-gray-700">
-                Domestic or International? 🌏
-              </label>
+              <label className="text-gray-700">Domestic or International? 🌏</label>
               <Controller
                 name="residency"
                 control={control}
                 render={({ field }) => (
                   <div className="mt-2 flex flex-col md:flex-row md:items-center">
                     {residencyOptions.map((option, index) => (
-                      <label
-                        key={option}
-                        className={`inline-flex items-center ${index !== 0 ? "ml-0 md:ml-6" : ""}`}
-                      >
+                      <label key={option} className={`inline-flex items-center ${index !== 0 ? "ml-0 md:ml-6" : ""}`}>
                         <input
                           type="radio"
                           {...field}
@@ -206,10 +157,7 @@ function UserInformationForm() {
               render={({ field }) => (
                 <div className="mt-2 flex flex-col md:flex-row md:items-center">
                   {paymentOptions.map((option, index) => (
-                    <label
-                      key={option}
-                      className={`inline-flex items-center ${index !== 0 ? "ml-0 md:ml-6" : ""}`}
-                    >
+                    <label key={option} className={`inline-flex items-center ${index !== 0 ? "ml-0 md:ml-6" : ""}`}>
                       <input
                         type="radio"
                         {...field}
@@ -222,9 +170,7 @@ function UserInformationForm() {
                 </div>
               )}
             />
-            {errors.duration && (
-              <span className="text-red-500">{errors.duration.message}</span>
-            )}
+            {errors.duration && <span className="text-red-500">{errors.duration.message}</span>}
           </div>
 
           <button