data-testid added for process tab (#1858)

* typo fix in data-testid * data-testid added for process tab * data-testid added for bpmn&dmn editor page
AOT-Technologies · Jan 23, 2024 · c2a1d51 · c2a1d51
1 parent 51afda7
commit c2a1d51
Showing 6 changed files with 72 additions and 31 deletions.
diff --git a/forms-flow-web/src/components/Form/constants/FormTable.js b/forms-flow-web/src/components/Form/constants/FormTable.js
@@ -243,7 +243,7 @@ function FormTable() {
                       style={{ backgroundColor: "#ffff" }}
                     />
                     {search && (
-                      <InputGroup.Append onClick={handleClearSearch} data-testid="form-search-cear-button">
+                      <InputGroup.Append onClick={handleClearSearch} data-testid="form-search-clear-button">
                         <InputGroup.Text className="h-100">
                           <i className="fa fa-times"></i>
                         </InputGroup.Text>

diff --git a/forms-flow-web/src/components/Modeler/Editors/BpmnEditor/index.js b/forms-flow-web/src/components/Modeler/Editors/BpmnEditor/index.js
@@ -319,11 +319,15 @@ export default React.memo(
               </label>
             ) : null}
 
-            <button type="button"
-              className="btn btn-link text-dark" onClick={cancel}>
+            <button
+              data-testid="prcosses-bpmneditor-cancel-button"
+              type="button"
+              className="btn btn-link text-dark"
+              onClick={cancel}>
               {t("Cancel")}
             </button>
             <Button
+              data-testid="prcosses-bpmneditor-export-button"
               variant="outline-dark"
               className="ms-3"
               onClick={handleExport}
@@ -332,6 +336,7 @@ export default React.memo(
               {t("Export")}
             </Button>
             <Button
+              data-testid="prcosses-bpmneditor-deploy-button"
               className="ms-3"
               onClick={deployProcess}
               // disabled={processName || !bpmPropertyInput}
@@ -359,20 +364,23 @@ export default React.memo(
                   className="mb-3 btn-zoom"
                   title={t("Reset Zoom")}
                   onClick={() => zoomReset()}
+                  data-testid="prcosses-bpmneditor-zoomreset-button"
                 >
                   <i className="fa fa-retweet" aria-hidden="true" />
                 </button>
                 <button
                   className="btn-zoom"
                   title={t("Zoom In")}
                   onClick={() => zoom()}
+                  data-testid="prcosses-bpmneditor-zoom-button"
                 >
                   <i className="fa fa-search-plus" aria-hidden="true" />
                 </button>
                 <button
                   className="btn-zoom"
                   title={t("Zoom Out")}
                   onClick={() => zoomOut()}
+                  data-testid="prcosses-bpmneditor-zoomout-button"
                 >
                   <i className="fa fa-search-minus" aria-hidden="true" />
                 </button>
@@ -385,7 +393,11 @@ export default React.memo(
           ></div>
         </div>
         <div className="d-flex justify-content-end">
-          <Button variant="info" className=" me-2" onClick={handleHelp}>
+          <Button
+            data-testid="prcosses-bpmneditor-help-button"
+            variant="info"
+            className=" me-2"
+            onClick={handleHelp}>
             {t("Help")}
           </Button>
         </div>

diff --git a/forms-flow-web/src/components/Modeler/Editors/DmnEditor/index.js b/forms-flow-web/src/components/Modeler/Editors/DmnEditor/index.js
@@ -279,18 +279,25 @@ export default React.memo(({ processKey, tenant, isNewDiagram, mode}) => {
               {t("Apply for all tenants")}
             </label>
           ) : null}
-          <button type="button"
-            className="btn btn-link text-dark" onClick={cancel}>
+          <button
+            data-testid="prcosses-dmneditor-cancel-button"
+            type="button"
+            className="btn btn-link text-dark"
+            onClick={cancel}>
             {t("Cancel")}
           </button>
           <Button
             variant="outline-dark"
             className="ms-3"
             onClick={handleExport}
+            data-testid="prcosses-dmneditor-export-button"
           >
             {t("Export")}
           </Button>
-          <Button className="ms-3" onClick={deployProcess}>
+          <Button
+            data-testid="prcosses-dmneditor-deploy-button"
+            className="ms-3"
+            onClick={deployProcess}>
             {t("Deploy")}
           </Button>
         </div>
@@ -316,20 +323,23 @@ export default React.memo(({ processKey, tenant, isNewDiagram, mode}) => {
                 className="mb-3 btn-zoom"
                 title={t("Reset Zoom")}
                 onClick={() => zoomReset()}
+                data-testid="prcosses-dmneditor-zoomreset-button"
               >
                 <i className="fa fa-retweet" aria-hidden="true" />
               </button>
               <button
                 className="btn-zoom"
                 title={t("Zoom In")}
                 onClick={() => zoom()}
+                data-testid="prcosses-dmneditor-zoom-button"
               >
                 <i className="fa fa-search-plus" aria-hidden="true" />
               </button>
               <button
                 className="btn-zoom"
                 title={t("Zoom Out")}
                 onClick={() => zoomOut()}
+                data-testid="prcosses-dmneditor-zoomout-button"
               >
                 <i className="fa fa-search-minus" aria-hidden="true" />
               </button>
@@ -339,7 +349,11 @@ export default React.memo(({ processKey, tenant, isNewDiagram, mode}) => {
         <div className="properties-panel-parent" id="js-properties-panel"></div>
       </div>
       <div className="d-flex justify-content-end">
-        <Button variant="info" className=" me-2" onClick={handleHelp}>
+        <Button
+          data-testid="prcosses-dmneditorhelp-button"
+          variant="info"
+          className=" me-2"
+          onClick={handleHelp}>
           {t("Help")}
         </Button>
       </div>

diff --git a/forms-flow-web/src/components/Modeler/Main.js b/forms-flow-web/src/components/Modeler/Main.js
@@ -98,25 +98,28 @@ export default React.memo(() => {
     <div>
       <div className="d-flex pb-2">
       <button
-  onClick={handleCreateNew}
-  className="btn btn-primary"
-  style={{ whiteSpace: "nowrap" }}
->
-  <i className="fa fa-plus me-2" />
-  {isBpmnModel ? t("Create Workflow") : t("Create DMN")}
-</button>
+       onClick={handleCreateNew}
+       className="btn btn-primary"
+       style={{ whiteSpace: "nowrap" }}
+       data-testid="processes-create-workflow-dmn-button"
+     >
+       <i className="fa fa-plus me-2" />
+       {isBpmnModel ? t("Create Workflow") : t("Create DMN")}
+     </button>
 
         <button
-  className="btn btn-outline-primary  ms-4"
-  onClick={uploadClick}
-  title={isBpmnModel ? t("Upload Workflow") : t("Upload DMN")}
-  style={{ whiteSpace: "nowrap" }}
->
-  <i className="fa fa-upload me-2" aria-hidden="true" />
-  {isBpmnModel ? t("Upload Workflow") : t("Upload DMN")}
-</button>
+          className="btn btn-outline-primary  ms-4"
+          onClick={uploadClick}
+          title={isBpmnModel ? t("Upload Workflow") : t("Upload DMN")}
+          style={{ whiteSpace: "nowrap" }}
+          data-testid="processes-upload-workflow-dmn-button"
+        >
+          <i className="fa fa-upload me-2" aria-hidden="true" />
+          {isBpmnModel ? t("Upload Workflow") : t("Upload DMN")}
+        </button>
 
         <input
+          data-testid="processes-upload-workflow-input"
           ref={uploadFormNode}
           id="inputWorkflow"
           className="d-none"

diff --git a/forms-flow-web/src/components/Modeler/constants/bpmnTable.js b/forms-flow-web/src/components/Modeler/constants/bpmnTable.js
@@ -119,15 +119,17 @@ function BpmnTable() {
                 placeholder={t("Search by workflow name")}
                 style={{ backgroundColor: "#ffff" }}
                 title={t("Search by workflow name")}
+                data-testid="processes-search-workflow-input-box"
               />
               {search && (
-                <InputGroup.Append onClick={onClearSearch}>
+                <InputGroup.Append  data-testid="processes-search-clear-button" onClick={onClearSearch}>
                   <InputGroup.Text className="h-100">
                     <i className="fa fa-times"></i>
                   </InputGroup.Text>
                 </InputGroup.Append>
               )}
               <InputGroup.Append
+                data-testid="processes-search-click-button"
                 onClick={handleSearchButtonClick}
                 disabled={!search?.trim()}
                 style={{ cursor: "pointer" }}
@@ -160,7 +162,10 @@ function BpmnTable() {
                     <td>{processItem.key}</td>
                     <td>{t("BPMN")}</td>
                     <td className="d-flex justify-content-end w-100">
-                      <button className="btn btn-link text-primary" onClick={()=>{gotoEdit(processItem);}}> 
+                      <button
+                        data-testid={`processes-edit-workflow-${processItem.key}`}
+                        className="btn btn-link text-primary"
+                        onClick={() => { gotoEdit(processItem); }}> 
                        <i className="fas fa-edit me-2"/>
                         {t("Edit Workflow")}</button>
                     </td>
@@ -175,8 +180,8 @@ function BpmnTable() {
         process.length ?  <div className="d-flex justify-content-between align-items-center  flex-column flex-md-row">
         <div className="d-flex align-items-center">
           <span className="me-2"> {t("Rows per page")}</span>
-          <Dropdown size="sm">
-            <Dropdown.Toggle variant="light" id="dropdown-basic">
+          <Dropdown data-testid="processes-bpmn-pagination-dropdown" size="sm">
+            <Dropdown.Toggle data-testid="processes-bpmn-pagination-dropdown-limit" variant="light" id="dropdown-basic">
               {limit}
             </Dropdown.Toggle>
 
@@ -188,6 +193,7 @@ function BpmnTable() {
                   onClick={() => {
                     onLimitChange(option.value);
                   }}
+                  data-testid={`processes-bpmn-pagination-dropdown-limit-${index}`}
                 >
                   {option.text}
                 </Dropdown.Item>

diff --git a/forms-flow-web/src/components/Modeler/constants/dmnTable.js b/forms-flow-web/src/components/Modeler/constants/dmnTable.js
@@ -121,15 +121,17 @@ function DmnTable() {
                 placeholder={t("Search by DMN name")}
                 title={t("Search by DMN name")}
                 style={{ backgroundColor: "#ffff" }}
+                data-testid="processes-search-dmn-input-box"
               />
               {search && (
-                <InputGroup.Append onClick={onClearSearch}>
+                <InputGroup.Append data-testid="processes-search-dmn-clear-button" onClick={onClearSearch}>
                   <InputGroup.Text className="h-100">
                     <i className="fa fa-times"></i>
                   </InputGroup.Text>
                 </InputGroup.Append>
               )}
               <InputGroup.Append
+              data-testid="processes-search-dmn-click-button"
                 onClick={handleSearchButtonClick}
                 disabled={!search?.trim()}
                 style={{ cursor: "pointer" }}
@@ -162,7 +164,10 @@ function DmnTable() {
                     <td>{processItem.key}</td>
                     <td>{t("DMN")}</td>
                     <td className="d-flex justify-content-end w-100">
-                    <button className="btn btn-link" onClick={()=>{gotoEdit(processItem);}}> 
+                      <button
+                        data-testid={`processes-edit-dmn-${processItem.key}`}
+                        className="btn btn-link"
+                        onClick={() => { gotoEdit(processItem); }}> 
                        <i className="fas fa-edit me-2"/>
                         {t("Edit DMN")}</button>
                     </td>
@@ -177,8 +182,8 @@ function DmnTable() {
           <div className="d-flex justify-content-between align-items-center  flex-column flex-md-row">
             <div className="d-flex align-items-center">
               <span className="me-2"> {t("Rows per page")}</span>
-              <Dropdown>
-                <Dropdown.Toggle variant="light" id="dropdown-basic">
+              <Dropdown data-testid="processes-dmn-pagination-dropdown">
+                <Dropdown.Toggle data-testid="processes--dmn-pagination-dropdown-limit" variant="light" id="dropdown-basic">
                   {limit}
                 </Dropdown.Toggle>
 
@@ -190,6 +195,7 @@ function DmnTable() {
                       onClick={() => {
                         onLimitChange(option.value);
                       }}
+                      data-testid={`processes-dmn-pagination-dropdown-limit-${index}`}
                     >
                       {option.text}
                     </Dropdown.Item>