[ML] Add single metric job wizard test (#42709)

This PR adds functional UI tests to create a machine learning job using the single metric wizard.

x-pack/legacy/plugins/ml/public/components/full_time_range_selector/full_time_range_selector.tsx

@@ -30,7 +30,12 @@ export const FullTimeRangeSelector: FC<Props> = ({ indexPattern, query, disabled
     }
   }
   return (
-    <EuiButton fill isDisabled={disabled} onClick={() => setRange(indexPattern, query)}>
+    <EuiButton
+      fill
+      isDisabled={disabled}
+      onClick={() => setRange(indexPattern, query)}
+      data-test-subj="mlButtonUseFullData"
+    >
       <FormattedMessage
         id="xpack.ml.fullTimeRangeSelector.useFullDataButtonLabel"
         defaultMessage="Use full {indexPatternTitle} data"

x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/index_or_search/index_or_search.html

@@ -2,7 +2,7 @@
 <ml-new-job class="index-or-saved-search-selection">
   <ml-message-bar></ml-message-bar>
   <div class='kuiViewContent kuiViewContent--constrainedWidth kuiViewContentItem' >
-    <div ng-controller="MlNewJobStepIndexOrSearch" class="visWizard">
+    <div ng-controller="MlNewJobStepIndexOrSearch" class="visWizard" data-test-subj="mlPageSourceSelection">
       <div class="visWizard__column visWizard__column--small">
         <h3
           class="kuiTitle kuiVerticalRhythm"

x-pack/legacy/plugins/ml/public/jobs/new_job/wizard/steps/job_type/job_type.html

@@ -1,7 +1,7 @@
 <ml-nav-menu name="new_job" />
 <ml-new-job class="job-type-gallery">
   <ml-message-bar></ml-message-bar>
-  <div ng-controller="MlNewJobStepJobType">
+  <div ng-controller="MlNewJobStepJobType" data-test-subj="mlPageJobTypeSelection">
     <!-- Presents the various options for creating a job -->
     <div class="job-types-content">
       <h1
@@ -214,7 +214,7 @@
           </a>
         </div>
         <div class="euiFlexItem" ng-class='{disabled: isTimeBasedIndex===false}'>
-          <a ng-href="{{getUrl('#jobs/new_job/new_new_job/single_metric')}}" ng-class='{disabled: isTimeBasedIndex===false}' class="euiLink synopsis">
+          <a ng-href="{{getUrl('#jobs/new_job/new_new_job/single_metric')}}" ng-class='{disabled: isTimeBasedIndex===false}' class="euiLink synopsis" data-test-subj="mlJobTypeLinkSingleMetricJob">
             <div class="euiPanel euiPanel--paddingMedium synopsisPanel">
               <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive">
                 <div class="euiFlexItem euiFlexItem--flexGrowZero">
@@ -246,7 +246,7 @@
           </a>
         </div>
         <div class="euiFlexItem" ng-class='{disabled: isTimeBasedIndex===false}'>
-          <a ng-href="{{getUrl('#jobs/new_job/new_new_job/multi_metric')}}" ng-class='{disabled: isTimeBasedIndex===false}' class="euiLink synopsis">
+          <a ng-href="{{getUrl('#jobs/new_job/new_new_job/multi_metric')}}" ng-class='{disabled: isTimeBasedIndex===false}' class="euiLink synopsis" data-test-subj="mlJobTypeLinkMultiMetricJob">
             <div class="euiPanel euiPanel--paddingMedium synopsisPanel">
               <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive">
                 <div class="euiFlexItem euiFlexItem--flexGrowZero">
@@ -278,7 +278,7 @@
           </a>
         </div>
         <div class="euiFlexItem" ng-class='{disabled: isTimeBasedIndex===false}'>
-          <a ng-href="{{getUrl('#jobs/new_job/new_new_job/population')}}" ng-class='{disabled: isTimeBasedIndex===false}' class="euiLink synopsis">
+          <a ng-href="{{getUrl('#jobs/new_job/new_new_job/population')}}" ng-class='{disabled: isTimeBasedIndex===false}' class="euiLink synopsis" data-test-subj="mlJobTypeLinkPopulationJob">
             <div class="euiPanel euiPanel--paddingMedium synopsisPanel">
               <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive">
                 <div class="euiFlexItem euiFlexItem--flexGrowZero">

x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/charts/anomaly_chart/anomaly_chart.tsx

@@ -44,7 +44,7 @@ export const AnomalyChart: FC<Props> = ({
 
   const xDomain = getXRange(data);
   return (
-    <div style={{ width, height }}>
+    <div style={{ width, height }} data-test-subj="mlAnomalyChart">
       <Chart>
         <Settings xDomain={xDomain} tooltip={TooltipType.None} />
         <Axes chartData={data} />

x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/charts/event_rate_chart/event_rate_chart.tsx

@@ -22,7 +22,7 @@ const SPEC_ID = 'event_rate';
 
 export const EventRateChart: FC<Props> = ({ eventRateChartData, height, width, showAxis }) => {
   return (
-    <div style={{ width, height }}>
+    <div style={{ width, height }} data-test-subj="mlEventRateChart">
       <Chart>
         {showAxis === true && <Axes />}
 

x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/job_details_step/components/advanced_section/advanced_section.tsx

@@ -24,9 +24,14 @@ export const AdvancedSection: FC<Props> = ({ advancedExpanded, setAdvancedExpand
       buttonContent={ButtonContent}
       onToggle={setAdvancedExpanded}
       initialIsOpen={advancedExpanded}
+      data-test-subj="mlJobWizardToggleAdvancedSection"
     >
       <EuiSpacer />
-      <EuiFlexGroup gutterSize="xl" style={{ marginLeft: '0px', marginRight: '0px' }}>
+      <EuiFlexGroup
+        gutterSize="xl"
+        style={{ marginLeft: '0px', marginRight: '0px' }}
+        data-test-subj="mlJobWizardAdvancedSection"
+      >
         <EuiFlexItem>
           <ModelPlotSwitch />
           <ModelMemoryLimitInput />

x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/job_details_step/components/advanced_section/components/dedicated_index/dedicated_index_switch.tsx

@@ -24,7 +24,12 @@ export const DedicatedIndexSwitch: FC = () => {
 
   return (
     <Description>
-      <EuiSwitch name="switch" checked={useDedicatedIndex} onChange={toggleModelPlot} />
+      <EuiSwitch
+        name="switch"
+        checked={useDedicatedIndex}
+        onChange={toggleModelPlot}
+        data-test-subj="mlJobWizardSwitchUseDedicatedIndex"
+      />
     </Description>
   );
 };

x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/job_details_step/components/advanced_section/components/model_memory_limit/model_memory_limit_input.tsx

@@ -33,6 +33,7 @@ export const ModelMemoryLimitInput: FC = () => {
         value={modelMemoryLimit}
         onChange={e => setModelMemoryLimit(e.target.value)}
         isInvalid={validation.valid === false}
+        data-test-subj="mlJobWizardInputModelMemoryLimit"
       />
     </Description>
   );

x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/job_details_step/components/advanced_section/components/model_plot/model_plot_switch.tsx

@@ -24,7 +24,12 @@ export const ModelPlotSwitch: FC = () => {
 
   return (
     <Description>
-      <EuiSwitch name="switch" checked={modelPlotEnabled} onChange={toggleModelPlot} />
+      <EuiSwitch
+        name="switch"
+        checked={modelPlotEnabled}
+        onChange={toggleModelPlot}
+        data-test-subj="mlJobWizardSwitchModelPlot"
+      />
     </Description>
   );
 };

x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/job_details_step/components/groups/groups_input.tsx

@@ -77,6 +77,7 @@ export const GroupsInput: FC = () => {
         onCreateOption={onCreateGroup}
         isClearable={true}
         isInvalid={validation.valid === false}
+        data-test-subj="mlJobWizardComboBoxJobGroups"
       />
     </Description>
   );

x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/job_details_step/components/job_description/job_description_input.tsx

@@ -24,6 +24,7 @@ export const JobDescriptionInput: FC = () => {
         placeholder="Job description"
         value={jobDescription}
         onChange={e => setJobDescription(e.target.value)}
+        data-test-subj="mlJobWizardInputJobDescription"
       />
     </Description>
   );

x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/job_details_step/components/job_id/job_id_input.tsx

@@ -36,6 +36,7 @@ export const JobIdInput: FC = () => {
         value={jobId}
         onChange={e => setJobId(e.target.value)}
         isInvalid={validation.valid === false}
+        data-test-subj="mlJobWizardInputJobId"
       />
     </Description>
   );

x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/agg_select/agg_select.tsx

@@ -64,7 +64,11 @@ export const AggSelect: FC<Props> = ({ fields, changeHandler, selectedOptions, r
   }, [jobValidatorUpdated]);
 
   return (
-    <EuiFormRow error={validation.message} isInvalid={validation.valid === false}>
+    <EuiFormRow
+      error={validation.message}
+      isInvalid={validation.valid === false}
+      data-test-subj="mlJobWizardAggSelection"
+    >
       <EuiComboBox
         singleSelection={{ asPlainText: true }}
         options={options}

x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/bucket_span/bucket_span_input.tsx

@@ -20,6 +20,7 @@ export const BucketSpanInput: FC<Props> = ({ bucketSpan, setBucketSpan, isInvali
       value={bucketSpan}
       onChange={e => setBucketSpan(e.target.value)}
       isInvalid={isInvalid}
+      data-test-subj="mlJobWizardInputBucketSpan"
     />
   );
 };

x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/summary_step/summary.tsx

@@ -77,11 +77,21 @@ export const SummaryStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep }) =>
           <EuiHorizontalRule />
           {progress < 100 && (
             <Fragment>
-              <EuiButton onClick={start} isDisabled={progress > 0} disabled={isValid === false}>
+              <EuiButton
+                onClick={start}
+                isDisabled={progress > 0}
+                disabled={isValid === false}
+                data-test-subj="mlJobWizardButtonCreateJob"
+              >
                 Create job
               </EuiButton>
               &emsp;
-              <EuiButtonEmpty size="s" onClick={toggleJsonFlyout} isDisabled={progress > 0}>
+              <EuiButtonEmpty
+                size="s"
+                onClick={toggleJsonFlyout}
+                isDisabled={progress > 0}
+                data-test-subj="mlJobWizardButtonPreviewJobJson"
+              >
                 Preview job JSON
               </EuiButtonEmpty>
               {showJsonFlyout && (
@@ -92,7 +102,9 @@ export const SummaryStep: FC<StepProps> = ({ setCurrentStep, isCurrentStep }) =>
           )}
           {progress > 0 && (
             <Fragment>
-              <EuiButton onClick={viewResults}>View results</EuiButton>
+              <EuiButton onClick={viewResults} data-test-subj="mlJobWizardButtonViewResults">
+                View results
+              </EuiButton>
             </Fragment>
           )}
         </Fragment>

x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/wizard_nav/wizard_nav.tsx

@@ -27,7 +27,13 @@ export const WizardNav: FC<StepsNavProps> = ({
     <EuiFlexItem />
     {previous && (
       <EuiFlexItem grow={false}>
-        <EuiButton disabled={!previousActive} onClick={previous} iconType="arrowLeft" size="s">
+        <EuiButton
+          disabled={!previousActive}
+          onClick={previous}
+          iconType="arrowLeft"
+          size="s"
+          data-test-subj="mlJobWizardNavButtonPrevious"
+        >
           {i18n.translate('xpack.ml.newJob.wizard.previousStepButton', {
             defaultMessage: 'Previous',
           })}
@@ -36,7 +42,13 @@ export const WizardNav: FC<StepsNavProps> = ({
     )}
     {next && (
       <EuiFlexItem grow={false}>
-        <EuiButton disabled={!nextActive} onClick={next} iconType="arrowRight" size="s">
+        <EuiButton
+          disabled={!nextActive}
+          onClick={next}
+          iconType="arrowRight"
+          size="s"
+          data-test-subj="mlJobWizardNavButtonNext"
+        >
           {i18n.translate('xpack.ml.newJob.wizard.nextStepButton', {
             defaultMessage: 'Next',
           })}

x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/new_job/page.tsx

@@ -95,7 +95,7 @@ export const Page: FC<PageProps> = ({ existingJobsAndGroups, jobType }) => {
 
   return (
     <Fragment>
-      <EuiPage style={{ backgroundColor: '#FFF' }}>
+      <EuiPage style={{ backgroundColor: '#FFF' }} data-test-subj="mlPageJobWizard">
         <EuiPageBody>
           <EuiPageContentBody>
             <Wizard

x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/new_job/wizard.tsx

@@ -176,7 +176,7 @@ export const Wizard: FC<Props> = ({
 
       {currentStep === WIZARD_STEPS.TIME_RANGE && (
         <Fragment>
-          <Title>Time range</Title>
+          <Title data-test-subj="mlJobWizardStepTitleTimeRange">Time range</Title>
           <TimeRangeStep
             isCurrentStep={currentStep === WIZARD_STEPS.TIME_RANGE}
             setCurrentStep={setCurrentStep}
@@ -185,7 +185,7 @@ export const Wizard: FC<Props> = ({
       )}
       {currentStep === WIZARD_STEPS.PICK_FIELDS && (
         <Fragment>
-          <Title>Pick fields</Title>
+          <Title data-test-subj="mlJobWizardStepTitlePickFields">Pick fields</Title>
           <PickFieldsStep
             isCurrentStep={currentStep === WIZARD_STEPS.PICK_FIELDS}
             setCurrentStep={setCurrentStep}
@@ -194,7 +194,7 @@ export const Wizard: FC<Props> = ({
       )}
       {currentStep === WIZARD_STEPS.JOB_DETAILS && (
         <Fragment>
-          <Title>Job details</Title>
+          <Title data-test-subj="mlJobWizardStepTitleJobDetails">Job details</Title>
           <JobDetailsStep
             isCurrentStep={currentStep === WIZARD_STEPS.JOB_DETAILS}
             setCurrentStep={setCurrentStep}
@@ -207,7 +207,7 @@ export const Wizard: FC<Props> = ({
       )}
       {currentStep === WIZARD_STEPS.VALIDATION && (
         <Fragment>
-          <Title>Validation</Title>
+          <Title data-test-subj="mlJobWizardStepTitleValidation">Validation</Title>
           <ValidationStep
             isCurrentStep={currentStep === WIZARD_STEPS.VALIDATION}
             setCurrentStep={setCurrentStep}
@@ -216,7 +216,7 @@ export const Wizard: FC<Props> = ({
       )}
       {currentStep === WIZARD_STEPS.SUMMARY && (
         <Fragment>
-          <Title>Summary</Title>
+          <Title data-test-subj="mlJobWizardStepTitleSummary">Summary</Title>
           <SummaryStep
             isCurrentStep={currentStep === WIZARD_STEPS.SUMMARY}
             setCurrentStep={setCurrentStep}
@@ -227,11 +227,11 @@ export const Wizard: FC<Props> = ({
   );
 };
 
-const Title: FC = ({ children }) => {
+const Title: FC<{ 'data-test-subj': string }> = ({ 'data-test-subj': dataTestSubj, children }) => {
   return (
     <Fragment>
       <EuiTitle>
-        <h2>{children}</h2>
+        <h2 data-test-subj={dataTestSubj}>{children}</h2>
       </EuiTitle>
       <EuiSpacer />
     </Fragment>