test(user): added test to verify user details

ohcnetwork · Dec 25, 2022 · 894aca0 · 894aca0
1 parent 03fd901
commit 894aca0
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 32 deletions.
diff --git a/cypress/e2e/users_spec/user_crud.cy.ts b/cypress/e2e/users_spec/user_crud.cy.ts
@@ -11,7 +11,7 @@ const makeid = (length: number) => {
 };
 
 const makePhoneNumber = () =>
-  "98" + Math.floor(Math.random() * 99999999).toString();
+  "9199" + Math.floor(Math.random() * 99999999).toString();
 
 const username = makeid(25);
 const phone_number = makePhoneNumber();
@@ -41,8 +41,13 @@ describe("User management", () => {
     cy.intercept(/\/api\/v1\/facility/).as("facility");
     cy.get("[name='facilities']").type("Mysore").wait("@facility");
     cy.get("[name='facilities']").type("{downarrow}{enter}");
+    cy.wait(1000);
+    cy.get("[id='home_facility'] > div > button").click();
+    cy.get("[id='home_facility']").find("div").contains("Mysore").click();
     cy.get("input[type='checkbox']").click();
+    cy.wait(1000);
     cy.get("[placeholder='Phone Number']").type(phone_number);
+    cy.wait(1000);
     cy.get("[placeholder='WhatsApp Phone Number']").type(alt_phone_number, {
       force: true,
     });
@@ -70,11 +75,36 @@ describe("User management", () => {
     cy.contains("Advanced Filters").click();
     cy.get("[name='first_name']").type("Cypress Test");
     cy.get("[name='last_name']").type("Tester");
+    cy.get("[id='role'] > div > button").click();
+    cy.get("div")
+      .contains(/^Ward Admin$/)
+      .click();
+    cy.get("input[name='district']").type("Ernakulam").wait(1000);
+    cy.get("input[name='district']").type("{downarrow}{enter}");
     cy.get("[placeholder='Phone Number']").type(phone_number);
-    cy.get("input[name='district']").type("Ernakulam");
     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, { force: true });
+    cy.wait("@getUsers");
+    cy.wait(1000);
+    cy.get("dd[id='count']").contains(/^1$/).click();
+    cy.get("div[id='usr_0']").within(() => {
+      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("(Test) Mysore");
+      cy.get("div").contains("Click").click({
+        force: true,
+      });
+      cy.intercept(`/api/v1/users/${username}/get_facilities/`).as("facility");
+      cy.get("div[id='facilities'] > div:nth-child(2) > div").contains(
+        "(Test) Mysore"
+      );
+    });
   });
 
   it("link facility for user", () => {

diff --git a/src/Components/Common/DateInputV2.tsx b/src/Components/Common/DateInputV2.tsx
@@ -18,6 +18,7 @@ type DatePickerType = "date" | "month" | "year";
 export type DatePickerPosition = "LEFT" | "RIGHT" | "CENTER";
 
 interface Props {
+  id?: string;
   className?: string;
   value: Date | undefined;
   min?: Date;
@@ -31,6 +32,7 @@ interface Props {
 const DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
 
 const DateInputV2: React.FC<Props> = ({
+  id,
   className,
   value,
   min,
@@ -188,6 +190,7 @@ const DateInputV2: React.FC<Props> = ({
           <Popover.Button disabled={disabled} className="w-full">
             <input type="hidden" name="date" />
             <input
+              id={id}
               type="text"
               readOnly
               disabled={disabled}

diff --git a/src/Components/Common/UserDetails.tsx b/src/Components/Common/UserDetails.tsx
@@ -1,8 +1,12 @@
 import React from "react";
 
-function UserDetails(props: { children: React.ReactNode; title: string }) {
+function UserDetails(props: {
+  children: React.ReactNode;
+  title: string;
+  id?: string;
+}) {
   return (
-    <div className="mt-2">
+    <div className="mt-2" id={props.id}>
       <div className="text-gray-900 leading-relaxed font-light">
         {props.title} :
       </div>

diff --git a/src/Components/Form/FormFields/DateFormField.tsx b/src/Components/Form/FormFields/DateFormField.tsx
@@ -23,6 +23,7 @@ const DateFormField = ({ position = "RIGHT", ...props }: Props) => {
     <FormField props={props}>
       <DateInputV2
         className={classNames(error && "border-red-500")}
+        id={props.id}
         value={props.value}
         onChange={(value) => handleChange({ name, value })}
         position={position}

diff --git a/src/Components/Form/FormFields/FormField.tsx b/src/Components/Form/FormFields/FormField.tsx
@@ -49,7 +49,7 @@ const FormField = (props: {
     props.props;
 
   return (
-    <div className={className} id={id}>
+    <div className={className}>
       {label && (
         <FieldLabel htmlFor={id} required={required} className={labelClassName}>
           {label}

diff --git a/src/Components/Users/ManageUsers.tsx b/src/Components/Users/ManageUsers.tsx
@@ -339,21 +339,25 @@ export default function ManageUsers() {
 
   users &&
     users.length &&
-    (userList = users.map((user: any) => {
+    (userList = users.map((user: any, idx) => {
       const cur_online = moment()
         .subtract(5, "minutes")
         .isBefore(user.last_login);
       return (
         <div
           key={`usr_${user.id}`}
+          id={`usr_${idx}`}
           className=" w-full lg:w-1/2 xl:w-1/3 mt-6 md:px-4"
         >
           <div className="block rounded-lg bg-white shadow h-full cursor-pointer hover:border-primary-500 overflow-hidden">
             <div className="h-full flex flex-col justify-between">
               <div className="px-6 py-4">
                 <div className="flex lg:flex-row gap-3 flex-col justify-between flex-wrap">
                   {user.username && (
-                    <div className="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium leading-5 bg-blue-100 text-blue-800 w-fit">
+                    <div
+                      id="username"
+                      className="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium leading-5 bg-blue-100 text-blue-800 w-fit"
+                    >
                       {user.username}
                     </div>
                   )}
@@ -384,7 +388,7 @@ export default function ManageUsers() {
                     )}
                   </div>
                 </div>
-                <div className="font-bold text-2xl capitalize mt-2">
+                <div id="name" className="font-bold text-2xl capitalize mt-2">
                   {`${user.first_name} ${user.last_name}`}
 
                   {user.last_login && cur_online ? (
@@ -413,7 +417,7 @@ export default function ManageUsers() {
                 >
                   {user.user_type && (
                     <div className="col-span-2">
-                      <UserDetails title="Role">
+                      <UserDetails id="role" title="Role">
                         <div className="font-semibold break-all">
                           {user.user_type}
                         </div>
@@ -422,7 +426,7 @@ export default function ManageUsers() {
                   )}
                   {user.district_object && (
                     <div className="col-span-2">
-                      <UserDetails title="District">
+                      <UserDetails id="district" title="District">
                         <div className="font-semibold">
                           {user.district_object.name}
                         </div>
@@ -431,7 +435,7 @@ export default function ManageUsers() {
                   )}
                 </div>
                 {user.local_body_object && (
-                  <UserDetails title="Location">
+                  <UserDetails id="local_body" title="Location">
                     <div className="font-semibold">
                       {user.local_body_object.name}
                     </div>
@@ -446,33 +450,16 @@ export default function ManageUsers() {
                 >
                   {user.created_by && (
                     <div className="col-span-2">
-                      <UserDetails title="Created by">
+                      <UserDetails id="created_by" title="Created by">
                         <div className="font-semibold break-all">
                           {user.created_by}
                         </div>
                       </UserDetails>
                     </div>
                   )}
-                  {user.phone_number && (
-                    <div className="mt-2 bg-gray-50 border-t px-6 py-2 col-span-2">
-                      <div className="flex py-4 justify-between">
-                        <div>
-                          <div className="text-gray-500 leading-relaxed">
-                            Phone:
-                          </div>
-                          <a
-                            href={`tel:${user.phone_number}`}
-                            className="font-semibold"
-                          >
-                            {user.phone_number || "-"}
-                          </a>
-                        </div>
-                      </div>
-                    </div>
-                  )}
                   {user.username && (
                     <div className="col-span-2">
-                      <UserDetails title="Home Facility">
+                      <UserDetails id="home_facility" title="Home Facility">
                         <span className="font-semibold block">
                           {user.home_facility_object?.name ||
                             "No Home Facility"}
@@ -482,7 +469,7 @@ export default function ManageUsers() {
                   )}
                   {user.username && user.facilities && (
                     <div className="col-span-4">
-                      <UserDetails title="Linked Facilities">
+                      <UserDetails id="facilities" title="Linked Facilities">
                         {showFacilities(user.username, user.facilities)}
                       </UserDetails>
                     </div>
@@ -553,7 +540,10 @@ export default function ManageUsers() {
                   <CircularProgress className="text-primary-500" />
                 </dd>
               ) : (
-                <dd className="mt-4 text-5xl lg:text-5xl md:text-4xl leading-9 font-semibold text-gray-900">
+                <dd
+                  id="count"
+                  className="mt-4 text-5xl lg:text-5xl md:text-4xl leading-9 font-semibold text-gray-900"
+                >
                   {totalCount}
                 </dd>
               )}