[ML] Advanced wizard functional UI tests (#49480)

This PR adds tests for the ML advanced wizard.
elastic · Oct 29, 2019 · 75384e1 · 75384e1
1 parent 80d17b7
commit 75384e1
Show file tree

Hide file tree

Showing 23 changed files with 1,483 additions and 102 deletions.
diff --git a/.../plugins/ml/public/jobs/jobs_list/components/start_datafeed_modal/start_datafeed_modal.js b/.../plugins/ml/public/jobs/jobs_list/components/start_datafeed_modal/start_datafeed_modal.js
@@ -136,6 +136,7 @@ export class StartDatafeedModal extends Component {
             onClose={this.closeModal}
             style={{ width: '850px' }}
             maxWidth={false}
+            data-test-subj="mlStartDatafeedModal"
           >
             <EuiModalHeader>
               <EuiModalHeaderTitle>
@@ -178,6 +179,7 @@ export class StartDatafeedModal extends Component {
             <EuiModalFooter>
               <EuiButtonEmpty
                 onClick={this.closeModal}
+                data-test-subj="mlStartDatafeedModalCancelButton"
               >
                 <FormattedMessage
                   id="xpack.ml.jobsList.startDatafeedModal.cancelButtonLabel"
@@ -189,6 +191,7 @@ export class StartDatafeedModal extends Component {
                 onClick={this.save}
                 isDisabled={startDisabled}
                 fill
+                data-test-subj="mlStartDatafeedModalStartButton"
               >
                 <FormattedMessage
                   id="xpack.ml.jobsList.startDatafeedModal.startButtonLabel"

diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/datafeed_step/datafeed.tsx b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/datafeed_step/datafeed.tsx
@@ -37,7 +37,7 @@ export const DatafeedStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep }) =
       {isCurrentStep && (
         <Fragment>
           <EuiFlexGroup gutterSize="xl">
-            <EuiFlexItem>
+            <EuiFlexItem data-test-subj="mlAdvancedDatafeedQueryEditor">
               <QueryInput setIsValidQuery={setIsValidQuery} />
             </EuiFlexItem>
             <EuiFlexItem>

diff --git a/...omponents/pick_fields_step/components/advanced_detector_modal/advanced_detector_modal.tsx b/...omponents/pick_fields_step/components/advanced_detector_modal/advanced_detector_modal.tsx
@@ -213,7 +213,7 @@ export const AdvancedDetectorModal: FC<Props> = ({
     <ModalWrapper onCreateClick={onCreateClick} closeModal={closeModal} saveEnabled={saveEnabled()}>
       <Fragment>
         <EuiFlexGroup>
-          <EuiFlexItem>
+          <EuiFlexItem data-test-subj="mlAdvancedFunctionSelect">
             <AggDescription>
               <EuiComboBox
                 singleSelection={{ asPlainText: true }}
@@ -224,7 +224,7 @@ export const AdvancedDetectorModal: FC<Props> = ({
               />
             </AggDescription>
           </EuiFlexItem>
-          <EuiFlexItem>
+          <EuiFlexItem data-test-subj="mlAdvancedFieldSelect">
             <FieldDescription>
               <EuiComboBox
                 singleSelection={{ asPlainText: true }}
@@ -239,7 +239,7 @@ export const AdvancedDetectorModal: FC<Props> = ({
         </EuiFlexGroup>
         <EuiHorizontalRule margin="l" />
         <EuiFlexGrid columns={2}>
-          <EuiFlexItem>
+          <EuiFlexItem data-test-subj="mlAdvancedByFieldSelect">
             <ByFieldDescription>
               <EuiComboBox
                 singleSelection={{ asPlainText: true }}
@@ -251,7 +251,7 @@ export const AdvancedDetectorModal: FC<Props> = ({
               />
             </ByFieldDescription>
           </EuiFlexItem>
-          <EuiFlexItem>
+          <EuiFlexItem data-test-subj="mlAdvancedOverFieldSelect">
             <OverFieldDescription>
               <EuiComboBox
                 singleSelection={{ asPlainText: true }}
@@ -263,7 +263,7 @@ export const AdvancedDetectorModal: FC<Props> = ({
               />
             </OverFieldDescription>
           </EuiFlexItem>
-          <EuiFlexItem>
+          <EuiFlexItem data-test-subj="mlAdvancedPartitionFieldSelect">
             <PartitionFieldDescription>
               <EuiComboBox
                 singleSelection={{ asPlainText: true }}
@@ -275,7 +275,7 @@ export const AdvancedDetectorModal: FC<Props> = ({
               />
             </PartitionFieldDescription>
           </EuiFlexItem>
-          <EuiFlexItem>
+          <EuiFlexItem data-test-subj="mlAdvancedExcludeFrequentSelect">
             <ExcludeFrequentDescription>
               <EuiComboBox
                 singleSelection={{ asPlainText: true }}
@@ -301,6 +301,7 @@ export const AdvancedDetectorModal: FC<Props> = ({
                 placeholder={descriptionPlaceholder}
                 value={descriptionOption}
                 onChange={e => setDescriptionOption(e.target.value)}
+                data-test-subj="mlAdvancedDetectorDescriptionInput"
               />
             </DescriptionDescription>
           </EuiFlexItem>

diff --git a/...ew/pages/components/pick_fields_step/components/advanced_detector_modal/modal_wrapper.tsx b/...ew/pages/components/pick_fields_step/components/advanced_detector_modal/modal_wrapper.tsx
@@ -28,7 +28,11 @@ interface Props {
 export const ModalWrapper: FC<Props> = ({ onCreateClick, closeModal, saveEnabled, children }) => {
   return (
     <EuiOverlayMask>
-      <EuiModal onClose={closeModal} maxWidth={MAX_MODAL_WIDTH}>
+      <EuiModal
+        onClose={closeModal}
+        maxWidth={MAX_MODAL_WIDTH}
+        data-test-subj="mlCreateDetectorModal"
+      >
         <EuiModalHeader>
           <EuiModalHeaderTitle>
             <FormattedMessage
@@ -41,14 +45,19 @@ export const ModalWrapper: FC<Props> = ({ onCreateClick, closeModal, saveEnabled
         <EuiModalBody>{children}</EuiModalBody>
 
         <EuiModalFooter>
-          <EuiButtonEmpty onClick={closeModal}>
+          <EuiButtonEmpty onClick={closeModal} data-test-subj="mlCreateDetectorModalCancelButton">
             <FormattedMessage
               id="xpack.ml.newJob.wizard.pickFieldsStep.advancedDetectorModal.cancelButton"
               defaultMessage="Cancel"
             />
           </EuiButtonEmpty>
 
-          <EuiButton onClick={onCreateClick} isDisabled={saveEnabled === false} fill>
+          <EuiButton
+            onClick={onCreateClick}
+            isDisabled={saveEnabled === false}
+            fill
+            data-test-subj="mlCreateDetectorModalSaveButton"
+          >
             <FormattedMessage
               id="xpack.ml.newJob.wizard.pickFieldsStep.advancedDetectorModal.saveButton"
               defaultMessage="Save"

diff --git a/.../new_job_new/pages/components/pick_fields_step/components/advanced_view/detector_list.tsx b/.../new_job_new/pages/components/pick_fields_step/components/advanced_view/detector_list.tsx
@@ -25,6 +25,7 @@ import { JobCreatorContext } from '../../../job_creator_context';
 import { AdvancedJobCreator } from '../../../../../common/job_creator';
 import { Validation } from '../../../../../common/job_validator';
 import { detectorToString } from '../../../../../../../util/string_utils';
+import { Detector } from '../../../../../common/job_creator/configs';
 
 interface Props {
   isActive: boolean;
@@ -62,6 +63,7 @@ export const DetectorList: FC<Props> = ({ isActive, onEditJob, onDeleteJob }) =>
                 defaultMessage: 'Edit',
               }
             )}
+            data-test-subj="mlAdvancedDetectorEditButton"
           />
         </EuiFlexItem>
         <EuiFlexItem>
@@ -75,6 +77,7 @@ export const DetectorList: FC<Props> = ({ isActive, onEditJob, onDeleteJob }) =>
                 defaultMessage: 'Delete',
               }
             )}
+            data-test-subj="mlAdvancedDetectorDeleteButton"
           />
         </EuiFlexItem>
       </EuiFlexGroup>
@@ -98,14 +101,16 @@ export const DetectorList: FC<Props> = ({ isActive, onEditJob, onDeleteJob }) =>
 
       <EuiFlexGrid columns={3}>
         {detectors.map((d, i) => (
-          <EuiFlexItem key={i}>
+          <EuiFlexItem key={i} data-test-subj={`mlAdvancedDetector ${i}`}>
             <EuiPanel paddingSize="m">
               <EuiFlexGroup>
                 <EuiFlexItem>
                   {d.detector_description !== undefined ? (
-                    <div style={{ fontWeight: 'bold' }}>{d.detector_description}</div>
+                    <div style={{ fontWeight: 'bold' }} data-test-subj="mlDetectorDescription">
+                      {d.detector_description}
+                    </div>
                   ) : (
-                    detectorToString(d)
+                    <StringifiedDetector detector={d} />
                   )}
                 </EuiFlexItem>
                 {isActive && (
@@ -117,7 +122,7 @@ export const DetectorList: FC<Props> = ({ isActive, onEditJob, onDeleteJob }) =>
               {d.detector_description !== undefined && (
                 <Fragment>
                   <EuiHorizontalRule margin="s" />
-                  {detectorToString(d)}
+                  <StringifiedDetector detector={d} />
                 </Fragment>
               )}
             </EuiPanel>
@@ -142,6 +147,7 @@ const NoDetectorsWarning: FC<{ show: boolean }> = ({ show }) => {
           defaultMessage: 'No detectors',
         })}
         iconType="alert"
+        data-test-subj="mlAdvancedNoDetectorsMessage"
       >
         <FormattedMessage
           id="xpack.ml.newJob.wizard.pickFieldsStep.noDetectorsCallout.message"
@@ -166,3 +172,7 @@ const DuplicateDetectorsWarning: FC<{ validation: Validation }> = ({ validation
     </Fragment>
   );
 };
+
+const StringifiedDetector: FC<{ detector: Detector }> = ({ detector }) => {
+  return <div data-test-subj="mlDetectorIdentifier">{detectorToString(detector)}</div>;
+};
diff --git a/...ew_job_new/pages/components/pick_fields_step/components/advanced_view/metric_selector.tsx b/...ew_job_new/pages/components/pick_fields_step/components/advanced_view/metric_selector.tsx
@@ -35,7 +35,7 @@ export const MetricSelector: FC<Props> = ({
       <EuiFlexGroup style={{ maxWidth: MAX_WIDTH }}>
         <EuiFlexItem>
           <EuiFormRow>
-            <EuiButton onClick={showModal}>
+            <EuiButton onClick={showModal} data-test-subj="mlAddDetectorButton">
               <FormattedMessage
                 id="xpack.ml.newJob.wizard.pickFieldsStep.addDetectorButton"
                 defaultMessage="Add detector"