Add Cypress test to patient file upload

cypress/e2e/patient_spec/patient_detailpage.cy.ts

@@ -0,0 +1,125 @@
+import { afterEach, before, beforeEach, cy, describe, it } from "local-cypress";
+import LoginPage from "../../pageobject/Login/LoginPage";
+import { PatientPage } from "../../pageobject/Patient/PatientCreation";
+import { PatientFileUploadPage } from "../../pageobject/Patient/PatientFileupload";
+
+describe("Patient Details", () => {
+  const loginPage = new LoginPage();
+  const patientPage = new PatientPage();
+  const patientFileUploadPage = new PatientFileUploadPage();
+
+  before(() => {
+    loginPage.loginAsDisctrictAdmin();
+    cy.saveLocalStorage();
+  });
+
+  beforeEach(() => {
+    cy.restoreLocalStorage();
+    cy.clearLocalStorage(/filters--.+/);
+    cy.awaitUrl("/patients");
+  });
+
+  it("Record an Audio and download the file", () => {
+    // Record an audio
+    patientPage.visitPatient("Dummy Patient 3");
+    patientFileUploadPage.visitPatientDetailsPage();
+    patientFileUploadPage.recordAudio();
+    const fileName = `Cypress Audio ${new Date()
+      .getTime()
+      .toString()
+      .slice(9)}`;
+    cy.get("#consultation_audio_file").clear().type(fileName);
+    patientFileUploadPage.clickUploadAudioFile();
+
+    // Verify the audio file is uploaded
+    cy.verifyNotification("File Uploaded Successfully");
+    cy.get("#file-div").should("contain.text", fileName);
+
+    // Verify the download of the audio file
+    cy.get("button").contains("DOWNLOAD").click();
+    cy.verifyNotification("Downloading file...");
+  });
+
+  it("Upload a File and archive it", () => {
+    // Upload the file
+    patientPage.visitPatient("Dummy Patient 4");
+    patientFileUploadPage.visitPatientDetailsPage();
+    patientFileUploadPage.uploadFile();
+    const fileName = `Cypress File ${new Date().getTime().toString().slice(9)}`;
+    cy.get("#consultation_file").clear().type(fileName);
+    patientFileUploadPage.clickUploadFile();
+
+    // Verify the file is uploaded
+    cy.verifyNotification("File Uploaded Successfully");
+    cy.get("#file-div").should("contain.text", fileName);
+
+    // Archive the file
+    patientFileUploadPage.archiveFile();
+    patientFileUploadPage.clickSaveArchiveFile();
+    cy.verifyNotification("File archived successfully");
+    patientFileUploadPage.verifyArchiveFile(fileName);
+  });
+
+  it("User-level Based Permission for File Modification", () => {
+    // Login as Nurse 1
+    loginPage.login("dummynurse2", "Coronasafe@123");
+    cy.reload();
+
+    // Visit the patient details page
+    patientPage.visitPatient("Dummy Patient 5");
+    patientFileUploadPage.visitPatientDetailsPage();
+
+    // Upload the file
+    patientFileUploadPage.uploadFile();
+    const oldFileName = `Cypress File ${new Date()
+      .getTime()
+      .toString()
+      .slice(9)}`;
+    cy.get("#consultation_file").clear();
+    cy.get("#consultation_file").type(oldFileName);
+    patientFileUploadPage.clickUploadFile();
+
+    // Verify the file is uploaded
+    cy.verifyNotification("File Uploaded Successfully");
+    cy.get("#file-div").should("contain.text", oldFileName);
+
+    // Edit the file name
+    patientFileUploadPage.verifyFileRenameOption(true);
+    const newFileName = `Cypress File ${new Date()
+      .getTime()
+      .toString()
+      .slice(9)}`;
+    patientFileUploadPage.renameFile(newFileName);
+    patientFileUploadPage.clickSaveFileName();
+
+    // Verify the file name is changed
+    cy.verifyNotification("File name changed successfully");
+    cy.get("#file-div").should("contain.text", newFileName);
+
+    // Login as Nurse 2
+    loginPage.login("dummynurse1", "Coronasafe@123");
+    cy.reload();
+
+    // Verify the file edit option is not available
+    cy.get("#file-div").should("contain.text", newFileName);
+    patientFileUploadPage.verifyFileRenameOption(false);
+
+    // Login as District Admin
+    loginPage.loginAsDisctrictAdmin();
+    cy.reload();
+
+    // Verify the file edit option is available
+    cy.get("#file-div").should("contain.text", newFileName);
+    patientFileUploadPage.verifyFileRenameOption(true);
+    patientFileUploadPage.renameFile(oldFileName);
+    patientFileUploadPage.clickSaveFileName();
+
+    // Verify the file name is changed
+    cy.verifyNotification("File name changed successfully");
+    cy.get("#file-div").should("contain.text", oldFileName);
+  });
+
+  afterEach(() => {
+    cy.saveLocalStorage();
+  });
+});

cypress/pageobject/Patient/PatientFileupload.ts

@@ -0,0 +1,74 @@
+import { cy } from "local-cypress";
+
+export class PatientFileUploadPage {
+  visitPatientDetailsPage() {
+    cy.get("#patient-details").click();
+    cy.get("#upload-patient-files").click();
+  }
+
+  recordAudio() {
+    cy.get("#record-audio").click();
+    cy.wait(5000);
+    cy.get("#stop-recording").click();
+  }
+
+  clickUploadAudioFile() {
+    cy.intercept("POST", "**/api/v1/files/").as("uploadAudioFile");
+    cy.get("#upload_audio_file").click();
+    cy.wait("@uploadAudioFile").its("response.statusCode").should("eq", 201);
+  }
+
+  uploadFile() {
+    cy.get("#file_upload_patient").selectFile(
+      "cypress/fixtures/sampleAsset.xlsx",
+      { force: true }
+    );
+  }
+
+  clickUploadFile() {
+    cy.intercept("POST", "**/api/v1/files/").as("uploadFile");
+    cy.get("#upload_file_button").click();
+    cy.wait("@uploadFile").its("response.statusCode").should("eq", 201);
+  }
+
+  archiveFile() {
+    cy.get("button").contains("ARCHIVE").click().scrollIntoView();
+    cy.get("#editFileName").clear().type("Cypress File Archive");
+  }
+
+  clickSaveArchiveFile() {
+    cy.intercept("PATCH", "**/api/v1/files/**").as("saveArchiveFile");
+    cy.submitButton("Proceed");
+    cy.wait("@saveArchiveFile").its("response.statusCode").should("eq", 200);
+  }
+
+  verifyArchiveFile(fileName: string) {
+    cy.get("#archived-files").click();
+    cy.get("button").contains("MORE DETAILS").click().scrollIntoView();
+    cy.get("#archive-file-name").should("contain.text", fileName);
+    cy.get("#archive-file-reason").then(($reason) => {
+      expect($reason.text().split(":")[1]).to.contain("Cypress File Archive");
+    });
+  }
+
+  verifyFileRenameOption(status: boolean) {
+    cy.get("#file-div").then(($fileDiv) => {
+      if (status) {
+        expect($fileDiv.text()).to.contain("RENAME");
+      } else {
+        expect($fileDiv.text()).to.not.contain("RENAME");
+      }
+    });
+  }
+
+  renameFile(newFileName: string) {
+    cy.get("button").contains("RENAME").click().scrollIntoView();
+    cy.get("#editFileName").clear().type(newFileName);
+  }
+
+  clickSaveFileName() {
+    cy.intercept("PATCH", "**/api/v1/files/**").as("saveFileName");
+    cy.submitButton("Proceed");
+    cy.wait("@saveFileName").its("response.statusCode").should("eq", 200);
+  }
+}

src/Components/Common/HeadedTabs.tsx

@@ -42,6 +42,7 @@ export default function HeadedTabs(props: headedTabsProps) {
             {tabs.map((tab) => (
               <div
                 key={tab.name}
+                id={tab.name.split(" ").join("-").toLowerCase()}
                 className={`${
                   tab.value === currentTabState
                     ? "border-primary-500 text-primary-600"

src/Components/Facility/ConsultationDetails/index.tsx

@@ -318,6 +318,7 @@ export const ConsultationDetails = (props: any) => {
             <Link
               href={`/facility/${patientData.facility}/patient/${patientData.id}`}
               className="btn btn-primary m-1 w-full hover:text-white"
+              id="patient-details"
             >
               Patient Details
             </Link>

src/Components/Patient/FileUpload.tsx

@@ -559,7 +559,11 @@ export const FileUpload = (props: FileUploadProps) => {
   const renderFileUpload = (item: FileUploadModel) => {
     const isPreviewSupported = previewExtensions.includes(item.extension ?? "");
     return (
-      <div className="mt-4 rounded-lg border bg-white p-4 shadow" key={item.id}>
+      <div
+        className="mt-4 rounded-lg border bg-white p-4 shadow"
+        id="file-div"
+        key={item.id}
+      >
         {!item.is_archived ? (
           <>
             {item.file_category === "AUDIO" ? (
@@ -735,6 +739,7 @@ export const FileUpload = (props: FileUploadProps) => {
                   ) : (
                     <ButtonV2
                       className="m-1 w-full sm:w-auto"
+                      id="download-file"
                       onClick={() => {
                         triggerDownload(
                           url[item.id!],
@@ -1404,9 +1409,10 @@ export const FileUpload = (props: FileUploadProps) => {
         <div className="flex flex-col">
           <div>
             <div className="text-md m-2 text-center">
-              <b>{modalDetails?.name}</b> file is archived.
+              <b id="archive-file-name">{modalDetails?.name}</b> file is
+              archived.
             </div>
-            <div className="text-md text-center">
+            <div className="text-md text-center" id="archive-file-reason">
               <b>Reason:</b> {modalDetails?.reason}
             </div>
             <div className="text-md text-center">
@@ -1486,6 +1492,7 @@ export const FileUpload = (props: FileUploadProps) => {
                   {audioBlobExists && (
                     <div className="flex w-full items-center md:w-auto">
                       <ButtonV2
+                        id="upload_audio_file"
                         onClick={() => {
                           handleAudioUpload();
                         }}

src/Components/Patient/PatientHome.tsx

@@ -1265,6 +1265,7 @@ export const PatientHome = (props: any) => {
                 <div>
                   <ButtonV2
                     className="w-full"
+                    id="upload-patient-files"
                     onClick={() =>
                       navigate(
                         `/facility/${patientData?.facility}/patient/${id}/files`

src/Utils/VoiceRecorder.tsx

@@ -4,6 +4,7 @@ import ButtonV2 from "../Components/Common/components/ButtonV2";
 import CareIcon from "../CAREUI/icons/CareIcon";
 import { NonReadOnlyUsers } from "./AuthorizeFor";
 import { useTranslation } from "react-i18next";
+
 export const VoiceRecorder = (props: any) => {
   const { t } = useTranslation();
   const { createAudioBlob, confirmAudioBlobExists, reset, setResetRecording } =
@@ -46,6 +47,7 @@ export const VoiceRecorder = (props: any) => {
                 {t("recording") + "..."}
               </div>
               <ButtonV2
+                id="stop-recording"
                 onClick={() => {
                   stopRecording();
                   confirmAudioBlobExists();
@@ -66,6 +68,7 @@ export const VoiceRecorder = (props: any) => {
               <ButtonV2
                 onClick={startRecording}
                 authorizeFor={NonReadOnlyUsers}
+                id="record-audio"
                 className="w-full md:w-fit"
               >
                 <CareIcon className="care-l-microphone text-lg" />