[lens] tagcloud functional test (#159631)

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

test/functional/apps/visualize/group6/_tag_cloud.ts

@@ -58,6 +58,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     });
 
     it('should show correct tag cloud data', async function () {
+      await PageObjects.visChart.waitForVisualization();
       const data = await PageObjects.tagCloud.getTextTag();
       log.debug(data);
       expect(data).to.eql([
@@ -86,6 +87,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await PageObjects.visEditor.clickEditorSidebarCollapse();
       // Give d3 tag cloud some time to rearrange tags
       await PageObjects.common.sleep(1000);
+      await PageObjects.visChart.waitForVisualization();
       const data = await PageObjects.tagCloud.getTextTag();
       log.debug(data);
       expect(data).to.eql([
@@ -102,6 +104,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await PageObjects.common.sleep(1000);
       await browser.setWindowSize(1200, 800);
       await PageObjects.common.sleep(1000);
+      await PageObjects.visChart.waitForVisualization();
       const data = await PageObjects.tagCloud.getTextTag();
       expect(data).to.eql([
         '32,212,254,720',
@@ -173,6 +176,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       });
 
       it('should format tags with field formatter', async function () {
+        await PageObjects.visChart.waitForVisualization();
         const data = await PageObjects.tagCloud.getTextTag();
         log.debug(data);
         expect(data).to.eql(['30GB', '20GB', '18GB', '19GB', '17GB']);
@@ -181,6 +185,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       it('should apply filter with unformatted value', async function () {
         await PageObjects.tagCloud.selectTagCloudTag('30GB');
         await PageObjects.header.waitUntilLoadingHasFinished();
+        await PageObjects.visChart.waitForVisualization();
         const data = await PageObjects.tagCloud.getTextTag();
         expect(data).to.eql(['30GB']);
       });

test/functional/page_objects/tag_cloud_page.ts

@@ -12,7 +12,6 @@ import { WebElementWrapper } from '../services/lib/web_element_wrapper';
 export class TagCloudPageObject extends FtrService {
   private readonly find = this.ctx.getService('find');
   private readonly header = this.ctx.getPageObject('header');
-  private readonly visChart = this.ctx.getPageObject('visChart');
 
   public async selectTagCloudTag(tagDisplayText: string) {
     const elements = await this.find.allByCssSelector('text');
@@ -24,13 +23,11 @@ export class TagCloudPageObject extends FtrService {
   }
 
   public async getTextTagByElement(webElement: WebElementWrapper) {
-    await this.visChart.waitForVisualization();
     const elements = await webElement.findAllByCssSelector('text');
     return await Promise.all(elements.map(async (element) => await element.getVisibleText()));
   }
 
   public async getTextTag() {
-    await this.visChart.waitForVisualization();
     const elements = await this.find.allByCssSelector('text');
     return await Promise.all(elements.map(async (element) => await element.getVisibleText()));
   }

test/functional/services/dashboard/expectations.ts

@@ -202,6 +202,7 @@ export class DashboardExpectService extends FtrService {
     if (tagCloudVisualizations.length > 0) {
       const matches = await Promise.all(
         tagCloudVisualizations.map(async (tagCloud) => {
+          await this.visChart.waitForVisualization();
           const tagCloudData = await this.tagCloud.getTextTagByElement(tagCloud);
           for (let i = 0; i < values.length; i++) {
             const valueExists = tagCloudData.includes(values[i]);

x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx

@@ -451,6 +451,7 @@ export function SuggestionPanel({
     <div className="lnsSuggestionPanel">
       <EuiAccordion
         id="lensSuggestionsPanel"
+        buttonProps={{ 'data-test-subj': 'lensSuggestionsPanelToggleButton' }}
         buttonContent={
           <EuiTitle size="xxs">
             <h3>

x-pack/test/functional/apps/lens/group5/index.ts

@@ -77,5 +77,6 @@ export default ({ getService, loadTestFile, getPageObjects }: FtrProviderContext
     loadTestFile(require.resolve('./formula')); // 5m 52s
     loadTestFile(require.resolve('./heatmap')); // 51s
     loadTestFile(require.resolve('./gauge')); // 1m 17s
+    loadTestFile(require.resolve('./tagcloud')); // 1m
   });
 };

x-pack/test/functional/apps/lens/group5/tagcloud.ts

@@ -0,0 +1,65 @@
+/*
+ * 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 expect from '@kbn/expect';
+import { FtrProviderContext } from '../../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const PageObjects = getPageObjects(['visualize', 'lens', 'common', 'header', 'tagCloud']);
+  const elasticChart = getService('elasticChart');
+  const filterBar = getService('filterBar');
+
+  describe('lens tagcloud', () => {
+    before(async () => {
+      await PageObjects.visualize.navigateToNewVisualization();
+      await PageObjects.visualize.clickVisType('lens');
+      await elasticChart.setNewChartUiDebugFlag(true);
+      await PageObjects.lens.goToTimeRange();
+      await PageObjects.lens.switchToVisualization('lnsTagcloud', 'Tag cloud');
+
+      await PageObjects.lens.configureDimension({
+        dimension: 'lnsTagcloud_tagDimensionPanel > lns-empty-dimension',
+        operation: 'terms',
+        field: 'ip',
+      });
+
+      await PageObjects.lens.configureDimension({
+        dimension: 'lnsTagcloud_valueDimensionPanel > lns-empty-dimension',
+        operation: 'average',
+        field: 'bytes',
+      });
+      await PageObjects.header.waitUntilLoadingHasFinished();
+      await PageObjects.lens.waitForVisualization('tagCloudVisualization');
+
+      // avoid picking up tags in suggestion panel by closing panel
+      await PageObjects.lens.closeSuggestionPanel();
+    });
+
+    it('should render tagcloud', async () => {
+      const tags = await PageObjects.tagCloud.getTextTag();
+      expect(tags).to.eql([
+        '97.220.3.248',
+        '78.83.247.30',
+        '226.82.228.233',
+        '93.28.27.24',
+        'Other',
+      ]);
+    });
+
+    it('should add filter from clicking on tag', async () => {
+      await PageObjects.tagCloud.selectTagCloudTag('97.220.3.248');
+      await PageObjects.header.waitUntilLoadingHasFinished();
+      const hasTagFilter = await filterBar.hasFilter('ip', '97.220.3.248');
+      expect(hasTagFilter).to.be(true);
+    });
+
+    it('should filter results by filter bar', async () => {
+      const tags = await PageObjects.tagCloud.getTextTag();
+      expect(tags).to.eql(['97.220.3.248']);
+    });
+  });
+}

x-pack/test/functional/page_objects/lens_page.ts

@@ -1831,5 +1831,12 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont
         Record<string, { content: string; type: string }> | undefined
       >(() => window.ELASTIC_LENS_CSV_CONTENT);
     },
+
+    async closeSuggestionPanel() {
+      const isSuggestionPanelOpen = await testSubjects.exists('lnsSuggestionsPanel');
+      if (isSuggestionPanelOpen) {
+        await testSubjects.click('lensSuggestionsPanelToggleButton');
+      }
+    },
   });
 }