[Console] Add functional test to check for basic autocomplete functionality (#87331)

* added first pass at functional test

* refactor console autocomplete test to be more robust

* remove unused variable

* refactored test to use data-test-subj where possible

* remove unused value

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.tsx

@@ -97,6 +97,7 @@ function EditorUI({ initialTextValue }: EditorProps) {
 
     if (textareaElement) {
       textareaElement.setAttribute('id', inputId);
+      textareaElement.setAttribute('data-test-subj', 'console-textarea');
     }
 
     const readQueryParams = () => {
@@ -204,7 +205,7 @@ function EditorUI({ initialTextValue }: EditorProps) {
   }, [sendCurrentRequestToES, openDocumentation]);
 
   return (
-    <div style={abs} className="conApp">
+    <div style={abs} data-test-subj="console-application" className="conApp">
       <div className="conApp__editor">
         <ul className="conApp__autoComplete" id="autocomplete" />
         <EuiFlexGroup

test/functional/apps/console/_console.ts

@@ -34,7 +34,6 @@ GET _search
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
   const log = getService('log');
-  const find = getService('find');
   const browser = getService('browser');
   const PageObjects = getPageObjects(['common', 'console']);
 
@@ -84,12 +83,20 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     });
 
     it('should resize the editor', async () => {
-      const editor = await find.byCssSelector('.conApp');
+      const editor = await PageObjects.console.getEditor();
       await browser.setWindowSize(1300, 1100);
       const initialSize = await editor.getSize();
       await browser.setWindowSize(1000, 1100);
       const afterSize = await editor.getSize();
       expect(initialSize.width).to.be.greaterThan(afterSize.width);
     });
+
+    it('should provide basic auto-complete functionality', async () => {
+      // Ensure that the text area can be interacted with
+      await PageObjects.console.dismissTutorial();
+      expect(await PageObjects.console.hasAutocompleter()).to.be(false);
+      await PageObjects.console.promptAutocomplete();
+      retry.waitFor('autocomplete to be visible', () => PageObjects.console.hasAutocompleter());
+    });
   });
 }

test/functional/page_objects/console_page.ts

@@ -17,12 +17,14 @@
  * under the License.
  */
 
+import { Key } from 'selenium-webdriver';
 import { FtrProviderContext } from '../ftr_provider_context';
 import { WebElementWrapper } from '../services/lib/web_element_wrapper';
 
 export function ConsolePageProvider({ getService }: FtrProviderContext) {
   const testSubjects = getService('testSubjects');
   const retry = getService('retry');
+  const find = getService('find');
 
   class ConsolePage {
     public async getVisibleTextFromAceEditor(editor: WebElementWrapper) {
@@ -79,6 +81,38 @@ export function ConsolePageProvider({ getService }: FtrProviderContext) {
     public async getRequestFontSize() {
       return await this.getFontSize(await this.getRequestEditor());
     }
+
+    public async getEditor() {
+      return testSubjects.find('console-application');
+    }
+
+    public async dismissTutorial() {
+      try {
+        const closeButton = await testSubjects.find('help-close-button');
+        await closeButton.click();
+      } catch (e) {
+        // Ignore because it is probably not there.
+      }
+    }
+
+    public async promptAutocomplete() {
+      // This focusses the cursor on the bottom of the text area
+      const editor = await this.getEditor();
+      const content = await editor.findByCssSelector('.ace_content');
+      await content.click();
+      const textArea = await testSubjects.find('console-textarea');
+      // There should be autocomplete for this on all license levels
+      await textArea.pressKeys('\nGET s');
+      await textArea.pressKeys([Key.CONTROL, Key.SPACE]);
+    }
+
+    public async hasAutocompleter(): Promise<boolean> {
+      try {
+        return Boolean(await find.byCssSelector('.ace_autocomplete'));
+      } catch (e) {
+        return false;
+      }
+    }
   }
 
   return new ConsolePage();