[Console] Add tests for context menu and its actions (#141202)

* Add tests for context menu and its actions

* Skip test if clipboard permission is not granted

* Fix type checks

* Remove log statement

Co-authored-by: Muhammad Ibragimov <muhammad.ibragimov@elastic.co>

src/plugins/console/public/application/components/console_menu.tsx

@@ -128,6 +128,7 @@ export class ConsoleMenu extends Component<Props, State> {
     const items = [
       <EuiContextMenuItem
         key="Copy as cURL"
+        data-test-subj="consoleMenuCopyAsCurl"
         id="ConCopyAsCurl"
         disabled={!window.navigator?.clipboard}
         onClick={() => {
@@ -174,7 +175,7 @@ export class ConsoleMenu extends Component<Props, State> {
           panelPaddingSize="none"
           anchorPosition="downLeft"
         >
-          <EuiContextMenuPanel items={items} />
+          <EuiContextMenuPanel items={items} data-test-subj="consoleMenu" />
         </EuiPopover>
       </span>
     );

test/functional/apps/console/_context_menu.ts

@@ -0,0 +1,104 @@
+/*
+ * 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';
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const log = getService('log');
+  const retry = getService('retry');
+  const PageObjects = getPageObjects(['common', 'console']);
+  const browser = getService('browser');
+  const toasts = getService('toasts');
+
+  describe('console context menu', function testContextMenu() {
+    before(async () => {
+      await PageObjects.common.navigateToApp('console');
+      // Ensure that the text area can be interacted with
+      await PageObjects.console.closeHelpIfExists();
+      await PageObjects.console.clearTextArea();
+    });
+
+    it('should open context menu', async () => {
+      expect(await PageObjects.console.isContextMenuOpen()).to.be(false);
+      await PageObjects.console.enterRequest();
+      await PageObjects.console.clickContextMenu();
+      expect(PageObjects.console.isContextMenuOpen()).to.be.eql(true);
+    });
+
+    it('should have options to copy as curl, open documentation, and auto indent', async () => {
+      await PageObjects.console.clickContextMenu();
+      expect(PageObjects.console.isContextMenuOpen()).to.be.eql(true);
+      expect(PageObjects.console.isCopyAsCurlButtonVisible()).to.be.eql(true);
+      expect(PageObjects.console.isOpenDocumentationButtonVisible()).to.be.eql(true);
+      expect(PageObjects.console.isAutoIndentButtonVisible()).to.be.eql(true);
+    });
+
+    it('should copy as curl and show toast when copy as curl button is clicked', async () => {
+      await PageObjects.console.clickContextMenu();
+      await PageObjects.console.clickCopyAsCurlButton();
+
+      const resultToast = await toasts.getToastElement(1);
+      const toastText = await resultToast.getVisibleText();
+
+      if (toastText.includes('Write permission denied')) {
+        log.debug('Write permission denied, skipping test');
+        return;
+      }
+
+      expect(toastText).to.be('Request copied as cURL');
+
+      const canReadClipboard = await browser.checkBrowserPermission('clipboard-read');
+      if (canReadClipboard) {
+        const clipboardText = await browser.getClipboardValue();
+        expect(clipboardText).to.contain('curl -XGET');
+      }
+    });
+
+    it('should open documentation when open documentation button is clicked', async () => {
+      await PageObjects.console.clickContextMenu();
+      await PageObjects.console.clickOpenDocumentationButton();
+
+      await retry.tryForTime(10000, async () => {
+        await browser.switchTab(1);
+      });
+
+      // Retry until the documentation is loaded
+      await retry.try(async () => {
+        const url = await browser.getCurrentUrl();
+        expect(url).to.contain('search-search.html');
+      });
+
+      // Close the documentation tab
+      await browser.closeCurrentWindow();
+      await browser.switchTab(0);
+    });
+
+    it('should auto indent when auto indent button is clicked', async () => {
+      await PageObjects.console.clearTextArea();
+      await PageObjects.console.enterRequest('GET _search\n{"query": {"match_all": {}}}');
+      await PageObjects.console.clickContextMenu();
+      await PageObjects.console.clickAutoIndentButton();
+      // Retry until the request is auto indented
+      await retry.try(async () => {
+        const request = await PageObjects.console.getRequest();
+        expect(request).to.be.eql('GET _search\n{\n  "query": {\n    "match_all": {}\n  }\n}');
+      });
+    });
+
+    it('should condense when auto indent button is clicked again', async () => {
+      await PageObjects.console.clickContextMenu();
+      await PageObjects.console.clickAutoIndentButton();
+      // Retry until the request is condensed
+      await retry.try(async () => {
+        const request = await PageObjects.console.getRequest();
+        expect(request).to.be.eql('GET _search\n{"query":{"match_all":{}}}');
+      });
+    });
+  });
+}

test/functional/apps/console/index.js

@@ -24,6 +24,7 @@ export default function ({ getService, loadTestFile }) {
       loadTestFile(require.resolve('./_variables'));
       loadTestFile(require.resolve('./_xjson'));
       loadTestFile(require.resolve('./_misc_console_behavior'));
+      loadTestFile(require.resolve('./_context_menu'));
     }
   });
 }

test/functional/page_objects/console_page.ts

@@ -368,4 +368,40 @@ export class ConsolePageObject extends FtrService {
     const textArea = await this.testSubjects.find('console-textarea');
     await textArea.pressKeys([Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'], '/']);
   }
+
+  public async clickContextMenu() {
+    const contextMenu = await this.testSubjects.find('toggleConsoleMenu');
+    await contextMenu.click();
+  }
+
+  public async isContextMenuOpen() {
+    return await this.testSubjects.exists('consoleMenu');
+  }
+
+  public async isCopyAsCurlButtonVisible() {
+    return await this.testSubjects.exists('consoleMenuCopyAsCurl');
+  }
+
+  public async isOpenDocumentationButtonVisible() {
+    return await this.testSubjects.exists('consoleMenuOpenDocs');
+  }
+
+  public async isAutoIndentButtonVisible() {
+    return await this.testSubjects.exists('consoleMenuAutoIndent');
+  }
+
+  public async clickCopyAsCurlButton() {
+    const button = await this.testSubjects.find('consoleMenuCopyAsCurl');
+    await button.click();
+  }
+
+  public async clickOpenDocumentationButton() {
+    const button = await this.testSubjects.find('consoleMenuOpenDocs');
+    await button.click();
+  }
+
+  public async clickAutoIndentButton() {
+    const button = await this.testSubjects.find('consoleMenuAutoIndent');
+    await button.click();
+  }
 }