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>
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>
);
</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" />
results.map((workflow, index) => (
<Tile
key={`workflow.${index}`}
+ dataTestId="wf-catalog-workflow-item"
headerText="WF"
headerColor="blue"
iconName="workflow"
data={data}
types={types}
nameErrorMessage={errorMessage}
+ dataTestId="wf-input-output-row"
handleNameChange={this.handleNameChange(i)}
handleNameBlur={this.handleNameChange(i, true)}
handleTypeChange={this.handleTypeChange(i)}
<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"
data: { name, type, mandatory },
types,
nameErrorMessage,
+ dataTestId,
handleNameChange,
handleNameBlur,
handleTypeChange,
<div className="input-output__td">
<Input
errorMessage={nameErrorMessage}
+ data-test-id={`${dataTestId}-name`}
onChange={handleNameChange}
onBlur={handleNameBlur}
type="text"
<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()}>
<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>
);
data: PropTypes.object,
types: PropTypes.array,
nameErrorMessage: PropTypes.string,
+ dataTestId: PropTypes.string,
handleNameChange: PropTypes.func,
handleNameBlur: PropTypes.func,
handleTypeChange: PropTypes.func,
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>
);
Tab.propTypes = {
children: PropTypes.node,
isActive: PropTypes.bool,
+ dataTestId: PropTypes.string,
handleTabClick: PropTypes.func
};
class ExpandableInput extends React.Component {
static propTypes = {
+ dataTestId: PropTypes.string,
onChange: PropTypes.func,
value: PropTypes.string
};
};
render() {
- let { value } = this.props;
+ let { value, dataTestId } = this.props;
const { showInput } = this.state;
<SVGIcon
className="search-input-wrapper closed"
name="search"
+ data-test-id={dataTestId}
onClick={this.showInput}
/>
</div>
value={value}
ref={this.handleRef}
className="input-control"
+ data-test-id={`${dataTestId}-input-control`}
onChange={this.handleChange}
onKeyDown={this.handleKeyDown}
onBlur={this.handleBlur}
</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>