Added a cypress test to assign a volunteer to a patient

cypress/e2e/patient_spec/PatientVolunteer.cy.ts

@@ -0,0 +1,67 @@
+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", () => {
+  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(() => {
+    cy.log("Logging in as district admin");
+    loginPage.loginAsDistrictAdmin();
+    cy.saveLocalStorage();
+  });
+
+  beforeEach(() => {
+    cy.restoreLocalStorage();
+    cy.clearLocalStorage(/filters--.+/);
+    cy.request("/patients").its("status").should("eq", 200);
+
+    cy.visit("/patients").then(() => {
+      cy.log("Successfully navigated to patients page");
+    });
+
+    // Add timeout and retry strategy for patient search
+    cy.wrap(null, { timeout: 10000 }).then(() => {
+      patientPage.visitPatient(patient);
+    });
+
+    // Verify patient details page is accessible
+    cy.get("#patient-details").should("exist");
+    patientConsultationPage.clickPatientDetails();
+  });
+
+  describe("volunteer assignment workflow", () => {
+    it("should assign a new volunteer successfully", () => {
+      patientDetailsPage.clickAssignToVolunteer();
+      patientDetailsPage.selectAndAssignVolunteer(volunteerName);
+      patientDetailsPage.verifyVolunteerBannerIsUpdated(volunteerName);
+    });
+
+    it("should replace existing volunteer successfully", () => {
+      patientDetailsPage.clickAssignToVolunteer();
+      patientDetailsPage.selectAndAssignVolunteer(anotherVolunteerName);
+      patientDetailsPage.verifyVolunteerBannerIsUpdated(anotherVolunteerName);
+    });
+
+    it("should unassign volunteer successfully", () => {
+      patientDetailsPage.clickAssignToVolunteer();
+      patientDetailsPage.unassignAndPrepareForReassignment();
+      patientDetailsPage.verifyBannerIsRemovedAfterUnassign();
+    });
+  });
+
+  describe("error states and edge cases", () => {
+    it("should handle volunteer not found in dropdown", () => {
+      patientDetailsPage.clickAssignToVolunteer();
+      patientDetailsPage.searchVolunteer("Non-existent Volunteer");
+      cy.get('[data-testid="no-results"]').should("be.visible");
+    });
+  });
+});

cypress/pageobject/Patient/PatientDetails.ts

@@ -0,0 +1,46 @@
+export class PatientDetailsPage {
+  clickAssignToVolunteer() {
+    cy.contains("button", "Assign to a Volunteer")
+      .scrollIntoView()
+      .should("be.visible")
+      .should("be.enabled")
+      .click();
+  }
+
+  selectAndAssignVolunteer(volunteerName: string) {
+    cy.clickAndSelectOption("#assign_volunteer", volunteerName);
+    cy.clickSubmitButton("Assign");
+    cy.get("#assigned-volunteer", { timeout: 10000 })
+      .scrollIntoView()
+      .should("be.visible")
+      .should("contain.text", volunteerName);
+  }
+
+  verifyVolunteerBannerIsUpdated(volunteerName: string) {
+    cy.get("#assigned-volunteer").should(
+      "contain.text",
+      `Assigned Volunteer:${volunteerName}`,
+    );
+  }
+
+  unassignAndPrepareForReassignment() {
+    cy.get("#clear-button").should("be.visible").click();
+    cy.get("#dropdown-toggle").should("be.visible").click();
+    cy.clickSubmitButton("Assign");
+  }
+
+  verifyBannerIsRemovedAfterUnassign() {
+    cy.get("#assigned-volunteer", { timeout: 10000 }).should("not.exist");
+  }
+
+  searchVolunteer(volunteerName: string) {
+    cy.get("#assign_volunteer")
+      .should("be.visible")
+      .click()
+      .type(volunteerName);
+
+    cy.get("[data-testid='volunteer-search-results']", {
+      timeout: 10000,
+    }).should("be.visible");
+  }
+}

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

@@ -423,7 +423,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>