[ML] Add functional tests for Index data visualizer's random sampler controls

x-pack/plugins/data_visualizer/public/application/common/components/document_count_content/document_count_content.tsx

@@ -110,15 +110,15 @@ export const DocumentCountContent: FC<Props> = ({
 
   const ProbabilityUsed =
     randomSamplerPreference !== RANDOM_SAMPLER_OPTION.OFF && isDefined(samplingProbability) ? (
-      <>
+      <div data-test-subj="dvRandomSamplerAutomaticProbabilityMsg">
         <EuiSpacer size="m" />
 
         <FormattedMessage
           id="xpack.dataVisualizer.randomSamplerSettingsPopUp.probabilityLabel"
           defaultMessage="Probability used: {samplingProbability}%"
           values={{ samplingProbability: samplingProbability * 100 }}
         />
-      </>
+      </div>
     ) : null;
 
   return (
@@ -127,7 +127,8 @@ export const DocumentCountContent: FC<Props> = ({
         <TotalCountHeader totalCount={totalCount} approximate={approximate} loading={loading} />
         <EuiFlexItem grow={false}>
           <EuiPopover
-            id="dscSamplingOptions"
+            data-test-subj="dvRandomSamplerOptionsPopover"
+            id="dataVisualizerSamplingOptions"
             button={
               <EuiToolTip
                 content={i18n.translate('xpack.dataVisualizer.samplingOptionsButton', {
@@ -138,7 +139,7 @@ export const DocumentCountContent: FC<Props> = ({
                   size="xs"
                   iconType="gear"
                   onClick={onShowSamplingOptions}
-                  data-test-subj="discoverSamplingOptionsToggle"
+                  data-test-subj="dvRandomSamplerOptionsButton"
                   aria-label={i18n.translate('xpack.dataVisualizer.samplingOptionsButton', {
                     defaultMessage: 'Sampling options',
                   })}
@@ -157,6 +158,7 @@ export const DocumentCountContent: FC<Props> = ({
               <EuiSpacer size="m" />
 
               <EuiFormRow
+                data-test-subj="dvRandomSamplerOptionsFormRow"
                 label={i18n.translate(
                   'xpack.dataVisualizer.randomSamplerSettingsPopUp.randomSamplerRowLabel',
                   {
@@ -165,6 +167,7 @@ export const DocumentCountContent: FC<Props> = ({
                 )}
               >
                 <EuiSelect
+                  data-test-subj="dvRandomSamplerOptionsSelect"
                   options={RANDOM_SAMPLER_SELECT_OPTIONS}
                   value={randomSamplerPreference}
                   onChange={(e) =>
@@ -212,6 +215,7 @@ export const DocumentCountContent: FC<Props> = ({
                         }
                       }}
                       step={RANDOM_SAMPLER_STEP}
+                      data-test-subj="dvRandomSamplerProbabilityRange"
                     />
                   </EuiFormRow>
                 </EuiFlexItem>

x-pack/plugins/data_visualizer/public/application/index_data_visualizer/constants/random_sampler.ts

@@ -24,20 +24,27 @@ export const RANDOM_SAMPLER_OPTION = {
 
 export type RandomSamplerOption = typeof RANDOM_SAMPLER_OPTION[keyof typeof RANDOM_SAMPLER_OPTION];
 
-export const RANDOM_SAMPLER_SELECT_OPTIONS: Array<{ value: RandomSamplerOption; text: string }> = [
+export const RANDOM_SAMPLER_SELECT_OPTIONS: Array<{
+  value: RandomSamplerOption;
+  text: string;
+  'data-test-subj': string;
+}> = [
   {
+    'data-test-subj': 'dvRandomSamplerOptionOnAutomatic',
     value: RANDOM_SAMPLER_OPTION.ON_AUTOMATIC,
     text: i18n.translate('xpack.dataVisualizer.randomSamplerPreference.onAutomaticLabel', {
       defaultMessage: 'On - automatic',
     }),
   },
   {
+    'data-test-subj': 'dvRandomSamplerOptionOnManual',
     value: RANDOM_SAMPLER_OPTION.ON_MANUAL,
     text: i18n.translate('xpack.dataVisualizer.randomSamplerPreference.onManualLabel', {
       defaultMessage: 'On - manual',
     }),
   },
   {
+    'data-test-subj': 'dvRandomSamplerOptionOff',
     value: RANDOM_SAMPLER_OPTION.OFF,
     text: i18n.translate('xpack.dataVisualizer.randomSamplerPreference.offLabel', {
       defaultMessage: 'Off',

x-pack/test/functional/apps/ml/data_visualizer/index.ts

@@ -33,6 +33,7 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
     });
 
     loadTestFile(require.resolve('./index_data_visualizer'));
+    loadTestFile(require.resolve('./index_data_visualizer_random_sampler'));
     loadTestFile(require.resolve('./index_data_visualizer_filters'));
     loadTestFile(require.resolve('./index_data_visualizer_grid_in_discover'));
     loadTestFile(require.resolve('./index_data_visualizer_grid_in_dashboard'));

x-pack/test/functional/apps/ml/data_visualizer/index_data_visualizer_random_sampler.ts

@@ -0,0 +1,80 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { FtrProviderContext } from '../../../ftr_provider_context';
+import { farequoteDataViewTestData, farequoteLuceneSearchTestData } from './index_test_data';
+
+export default function ({ getPageObject, getService }: FtrProviderContext) {
+  const esArchiver = getService('esArchiver');
+  const ml = getService('ml');
+  const browser = getService('browser');
+  async function goToSourceForIndexBasedDataVisualizer(sourceIndexOrSavedSearch: string) {
+    await ml.testExecution.logTestStep(`navigates to Data Visualizer page`);
+    await ml.navigation.navigateToDataVisualizer();
+
+    await ml.testExecution.logTestStep(`loads the saved search selection page`);
+    await ml.dataVisualizer.navigateToIndexPatternSelection();
+
+    await ml.testExecution.logTestStep(`loads the index data visualizer page`);
+    await ml.jobSourceSelection.selectSourceForIndexBasedDataVisualizer(sourceIndexOrSavedSearch);
+  }
+  describe('index based random sampler controls', function () {
+    this.tags(['ml']);
+    before(async () => {
+      await esArchiver.loadIfNeeded('x-pack/test/functional/es_archives/ml/farequote');
+      await esArchiver.loadIfNeeded('x-pack/test/functional/es_archives/ml/module_sample_logs');
+
+      await ml.testResources.createIndexPatternIfNeeded('ft_farequote', '@timestamp');
+      await ml.testResources.createIndexPatternIfNeeded('ft_module_sample_logs', '@timestamp');
+      await ml.testResources.createSavedSearchFarequoteLuceneIfNeeded();
+      await ml.testResources.setKibanaTimeZoneToUTC();
+
+      await ml.securityUI.loginAsMlPowerUser();
+      // Start navigation from the base of the ML app.
+      await ml.navigation.navigateToMl();
+    });
+
+    after(async () => {
+      await ml.testResources.deleteSavedSearches();
+      await ml.testResources.deleteIndexPatternByTitle('ft_farequote');
+      await ml.testResources.deleteIndexPatternByTitle('ft_module_sample_logs');
+      await browser.removeLocalStorageItem('dataVisualizer.randomSamplerPreference');
+    });
+
+    describe('with small data sets', function () {
+      it(`has random sampler 'on - automatic' by default`, async () => {
+        await goToSourceForIndexBasedDataVisualizer(
+          farequoteDataViewTestData.sourceIndexOrSavedSearch
+        );
+
+        await ml.dataVisualizerIndexBased.assertRandomSamplingOption(
+          'dvRandomSamplerOptionOnAutomatic',
+          100
+        );
+      });
+
+      it(`retains random sampler 'off' setting`, async () => {
+        await ml.dataVisualizerIndexBased.setRandomSamplingOption('dvRandomSamplerOptionOff');
+
+        await goToSourceForIndexBasedDataVisualizer(
+          farequoteLuceneSearchTestData.sourceIndexOrSavedSearch
+        );
+        await ml.dataVisualizerIndexBased.assertRandomSamplingOption('dvRandomSamplerOptionOff');
+      });
+
+      it(`retains random sampler 'on - manual' setting`, async () => {
+        await ml.dataVisualizerIndexBased.setRandomSamplingOption('dvRandomSamplerOptionOnManual');
+
+        await goToSourceForIndexBasedDataVisualizer('ft_module_sample_logs');
+        await ml.dataVisualizerIndexBased.assertRandomSamplingOption(
+          'dvRandomSamplerOptionOnManual',
+          50
+        );
+      });
+    });
+  });
+}

x-pack/test/functional/services/ml/data_visualizer_index_based.ts

@@ -17,6 +17,7 @@ export function MachineLearningDataVisualizerIndexBasedProvider({
   const PageObjects = getPageObjects(['discover']);
   const queryBar = getService('queryBar');
   const filterBar = getService('filterBar');
+  const browser = getService('browser');
 
   return {
     async assertTimeRangeSelectorSectionExists() {
@@ -231,5 +232,84 @@ export function MachineLearningDataVisualizerIndexBasedProvider({
         }
       );
     },
+
+    async assertRandomSamplingOptionsButtonExists() {
+      await testSubjects.existOrFail('dvRandomSamplerOptionsButton');
+    },
+
+    async assertRandomSamplingOption(
+      expectedOption:
+        | 'dvRandomSamplerOptionOnAutomatic'
+        | 'dvRandomSamplerOptionOnManual'
+        | 'dvRandomSamplerOptionOff',
+      expectedProbability?: number
+    ) {
+      await retry.tryForTime(2000, async () => {
+        await browser.pressKeys(browser.keys.ESCAPE);
+        await testSubjects.clickWhenNotDisabled('dvRandomSamplerOptionsButton');
+        await testSubjects.existOrFail('dvRandomSamplerOptionsPopover');
+
+        if (expectedOption === 'dvRandomSamplerOptionOff') {
+          await testSubjects.existOrFail('dvRandomSamplerOptionOff');
+          await testSubjects.missingOrFail('dvRandomSamplerProbabilityRange');
+          await testSubjects.missingOrFail('dvRandomSamplerAutomaticProbabilityMsg');
+        }
+
+        if (expectedOption === 'dvRandomSamplerOptionOnManual') {
+          await testSubjects.existOrFail('dvRandomSamplerOptionOnManual');
+          await testSubjects.existOrFail('dvRandomSamplerProbabilityRange');
+          if (expectedProbability !== undefined) {
+            const probability = await testSubjects.getAttribute(
+              'dvRandomSamplerProbabilityRange',
+              'value'
+            );
+            expect(probability).to.eql(
+              `${expectedProbability}`,
+              `Expected probability to be ${expectedProbability}, got ${probability}`
+            );
+          }
+        }
+
+        if (expectedOption === 'dvRandomSamplerOptionOnAutomatic') {
+          await testSubjects.existOrFail('dvRandomSamplerOptionOnAutomatic');
+          await testSubjects.existOrFail('dvRandomSamplerAutomaticProbabilityMsg');
+
+          if (expectedProbability !== undefined) {
+            const probabilityText = await testSubjects.getVisibleText(
+              'dvRandomSamplerAutomaticProbabilityMsg'
+            );
+            expect(probabilityText).to.contain(
+              `${expectedProbability}`,
+              `Expected probability text to contain ${expectedProbability}, got ${probabilityText}`
+            );
+          }
+        }
+      });
+    },
+
+    async setRandomSamplingOption(
+      option:
+        | 'dvRandomSamplerOptionOnAutomatic'
+        | 'dvRandomSamplerOptionOnManual'
+        | 'dvRandomSamplerOptionOff'
+    ) {
+      await retry.tryForTime(2000, async () => {
+        // escape popover
+        await browser.pressKeys(browser.keys.ESCAPE);
+        await this.assertRandomSamplingOptionsButtonExists();
+        await testSubjects.clickWhenNotDisabled('dvRandomSamplerOptionsButton');
+        await testSubjects.existOrFail('dvRandomSamplerOptionsPopover');
+
+        await testSubjects.clickWhenNotDisabled('dvRandomSamplerOptionsSelect');
+
+        await testSubjects.existOrFail('dvRandomSamplerOptionOff');
+        await testSubjects.existOrFail('dvRandomSamplerOptionOnManual');
+        await testSubjects.existOrFail('dvRandomSamplerOptionOnAutomatic');
+
+        await testSubjects.click(option);
+
+        await this.assertRandomSamplingOption(option);
+      });
+    },
   };
 }