Add runtime field functional test (#93710)

Add runtime fields editor functional test

src/plugins/index_pattern_management/public/components/edit_index_pattern/tabs/tabs.tsx

@@ -178,7 +178,7 @@ export function Tabs({
                 />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiButton fill onClick={() => openFieldEditor()}>
+                <EuiButton fill onClick={() => openFieldEditor()} data-test-subj="addField">
                   {addFieldButtonLabel}
                 </EuiButton>
               </EuiFlexItem>

test/functional/apps/management/_runtime_fields.js

@@ -0,0 +1,52 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import expect from '@kbn/expect';
+
+export default function ({ getService, getPageObjects }) {
+  const esArchiver = getService('esArchiver');
+  const kibanaServer = getService('kibanaServer');
+  const log = getService('log');
+  const browser = getService('browser');
+  const retry = getService('retry');
+  const PageObjects = getPageObjects(['settings']);
+
+  describe('runtime fields', function () {
+    this.tags(['skipFirefox']);
+
+    before(async function () {
+      await browser.setWindowSize(1200, 800);
+      await esArchiver.load('discover');
+      // delete .kibana index and then wait for Kibana to re-create it
+      await kibanaServer.uiSettings.replace({});
+      await kibanaServer.uiSettings.update({});
+    });
+
+    after(async function afterAll() {
+      await PageObjects.settings.navigateTo();
+      await PageObjects.settings.clickKibanaIndexPatterns();
+      await PageObjects.settings.removeLogstashIndexPatternIfExist();
+    });
+
+    describe('create runtime field', function describeIndexTests() {
+      const fieldName = 'atest';
+
+      it('should create runtime field', async function () {
+        await PageObjects.settings.navigateTo();
+        await PageObjects.settings.clickKibanaIndexPatterns();
+        await PageObjects.settings.clickIndexPatternLogstash();
+        const startingCount = parseInt(await PageObjects.settings.getFieldsTabCount());
+        await log.debug('add runtime field');
+        await PageObjects.settings.addRuntimeField(fieldName, 'Keyword', "emit('hello world')");
+        await retry.try(async function () {
+          expect(parseInt(await PageObjects.settings.getFieldsTabCount())).to.be(startingCount + 1);
+        });
+      });
+    });
+  });
+}

test/functional/apps/management/index.ts

@@ -33,6 +33,7 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
       loadTestFile(require.resolve('./_mgmt_import_saved_objects'));
       loadTestFile(require.resolve('./_index_patterns_empty'));
       loadTestFile(require.resolve('./_scripted_fields'));
+      loadTestFile(require.resolve('./_runtime_fields'));
     });
 
     describe('', function () {

test/functional/page_objects/settings_page.ts

@@ -491,6 +491,58 @@ export function SettingsPageProvider({ getService, getPageObjects }: FtrProvider
       await this.clickSaveScriptedField();
     }
 
+    async addRuntimeField(name: string, type: string, script: string) {
+      await this.clickAddField();
+      await this.setFieldName(name);
+      await this.setFieldType(type);
+      if (script) {
+        await this.setFieldScript(script);
+      }
+      await this.clickSaveField();
+      await this.closeIndexPatternFieldEditor();
+    }
+
+    async closeIndexPatternFieldEditor() {
+      await retry.waitFor('field editor flyout to close', async () => {
+        return !(await testSubjects.exists('euiFlyoutCloseButton'));
+      });
+    }
+
+    async clickAddField() {
+      log.debug('click Add Field');
+      await testSubjects.click('addField');
+    }
+
+    async clickSaveField() {
+      log.debug('click Save');
+      await testSubjects.click('fieldSaveButton');
+    }
+
+    async setFieldName(name: string) {
+      log.debug('set field name = ' + name);
+      await testSubjects.setValue('nameField', name);
+    }
+
+    async setFieldType(type: string) {
+      log.debug('set type = ' + type);
+      await testSubjects.setValue('typeField', type);
+    }
+
+    async setFieldScript(script: string) {
+      log.debug('set script = ' + script);
+      const formatRow = await testSubjects.find('valueRow');
+      const formatRowToggle = (
+        await formatRow.findAllByCssSelector('[data-test-subj="toggle"]')
+      )[0];
+
+      await formatRowToggle.click();
+      const getMonacoTextArea = async () => (await formatRow.findAllByCssSelector('textarea'))[0];
+      retry.waitFor('monaco editor is ready', async () => !!(await getMonacoTextArea()));
+      const monacoTextArea = await getMonacoTextArea();
+      await monacoTextArea.focus();
+      browser.pressKeys(script);
+    }
+
     async clickAddScriptedField() {
       log.debug('click Add Scripted Field');
       await testSubjects.click('addScriptedFieldLink');