Added a cypress test to assign a volunteer to a patient

cypress/e2e/patient_spec/PatientVolunteer.cy.ts

@@ -0,0 +1,57 @@
+import LoginPage from "../../pageobject/Login/LoginPage";
+import { PatientConsultationPage } from "../../pageobject/Patient/PatientConsultation";
+import { PatientPage } from "../../pageobject/Patient/PatientCreation";
+import { PatientDetailsPage } from "../../pageobject/Patient/PatientDetails";
+
+describe("Assign a volunteer to a patient - Multiple Tests", () => {
+  const loginPage = new LoginPage();
+  const patientPage = new PatientPage();
+  const patientConsultationPage = new PatientConsultationPage();
+  const patientDetailsPage = new PatientDetailsPage();
+  const patient = "Dummy Patient 16";
+  const volunteerName = "dummy volunteer";
+  const anotherVolunteerName = "Abhi Patil";
+
+  before(() => {
+    loginPage.loginByRole("districtAdmin");
+    cy.saveLocalStorage();
+  });
+
+  beforeEach(() => {
+    cy.restoreLocalStorage();
+    cy.clearLocalStorage(/filters--.+/);
+    cy.request("/patients").its("status").should("eq", 200);
+
+    cy.visit("/patients");
+    cy.wrap(null, { timeout: 10000 }).then(() => {
+      patientPage.visitPatient(patient);
+    });
+
+    cy.get("#patient-details").should("exist");
+    patientConsultationPage.clickPatientDetails();
+  });
+
+  it("should assign a new volunteer successfully", () => {
+    patientDetailsPage.clickAssignOrReassignVolunteer();
+    patientDetailsPage.selectAndAssignVolunteer(volunteerName);
+  });
+
+  it("should replace existing volunteer successfully", () => {
+    patientDetailsPage.clickAssignOrReassignVolunteer();
+    patientDetailsPage.selectAndAssignVolunteer(anotherVolunteerName);
+  });
+
+  it("should unassign volunteer successfully", () => {
+    patientDetailsPage.clickAssignOrReassignVolunteer();
+    patientDetailsPage.unassignVolunteer();
+    patientDetailsPage.verifyBannerIsRemovedAfterUnassign();
+  });
+
+  it("should handle volunteer not found in dropdown", () => {
+    patientDetailsPage.clickAssignOrReassignVolunteer();
+    patientDetailsPage.searchNonExistingVolunteer(
+      "Non-existent Volunteer",
+      false,
+    );
+  });
+});

cypress/pageobject/Patient/PatientDetails.ts

@@ -0,0 +1,56 @@
+export class PatientDetailsPage {
+  clickAssignToVolunteer() {
+    cy.verifyAndClickElement("#assign-volunteer", "Assign to a Volunteer");
+  }
+
+  clickReassignToVolunteer() {
+    cy.verifyAndClickElement("#assign-volunteer", "Reassign Volunteer");
+  }
+
+  clickAssignOrReassignVolunteer() {
+    cy.get("#assign-volunteer")
+      .scrollIntoView()
+      .should("be.visible")
+      .invoke("text")
+      .then((text) => {
+        if (text.includes("Assign to a Volunteer")) {
+          this.clickAssignToVolunteer();
+        } else if (text.includes("Reassign Volunteer")) {
+          this.clickReassignToVolunteer();
+        } else {
+          throw new Error(
+            `Button text must be either "Assign to a Volunteer" or "Reassign Volunteer", but found: "${text}"`,
+          );
+        }
+      });
+  }
+
+  selectAndAssignVolunteer(volunteerName: string) {
+    cy.clickAndSelectOption("#assign_volunteer", volunteerName);
+    cy.clickSubmitButton("Assign");
+    cy.wait(1000);
+    cy.verifyContentPresence("#assigned-volunteer", [volunteerName]);
+  }
+
+  unassignVolunteer() {
+    cy.get("#clear-button").should("be.visible").click();
+    cy.get("#dropdown-toggle").should("be.visible").click();
+    cy.clickSubmitButton("Unassign");
+  }
+
+  verifyBannerIsRemovedAfterUnassign() {
+    cy.get("#assigned-volunteer", { timeout: 10000 }).should("not.exist");
+  }
+
+  searchVolunteer(volunteerName: string) {
+    cy.typeAndSelectOption("#assign_volunteer", volunteerName);
+  }
+
+  searchNonExistingVolunteer(
+    volunteerName: string,
+    clearBeforeTyping: boolean = false,
+  ) {
+    cy.typeIntoField("#assign_volunteer", volunteerName, { clearBeforeTyping });
+    cy.verifyContentPresence('[data-testid="no-results"]', []);
+  }
+}

src/components/Form/FormFields/Autocomplete.tsx

@@ -240,6 +240,7 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
 
           <DropdownTransition>
             <ComboboxOptions
+              data-testid="volunteer-search-results"
               modal={false}
               as="ul"
               className="cui-dropdown-base absolute z-10 mt-0.5 origin-top-right"
@@ -249,7 +250,10 @@ export const Autocomplete = <T, V>(props: AutocompleteProps<T, V>) => {
                   {`Please enter at least ${props.minQueryLength} characters to search`}
                 </div>
               ) : filteredOptions.length === 0 ? (
-                <div className="p-2 text-sm text-secondary-500">
+                <div
+                  data-testid="no-results"
+                  className="p-2 text-sm text-secondary-500"
+                >
                   No options found
                 </div>
               ) : (

src/components/Patient/PatientHome.tsx

@@ -405,7 +405,7 @@ export const PatientHome = (props: {
                 )}
 
                 {patientData.assigned_to_object && (
-                  <div>
+                  <div id="assigned-volunteer">
                     <p className="text-xs font-normal leading-tight text-gray-600">
                       {t("assigned_volunteer")}:
                     </p>