Merge pull request #1225 from GnsP/wrangler-testids

add testids in wrangler part-1
cdapio · Jul 10, 2024 · 682724b · 682724b
2 parents 2c9852f + fcf3070
commit 682724b
Show file tree

Hide file tree

Showing 23 changed files with 403 additions and 44 deletions.
diff --git a/app/cdap/components/DataPrep/AutoComplete/index.js b/app/cdap/components/DataPrep/AutoComplete/index.js
@@ -26,9 +26,12 @@ import classnames from 'classnames';
 import NamespaceStore from 'services/NamespaceStore';
 import ee from 'event-emitter';
 import globalEvents from 'services/global-events';
+import { getDataTestid } from '../../../testids/TestidsProvider';
 
 require('./AutoComplete.scss');
 
+const TESTID_PREFIX = 'features.dataprep.workspace.cli.autocomplete';
+
 export default class DataPrepAutoComplete extends Component {
   constructor(props) {
     super(props);
@@ -219,6 +222,7 @@ export default class DataPrepAutoComplete extends Component {
         className={classnames('dataprep-auto-complete-container', {
           'has-error': this.props.hasError,
         })}
+        data-testid={getDataTestid(`${TESTID_PREFIX}.container`)}
       >
         {this.state.activeResults.map((row, index) => {
           return (
@@ -228,14 +232,26 @@ export default class DataPrepAutoComplete extends Component {
               })}
               key={row.uniqueId}
               onClick={this.handleRowClick.bind(this, row)}
+              data-testid={getDataTestid(`${TESTID_PREFIX}.directive.name`, row.item.directive)}
             >
-              <div className="directive-title">
+              <div
+                className="directive-title"
+                data-testid={getDataTestid(`${TESTID_PREFIX}.directive.title`)}
+              >
                 <strong>{row.item.directive}</strong>
               </div>
-              <div className="directive-description">{row.item.description}</div>
+              <div
+                className="directive-description"
+                data-testid={getDataTestid(`${TESTID_PREFIX}.directive.description`)}
+              >
+                {row.item.description}
+              </div>
 
               {this.state.matchedmatched || this.state.activeResults.length === 1 ? (
-                <div className="directive-usage">
+                <div
+                  className="directive-usage"
+                  data-testid={getDataTestid(`${TESTID_PREFIX}.directive.usage`)}
+                >
                   <span>Usage: </span>
                   <pre>{row.item.usage}</pre>
                 </div>

diff --git a/app/cdap/components/DataPrep/ColumnActionsDropdown/index.js b/app/cdap/components/DataPrep/ColumnActionsDropdown/index.js
@@ -27,6 +27,7 @@ import isEqual from 'lodash/isEqual';
 import DataPrepStore from 'components/DataPrep/store';
 import ScrollableList from 'components/shared/ScrollableList';
 import { Theme } from 'services/ThemeHelper';
+import { getDataTestid } from '../../../testids/TestidsProvider';
 
 // Directives List
 import ParseDirective from 'components/DataPrep/Directives/Parse';
@@ -57,6 +58,7 @@ import MapToTargetDirective from 'components/DataPrep/Directives/MapToTarget';
 import ee from 'event-emitter';
 
 require('./ColumnActionsDropdown.scss');
+const TESTID_PREFIX = 'features.dataprep.workspace.dataTable.head.directivesDropdown';
 
 export default class ColumnActionsDropdown extends Component {
   constructor(props) {
@@ -86,6 +88,7 @@ export default class ColumnActionsDropdown extends Component {
         id: uuidV4(),
         tag: ParseDirective,
         requiredColCount: 1,
+        testid: 'parse-directive',
       },
       {
         tag: 'divider',
@@ -97,6 +100,7 @@ export default class ColumnActionsDropdown extends Component {
           id: uuidV4(),
           tag: MapToTargetDirective,
           requiredColCount: 1,
+          testid: 'map-to-target-directive',
         },
         {
           tag: 'divider',
@@ -108,11 +112,13 @@ export default class ColumnActionsDropdown extends Component {
         id: uuidV4(),
         tag: SetCharacterEncoding,
         requiredColCount: 1,
+        testid: 'set-character-encoding-directive',
       },
       {
         id: uuidV4(),
         tag: ChangeDataTypeDirective,
         requiredColCount: 1,
+        testid: 'change-data-type-directive',
       },
       {
         tag: 'divider',
@@ -121,16 +127,19 @@ export default class ColumnActionsDropdown extends Component {
         id: uuidV4(),
         tag: Format,
         requiredColCount: 1,
+        testid: 'format-directive',
       },
       {
         id: uuidV4(),
         tag: Calculate,
         requiredColCount: 0,
+        testid: 'calculate-directive',
       },
       {
         id: uuidV4(),
         tag: CustomTransform,
         requiredColCount: 1,
+        testid: 'custom-transform-directive',
       },
       {
         tag: 'divider',
@@ -139,21 +148,25 @@ export default class ColumnActionsDropdown extends Component {
         id: uuidV4(),
         tag: FilterDirective,
         requiredColCount: 1,
+        testid: 'filter-directive',
       },
       {
         id: uuidV4(),
         tag: MarkAsError,
         requiredColCount: 1,
+        testid: 'mark-as-error-directive',
       },
       {
         id: uuidV4(),
         tag: FindAndReplaceDirective,
         requiredColCount: 1,
+        testid: 'find-and-replace-directive',
       },
       {
         id: uuidV4(),
         tag: FillNullOrEmpty,
         requiredColCount: 1,
+        testid: 'fill-null-or-empty-directive',
       },
       {
         tag: 'divider',
@@ -162,26 +175,31 @@ export default class ColumnActionsDropdown extends Component {
         id: uuidV4(),
         tag: CopyColumnDirective,
         requiredColCount: 1,
+        testid: 'copy-column-directive',
       },
       {
         id: uuidV4(),
         tag: DropColumnDirective,
         requiredColCount: 0,
+        testid: 'drop-column-directive',
       },
       {
         id: uuidV4(),
         tag: KeepColumnDirective,
         requiredColCount: 0,
+        testid: 'keep-column-directive',
       },
       {
         id: uuidV4(),
         tag: MergeColumnsDirective,
         requiredColCount: 2,
+        testid: 'merge-column-directive',
       },
       {
         id: uuidV4(),
         tag: SwapColumnsDirective,
         requiredColCount: 2,
+        testid: 'swap-column-directive',
       },
       {
         tag: 'divider',
@@ -190,21 +208,25 @@ export default class ColumnActionsDropdown extends Component {
         id: uuidV4(),
         tag: ExtractFields,
         requiredColCount: 1,
+        testid: 'extract-fields-directive',
       },
       {
         id: uuidV4(),
         tag: Explode,
         requiredColCount: 0,
+        testid: 'explode-directive',
       },
       {
         id: uuidV4(),
         tag: DefineVariableDirective,
         requiredColCount: 1,
+        testid: 'define-variable-directive',
       },
       {
         id: uuidV4(),
         tag: SetCounterDirective,
         requiredColCount: 1,
+        testid: 'set-counter-directive',
       },
       {
         tag: 'divider',
@@ -213,21 +235,25 @@ export default class ColumnActionsDropdown extends Component {
         id: uuidV4(),
         tag: MaskData,
         requiredColCount: 1,
+        testid: 'mask-data-directive',
       },
       {
         id: uuidV4(),
         tag: EncodeDecode,
         requiredColCount: 1,
+        testid: 'encode-decode-directive',
       },
       {
         id: uuidV4(),
         tag: Decode,
         requiredColCount: 1,
+        testid: 'decode-directive',
       },
       {
         id: uuidV4(),
         tag: Hash,
         requiredColCount: 1,
+        testid: 'hash-directive',
       }
     );
     this.eventEmitter = ee(ee);
@@ -391,6 +417,7 @@ export default class ColumnActionsDropdown extends Component {
                   key={directive.id}
                   onClick={!disabled ? this.directiveClick.bind(this, directive.id) : undefined}
                   className={classnames({ disabled: disabled })}
+                  data-testid={getDataTestid(`${TESTID_PREFIX}.menu`, directive.testid)}
                 >
                   <Tag
                     column={column}
@@ -420,6 +447,7 @@ export default class ColumnActionsDropdown extends Component {
           onClick={this.toggleDropdown}
           id={`dataprep-action-${this.dropdownId}`}
           disabled={this.props.disabled}
+          data-testid={getDataTestid(`${TESTID_PREFIX}.toggleButton`)}
         />
         <UncontrolledTooltip
           target={`dataprep-action-${this.dropdownId}`}

diff --git a/app/cdap/components/DataPrep/DataPrepCLI/index.js b/app/cdap/components/DataPrep/DataPrepCLI/index.js
@@ -20,8 +20,11 @@ import DataPrepAutoComplete from 'components/DataPrep/AutoComplete';
 import { execute } from 'components/DataPrep/store/DataPrepActionCreator';
 import DataPrepStore from 'components/DataPrep/store';
 import DataPrepActions from 'components/DataPrep/store/DataPrepActions';
+import { getDataTestid } from '../../../testids/TestidsProvider';
 require('./DataPrepCLI.scss');
 
+const TESTID_PREFIX = 'features.dataprep.workspace.cli';
+
 export default class DataPrepCLI extends Component {
   static propTypes = {
     disabled: PropTypes.bool,
@@ -163,6 +166,7 @@ export default class DataPrepCLI extends Component {
               ref={(ref) => (this.directiveRef = ref)}
               onPaste={this.handlePaste}
               disabled={this.props.disabled}
+              data-testid={getDataTestid(`${TESTID_PREFIX}.input`)}
             />
           </div>
         </div>

diff --git a/app/cdap/components/DataPrep/DataPrepContentWrapper/index.js b/app/cdap/components/DataPrep/DataPrepContentWrapper/index.js
@@ -29,6 +29,7 @@ import LoadingSVGCentered from 'components/shared/LoadingSVGCentered';
 import DataPrepSidePanel from 'components/DataPrep/DataPrepSidePanel';
 import classnames from 'classnames';
 import T from 'i18n-react';
+import { getDataTestid } from '../../../testids/TestidsProvider';
 require('./DataPrepContentWrapper.scss');
 
 const DataPrepVisualization = Loadable({
@@ -39,6 +40,7 @@ const DataPrepVisualization = Loadable({
   loading: LoadingSVGCentered,
 });
 const PREFIX = 'features.DataPrep.TopPanel';
+const TESTID_PREFIX = 'features.dataprep.workspace.topPanel';
 const DEFAULTVIEW = 'data';
 const DEFAULTSTORESTATE = { view: DEFAULTVIEW };
 const view = (state = DEFAULTVIEW, action = defaultAction) => {
@@ -66,6 +68,7 @@ function ContentSwitch({ onSwitchChange, activeTab }) {
           active: activeTab === 'data',
         })}
         onClick={onSwitchChange.bind(null, 'data')}
+        data-testid={getDataTestid(`${TESTID_PREFIX}.tabs.data`)}
       >
         {T.translate(`${PREFIX}.Tabs.dataprep`)}
       </div>
@@ -74,6 +77,7 @@ function ContentSwitch({ onSwitchChange, activeTab }) {
           active: activeTab === 'viz',
         })}
         onClick={onSwitchChange.bind(null, 'viz')}
+        data-testid={getDataTestid(`${TESTID_PREFIX}.tabs.viz`)}
       >
         {T.translate(`${PREFIX}.Tabs.dataviz`)}
       </div>

diff --git a/app/cdap/components/DataPrep/DataPrepSidePanel/ColumnsTab/ColumnsTabDetail.js b/app/cdap/components/DataPrep/DataPrepSidePanel/ColumnsTab/ColumnsTabDetail.js
@@ -18,8 +18,11 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import T from 'i18n-react';
+import { getDataTestid } from '../../../../testids/TestidsProvider';
 
 const PREFIX = 'features.DataPrep.DataPrepSidePanel.ColumnsTab.ColumnDetail';
+const TESTID_PREFIX = 'features.dataprep.workspace.columnsPanel.list.column';
+
 export default function ColumnsTabDetail({ columnInfo }) {
   let { types } = columnInfo;
   if (!types) {
@@ -29,7 +32,10 @@ export default function ColumnsTabDetail({ columnInfo }) {
   return (
     <tr className="column-tab-details">
       <td colSpan="6">
-        <table className="table statistics-table">
+        <table
+          className="table statistics-table"
+          data-testid={getDataTestid(`${TESTID_PREFIX}.details`)}
+        >
           <thead>
             <tr>
               <th>{T.translate(`${PREFIX}.Header.inferredType`)}</th>

diff --git a/app/cdap/components/DataPrep/DataPrepSidePanel/ColumnsTab/ColumnsTabRow.js b/app/cdap/components/DataPrep/DataPrepSidePanel/ColumnsTab/ColumnsTabRow.js
@@ -21,6 +21,9 @@ import { preventPropagation } from 'services/helpers';
 import isEqual from 'lodash/isEqual';
 import classnames from 'classnames';
 import { CSSTransition } from 'react-transition-group';
+import { getDataTestid } from '../../../../testids/TestidsProvider';
+
+const TESTID_PREFIX = 'features.dataprep.workspace.columnsPanel.list.column';
 
 class ColumnsTabRow extends Component {
   constructor(props) {
@@ -78,6 +81,7 @@ class ColumnsTabRow extends Component {
           })}
           onClick={this.props.onShowDetails}
           ref={this.props.innerRef}
+          data-testid={getDataTestid(`${TESTID_PREFIX}.listRow`, this.props.columnName)}
         >
           <td />
           <td>
@@ -87,12 +91,15 @@ class ColumnsTabRow extends Component {
                 'fa-square-o': !this.state.selected,
                 'fa-check-square': this.state.selected,
               })}
+              data-testid={getDataTestid(`${TESTID_PREFIX}.selectToggle`)}
             />
           </td>
           <td>
             <span>{this.props.index + 1}</span>
           </td>
-          <td className="column-name">{this.props.columnName}</td>
+          <td className="column-name" data-testid={getDataTestid(`${TESTID_PREFIX}.name`)}>
+            {this.props.columnName}
+          </td>
           <td className="text-right non-null">
             <span>{`${nonNull}%`}</span>
           </td>