From 782c5e74bf63e6d98cafd471978fad579521ab6b Mon Sep 17 00:00:00 2001
From: shuhaib-aot <shuhaib.s@aot-technologies.com>
Date: Mon, 18 Dec 2023 11:38:48 +0530
Subject: [PATCH] added data testid in Form client and designer table

---
 .../Form/FileUpload/SelectFormForDownload.js  |  2 +
 .../components/Form/constants/ClientTable.js  | 93 +++++++++++--------
 .../components/Form/constants/FormTable.js    | 50 ++++++----
 3 files changed, 88 insertions(+), 57 deletions(-)

diff --git a/forms-flow-web/src/components/Form/FileUpload/SelectFormForDownload.js b/forms-flow-web/src/components/Form/FileUpload/SelectFormForDownload.js
index 03a1863374..e405edacfc 100644
--- a/forms-flow-web/src/components/Form/FileUpload/SelectFormForDownload.js
+++ b/forms-flow-web/src/components/Form/FileUpload/SelectFormForDownload.js
@@ -74,6 +74,7 @@ const SelectFormForDownload = React.memo(({ form, type }) => {
       >
         <Form.Check.Input
           className="select_input"
+          data-testid="download-all-form-checkbox"
           aria-label="Check"
           onChange={() => addAllFormCheckList(!isAllFormChecked)}
           checked={isAllFormChecked}
@@ -89,6 +90,7 @@ const SelectFormForDownload = React.memo(({ form, type }) => {
       <Form.Check.Input
         style={{ width: "15px", height: "15px" }}
         aria-label="option"
+        data-testid={`download-form-checkbox-${form._id}`}
         checked={isFormChecked}
         onChange={() => updateFormCheckList(!isFormChecked)}
         title={t("Select for download")}
diff --git a/forms-flow-web/src/components/Form/constants/ClientTable.js b/forms-flow-web/src/components/Form/constants/ClientTable.js
index 801a2b2b0c..ae98992691 100644
--- a/forms-flow-web/src/components/Form/constants/ClientTable.js
+++ b/forms-flow-web/src/components/Form/constants/ClientTable.js
@@ -139,7 +139,7 @@ function ClientTable() {
   return (
     <>
       <LoadingOverlay active={searchFormLoading} spinner text={t("Loading...")}>
-        <div style={{ minHeight: "400px"}}>
+        <div style={{ minHeight: "400px" }}>
           <table className="table custom-table table-responsive-sm">
             <thead>
               <tr>
@@ -188,12 +188,16 @@ function ClientTable() {
                       onKeyDown={(e) =>
                         e.keyCode === 13 ? handleSearch() : ""
                       }
+                      data-testid="form-search-input-box"
                       placeholder={t("Search by form title")}
                       style={{ backgroundColor: "#ffff" }}
                       title={t("Search by form title")}
                     />
                     {search && (
-                      <InputGroup.Append onClick={handleClearSearch}>
+                      <InputGroup.Append
+                        onClick={handleClearSearch}
+                        data-testid="form-search-cear-button"
+                      >
                         <InputGroup.Text>
                           <i className="fa fa-times"></i>
                         </InputGroup.Text>
@@ -201,6 +205,7 @@ function ClientTable() {
                     )}
                     <InputGroup.Append
                       onClick={handleSearch}
+                      data-testid="form-search-click-button"
                       disabled={!search?.trim()}
                       style={{ cursor: "pointer" }}
                     >
@@ -219,20 +224,31 @@ function ClientTable() {
                     <tr>
                       <td className="col-4">
                         {!isDesigner && (
-                          <button title={t("Form Description")} className="btn btn-light btn-small mr-2"   onClick={() => handleToggle(index) } disabled={!e.description}>
-                              <i
-                            className={`fa ${
-                              openIndex === index
-                                ? "fa-chevron-up"
-                                : "fa-chevron-down"
-                            }`}
-                          
-                          ></i>
+                          <button
+                            data-testid={`form-description-expand-button-${e._id}`}
+                            title={t("Form Description")}
+                            className="btn btn-light btn-small mr-2"
+                            onClick={() => handleToggle(index)}
+                            disabled={!e.description}
+                          >
+                            <i
+                              className={`fa ${
+                                openIndex === index
+                                  ? "fa-chevron-up"
+                                  : "fa-chevron-down"
+                              }`}
+                            ></i>
                           </button>
                         )}
-                        <span className="ml-2 mt-2">{e.title}</span>
+                        <span
+                          data-testid={`form-title-${e._id}`}
+                          className="ml-2 mt-2"
+                        >
+                          {e.title}
+                        </span>
                       </td>
                       <td
+                        data-testid={`form-description${e._id}`}
                         className="text-truncate"
                         style={{
                           maxWidth: "350px",
@@ -243,6 +259,7 @@ function ClientTable() {
 
                       <td className="text-center">
                         <button
+                          data-testid={`form-submit-button-${e._id}`}
                           className="btn btn-primary"
                           onClick={() => submitNewForm(e._id)}
                         >
@@ -251,30 +268,27 @@ function ClientTable() {
                       </td>
                     </tr>
 
-                    {index === openIndex && 
-                        <tr>
-                          <td colSpan={10}>
-                            <div className="bg-white p-3">
-                              <h4>
-                                <strong>{t("Form Description")}</strong>
-                              </h4>
+                    {index === openIndex && (
+                      <tr>
+                        <td colSpan={10}>
+                          <div className="bg-white p-3">
+                            <h4>
+                              <strong>{t("Form Description")}</strong>
+                            </h4>
 
-                              <div
-                                style={{ maxWidth: "68vw" }}
-                                className="form-description-p-tag "
-                                dangerouslySetInnerHTML={{
-                                  __html: sanitize(
-                                    e?.description,
-                                    {
-                                      ADD_ATTR: ["target"],
-                                    }
-                                  ),
-                                }}
-                              />
-                            </div>
-                          </td>
-                        </tr>
-                    } 
+                            <div
+                              style={{ maxWidth: "68vw" }}
+                              className="form-description-p-tag "
+                              dangerouslySetInnerHTML={{
+                                __html: sanitize(e?.description, {
+                                  ADD_ATTR: ["target"],
+                                }),
+                              }}
+                            />
+                          </div>
+                        </td>
+                      </tr>
+                    )}
                   </React.Fragment>
                 ))}
               </tbody>
@@ -291,8 +305,12 @@ function ClientTable() {
         <div className="d-flex justify-content-between align-items-center flex-column flex-md-row">
           <div className="d-flex align-items-center">
             <span className="mr-2"> {t("Rows per page")}</span>
-            <Dropdown>
-              <Dropdown.Toggle variant="light" id="dropdown-basic">
+            <Dropdown data-testid="page-limit-dropdown">
+              <Dropdown.Toggle
+                variant="light"
+                id="dropdown-basic"
+                data-testid="page-limit-dropdown-toggle"
+              >
                 {pageLimit}
               </Dropdown.Toggle>
 
@@ -304,6 +322,7 @@ function ClientTable() {
                     onClick={() => {
                       onSizePerPageChange(option.value);
                     }}
+                    data-testid={`page-limit-dropdown-item-${option.value}`} 
                   >
                     {option.text}
                   </Dropdown.Item>
diff --git a/forms-flow-web/src/components/Form/constants/FormTable.js b/forms-flow-web/src/components/Form/constants/FormTable.js
index fc571ca790..719e7d54cc 100644
--- a/forms-flow-web/src/components/Form/constants/FormTable.js
+++ b/forms-flow-web/src/components/Form/constants/FormTable.js
@@ -118,15 +118,7 @@ function FormTable() {
     dispatch(setBPMFormLimit(limit));
     dispatch(setBPMFormListPage(1));
   };
-
-  const viewOrEdit = (formData) => (
-    <button
-      className="btn btn-link text-primary mt-2"
-      onClick={() => viewOrEditForm(formData._id)}
-    >
-      <Translation>{(t) => t("View Details")}</Translation>{" "}
-    </button>
-  );
+ 
 
  
 
@@ -245,10 +237,11 @@ function FormTable() {
                       onKeyDown={(e) => (e.keyCode == 13 ? handleSearch() : "")}
                       placeholder={t("Search by form title")}
                       title={t("Search by form title")}
+                      data-testid="form-search-input-box"
                       style={{ backgroundColor: "#ffff" }}
                     />
                     {search && (
-                      <InputGroup.Append onClick={handleClearSearch}>
+                      <InputGroup.Append onClick={handleClearSearch} data-testid="form-search-cear-button">
                         <InputGroup.Text>
                           <i className="fa fa-times"></i>
                         </InputGroup.Text>
@@ -256,6 +249,7 @@ function FormTable() {
                     )}
                     <InputGroup.Append
                       onClick={handleSearch}
+                      data-testid="form-search-click-button"
                       disabled={!search?.trim()}
                       style={{ cursor: "pointer" }}
                     >
@@ -289,21 +283,34 @@ function FormTable() {
                       <td>{_.capitalize(e.formType)}</td>
                       <td>{e.anonymous ? t("Public") : t("Private")}</td>
                       <td>
-                        {" "}
-                        <span 
-                          className={`badge rounded-pill px-3 py-2 ${e.status === 'active' ? 'published-forms-label' : 'unpublished-forms-label'}`}
+                        <span
+                          data-testid={`form-status-${e._id}`}
+                          className={`badge rounded-pill px-3 py-2 ${
+                            e.status === "active"
+                              ? "published-forms-label"
+                              : "unpublished-forms-label"
+                          }`}
                         >
-                          {e.status === 'active' ? t("Published") : t("Unpublished")}
+                          {e.status === "active"
+                            ? t("Published")
+                            : t("Unpublished")}
                         </span>
                       </td>
 
                       <td>
-                        <span> {viewOrEdit(e)}</span>
+                        <button
+                          data-testid={`form-view-or-edit-button-${e._id}`}
+                          className="btn btn-link text-primary mt-2"
+                          onClick={() => viewOrEditForm(e._id)}
+                        >
+                          <Translation>{(t) => t("View Details")}</Translation>{" "}
+                        </button>
                       </td>
                       <td>
-                        <Dropdown >
+                        <Dropdown data-testid={`designer-form-option-${e._id}`}>
                           <Dropdown.Toggle
-                            as={CustomToggle} 
+                            data-testid={`designer-form-option-toggle-${e._id}`}
+                            as={CustomToggle}
                             id="dropdown-basic"
                             title={t("More options")}
                             aria-describedby="More-options"
@@ -317,12 +324,14 @@ function FormTable() {
                                 onClick={() => {
                                   submitNewForm(e?._id);
                                 }}
+                                data-testid={`designer-form-option-${e._id}-submit`}
                               >
                                 <i className="fa fa-pencil mr-2 text-primary" />
                                 {t("Submit New")}
                               </Dropdown.Item>
                             ) : null}
-                            <Dropdown.Item onClick={() => deleteForms(e)}>
+                            <Dropdown.Item onClick={() => deleteForms(e)}
+                             data-testid={`designer-form-option-${e._id}-delete`}>
                               <i className="fa fa-trash mr-2 text-danger" />
                               {t("Delete")}
                             </Dropdown.Item>
@@ -346,8 +355,8 @@ function FormTable() {
         <div className="d-flex justify-content-between align-items-center flex-column flex-md-row">
           <div className="d-flex align-items-center">
           <span className="mr-2"> {t("Rows per page")}</span>
-          <Dropdown>
-                <Dropdown.Toggle variant="light" id="dropdown-basic">
+          <Dropdown data-testid="page-limit-dropdown">
+                <Dropdown.Toggle variant="light" id="dropdown-basic" data-testid="page-limit-dropdown-toggle">
                   {pageLimit}
                 </Dropdown.Toggle>
 
@@ -356,6 +365,7 @@ function FormTable() {
                   <Dropdown.Item
                     key={index}
                     type="button"
+                    data-testid={`page-limit-dropdown-item-${option.value}`}
                     onClick={() => {
                       onSizePerPageChange(option.value);
                     }}