Add BWC url tests for 6.0 (#15033) (#15036)

Also adds some stabilization by refactoring some retries and
expectations.
and fixes a bug that snuck in between two PRS where the pie slice css
changed.

src/ui/public/visualize/visualize_legend.html

@@ -31,8 +31,14 @@
           tooltip="{{legendData.label}}"
           tooltip-animation="false"
           aria-label="{{legendData.label}}, toggle options"
+          data-test-subj="legend-{{legendData.label}}"
         >
-          <i class="fa fa-circle" ng-style="{color: getColor(legendData.label)}"></i> {{legendData.label}}
+          <i
+            class="fa fa-circle"
+            ng-style="{color: getColor(legendData.label)}"
+            data-test-subj="legendSelectedColor-{{getColor(legendData.label)}}"
+          ></i>
+          {{legendData.label}}
         </div>
 
         <div ng-if="showDetails" class="legend-value-details">
@@ -64,7 +70,8 @@
             >
               Set color for value {{legendData.label}}
             </span>
-            <i ng-repeat="choice in colors"
+            <i
+              ng-repeat="choice in colors"
               kbn-accessible-click
               role="option"
               aria-label="{{choice}}"
@@ -73,6 +80,7 @@
               ng-click="setColor(legendData.label, choice)"
               ng-class="choice == getColor(legendData.label) ? 'fa-circle-o' : 'fa-circle'"
               ng-style="{color: choice}" class="fa dot"
+              data-test-subj="legendSelectColor-{{choice}}"
             >
             </i>
           </div>

test/functional/apps/dashboard/_bwc_shared_urls.js

@@ -0,0 +1,51 @@
+import expect from 'expect.js';
+
+export default function ({ getService, getPageObjects }) {
+  const PageObjects = getPageObjects(['dashboard', 'header']);
+  const dashboardExpect = getService('dashboardExpect');
+  const remote = getService('remote');
+  let kibanaBaseUrl;
+
+  describe('bwc shared urls', function describeIndexTests() {
+    before(async function () {
+      await PageObjects.dashboard.initTests();
+
+      const currentUrl = await remote.getCurrentUrl();
+      kibanaBaseUrl = currentUrl.substring(0, currentUrl.indexOf('#'));
+    });
+
+    describe('6.0 urls', () => {
+      it('loads an unsaved dashboard', async function () {
+        const url = `${kibanaBaseUrl}#/dashboard?` +
+          `_g=(refreshInterval:(display:Off,pause:!f,value:0),` +
+              `time:(from:'2012-11-17T00:00:00.000Z',mode:absolute,to:'2015-11-17T18:01:36.621Z'))&` +
+          `_a=(description:'',filters:!(),` +
+              `fullScreenMode:!f,` +
+              `options:(darkTheme:!f),` +
+              `panels:!((col:1,id:Visualization-MetricChart,panelIndex:1,row:1,size_x:6,size_y:3,type:visualization),` +
+                       `(col:7,id:Visualization-PieChart,panelIndex:2,row:1,size_x:6,size_y:3,type:visualization)),` +
+              `query:(language:lucene,query:'memory:%3E220000'),` +
+              `timeRestore:!f,` +
+              `title:'New+Dashboard',` +
+              `uiState:(P-1:(vis:(defaultColors:('0+-+100':'rgb(0,104,55)'))),` +
+                       `P-2:(vis:(colors:('200,000':%23F9D9F9,` +
+                                         `'240,000':%23F9D9F9,` +
+                                         `'280,000':%23F9D9F9,` +
+                                         `'320,000':%23F9D9F9,` +
+                                         `'360,000':%23F9D9F9),` +
+                                  `legendOpen:!t))),` +
+              `viewMode:edit)`;
+
+        await remote.get(url, true);
+        await PageObjects.header.waitUntilLoadingHasFinished();
+
+        const query = await PageObjects.dashboard.getQuery();
+        expect(query).to.equal('memory:>220000');
+
+        await dashboardExpect.pieSliceCount(5);
+        await dashboardExpect.panelCount(2);
+        await dashboardExpect.selectedLegendColorCount('#F9D9F9', 5);
+      });
+    });
+  });
+}

test/functional/apps/dashboard/_dashboard_queries.js

@@ -1,5 +1,3 @@
-import expect from 'expect.js';
-
 import { PIE_CHART_VIS_NAME } from '../../page_objects/dashboard_page';
 
 /**
@@ -7,7 +5,7 @@ import { PIE_CHART_VIS_NAME } from '../../page_objects/dashboard_page';
  * with nested queries and filters on the visualizations themselves.
  */
 export default function ({ getService, getPageObjects }) {
-  const retry = getService('retry');
+  const dashboardExpect = getService('dashboardExpect');
   const dashboardVisualizations = getService('dashboardVisualizations');
   const PageObjects = getPageObjects(['dashboard', 'header', 'visualize']);
 
@@ -45,8 +43,7 @@ export default function ({ getService, getPageObjects }) {
 
       await PageObjects.header.clickDashboard();
 
-      const pieSlicesCount = await PageObjects.dashboard.getPieSliceCount();
-      expect(pieSlicesCount).to.equal(2);
+      await dashboardExpect.pieSliceCount(2);
     });
 
     it('Pie chart attached to saved search filters data as expected', async () => {
@@ -71,8 +68,7 @@ export default function ({ getService, getPageObjects }) {
       await PageObjects.visualize.saveVisualization('memory with bytes < 90 pie');
       await PageObjects.header.clickToastOK();
 
-      const pieSlicesCount = await PageObjects.dashboard.getPieSliceCount();
-      expect(pieSlicesCount).to.equal(3);
+      await dashboardExpect.pieSliceCount(3);
     });
 
     it('Pie chart attached to saved search filters shows no data with conflicting dashboard query', async () => {
@@ -80,12 +76,7 @@ export default function ({ getService, getPageObjects }) {
       await PageObjects.dashboard.clickFilterButton();
       await PageObjects.header.waitUntilLoadingHasFinished();
 
-      // There appears to be a slight delay between the page loading and the visualization reacting to the
-      // filter which is causing this to sometimes be greater than 0, hence the retry.
-      retry.try(async () => {
-        const pieSlicesCount = await PageObjects.dashboard.getPieSliceCount();
-        expect(pieSlicesCount).to.equal(0);
-      });
+      await dashboardExpect.pieSliceCount(0);
     });
   });
 }

test/functional/apps/dashboard/index.js

@@ -4,6 +4,7 @@ export default function ({ getService, loadTestFile }) {
   describe('dashboard app', function () {
     before(() => remote.setWindowSize(1200, 900));
 
+    loadTestFile(require.resolve('./_bwc_shared_urls'));
     loadTestFile(require.resolve('./_dashboard_queries'));
     loadTestFile(require.resolve('./_dashboard_grid'));
     loadTestFile(require.resolve('./_panel_controls'));

test/functional/config.js

@@ -22,6 +22,7 @@ import {
   DocTableProvider,
   ScreenshotsProvider,
   DashboardVisualizationProvider,
+  DashboardExpectProvider,
 } from './services';
 
 export default async function ({ readConfigFile }) {
@@ -66,6 +67,7 @@ export default async function ({ readConfigFile }) {
       docTable: DocTableProvider,
       screenshots: ScreenshotsProvider,
       dashboardVisualizations: DashboardVisualizationProvider,
+      dashboardExpect: DashboardExpectProvider,
     },
     servers: commonConfig.get('servers'),
     apps: {

test/functional/page_objects/dashboard_page.js

@@ -1,4 +1,5 @@
 import _ from 'lodash';
+
 import { DashboardConstants } from '../../../src/core_plugins/kibana/public/dashboard/dashboard_constants';
 
 export const PIE_CHART_VIS_NAME = 'Visualization PieChart';

test/functional/services/dashboard/expectations.js

@@ -0,0 +1,32 @@
+import expect from 'expect.js';
+
+export function DashboardExpectProvider({ getService, getPageObjects }) {
+  const log = getService('log');
+  const retry = getService('retry');
+  const testSubjects = getService('testSubjects');
+  const PageObjects = getPageObjects(['dashboard']);
+
+  return new class DashboardExpect {
+    async pieSliceCount(expectedCount) {
+      log.debug(`expectPieSliceCount(${expectedCount})`);
+      return await retry.try(async () => {
+        const slicesCount = await PageObjects.dashboard.getPieSliceCount();
+        expect(slicesCount).to.eql(expectedCount);
+      });
+    }
+
+    async panelCount(expectedCount) {
+      return retry.try(async () => {
+        const panelCount = await PageObjects.dashboard.getPanelCount();
+        expect(panelCount).to.eql(expectedCount);
+      });
+    }
+
+    async selectedLegendColorCount(color, count) {
+      return retry.try(async () => {
+        const selectedLegendColor = await testSubjects.findAll(`legendSelectColor-${color}`);
+        expect(selectedLegendColor).to.eql(count);
+      });
+    }
+  };
+}

test/functional/services/dashboard/index.js

@@ -1 +1,2 @@
 export { DashboardVisualizationProvider } from './visualizations';
+export { DashboardExpectProvider } from './expectations';

test/functional/services/index.js

@@ -5,4 +5,4 @@ export { TestSubjectsProvider } from './test_subjects';
 export { RemoteProvider } from './remote';
 export { DocTableProvider } from './doc_table';
 export { ScreenshotsProvider } from './screenshots';
-export { DashboardVisualizationProvider } from './dashboard';
+export * from './dashboard';