From 9211a9ef7519952285504c4b234f76db40ab5dba Mon Sep 17 00:00:00 2001
From: Ajay-aot <115780710+Ajay-aot@users.noreply.github.com>
Date: Fri, 19 Jan 2024 09:19:24 +0530
Subject: [PATCH] data-test id added in pending admin part (#131)

* data-testid added in pending admin part

* roles part updated

* select option and modal data-testid updated

* change in data-testid (btn to button)
---
 forms-flow-admin/src/components/roles/roles.tsx | 14 +++++++++-----
 forms-flow-admin/src/components/users/users.tsx | 12 +++++++++---
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/forms-flow-admin/src/components/roles/roles.tsx b/forms-flow-admin/src/components/roles/roles.tsx
index de06990fb..fa711b527 100644
--- a/forms-flow-admin/src/components/roles/roles.tsx
+++ b/forms-flow-admin/src/components/roles/roles.tsx
@@ -261,14 +261,14 @@ const Roles = React.memo((props: any) => {
       <button 
             type="button"
             className="btn btn-link text-dark" onClick={handleCloseDeleteModal}
-            data-testid="roles-cancel-delete-btn">
+            data-testid="roles-cancel-delete-button">
         {t("Cancel")}
       </button>
       <Button
         variant="danger"
         disabled={disabled}
         onClick={() => deleteRole(deleteCandidate)}
-        data-testid="roles-confirm-delete-btn"
+        data-testid="roles-confirm-delete-button"
       >
         {t("Delete")}
       </Button>
@@ -310,7 +310,7 @@ const Roles = React.memo((props: any) => {
         </Modal.Body>
         <Modal.Footer>
           <button type="button"
-            className="btn btn-link text-dark" onClick={handleCloseRoleModal}>
+            className="btn btn-link text-dark" onClick={handleCloseRoleModal} data-testid="create-new-role-modal-cancel-button">
             {t("Cancel")}
           </button>
           <Button
@@ -318,6 +318,7 @@ const Roles = React.memo((props: any) => {
             disabled={disabled}
             onClick={handleCreateRole}
             type="submit"
+            data-testid="create-new-role-modal-submit-button"
           >
             {t("Create")}
           </Button>
@@ -358,7 +359,7 @@ const Roles = React.memo((props: any) => {
         </Modal.Body>
         <Modal.Footer>
           <button type="button"
-            className="btn btn-link text-dark" onClick={handleCloseEditRoleModal}>
+            className="btn btn-link text-dark" onClick={handleCloseEditRoleModal}  data-testid="edit-role-modal-cancel-button">
             {t("Cancel")}
           </button>
           <Button
@@ -366,6 +367,7 @@ const Roles = React.memo((props: any) => {
             disabled={disabled}
             onClick={handleUpdateRole}
             type="submit"
+            data-testid="edit-role-modal-save-button"
           >
            {t("Save")}
           </Button>
@@ -538,6 +540,7 @@ const Roles = React.memo((props: any) => {
               onChange={handlFilter}
               value={search}
               title={t("Search...")}
+              data-testid="search-role-input"
             />
 
             {search.length > 0 && (
@@ -547,12 +550,13 @@ const Roles = React.memo((props: any) => {
                   setSerach("");
                   setRoles(props.roles);
                 }}
+                data-testid="clear-role-search-button"
               >
                 {t("Clear")}
               </Button>
             )}
           </div>
-          <Button variant="primary"  onClick={handleShowRoleModal}>
+          <Button variant="primary"  onClick={handleShowRoleModal} data-testid="roles-create-new-role-button">
           <i className="fa-solid fa-plus me-2"></i> <Translation>{(t) => t("Create New Role")}</Translation>
           </Button>
         </div>
diff --git a/forms-flow-admin/src/components/users/users.tsx b/forms-flow-admin/src/components/users/users.tsx
index 171413ce9..c0bdf3344 100644
--- a/forms-flow-admin/src/components/users/users.tsx
+++ b/forms-flow-admin/src/components/users/users.tsx
@@ -337,6 +337,7 @@ const Users = React.memo((props: any) => {
               onChange={handleSearch}
               value={props.search || ""}
               title={t("Search...")}
+              data-testid="search-users-input"
             />
             {props.search?.length > 0 && (
               <Button
@@ -344,6 +345,7 @@ const Users = React.memo((props: any) => {
                 onClick={() => {
                   props.setSearch("");
                 }}
+                data-testid="clear-users-search-button"
               >
                 {t("Clear")}
               </Button>
@@ -352,12 +354,16 @@ const Users = React.memo((props: any) => {
 
           <div className="user-filter-container  col-lg-4 col-xl-4 col-md-4 col-sm-6 col-12 d-flex justify-content-end gap-2">
             <span className="my-2">{t("Filter By:")} </span>
-            <Form.Select className="bg-light text-dark" onChange={handleSelectFilter} title={t("Filter here")}>
-              <option value="ALL" selected={!props.filter}>
+            <Form.Select 
+             className="bg-light text-dark"
+             onChange={handleSelectFilter} 
+             title={t("Filter here")} 
+             data-testid="users-roles-filter-select">
+              <option value="ALL" selected={!props.filter} data-testid="users-roles-filter-option-all">
                 {t("All roles")}
               </option>
               {roles?.map((role, i) => (
-                <option key={i} value={role.name}>
+                <option key={i} value={role.name} data-testid={`users-roles-filter-option-${i}`}>
                   {role.name}
                 </option>
               ))}