Cypress: Patient Prescription Management

cypress/e2e/patient_spec/patient_prescription.cy.ts

@@ -0,0 +1,66 @@
+import { PatientEncounter } from "@/pageObject/Patients/PatientEncounter";
+import { FacilityCreation } from "@/pageObject/facility/FacilityCreation";
+
+const facilityCreation = new FacilityCreation();
+const patientEncounter = new PatientEncounter();
+
+describe("Patient Prescription Management", () => {
+  beforeEach(() => {
+    cy.loginByApi("testnurse4");
+    cy.visit("/");
+  });
+
+  it("should add a new medicine for the patient", () => {
+    facilityCreation.selectFacility("GHC payyanur");
+    const medicineName = "Estriol 1 mg oral tablet";
+    const dosage = 6;
+    const dosageInput = "6 Milligram";
+    const frequency = "BID (1-0-1)";
+    const instructions = "Until symptoms improve";
+    const route = "Sublabial route";
+    const site = "Structure of left deltoid muscle";
+    const method = "Bathe";
+    const notes = "testing notes";
+    patientEncounter
+      .navigateToEncounters()
+      .openFirstEncounterDetails()
+      .clickMedicinesTab()
+      .clickEditPrescription()
+      .addMedication(
+        medicineName,
+        dosage,
+        frequency,
+        instructions,
+        route,
+        site,
+        method,
+        notes,
+      )
+      .submitQuestionnaire()
+      .clickMedicinesTab()
+      .verifyMedication(
+        medicineName,
+        dosageInput,
+        frequency,
+        instructions,
+        route,
+        site,
+        method,
+        notes,
+      )
+      .clickEditPrescription()
+      .removeMedication()
+      .submitQuestionnaire()
+      .clickMedicinesTab()
+      .verifyDeletedMedication(
+        medicineName,
+        dosageInput,
+        frequency,
+        instructions,
+        route,
+        site,
+        method,
+        notes,
+      );
+  });
+});

cypress/fixtures/users.json

@@ -26,5 +26,9 @@
   "teststaff4": {
     "username": "teststaff4",
     "password": "Test@123"
+  },
+  "testnurse4": {
+    "username": "testnurse4",
+    "password": "Test@123"
   }
 }

cypress/pageObject/Patients/PatientEncounter.ts

@@ -12,7 +12,88 @@ export class PatientEncounter {
       .click();
     return this;
   }
-
+  clickMedicinesTab() {
+    cy.verifyAndClickElement('[data-cy="tab-medicines"]', "Medicines");
+    return this;
+  }
+  clickEditPrescription() {
+    cy.verifyAndClickElement('[data-cy="edit-prescription"]', "Edit");
+    return this;
+  }
+  addMedication(
+    medicineName,
+    dosage,
+    frequency,
+    instructions,
+    route,
+    site,
+    method,
+    notes,
+  ) {
+    cy.clickAndSelectOption(
+      '[data-cy="question-medication-request"]',
+      medicineName,
+    );
+    cy.get('[data-cy="dosage"]').click().type(dosage);
+    cy.clickAndSelectOption('[data-cy="dosage"]', dosage);
+    cy.clickAndSelectOption('[data-cy="frequency"]', frequency);
+    cy.clickAndSelectOption('[data-cy="instructions"]', instructions);
+    cy.clickAndSelectOption('[data-cy="route"]', route);
+    cy.clickAndSelectOption('[data-cy="site"]', site);
+    cy.clickAndSelectOption('[data-cy="method"]', method);
+    cy.get('[data-cy="notes"]').click();
+    cy.get('[data-cy="notes-textarea"]').type(notes);
+    return this;
+  }
+  verifyMedication(
+    medicineName,
+    dosage,
+    frequency,
+    instructions,
+    route,
+    site,
+    method,
+    notes,
+  ) {
+    cy.get('[data-cy="medications-table"]').within(() => {
+      cy.contains("td", medicineName).should("exist");
+      cy.contains("td", dosage).should("exist");
+      cy.contains("td", frequency).should("exist");
+      cy.contains("td", instructions).should("exist");
+      cy.contains("td", route).should("exist");
+      cy.contains("td", site).should("exist");
+      cy.contains("td", method).should("exist");
+      cy.contains("td", notes).should("exist");
+    });
+    return this;
+  }
+  removeMedication() {
+    cy.get('[data-cy="remove-medication"]').first().click();
+    cy.verifyAndClickElement('[data-cy="confirm-remove-medication"]', "Remove");
+    return this;
+  }
+  verifyDeletedMedication(
+    medicineName,
+    dosage,
+    frequency,
+    instructions,
+    route,
+    site,
+    method,
+    notes,
+  ) {
+    cy.get('[data-cy="toggle-stopped-medications"]').click();
+    cy.get('[data-cy="medications-table"]').within(() => {
+      cy.contains("td", medicineName).should("exist");
+      cy.contains("td", dosage).should("exist");
+      cy.contains("td", frequency).should("exist");
+      cy.contains("td", instructions).should("exist");
+      cy.contains("td", route).should("exist");
+      cy.contains("td", site).should("exist");
+      cy.contains("td", method).should("exist");
+      cy.contains("td", notes).should("exist");
+    });
+  }
   clickUpdateEncounter() {
     cy.verifyAndClickElement(
       '[data-cy="update-encounter-option"]',

src/components/Medicine/MedicationRequestTable/index.tsx

@@ -158,6 +158,7 @@ export default function MedicationRequestTable({
                     variant="outline"
                     size="sm"
                     className="text-gray-950 hover:text-gray-700 h-9"
+                    data-cy="edit-prescription"
                   >
                     <Link href={`questionnaire/medication_request`}>
                       <PencilIcon className="mr-2 h-4 w-4" />
@@ -198,6 +199,7 @@ export default function MedicationRequestTable({
                         <div
                           className="p-4 flex items-center gap-2 cursor-pointer hover:bg-gray-50"
                           onClick={() => setShowStopped(!showStopped)}
+                          data-cy="toggle-stopped-medications"
                         >
                           <CareIcon
                             icon={showStopped ? "l-eye-slash" : "l-eye"}

src/components/Medicine/MedicationsTable.tsx

@@ -51,7 +51,10 @@ export const MedicationsTable = ({ medications }: MedicationsTableProps) => {
   }
 
   return (
-    <div className="border rounded-lg overflow-hidden">
+    <div
+      className="border rounded-lg overflow-hidden"
+      data-cy="medications-table"
+    >
       <Table>
         <TableHeader>
           <TableRow className="divide-x bg-gray-100">

src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx

@@ -199,6 +199,7 @@ export function MedicationRequestQuestion({
             <AlertDialogAction
               onClick={confirmRemoveMedication}
               className={cn(buttonVariants({ variant: "destructive" }))}
+              data-cy="confirm-remove-medication"
             >
               {t("remove")}
             </AlertDialogAction>
@@ -318,6 +319,7 @@ export function MedicationRequestQuestion({
                                   medication.status === "entered_in_error"
                                 }
                                 className="h-8 w-8"
+                                data-cy="remove-medication"
                               >
                                 <MinusCircledIcon className="h-4 w-4" />
                               </Button>
@@ -514,7 +516,10 @@ const MedicationRequestGridRow: React.FC<MedicationRequestGridRowProps> = ({
         </span>
       </div>
       {/* Dosage */}
-      <div className="lg:px-2 lg:py-1 lg:border-r overflow-hidden">
+      <div
+        className="lg:px-2 lg:py-1 lg:border-r overflow-hidden"
+        data-cy="dosage"
+      >
         <Label className="mb-1.5 block text-sm lg:hidden">{t("dosage")}</Label>
         <div>
           {dosageInstruction?.dose_and_rate?.dose_range ? (
@@ -529,6 +534,7 @@ const MedicationRequestGridRow: React.FC<MedicationRequestGridRowProps> = ({
           ) : (
             <>
               <ComboboxQuantityInput
+                data-cy="dosage-input"
                 quantity={dosageInstruction?.dose_and_rate?.dose_quantity}
                 onChange={(value) => {
                   if (!value.value || !value.unit) return;
@@ -613,7 +619,7 @@ const MedicationRequestGridRow: React.FC<MedicationRequestGridRowProps> = ({
           }}
           disabled={disabled || isReadOnly}
         >
-          <SelectTrigger className="h-9 text-sm">
+          <SelectTrigger className="h-9 text-sm" data-cy="frequency">
             <SelectValue placeholder={t("select_frequency")} />
           </SelectTrigger>
           <SelectContent>
@@ -707,7 +713,10 @@ const MedicationRequestGridRow: React.FC<MedicationRequestGridRowProps> = ({
         </div>
       </div>
       {/* Instructions */}
-      <div className="lg:px-2 lg:py-1 lg:border-r overflow-hidden">
+      <div
+        className="lg:px-2 lg:py-1 lg:border-r overflow-hidden"
+        data-cy="instructions"
+      >
         <Label className="mb-1.5 block text-sm lg:hidden">
           {t("instructions")}
         </Label>
@@ -750,11 +759,15 @@ const MedicationRequestGridRow: React.FC<MedicationRequestGridRowProps> = ({
             }
             placeholder={t("select_additional_instructions")}
             disabled={disabled || isReadOnly}
+            data-cy="medication-instructions"
           />
         )}
       </div>
       {/* Route */}
-      <div className="lg:px-2 lg:py-1 lg:border-r overflow-hidden">
+      <div
+        className="lg:px-2 lg:py-1 lg:border-r overflow-hidden"
+        data-cy="route"
+      >
         <Label className="mb-1.5 block text-sm lg:hidden">{t("route")}</Label>
         <ValueSetSelect
           system="system-route"
@@ -765,7 +778,10 @@ const MedicationRequestGridRow: React.FC<MedicationRequestGridRowProps> = ({
         />
       </div>
       {/* Site */}
-      <div className="lg:px-2 lg:py-1 lg:border-r overflow-hidden">
+      <div
+        className="lg:px-2 lg:py-1 lg:border-r overflow-hidden"
+        data-cy="site"
+      >
         <Label className="mb-1.5 block text-sm lg:hidden">{t("site")}</Label>
         <ValueSetSelect
           system="system-body-site"
@@ -777,7 +793,10 @@ const MedicationRequestGridRow: React.FC<MedicationRequestGridRowProps> = ({
         />
       </div>
       {/* Method */}
-      <div className="lg:px-2 lg:py-1 lg:border-r overflow-hidden">
+      <div
+        className="lg:px-2 lg:py-1 lg:border-r overflow-hidden"
+        data-cy="method"
+      >
         <Label className="mb-1.5 block text-sm lg:hidden">{t("method")}</Label>
         <ValueSetSelect
           system="system-administration-method"

src/components/Questionnaire/QuestionTypes/NotesInput.tsx

@@ -38,6 +38,7 @@ export function NotesInput({
             size="sm"
             className="h-full w-28 text-sm font-normal text-gray-700 hover:text-gray-900"
             disabled={disabled}
+            data-cy="notes"
           >
             {hasNotes ? (
               <div className="w-1.5 h-1.5 rounded-full bg-orange-400 " />
@@ -54,6 +55,7 @@ export function NotesInput({
             className=" border-yellow-200 focus-visible:border-yellow-300 focus-visible:ring-yellow-300"
             placeholder="Add notes..."
             disabled={disabled}
+            data-cy="notes-textarea"
           />
         </PopoverContent>
       </Popover>

src/pages/Encounters/EncounterShow.tsx

@@ -171,6 +171,7 @@ export const EncounterShow = (props: Props) => {
                 {keysOf(tabs).map((tab) => (
                   <Link
                     key={tab}
+                    data-cy={`tab-${tab}`}
                     className={tabButtonClasses(props.tab === tab)}
                     href={`${tab}`}
                   >