[Time to Visualize] Dashboard By Value Testing Lens

x-pack/test/functional/apps/dashboard/dashboard_lens_by_value.ts

@@ -0,0 +1,72 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import expect from '@kbn/expect';
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getPageObjects, getService }: FtrProviderContext) {
+  const PageObjects = getPageObjects(['common', 'dashboard', 'visualize', 'lens']);
+
+  const find = getService('find');
+  const esArchiver = getService('esArchiver');
+  const dashboardPanelActions = getService('dashboardPanelActions');
+  const dashboardVisualizations = getService('dashboardVisualizations');
+
+  describe('dashboard lens by value', function () {
+    before(async () => {
+      await esArchiver.loadIfNeeded('logstash_functional');
+      await esArchiver.loadIfNeeded('lens/basic');
+      await PageObjects.common.navigateToApp('dashboard');
+      await PageObjects.dashboard.preserveCrossAppState();
+      await PageObjects.dashboard.clickNewDashboard();
+    });
+
+    it('can add a lens panel by value', async () => {
+      await dashboardVisualizations.ensureNewVisualizationDialogIsShowing();
+      await PageObjects.lens.createAndAddLensFromDashboard({});
+      const newPanelCount = await PageObjects.dashboard.getPanelCount();
+      expect(newPanelCount).to.eql(1);
+    });
+
+    it('edits to a by value lens panel are properly applied', async () => {
+      await PageObjects.dashboard.waitForRenderComplete();
+      await dashboardPanelActions.openContextMenu();
+      await dashboardPanelActions.clickEdit();
+      await PageObjects.lens.switchToVisualization('donut');
+      await PageObjects.lens.saveAndReturn();
+      await PageObjects.dashboard.waitForRenderComplete();
+
+      const pieExists = await find.existsByCssSelector('.lnsPieExpression__container');
+      expect(pieExists).to.be(true);
+    });
+
+    it('editing and saving a lens by value panel retains number of panels', async () => {
+      const originalPanelCount = await PageObjects.dashboard.getPanelCount();
+      await PageObjects.dashboard.waitForRenderComplete();
+      await dashboardPanelActions.openContextMenu();
+      await dashboardPanelActions.clickEdit();
+      await PageObjects.lens.switchToVisualization('treemap');
+      await PageObjects.lens.saveAndReturn();
+      await PageObjects.dashboard.waitForRenderComplete();
+      const newPanelCount = await PageObjects.dashboard.getPanelCount();
+      expect(newPanelCount).to.eql(originalPanelCount);
+    });
+
+    it('updates panel on dashboard when a by value panel is saved to library', async () => {
+      const newTitle = 'look out library, here I come!';
+      const originalPanelCount = await PageObjects.dashboard.getPanelCount();
+      await PageObjects.dashboard.waitForRenderComplete();
+      await dashboardPanelActions.openContextMenu();
+      await dashboardPanelActions.clickEdit();
+      await PageObjects.lens.save(newTitle, false, true);
+      await PageObjects.dashboard.waitForRenderComplete();
+      const newPanelCount = await PageObjects.dashboard.getPanelCount();
+      expect(newPanelCount).to.eql(originalPanelCount);
+      const titles = await PageObjects.dashboard.getPanelTitles();
+      expect(titles.indexOf(newTitle)).to.not.be(-1);
+    });
+  });
+}

x-pack/test/functional/apps/dashboard/index.ts

@@ -15,5 +15,6 @@ export default function ({ loadTestFile }: FtrProviderContext) {
     loadTestFile(require.resolve('./drilldowns'));
     loadTestFile(require.resolve('./sync_colors'));
     loadTestFile(require.resolve('./_async_dashboard'));
+    loadTestFile(require.resolve('./dashboard_lens_by_value'));
   });
 }

x-pack/test/functional/apps/dashboard_mode/dashboard_empty_screen.js

@@ -7,7 +7,6 @@
 import expect from '@kbn/expect';
 
 export default function ({ getPageObjects, getService }) {
-  const log = getService('log');
   const testSubjects = getService('testSubjects');
   const esArchiver = getService('esArchiver');
   const dashboardVisualizations = getService('dashboardVisualizations');
@@ -27,40 +26,12 @@ export default function ({ getPageObjects, getService }) {
       await PageObjects.dashboard.gotoDashboardLandingPage();
     });
 
-    async function createAndAddLens(title, saveAsNew = false, redirectToOrigin = true) {
-      log.debug(`createAndAddLens(${title})`);
-      const inViewMode = await PageObjects.dashboard.getIsInViewMode();
-      if (inViewMode) {
-        await PageObjects.dashboard.switchToEditMode();
-      }
-      await PageObjects.visualize.clickLensWidget();
-      await PageObjects.lens.goToTimeRange();
-      await PageObjects.lens.configureDimension({
-        dimension: 'lnsXY_xDimensionPanel > lns-empty-dimension',
-        operation: 'date_histogram',
-        field: '@timestamp',
-      });
-
-      await PageObjects.lens.configureDimension({
-        dimension: 'lnsXY_yDimensionPanel > lns-empty-dimension',
-        operation: 'avg',
-        field: 'bytes',
-      });
-
-      await PageObjects.lens.configureDimension({
-        dimension: 'lnsXY_splitDimensionPanel > lns-empty-dimension',
-        operation: 'terms',
-        field: 'ip',
-      });
-      await PageObjects.lens.save(title, saveAsNew, redirectToOrigin);
-    }
-
     it('adds Lens visualization to empty dashboard', async () => {
       const title = 'Dashboard Test Lens';
       await testSubjects.exists('addVisualizationButton');
       await testSubjects.click('addVisualizationButton');
       await dashboardVisualizations.ensureNewVisualizationDialogIsShowing();
-      await createAndAddLens(title);
+      await PageObjects.lens.createAndAddLensFromDashboard({ title, redirectToOrigin: true });
       await PageObjects.dashboard.waitForRenderComplete();
       await testSubjects.exists(`embeddablePanelHeading-${title}`);
     });
@@ -118,7 +89,7 @@ export default function ({ getPageObjects, getService }) {
       await testSubjects.exists('dashboardAddNewPanelButton');
       await testSubjects.click('dashboardAddNewPanelButton');
       await dashboardVisualizations.ensureNewVisualizationDialogIsShowing();
-      await createAndAddLens(title, false, false);
+      await PageObjects.lens.createAndAddLensFromDashboard({ title });
       await PageObjects.lens.notLinkedToOriginatingApp();
       await PageObjects.common.navigateToApp('dashboard');
     });

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

@@ -16,7 +16,7 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont
   const find = getService('find');
   const comboBox = getService('comboBox');
   const browser = getService('browser');
-  const PageObjects = getPageObjects(['header', 'timePicker', 'common', 'visualize']);
+  const PageObjects = getPageObjects(['header', 'timePicker', 'common', 'visualize', 'dashboard']);
 
   return logWrapper('lensPage', log, {
     /**
@@ -586,5 +586,49 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont
       // TODO: target dimensionTrigger color element after merging https://github.com/elastic/kibana/pull/76871
       await testSubjects.getAttribute('colorPickerAnchor', color);
     },
+
+    /**
+     * Creates and saves a lens visualization from a dashboard
+     *
+     * @param title - title for the new lens. If left undefined, the panel will be created by value
+     * @param redirectToOrigin - whether to redirect back to the dashboard after saving the panel
+     */
+    async createAndAddLensFromDashboard({
+      title,
+      redirectToOrigin,
+    }: {
+      title?: string;
+      redirectToOrigin?: boolean;
+    }) {
+      log.debug(`createAndAddLens${title}`);
+      const inViewMode = await PageObjects.dashboard.getIsInViewMode();
+      if (inViewMode) {
+        await PageObjects.dashboard.switchToEditMode();
+      }
+      await PageObjects.visualize.clickLensWidget();
+      await this.goToTimeRange();
+      await this.configureDimension({
+        dimension: 'lnsXY_xDimensionPanel > lns-empty-dimension',
+        operation: 'date_histogram',
+        field: '@timestamp',
+      });
+
+      await this.configureDimension({
+        dimension: 'lnsXY_yDimensionPanel > lns-empty-dimension',
+        operation: 'avg',
+        field: 'bytes',
+      });
+
+      await this.configureDimension({
+        dimension: 'lnsXY_splitDimensionPanel > lns-empty-dimension',
+        operation: 'terms',
+        field: 'ip',
+      });
+      if (title) {
+        await this.save(title, false, redirectToOrigin);
+      } else {
+        await this.saveAndReturn();
+      }
+    },
   });
 }