[8.6] [ML] Functional tests for the Test Model action (#146399) (#146711

)

# Backport

This will backport the following commits from `main` to `8.6`:
- [[ML] Functional tests for the Test Model action
(#146399)](#146399)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Dima
Arnautov","email":"[email protected]"},"sourceCommit":{"committedDate":"2022-11-30T15:48:27Z","message":"[ML]
Functional tests for the Test Model action (#146399)\n\n##
Summary\r\n\r\nPart of #142456\r\n\r\nAdds functional tests for the Test
model action\r\n\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"9ad78b244abb24eb0dc7f6c15ee511883a4d0ac1","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":[":ml","test_ui_functional","release_note:skip","Team:ML","v8.6.0","v8.7.0"],"number":146399,"url":"https://github.com/elastic/kibana/pull/146399","mergeCommit":{"message":"[ML]
Functional tests for the Test Model action (#146399)\n\n##
Summary\r\n\r\nPart of #142456\r\n\r\nAdds functional tests for the Test
model action\r\n\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"9ad78b244abb24eb0dc7f6c15ee511883a4d0ac1"}},"sourceBranch":"main","suggestedTargetBranches":["8.6"],"targetPullRequestStates":[{"branch":"8.6","label":"v8.6.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.7.0","labelRegex":"^v8.7.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/146399","number":146399,"mergeCommit":{"message":"[ML]
Functional tests for the Test Model action (#146399)\n\n##
Summary\r\n\r\nPart of #142456\r\n\r\nAdds functional tests for the Test
model action\r\n\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common
scenarios","sha":"9ad78b244abb24eb0dc7f6c15ee511883a4d0ac1"}}]}]
BACKPORT-->

Co-authored-by: Dima Arnautov <[email protected]>

x-pack/plugins/ml/public/application/jobs/jobs_list/components/ml_job_editor/ml_job_editor.tsx

@@ -24,6 +24,7 @@ interface MlJobEditorProps {
   syntaxChecking?: boolean;
   theme?: string;
   onChange?: EuiCodeEditorProps['onChange'];
+  'data-test-subj'?: string;
 }
 export const MLJobEditor: FC<MlJobEditorProps> = ({
   value,
@@ -34,6 +35,7 @@ export const MLJobEditor: FC<MlJobEditorProps> = ({
   syntaxChecking = true,
   theme = 'textmate',
   onChange = () => {},
+  'data-test-subj': dataTestSubj,
 }) => {
   if (mode === ML_EDITOR_MODE.XJSON) {
     try {
@@ -61,6 +63,7 @@ export const MLJobEditor: FC<MlJobEditorProps> = ({
         useSoftTabs: true,
       }}
       onChange={onChange}
+      data-test-subj={dataTestSubj}
     />
   );
 };

x-pack/plugins/ml/public/application/trained_models/models_management/test_models/models/inference_input_form/index_input.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { FC, useState, useMemo, useCallback } from 'react';
+import React, { FC, useState, useMemo, useCallback, FormEventHandler } from 'react';
 
 import useObservable from 'react-use/lib/useObservable';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -18,6 +18,7 @@ import {
   EuiHorizontalRule,
   EuiLoadingSpinner,
   EuiText,
+  EuiForm,
 } from '@elastic/eui';
 
 import { ErrorMessage } from '../../inference_error';
@@ -41,17 +42,21 @@ export const IndexInputForm: FC<Props> = ({ inferrer }) => {
   const outputComponent = useMemo(() => inferrer.getOutputComponent(), [inferrer]);
   const infoComponent = useMemo(() => inferrer.getInfoComponent(), [inferrer]);
 
-  const run = useCallback(async () => {
-    setErrorText(null);
-    try {
-      await inferrer.infer();
-    } catch (e) {
-      setErrorText(extractErrorMessage(e));
-    }
-  }, [inferrer]);
+  const run: FormEventHandler<HTMLFormElement> = useCallback(
+    async (event) => {
+      event.preventDefault();
+      setErrorText(null);
+      try {
+        await inferrer.infer();
+      } catch (e) {
+        setErrorText(extractErrorMessage(e));
+      }
+    },
+    [inferrer]
+  );
 
   return (
-    <>
+    <EuiForm component={'form'} onSubmit={run}>
       <>{infoComponent}</>
       <InferenceInputFormIndexControls inferrer={inferrer} data={data} />
 
@@ -60,9 +65,10 @@ export const IndexInputForm: FC<Props> = ({ inferrer }) => {
       <EuiFlexGroup>
         <EuiFlexItem grow={false}>
           <EuiButton
-            onClick={run}
             disabled={runningState === RUNNING_STATE.RUNNING || isValid === false}
             fullWidth={false}
+            data-test-subj={'mlTestModelTestButton'}
+            type={'submit'}
           >
             <FormattedMessage
               id="xpack.ml.trainedModels.testModelsFlyout.inferenceInputForm.runButton"
@@ -105,6 +111,6 @@ export const IndexInputForm: FC<Props> = ({ inferrer }) => {
         : null}
 
       {runningState === RUNNING_STATE.FINISHED ? <>{outputComponent}</> : null}
-    </>
+    </EuiForm>
   );
 };

x-pack/plugins/ml/public/application/trained_models/models_management/test_models/models/inference_input_form/text_input.tsx

@@ -5,11 +5,11 @@
  * 2.0.
  */
 
-import React, { FC, useState, useMemo, useCallback } from 'react';
+import React, { FC, useState, useMemo, useCallback, FormEventHandler } from 'react';
 
 import useObservable from 'react-use/lib/useObservable';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiSpacer, EuiButton, EuiTabs, EuiTab } from '@elastic/eui';
+import { EuiSpacer, EuiButton, EuiTabs, EuiTab, EuiForm } from '@elastic/eui';
 
 import { ErrorMessage } from '../../inference_error';
 import { extractErrorMessage } from '../../../../../../../common';
@@ -37,25 +37,30 @@ export const TextInputForm: FC<Props> = ({ inferrer }) => {
   const outputComponent = useMemo(() => inferrer.getOutputComponent(), [inferrer]);
   const infoComponent = useMemo(() => inferrer.getInfoComponent(), [inferrer]);
 
-  const run = useCallback(async () => {
-    setErrorText(null);
-    try {
-      await inferrer.infer();
-    } catch (e) {
-      setErrorText(extractErrorMessage(e));
-    }
-  }, [inferrer]);
+  const run: FormEventHandler<HTMLFormElement> = useCallback(
+    async (event) => {
+      event.preventDefault();
+      setErrorText(null);
+      try {
+        await inferrer.infer();
+      } catch (e) {
+        setErrorText(extractErrorMessage(e));
+      }
+    },
+    [inferrer]
+  );
 
   return (
-    <>
+    <EuiForm component={'form'} onSubmit={run}>
       <>{infoComponent}</>
       <>{inputComponent}</>
       <EuiSpacer size="m" />
       <div>
         <EuiButton
-          onClick={run}
           disabled={runningState === RUNNING_STATE.RUNNING || isValid === false}
           fullWidth={false}
+          data-test-subj={'mlTestModelTestButton'}
+          type="submit"
         >
           <FormattedMessage
             id="xpack.ml.trainedModels.testModelsFlyout.inferenceInputForm.runButton"
@@ -100,13 +105,15 @@ export const TextInputForm: FC<Props> = ({ inferrer }) => {
                 </>
               ) : null}
 
-              {runningState === RUNNING_STATE.FINISHED ? <>{outputComponent}</> : null}
+              {runningState === RUNNING_STATE.FINISHED ? (
+                <div data-test-subj={'mlTestModelOutput'}>{outputComponent}</div>
+              ) : null}
             </>
           ) : (
             <RawOutput inferrer={inferrer} />
           )}
         </>
       ) : null}
-    </>
+    </EuiForm>
   );
 };

x-pack/plugins/ml/public/application/trained_models/models_management/test_models/models/raw_output.tsx

@@ -59,7 +59,7 @@ export const RawOutput: FC<{
 
   return (
     <>
-      <MLJobEditor value={rawResponse ?? ''} readOnly={true} />
+      <MLJobEditor data-test-subj={'mlTestModelRawOutput'} value={rawResponse ?? ''} readOnly />
     </>
   );
 };

x-pack/plugins/ml/public/application/trained_models/models_management/test_models/models/text_classification/lang_ident_output.tsx

@@ -57,10 +57,12 @@ const LanguageIdent: FC<{
 
   return (
     <>
-      <EuiText size="s">{inputText}</EuiText>
+      <EuiText size="s" data-test-subj={'mlTestModelLangIdentInputText'}>
+        {inputText}
+      </EuiText>
       <EuiSpacer size="s" />
       <EuiTitle size="xxs">
-        <h4>{title}</h4>
+        <h4 data-test-subj={'mlTestModelLangIdentTitle'}>{title}</h4>
       </EuiTitle>
 
       <EuiSpacer />

x-pack/plugins/ml/public/application/trained_models/models_management/test_models/models/text_classification/text_classification_output.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { FC } from 'react';
+import React, { type FC, Fragment } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import {
   EuiFlexGroup,
@@ -72,17 +72,17 @@ export const PredictionProbabilityList: FC<{
       ) : null}
 
       {response.map(({ value, predictionProbability }) => (
-        <>
+        <Fragment key={value}>
           <EuiProgress value={predictionProbability * 100} max={100} size="m" />
           <EuiSpacer size="s" />
           <EuiFlexGroup>
-            <>
-              <EuiFlexItem>{value}</EuiFlexItem>
-              <EuiFlexItem grow={false}>{predictionProbability}</EuiFlexItem>
-            </>
+            <EuiFlexItem data-test-subj={`mlTestModelLangIdentInputValue`}>{value}</EuiFlexItem>
+            <EuiFlexItem data-test-subj={`mlTestModelLangIdentInputProbability`} grow={false}>
+              {predictionProbability}
+            </EuiFlexItem>
           </EuiFlexGroup>
           <EuiSpacer />
-        </>
+        </Fragment>
       ))}
     </>
   );

x-pack/plugins/ml/public/application/trained_models/models_management/test_models/models/text_input.tsx

@@ -44,6 +44,7 @@ export const TextInput: FC<{
         onChange={(e) => {
           setInputText(e.target.value);
         }}
+        data-test-subj={`mlTestModelInputText`}
       />
     </EuiFormRow>
   );

x-pack/plugins/ml/public/application/trained_models/models_management/test_models/output_loading.tsx

@@ -13,5 +13,7 @@ export const OutputLoadingContent: FC<{ text: string }> = ({ text }) => {
   const actualLines = text.split(/\r\n|\r|\n/).length + 1;
   const lines = actualLines > 4 && actualLines <= 10 ? actualLines : 4;
 
-  return <EuiLoadingContent lines={lines as LineRange} />;
+  return (
+    <EuiLoadingContent data-test-subj={'mlTestModelLoadingContent'} lines={lines as LineRange} />
+  );
 };

x-pack/test/functional/apps/ml/short_tests/model_management/model_list.ts

@@ -93,7 +93,7 @@ export default function ({ getService }: FtrProviderContext) {
         await ml.trainedModelsTable.assertPipelinesTabContent(false);
       });
 
-      it('displays the built-in model and no actions are enabled', async () => {
+      it('displays the built-in model with only Test action enabled', async () => {
         await ml.testExecution.logTestStep('should display the model in the table');
         await ml.trainedModelsTable.filterWithSearchString(builtInModelData.modelId, 1);
 
@@ -121,6 +121,21 @@ export default function ({ getService }: FtrProviderContext) {
           builtInModelData.modelId,
           false
         );
+
+        await ml.testExecution.logTestStep('should have enabled the button that opens Test flyout');
+        await ml.trainedModelsTable.assertModelTestButtonExists(builtInModelData.modelId, true);
+
+        await ml.trainedModelsTable.testModel(
+          'lang_ident',
+          builtInModelData.modelId,
+          {
+            inputText: 'Goedemorgen! Ik ben een appel.',
+          },
+          {
+            title: 'This looks like Dutch,Flemish',
+            topLang: { code: 'nl', minProbability: 0.9 },
+          }
+        );
       });
 
       it('displays a model with an ingest pipeline and delete action is disabled', async () => {

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

@@ -402,17 +402,28 @@ export function MachineLearningCommonUIProvider({
       });
     },
 
-    async invokeTableRowAction(rowSelector: string, actionTestSubject: string) {
+    async invokeTableRowAction(
+      rowSelector: string,
+      actionTestSubject: string,
+      fromContextMenu: boolean = true
+    ) {
       await retry.tryForTime(30 * 1000, async () => {
-        await this.ensureAllMenuPopoversClosed();
-        await testSubjects.click(`${rowSelector} > euiCollapsedItemActionsButton`);
-        await find.existsByCssSelector('euiContextMenuPanel');
+        if (fromContextMenu) {
+          await this.ensureAllMenuPopoversClosed();
+
+          await testSubjects.click(`${rowSelector} > euiCollapsedItemActionsButton`);
+          await find.existsByCssSelector('euiContextMenuPanel');
 
-        const isEnabled = await testSubjects.isEnabled(actionTestSubject);
+          const isEnabled = await testSubjects.isEnabled(actionTestSubject);
 
-        expect(isEnabled).to.eql(true, `Expected action "${actionTestSubject}" to be enabled.`);
+          expect(isEnabled).to.eql(true, `Expected action "${actionTestSubject}" to be enabled.`);
 
-        await testSubjects.click(actionTestSubject);
+          await testSubjects.click(actionTestSubject);
+        } else {
+          const isEnabled = await testSubjects.isEnabled(`${rowSelector} > ${actionTestSubject}`);
+          expect(isEnabled).to.eql(true, `Expected action "${actionTestSubject}" to be enabled.`);
+          await testSubjects.click(`${rowSelector} > ${actionTestSubject}`);
+        }
       });
     },
   };

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

@@ -131,7 +131,7 @@ export function MachineLearningProvider(context: FtrProviderContext) {
   const alerting = MachineLearningAlertingProvider(context, api, commonUI);
   const swimLane = SwimLaneProvider(context);
   const trainedModels = TrainedModelsProvider(context, commonUI);
-  const trainedModelsTable = TrainedModelsTableProvider(context, commonUI);
+  const trainedModelsTable = TrainedModelsTableProvider(context, commonUI, trainedModels);
   const mlNodesPanel = MlNodesPanelProvider(context);
   const notifications = NotificationsProvider(context, commonUI, tableService);