Add data-test-id

Issue-ID: SDC-1579
Change-Id: I4cc3976f391622c529fd9f34f33f0101c4d7b5a1
Signed-off-by: Malek <malek.zoabi@amdocs.com>

8 files changed, 45 insertions, 8 deletions

diff --git a/workflow-designer-ui/src/main/frontend/src/features/catalog/views/AddWorkflow.jsx b/workflow-designer-ui/src/main/frontend/src/features/catalog/views/AddWorkflow.jsx
index 1e39c174..74dfc32e 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/catalog/views/AddWorkflow.jsx
+++ b/workflow-designer-ui/src/main/frontend/src/features/catalog/views/AddWorkflow.jsx
@@ -23,7 +23,10 @@ class AddWorkflow extends React.Component {
     render() {
         const { onClick } = this.props;
         return (
-            <div className="add-workflow" onClick={onClick}>
+            <div
+                className="add-workflow"
+                data-test-id="wf-catalog-add-workflow"
+                onClick={onClick}>
                 <div className="add-workflow__icon">
                     <SVGIcon name="plusCircle" />
                 </div>
diff --git a/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Header.jsx b/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Header.jsx
index 93dfffe8..864a512c 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Header.jsx
+++ b/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Header.jsx
@@ -22,7 +22,11 @@ import SearchInput from 'shared/searchInput/SearchInput';
 const Header = ({ searchChange, searchValue }) => (
     <div className="header">
         <div className="header__search">
-            <SearchInput onChange={searchChange} value={searchValue} />
+            <SearchInput
+                dataTestId="wf-catalog-search"
+                onChange={searchChange}
+                value={searchValue}
+            />
         </div>
     </div>
 );
diff --git a/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Main.jsx b/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Main.jsx
index 5f60ebda..b363dd84 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Main.jsx
+++ b/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Main.jsx
@@ -42,6 +42,7 @@ class Main extends Component {
                         </div>
                         <div
                             className="main__header__order__alphabetical"
+                            data-test-id="wf-catalog-alphabetical-order"
                             onClick={onAlphabeticalOrderByClick}>
                             <div className="main__header__order__alphabetical__label">
                                 <Translate value="catalog.alphabeticalOrder" />
diff --git a/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Workflows.jsx b/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Workflows.jsx
index b120929a..83c226ff 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Workflows.jsx
+++ b/workflow-designer-ui/src/main/frontend/src/features/catalog/views/Workflows.jsx
@@ -23,6 +23,7 @@ const Workflows = ({ results, onWorkflowClick }) =>
     results.map((workflow, index) => (
         <Tile
             key={`workflow.${index}`}
+            dataTestId="wf-catalog-workflow-item"
             headerText="WF"
             headerColor="blue"
             iconName="workflow"
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/InputOutputView.jsx b/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/InputOutputView.jsx
index 8f779359..ef335f70 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/InputOutputView.jsx
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/InputOutputView.jsx
@@ -136,6 +136,7 @@ class InputOutputView extends React.Component {
                     data={data}
                     types={types}
                     nameErrorMessage={errorMessage}
+                    dataTestId="wf-input-output-row"
                     handleNameChange={this.handleNameChange(i)}
                     handleNameBlur={this.handleNameChange(i, true)}
                     handleTypeChange={this.handleTypeChange(i)}
@@ -163,22 +164,28 @@ class InputOutputView extends React.Component {
                 <div className="input-output__header">
                     <Tab
                         isActive={isShowInputs}
+                        dataTestId="wf-input-output-inputs"
                         handleTabClick={this.handleInputsTabClick}>
                         <Translate value="workflow.inputOutput.inputs" />
                     </Tab>
                     <Tab
                         isActive={!isShowInputs}
+                        dataTestId="wf-input-output-outputs"
                         handleTabClick={this.handleOutputsTabClick}>
                         <Translate value="workflow.inputOutput.outputs" />
                     </Tab>
                     <div className="input-output__header__right">
                         <div className="input-output__search">
                             <SearchInput
+                                dataTestId="wf-input-output-search"
                                 onChange={this.handleSearchChange}
                                 value={search}
                             />
                         </div>
-                        <div className="input-output__add" onClick={handleAdd}>
+                        <div
+                            className="input-output__add"
+                            data-test-id="wf-input-output-add"
+                            onClick={handleAdd}>
                             <SVGIcon
                                 label={addLabel}
                                 labelPosition="right"
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/DataRow.jsx b/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/DataRow.jsx
index 2e84b2f7..022038fc 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/DataRow.jsx
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/DataRow.jsx
@@ -23,6 +23,7 @@ const DataRow = ({
     data: { name, type, mandatory },
     types,
     nameErrorMessage,
+    dataTestId,
     handleNameChange,
     handleNameBlur,
     handleTypeChange,
@@ -33,6 +34,7 @@ const DataRow = ({
         <div className="input-output__td">
             <Input
                 errorMessage={nameErrorMessage}
+                data-test-id={`${dataTestId}-name`}
                 onChange={handleNameChange}
                 onBlur={handleNameBlur}
                 type="text"
@@ -43,6 +45,7 @@ const DataRow = ({
             <select
                 className="input-output-select"
                 value={type}
+                data-test-id={`${dataTestId}-select`}
                 onChange={handleTypeChange}>
                 {types.map((type, i) => (
                     <option key={`type.${i}`} value={type.toUpperCase()}>
@@ -54,12 +57,17 @@ const DataRow = ({
         <div className="input-output__td input-output__td--unflex">
             <Checkbox
                 value="myVal"
+                data-test-id={`${dataTestId}-mandatory`}
                 onChange={handleMandatoryChange}
                 checked={mandatory}
             />
         </div>
         <div className="input-output__td input-output__td--unflex input-output__td--icon">
-            <SVGIcon name="trashO" onClick={handleRemoveClick} />
+            <SVGIcon
+                name="trashO"
+                data-test-id={`${dataTestId}-delete`}
+                onClick={handleRemoveClick}
+            />
         </div>
     </div>
 );
@@ -68,6 +76,7 @@ DataRow.propTypes = {
     data: PropTypes.object,
     types: PropTypes.array,
     nameErrorMessage: PropTypes.string,
+    dataTestId: PropTypes.string,
     handleNameChange: PropTypes.func,
     handleNameBlur: PropTypes.func,
     handleTypeChange: PropTypes.func,
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/Tab.js b/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/Tab.js
index 4b983731..ad56dc15 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/Tab.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/views/Tab.js
@@ -18,13 +18,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 
-const Tab = ({ children, isActive, handleTabClick }) => {
+const Tab = ({ children, isActive, dataTestId, handleTabClick }) => {
     const className = cn('input-output__tab', {
         'input-output__tab--active': isActive
     });
 
     return (
-        <div className={className} onClick={handleTabClick}>
+        <div
+            className={className}
+            data-test-id={`${dataTestId}-tab`}
+            onClick={handleTabClick}>
             {children}
         </div>
     );
@@ -33,6 +36,7 @@ const Tab = ({ children, isActive, handleTabClick }) => {
 Tab.propTypes = {
     children: PropTypes.node,
     isActive: PropTypes.bool,
+    dataTestId: PropTypes.string,
     handleTabClick: PropTypes.func
 };
 
diff --git a/workflow-designer-ui/src/main/frontend/src/shared/searchInput/SearchInput.jsx b/workflow-designer-ui/src/main/frontend/src/shared/searchInput/SearchInput.jsx
index e0046926..24dbca43 100644
--- a/workflow-designer-ui/src/main/frontend/src/shared/searchInput/SearchInput.jsx
+++ b/workflow-designer-ui/src/main/frontend/src/shared/searchInput/SearchInput.jsx
@@ -20,6 +20,7 @@ import SVGIcon from 'sdc-ui/lib/react/SVGIcon';
 
 class ExpandableInput extends React.Component {
     static propTypes = {
+        dataTestId: PropTypes.string,
         onChange: PropTypes.func,
         value: PropTypes.string
     };
@@ -75,7 +76,7 @@ class ExpandableInput extends React.Component {
     };
 
     render() {
-        let { value } = this.props;
+        let { value, dataTestId } = this.props;
 
         const { showInput } = this.state;
 
@@ -85,6 +86,7 @@ class ExpandableInput extends React.Component {
                     <SVGIcon
                         className="search-input-wrapper closed"
                         name="search"
+                        data-test-id={dataTestId}
                         onClick={this.showInput}
                     />
                 </div>
@@ -100,6 +102,7 @@ class ExpandableInput extends React.Component {
                             value={value}
                             ref={this.handleRef}
                             className="input-control"
+                            data-test-id={`${dataTestId}-input-control`}
                             onChange={this.handleChange}
                             onKeyDown={this.handleKeyDown}
                             onBlur={this.handleBlur}
@@ -107,12 +110,17 @@ class ExpandableInput extends React.Component {
                     </div>
                     {value && (
                         <SVGIcon
+                            data-test-id={`${dataTestId}-close-search`}
                             onClick={() => this.handleClose()}
                             name="close"
                         />
                     )}
                     {!value && (
-                        <SVGIcon name="search" onClick={this.handleBlur} />
+                        <SVGIcon
+                            name="search"
+                            data-test-id={`${dataTestId}-blur-search`}
+                            onClick={this.handleBlur}
+                        />
                     )}
                 </div>
             </div>