[ML] Add tests to create transforms

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/agg_label_form.tsx

@@ -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/list_form.tsx

@@ -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]}

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/group_by_list/group_by_label_form.tsx

@@ -53,14 +53,20 @@ export const GroupByLabelForm: React.SFC<Props> = ({
   return (
     <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
       <EuiFlexItem className="transform__GroupByLabel--text">
-        <span className="eui-textTruncate">{item.aggName}</span>
+        <span className="eui-textTruncate" data-test-subj="transformGroupByEntryLabel">
+          {item.aggName}
+        </span>
       </EuiFlexItem>
       {interval !== undefined && (
         <EuiFlexItem
           grow={false}
           className="transform__GroupByLabel--text transform__GroupByLabel--interval"
         >
-          <EuiTextColor color="subdued" className="eui-textTruncate">
+          <EuiTextColor
+            color="subdued"
+            className="eui-textTruncate"
+            data-test-subj="transformGroupByEntryIntervalLabel"
+          >
             {interval}
           </EuiTextColor>
         </EuiFlexItem>
@@ -77,6 +83,7 @@ export const GroupByLabelForm: React.SFC<Props> = ({
               size="s"
               iconType="pencil"
               onClick={() => setPopoverVisibility(!isPopoverVisible)}
+              data-test-subj="transformGroupByEntryEditButton"
             />
           }
           isOpen={isPopoverVisible}
@@ -98,6 +105,7 @@ export const GroupByLabelForm: React.SFC<Props> = ({
           size="s"
           iconType="cross"
           onClick={() => deleteHandler(item.aggName)}
+          data-test-subj="transformGroupByEntryDeleteButton"
         />
       </EuiFlexItem>
     </EuiFlexGroup>

x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/group_by_list/list_form.tsx

@@ -33,11 +33,11 @@ export const GroupByListForm: React.SFC<ListProps> = ({
   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={`transformGroupByEntry ${i}`}>
               <GroupByLabelForm
                 deleteHandler={deleteHandler}
                 item={list[aggName]}

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

@@ -134,7 +134,7 @@ export const SourceIndexPreview: React.SFC<Props> = React.memo(({ cellClick, que
 
   if (status === SOURCE_INDEX_STATUS.ERROR) {
     return (
-      <EuiPanel grow={false}>
+      <EuiPanel grow={false} data-test-subj="transformSourceIndexPreview error">
         <SourceIndexPreviewTitle indexPatternTitle={indexPattern.title} />
         <EuiCallOut
           title={i18n.translate('xpack.transform.sourceIndexPreview.sourceIndexPatternError', {
@@ -153,7 +153,7 @@ export const SourceIndexPreview: React.SFC<Props> = React.memo(({ cellClick, que
 
   if (status === SOURCE_INDEX_STATUS.LOADED && tableItems.length === 0) {
     return (
-      <EuiPanel grow={false}>
+      <EuiPanel grow={false} data-test-subj="transformSourceIndexPreview empty">
         <SourceIndexPreviewTitle indexPatternTitle={indexPattern.title} />
         <EuiCallOut
           title={i18n.translate(
@@ -320,7 +320,7 @@ export const SourceIndexPreview: React.SFC<Props> = React.memo(({ cellClick, que
   });
 
   return (
-    <EuiPanel grow={false}>
+    <EuiPanel grow={false} data-test-subj="transformSourceIndexPreview loaded">
       <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
           <SourceIndexPreviewTitle indexPatternTitle={indexPattern.title} />