[7.5] [ML] Add tests to create transforms (#49760) (#52080)

* [ML] Add tests to create transforms (#49760)

* Apply #51066 to backport

* Adjust eui switch handling for 7.5

Author: pheyos

x-pack/legacy/plugins/ml/public/components/kql_filter_bar/filter_bar/filter_bar.js

@@ -178,6 +178,7 @@ export class FilterBar extends Component {
             onClick={this.onClickInput}
             autoComplete="off"
             spellCheck={false}
+            data-test-subj={this.props.testSubj}
           />
 
           {this.props.isLoading && (
@@ -213,12 +214,14 @@ FilterBar.propTypes = {
   placeholder: PropTypes.string,
   onSubmit: PropTypes.func.isRequired,
   valueExternal: PropTypes.string,
-  suggestions: PropTypes.array.isRequired
+  suggestions: PropTypes.array.isRequired,
+  testSubj: PropTypes.string,
 };
 
 FilterBar.defaultProps = {
   isLoading: false,
   disabled: false,
   placeholder: 'tag : engineering OR tag : marketing',
-  suggestions: []
+  suggestions: [],
+  testSubj: undefined,
 };

x-pack/legacy/plugins/ml/public/components/kql_filter_bar/kql_filter_bar.js

@@ -90,7 +90,7 @@ export class KqlFilterBar extends Component {
 
   render() {
     const { error } = this.state;
-    const { initialValue, placeholder, valueExternal } = this.props;
+    const { initialValue, placeholder, valueExternal, testSubj } = this.props;
 
     return (
       <Fragment>
@@ -103,6 +103,7 @@ export class KqlFilterBar extends Component {
           onSubmit={this.onSubmit}
           suggestions={this.state.suggestions}
           valueExternal={valueExternal}
+          testSubj={testSubj}
         />
         { error &&
           <EuiCallOut color="danger">
@@ -118,6 +119,7 @@ KqlFilterBar.propTypes = {
   initialValue: PropTypes.string,
   onSubmit: PropTypes.func.isRequired,
   placeholder: PropTypes.string,
-  valueExternal: PropTypes.string
+  valueExternal: PropTypes.string,
+  testSubj: PropTypes.string,
 };
 

x-pack/legacy/plugins/ml/public/components/ml_in_memory_table/types.ts

@@ -31,6 +31,7 @@ export interface FieldDataColumnType {
   render?: RenderFunc;
   footer?: string | ReactElement | FooterFunc;
   textOnly?: boolean;
+  'data-test-subj'?: string;
 }
 
 export interface ComputedColumnType {
@@ -40,6 +41,7 @@ export interface ComputedColumnType {
   sortable?: (item: Item) => any;
   width?: string;
   truncateText?: boolean;
+  'data-test-subj'?: string;
 }
 
 type ICON_TYPES = any;
@@ -183,7 +185,7 @@ export type EuiInMemoryTableProps = CommonProps & {
   selection?: SelectionType;
   itemId?: ItemIdType;
   itemIdToExpandedRowMap?: Record<string, Item>;
-  rowProps?: () => void | Record<string, any>;
+  rowProps?: (item: Item) => void | Record<string, any>;
   cellProps?: () => void | Record<string, any>;
   onTableChange?: (arg: OnTableChangeArg) => void;
 };

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/aggregation_dropdown/dropdown.tsx

@@ -12,12 +12,14 @@ interface Props {
   options: EuiComboBoxOptionProps[];
   placeholder?: string;
   changeHandler(d: EuiComboBoxOptionProps[]): void;
+  testSubj?: string;
 }
 
 export const DropDown: React.SFC<Props> = ({
   changeHandler,
   options,
   placeholder = 'Search ...',
+  testSubj,
 }) => {
   return (
     <EuiComboBox
@@ -27,6 +29,7 @@ export const DropDown: React.SFC<Props> = ({
       selectedOptions={[]}
       onChange={changeHandler}
       isClearable={false}
+      data-test-subj={testSubj}
     />
   );
 };

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/aggregation_list/__snapshots__/agg_label_form.test.tsx.snap

@@ -39,7 +39,9 @@ export const AggLabelForm: React.SFC<Props> = ({
   return (
     <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
       <EuiFlexItem className="transform__AggregationLabel--text">
-        <span className="eui-textTruncate">{item.aggName}</span>
+        <span className="eui-textTruncate" data-test-subj="transformAggregationEntryLabel">
+          {item.aggName}
+        </span>
       </EuiFlexItem>
       <EuiFlexItem grow={false} className="transform__GroupByLabel--button">
         <EuiPopover
@@ -53,6 +55,7 @@ export const AggLabelForm: React.SFC<Props> = ({
               size="s"
               iconType="pencil"
               onClick={() => setPopoverVisibility(!isPopoverVisible)}
+              data-test-subj="transformAggregationEntryEditButton"
             />
           }
           isOpen={isPopoverVisible}
@@ -74,6 +77,7 @@ export const AggLabelForm: React.SFC<Props> = ({
           size="s"
           iconType="cross"
           onClick={() => deleteHandler(item.aggName)}
+          data-test-subj="transformAggregationEntryDeleteButton"
         />
       </EuiFlexItem>
     </EuiFlexGroup>

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/aggregation_list/__snapshots__/list_form.test.tsx.snap

@@ -33,11 +33,11 @@ export const AggListForm: React.SFC<AggListProps> = ({
   const listKeys = Object.keys(list);
   return (
     <Fragment>
-      {listKeys.map((aggName: AggName) => {
+      {listKeys.map((aggName: AggName, i) => {
         const otherAggNames = listKeys.filter(k => k !== aggName);
         return (
           <Fragment key={aggName}>
-            <EuiPanel paddingSize="s">
+            <EuiPanel paddingSize="s" data-test-subj={`transformAggregationEntry ${i}`}>
               <AggLabelForm
                 deleteHandler={deleteHandler}
                 item={list[aggName]}