From 9005adf2d0b81958761306750de9d417deae24e8 Mon Sep 17 00:00:00 2001
From: Mohammed Nihal <57055998+nihal467@users.noreply.github.com>
Date: Mon, 30 Oct 2023 15:01:19 +0530
Subject: [PATCH] Existing Cypress POM Conversion | Create New User & Verify
 its reflection along with validation | User Tab (#6514)

* cypress new test for advance filter

* convert navigation to POM

* facility redirection

* minor change

* user creation

* user creation

* revert package-lock
---
 cypress/e2e/users_spec/user_creation.cy.ts | 154 ++++++++++++++++
 cypress/e2e/users_spec/user_crud.cy.ts     | 199 ---------------------
 cypress/pageobject/Users/UserCreation.ts   |  65 +++++++
 src/Components/Users/ManageUsers.tsx       |   6 +-
 4 files changed, 224 insertions(+), 200 deletions(-)
 delete mode 100644 cypress/e2e/users_spec/user_crud.cy.ts
 create mode 100644 cypress/pageobject/Users/UserCreation.ts

diff --git a/cypress/e2e/users_spec/user_creation.cy.ts b/cypress/e2e/users_spec/user_creation.cy.ts
index 498697566c5..ae416d8d990 100644
--- a/cypress/e2e/users_spec/user_creation.cy.ts
+++ b/cypress/e2e/users_spec/user_creation.cy.ts
@@ -3,18 +3,45 @@ import LoginPage from "../../pageobject/Login/LoginPage";
 import { AssetSearchPage } from "../../pageobject/Asset/AssetSearch";
 import FacilityPage from "../../pageobject/Facility/FacilityCreation";
 import { UserPage } from "../../pageobject/Users/UserSearch";
+import { UserCreationPage } from "../../pageobject/Users/UserCreation";
 
 describe("User Creation", () => {
   const userPage = new UserPage();
   const loginPage = new LoginPage();
+  const userCreationPage = new UserCreationPage();
   const facilityPage = new FacilityPage();
   const assetSearchPage = new AssetSearchPage();
   const fillFacilityName = "Dummy Facility 1";
+  const makeid = (length: number) => {
+    let result = "";
+    const characters = "abcdefghijklmnopqrstuvwxyz0123456789";
+    const charactersLength = characters.length;
+    for (let i = 0; i < length; i++) {
+      result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+    return result;
+  };
+  const username = makeid(25);
   const alreadylinkedusersviews = [
     "devdoctor",
     "devstaff2",
     "devdistrictadmin",
   ];
+  const EXPECTED_ERROR_MESSAGES = [
+    "Please select the User Type",
+    "Please enter valid phone number",
+    "Please enter the username",
+    "Please enter date in YYYY/MM/DD format",
+    "Please enter the password",
+    "Confirm password is required",
+    "First Name is required",
+    "Last Name is required",
+    "Please enter a valid email address",
+    "Please select the Gender",
+    "Please select the state",
+    "Please select the district",
+    "Please select the local body",
+  ];
 
   before(() => {
     loginPage.loginAsDisctrictAdmin();
@@ -26,6 +53,53 @@ describe("User Creation", () => {
     cy.awaitUrl("/users");
   });
 
+  it("create new user and verify reflection", () => {
+    userCreationPage.clickElementById("addUserButton");
+    userCreationPage.selectFacility("Dummy Shifting Center");
+    userCreationPage.typeIntoElementById("username", username);
+    userCreationPage.typeIntoElementById("password", "Test@123");
+    userCreationPage.selectHomeFacility("Dummy Shifting Center");
+    userCreationPage.typeIntoElementById("phone_number", "9999999999");
+    userCreationPage.setInputDate("date_of_birth", "date-input", "25081999");
+    userCreationPage.selectDropdownOption("user_type", "Doctor");
+    userCreationPage.typeIntoElementById("c_password", "Test@123");
+    userCreationPage.typeIntoElementById("doctor_qualification", "MBBS");
+    userCreationPage.typeIntoElementById("doctor_experience_commenced_on", "2");
+    userCreationPage.typeIntoElementById(
+      "doctor_medical_council_registration",
+      "123456789"
+    );
+    userCreationPage.typeIntoElementById("first_name", "cypress test");
+    userCreationPage.typeIntoElementById("last_name", "staff user");
+    userCreationPage.typeIntoElementById("email", "test@test.com");
+    userCreationPage.selectDropdownOption("gender", "Male");
+    userCreationPage.selectDropdownOption("state", "Kerala");
+    userCreationPage.selectDropdownOption("district", "Ernakulam");
+    userCreationPage.clickElementById("submit");
+    userCreationPage.verifyNotification("User added successfully");
+    userPage.typeInSearchInput(username);
+    userPage.checkUsernameText(username);
+    userCreationPage.verifyElementContainsText("name", "cypress test");
+    userCreationPage.verifyElementContainsText("role", "Doctor");
+    userCreationPage.verifyElementContainsText("district", "Ernakulam");
+    userCreationPage.verifyElementContainsText(
+      "home_facility",
+      "Dummy Shifting Center"
+    );
+    userCreationPage.verifyElementContainsText("doctor-qualification", "MBBS");
+    userCreationPage.verifyElementContainsText("doctor-experience", "2");
+    userCreationPage.verifyElementContainsText(
+      "medical-council-registration",
+      "123456789"
+    );
+  });
+
+  it("create new user form throwing mandatory field error", () => {
+    userCreationPage.clickElementById("addUserButton");
+    userCreationPage.clickElementById("submit");
+    userCreationPage.verifyErrorMessages(EXPECTED_ERROR_MESSAGES);
+  });
+
   it("view user redirection from facility page", () => {
     cy.visit("/facility");
     assetSearchPage.typeSearchKeyword(fillFacilityName);
@@ -37,6 +111,86 @@ describe("User Creation", () => {
     userPage.verifyMultipleBadgesWithSameId(alreadylinkedusersviews);
   });
 
+  // the below commented out codes, will be used in the upcoming refactoring of this module, since it is a inter-dependent of partially converted code, currently taking it down
+
+  //   it("link facility for user", () => {
+  //     cy.contains("Linked Facilities").click();
+  //     cy.intercept(/\/api\/v1\/facility/).as("getFacilities");
+  //     cy.get("[name='facility']")
+  //       .click()
+  //       .type("Dummy Facility 1")
+  //       .wait("@getFacilities");
+  //     cy.get("li[role='option']").first().click();
+  //     cy.intercept(/\/api\/v1\/users\/\w+\/add_facility\//).as("addFacility");
+  //     cy.get("button[id='link-facility']").click();
+  //     cy.wait("@addFacility")
+  //       // .its("response.statusCode")
+  //       // .should("eq", 201)
+  //       .get("span")
+  //       .contains("Facility - User Already has permission to this facility");
+  //   });
+
+  // describe("Edit User Profile & Error Validation", () => {
+  //   before(() => {
+  //     cy.loginByApi(username, "#@Cypress_test123");
+  //     cy.saveLocalStorage();
+  //   });
+
+  //   beforeEach(() => {
+  //     cy.restoreLocalStorage();
+  //     cy.awaitUrl("/user/profile");
+  //     cy.contains("button", "Edit User Profile").click();
+  //   });
+
+  //   it("First name Field Updation " + username, () => {
+  //     cy.get("input[name=firstName]").clear();
+  //     cy.contains("button[type='submit']", "Update").click();
+  //     cy.get("span.error-text").should("contain", "Field is required");
+  //     cy.get("input[name=firstName]").type("firstName updated");
+  //     cy.contains("button[type='submit']", "Update").click();
+  //   });
+
+  //   it("Last name Field Updation " + username, () => {
+  //     cy.get("input[name=lastName]").clear();
+  //     cy.contains("button[type='submit']", "Update").click();
+  //     cy.get("span.error-text").should("contain", "Field is required");
+  //     cy.get("input[name=lastName]").type("lastName updated");
+  //     cy.contains("button[type='submit']", "Update").click();
+  //   });
+
+  //   it("Age Field Updation " + username, () => {
+  //     cy.get("input[name=age]").clear();
+  //     cy.contains("button[type='submit']", "Update").click();
+  //     cy.get("span.error-text").should("contain", "This field is required");
+  //     cy.get("input[name=age]").type("11");
+  //     cy.contains("button[type='submit']", "Update").click();
+  //   });
+
+  //   it("Phone number Field Updation " + username, () => {
+  //     cy.get("input[name=phoneNumber]").clear();
+  //     cy.contains("button[type='submit']", "Update").click();
+  //     cy.get("span.error-text").should(
+  //       "contain",
+  //       "Please enter valid phone number"
+  //     );
+  //     cy.get("input[name=phoneNumber]").type("+919999999999");
+  //     cy.contains("button[type='submit']", "Update").click();
+  //   });
+
+  //   it("Whatsapp number Field Updation " + username, () => {
+  //     cy.get("input[name=altPhoneNumber]").clear();
+  //     cy.get("input[name=altPhoneNumber]").type("+919999999999");
+  //     cy.contains("button[type='submit']", "Update").click();
+  //   });
+
+  //   it("Email Field Updation " + username, () => {
+  //     cy.get("input[name=email]").clear();
+  //     cy.contains("button[type='submit']", "Update").click();
+  //     cy.get("span.error-text").should("contain", "This field is required");
+  //     cy.get("input[name=email]").type("test@test.com");
+  //     cy.contains("button[type='submit']", "Update").click();
+  //   });
+
   afterEach(() => {
     cy.saveLocalStorage();
   });
diff --git a/cypress/e2e/users_spec/user_crud.cy.ts b/cypress/e2e/users_spec/user_crud.cy.ts
deleted file mode 100644
index 91104af518f..00000000000
--- a/cypress/e2e/users_spec/user_crud.cy.ts
+++ /dev/null
@@ -1,199 +0,0 @@
-import { afterEach, before, beforeEach, cy, describe, it } from "local-cypress";
-
-const makeid = (length: number) => {
-  let result = "";
-  const characters = "abcdefghijklmnopqrstuvwxyz0123456789";
-  const charactersLength = characters.length;
-  for (let i = 0; i < length; i++) {
-    result += characters.charAt(Math.floor(Math.random() * charactersLength));
-  }
-  return result;
-};
-
-const username = makeid(25);
-const phone_number = "9999999999";
-const alt_phone_number = "9999999999";
-
-describe("User management", () => {
-  before(() => {
-    cy.loginByApi("devdistrictadmin", "Coronasafe@123");
-    cy.saveLocalStorage();
-  });
-
-  beforeEach(() => {
-    cy.restoreLocalStorage();
-    cy.awaitUrl("/user");
-  });
-
-  it("create user", () => {
-    cy.contains("Add New User").click();
-    cy.get("[id='user_type'] > div > button").click();
-    cy.get("div").contains("Ward Admin").click();
-    cy.get("[id='state'] > div > button").click();
-    cy.get("div").contains("Kerala").click();
-    cy.get("[id='district'] > div > button").click();
-    cy.get("div").contains("Ernakulam").click();
-    cy.get("[id='local_body'] > div > button").click();
-    cy.get("div").contains("Aikaranad").click();
-    cy.intercept(/\/api\/v1\/facility/).as("facility");
-    cy.get("[name='facilities']")
-      .click()
-      .type("Dummy Facility 1")
-      .wait("@facility");
-    cy.get("li[role='option']").first().click();
-    cy.get("input[type='checkbox']").click();
-    cy.get("[name='phone_number']").type(phone_number);
-    cy.get("[name='alt_phone_number']").type(alt_phone_number);
-    cy.intercept(/users/).as("check_availability");
-    cy.get("#date_of_birth").should("be.visible").click();
-    cy.get("#date-input").click().type("25081999");
-    cy.get("[name='username']").type(username);
-    cy.wait("@check_availability").its("response.statusCode").should("eq", 200);
-    cy.get("[name='password']").type("#@Cypress_test123");
-    cy.get("[name='c_password']").type("#@Cypress_test123");
-    cy.get("[name='first_name']").type("Cypress Test");
-    cy.get("[name='last_name']").type("Tester");
-    cy.get("[name='email']").type("cypress@tester.com");
-    cy.get("[id='gender'] > div > button").click();
-    cy.get("div").contains("Male").click();
-    cy.get("button[id='submit']").contains("Save User").click();
-    cy.verifyNotification("User added successfully");
-  });
-
-  it("view user and verify details", () => {
-    cy.contains("Advanced Filters").click();
-    cy.get("[name='first_name']").type("Cypress Test");
-    cy.get("[name='last_name']").type("Tester");
-    cy.get("#role button").click();
-    cy.contains("#role li", "Ward Admin").click();
-    cy.get("input[name='district']").click();
-    cy.get("input[name='district']").type("Ernakulam");
-    cy.get("li[id^='headlessui-combobox-option']")
-      .contains("Ernakulam")
-      .click();
-    cy.get("[placeholder='Phone Number']").click();
-    cy.get("[placeholder='Phone Number']").type(phone_number);
-    cy.get("[placeholder='WhatsApp Phone Number']").type(alt_phone_number);
-    cy.contains("Apply").click();
-    cy.intercept(/\/api\/v1\/users/).as("getUsers");
-    cy.wait(1000);
-    cy.get("[name='username']").type(username);
-    cy.wait("@getUsers");
-    cy.get("dd[id='count']").contains(/^1$/).click();
-    cy.get("div[id='usr_0']").within(() => {
-      cy.intercept(`/api/v1/users/${username}/get_facilities/`).as(
-        "userFacility"
-      );
-      cy.get("div[id='role']").contains(/^WardAdmin$/);
-      cy.get("div[id='name']").contains("Cypress Test Tester");
-      cy.get("div[id='district']").contains(/^Ernakulam$/);
-      cy.get("div[id='local_body']").contains("Aikaranad");
-      cy.get("div[id='created_by']").contains(/^devdistrictadmin$/);
-      cy.get("div[id='home_facility']").contains("No Home Facility");
-      cy.get("button[id='facilities']").click();
-      cy.wait("@userFacility")
-        .getAttached("div[id=facility_0] > div > span")
-        .contains("Dummy Facility 1");
-    });
-  });
-
-  it("link facility for user", () => {
-    cy.contains("Linked Facilities").click();
-    cy.intercept(/\/api\/v1\/facility/).as("getFacilities");
-    cy.get("[name='facility']")
-      .click()
-      .type("Dummy Facility 1")
-      .wait("@getFacilities");
-    cy.get("li[role='option']").first().click();
-    cy.intercept(/\/api\/v1\/users\/\w+\/add_facility\//).as("addFacility");
-    cy.get("button[id='link-facility']").click();
-    cy.wait("@addFacility")
-      // .its("response.statusCode")
-      // .should("eq", 201)
-      .get("span")
-      .contains("Facility - User Already has permission to this facility");
-  });
-
-  afterEach(() => {
-    cy.saveLocalStorage();
-  });
-});
-
-describe("Edit User Profile & Error Validation", () => {
-  before(() => {
-    cy.loginByApi(username, "#@Cypress_test123");
-    cy.saveLocalStorage();
-  });
-
-  beforeEach(() => {
-    cy.restoreLocalStorage();
-    cy.awaitUrl("/user/profile");
-    cy.contains("button", "Edit User Profile").click();
-  });
-
-  it("First name Field Updation " + username, () => {
-    cy.get("input[name=firstName]").clear();
-    cy.contains("button[type='submit']", "Update").click();
-    cy.get("span.error-text").should("contain", "Field is required");
-    cy.get("input[name=firstName]").type("firstName updated");
-    cy.contains("button[type='submit']", "Update").click();
-  });
-
-  it("Last name Field Updation " + username, () => {
-    cy.get("input[name=lastName]").clear();
-    cy.contains("button[type='submit']", "Update").click();
-    cy.get("span.error-text").should("contain", "Field is required");
-    cy.get("input[name=lastName]").type("lastName updated");
-    cy.contains("button[type='submit']", "Update").click();
-  });
-
-  it("Age Field Updation " + username, () => {
-    cy.get("input[name=age]").clear();
-    cy.contains("button[type='submit']", "Update").click();
-    cy.get("span.error-text").should("contain", "This field is required");
-    cy.get("input[name=age]").type("11");
-    cy.contains("button[type='submit']", "Update").click();
-  });
-
-  it("Phone number Field Updation " + username, () => {
-    cy.get("input[name=phoneNumber]").clear();
-    cy.contains("button[type='submit']", "Update").click();
-    cy.get("span.error-text").should(
-      "contain",
-      "Please enter valid phone number"
-    );
-    cy.get("input[name=phoneNumber]").type("+919999999999");
-    cy.contains("button[type='submit']", "Update").click();
-  });
-
-  it("Whatsapp number Field Updation " + username, () => {
-    cy.get("input[name=altPhoneNumber]").clear();
-    cy.get("input[name=altPhoneNumber]").type("+919999999999");
-    cy.contains("button[type='submit']", "Update").click();
-  });
-
-  it("Email Field Updation " + username, () => {
-    cy.get("input[name=email]").clear();
-    cy.contains("button[type='submit']", "Update").click();
-    cy.get("span.error-text").should("contain", "This field is required");
-    cy.get("input[name=email]").type("test@test.com");
-    cy.contains("button[type='submit']", "Update").click();
-  });
-
-  afterEach(() => {
-    cy.saveLocalStorage();
-  });
-});
-
-// describe("Delete User", () => { district admin wont be able to delete user
-//   it("deletes user", () => {
-//     cy.loginByApi("devdistrictadmin", "Coronasafe@123");
-//     cy.awaitUrl("/user");
-//     cy.get("[name='username']").type(username);
-//     cy.get("button")
-//       .should("contain", "Delete")
-//       .contains("Delete")
-//       .click();
-//     cy.get("button.font-medium.btn.btn-danger").click();
-//   });
-// });
diff --git a/cypress/pageobject/Users/UserCreation.ts b/cypress/pageobject/Users/UserCreation.ts
new file mode 100644
index 00000000000..6bef3584ec8
--- /dev/null
+++ b/cypress/pageobject/Users/UserCreation.ts
@@ -0,0 +1,65 @@
+// UserCreation.ts
+export class UserCreationPage {
+  clickElementById(elementId: string) {
+    cy.get("#" + elementId).click();
+  }
+
+  typeIntoElementById(elementId: string, value: string) {
+    cy.get("#" + elementId)
+      .click()
+      .type(value);
+  }
+
+  typeIntoInputByName(inputName: string, value: string) {
+    cy.get("input[name='" + inputName + "']")
+      .click()
+      .type(value);
+  }
+
+  selectOptionContainingText(text: string) {
+    cy.get("[role='option']").contains(text).click();
+  }
+
+  verifyNotification(message: string) {
+    cy.verifyNotification(message);
+  }
+
+  selectFacility(name: string) {
+    this.typeIntoInputByName("facilities", name);
+    this.selectOptionContainingText(name);
+  }
+
+  selectHomeFacility(name: string) {
+    this.clickElementById("home_facility");
+    this.selectOptionContainingText(name);
+  }
+
+  setInputDate(
+    dateElementId: string,
+    inputElementId: string,
+    dateValue: string
+  ) {
+    this.clickElementById(dateElementId);
+    this.typeIntoElementById(inputElementId, dateValue);
+  }
+
+  selectDropdownOption(dropdownId: string, optionText: string) {
+    this.clickElementById(dropdownId);
+    this.selectOptionContainingText(optionText);
+  }
+
+  verifyElementContainsText(elementId: string, expectedText: string) {
+    cy.get("#" + elementId).should("contain.text", expectedText);
+  }
+
+  verifyErrorMessages(errorMessages: string[]) {
+    cy.get(".error-text").then(($errors) => {
+      const displayedErrorMessages = $errors
+        .map((_, el) => Cypress.$(el).text())
+        .get();
+      errorMessages.forEach((errorMessage) => {
+        expect(displayedErrorMessages).to.include(errorMessage);
+      });
+    });
+  }
+}
diff --git a/src/Components/Users/ManageUsers.tsx b/src/Components/Users/ManageUsers.tsx
index 150c102aff1..3b55c40fc70 100644
--- a/src/Components/Users/ManageUsers.tsx
+++ b/src/Components/Users/ManageUsers.tsx
@@ -134,7 +134,11 @@ export default function ManageUsers() {
   );
 
   const addUser = (
-    <ButtonV2 className="w-full" onClick={() => navigate("/users/add")}>
+    <ButtonV2
+      id="addUserButton"
+      className="w-full"
+      onClick={() => navigate("/users/add")}
+    >
       <CareIcon className="care-l-plus w-full text-lg" />
       <p>Add New User</p>
     </ButtonV2>