Update dashboard snapshot tests (#19420) (#19562)

* update snapshot tests

* Update time ranges

* Add sleeps, adjust time, update snapshots

* Skip TSVB until the issue with vertical line placement and x-axis timestamps is fixed

* fix expectations of time range with saved search creation

* remove debug line

test/functional/apps/dashboard/_dashboard_filter_bar.js

@@ -81,7 +81,7 @@ export default function ({ getService, getPageObjects }) {
       before(async () => {
         await PageObjects.dashboard.gotoDashboardLandingPage();
         await PageObjects.dashboard.clickNewDashboard();
-        await PageObjects.dashboard.setTimepickerIn63DataRange();
+        await PageObjects.dashboard.setTimepickerInDataRange();
       });
 
       it('are not selected by default', async function () {

test/functional/apps/dashboard/_dashboard_filtering.js

@@ -40,7 +40,7 @@ export default function ({ getService, getPageObjects }) {
     describe('adding a filter that excludes all data', async () => {
       before(async () => {
         await PageObjects.dashboard.clickNewDashboard();
-        await PageObjects.dashboard.setTimepickerIn63DataRange();
+        await PageObjects.dashboard.setTimepickerInDataRange();
         await dashboardAddPanel.addEveryVisualization('"Filter Bytes Test"');
         await dashboardAddPanel.addEverySavedSearch('"Filter Bytes Test"');
         await dashboardAddPanel.closeAddPanel();
@@ -166,7 +166,7 @@ export default function ({ getService, getPageObjects }) {
 
       it('visualization saved with a query filters data', async () => {
         await PageObjects.dashboard.clickNewDashboard();
-        await PageObjects.dashboard.setTimepickerIn63DataRange();
+        await PageObjects.dashboard.setTimepickerInDataRange();
 
         await dashboardAddPanel.addVisualization('Rendering-Test:-animal-sounds-pie');
         await PageObjects.header.waitUntilLoadingHasFinished();

test/functional/apps/dashboard/_dashboard_snapshots.js

@@ -19,78 +19,67 @@
 
 import expect from 'expect.js';
 
-import { AREA_CHART_VIS_NAME } from '../../page_objects/dashboard_page';
-
-
 export default function ({ getService, getPageObjects, updateBaselines }) {
-  const dashboardVisualizations = getService('dashboardVisualizations');
   const PageObjects = getPageObjects(['dashboard', 'header', 'visualize', 'common']);
   const screenshot = getService('screenshots');
   const remote = getService('remote');
   const dashboardPanelActions = getService('dashboardPanelActions');
-  const testSubjects = getService('testSubjects');
+  const dashboardAddPanel = getService('dashboardAddPanel');
 
   describe('dashboard snapshots', function describeIndexTests() {
     before(async function () {
-      await PageObjects.dashboard.initTests();
-      await PageObjects.dashboard.preserveCrossAppState();
+      // We use a really small window to minimize differences across os's and browsers.
       await remote.setWindowSize(1000, 500);
     });
 
     after(async function () {
-      // avoids any 'Object with id x not found' errors when switching tests.
-      await PageObjects.header.clickVisualize();
-      await PageObjects.visualize.gotoLandingPage();
-      await PageObjects.header.clickDashboard();
-      await PageObjects.dashboard.gotoDashboardLandingPage();
+      await remote.setWindowSize(1300, 900);
     });
 
-    // This one won't work because of https://github.com/elastic/kibana/issues/15501.  See if we can get it to work
-    // once TSVB has timezone support.
+    // Skip until https://github.com/elastic/kibana/issues/19471 is fixed
     it.skip('compare TSVB snapshot', async () => {
       await PageObjects.dashboard.gotoDashboardLandingPage();
       await PageObjects.dashboard.clickNewDashboard();
-      await PageObjects.dashboard.setTimepickerInDataRange();
-      await dashboardVisualizations.createAndAddTSVBVisualization('TSVB');
-      await testSubjects.click('toastCloseButton');
+      await PageObjects.dashboard.setTimepickerInLogstashDataRange();
+      await dashboardAddPanel.addVisualization('Rendering Test: tsvb-ts');
+      await PageObjects.common.closeToast();
 
       await PageObjects.dashboard.saveDashboard('tsvb');
-      await testSubjects.click('saveDashboardSuccess toastCloseButton');
+      await PageObjects.common.closeToast();
 
       await PageObjects.dashboard.clickFullScreenMode();
       await dashboardPanelActions.toggleExpandPanel();
 
       await PageObjects.dashboard.waitForRenderComplete();
+      // Render complete flag doesn't handle resizes from expanding.
+      await PageObjects.common.sleep(2000);
       const percentSimilar = await screenshot.compareAgainstBaseline('tsvb_dashboard', updateBaselines);
 
       await PageObjects.dashboard.clickExitFullScreenLogoButton();
 
-      expect(percentSimilar).to.be(0);
+      expect(percentSimilar).to.be.lessThan(0.05);
     });
 
     it('compare area chart snapshot', async () => {
       await PageObjects.dashboard.gotoDashboardLandingPage();
       await PageObjects.dashboard.clickNewDashboard();
-      await PageObjects.dashboard.setTimepickerInDataRange();
-      await PageObjects.dashboard.addVisualizations([AREA_CHART_VIS_NAME]);
-      await testSubjects.click('addVisualizationToDashboardSuccess toastCloseButton');
-
+      await PageObjects.dashboard.setTimepickerInLogstashDataRange();
+      await dashboardAddPanel.addVisualization('Rendering Test: area with not filter');
+      await PageObjects.common.closeToast();
       await PageObjects.dashboard.saveDashboard('area');
-      await testSubjects.click('saveDashboardSuccess toastCloseButton');
+      await PageObjects.common.closeToast();
 
       await PageObjects.dashboard.clickFullScreenMode();
       await dashboardPanelActions.toggleExpandPanel();
 
       await PageObjects.dashboard.waitForRenderComplete();
-      // The need for this should have been removed with https://github.com/elastic/kibana/pull/15574 but the
-      // test failed when removed because the visualization hadn't settled.
-      await PageObjects.common.sleep(1000);
-
+      // Render complete flag doesn't handle resizes from expanding.
+      await PageObjects.common.sleep(2000);
       const percentSimilar = await screenshot.compareAgainstBaseline('area_chart', updateBaselines);
 
       await PageObjects.dashboard.clickExitFullScreenLogoButton();
 
-      // Testing some OS/browser differnces were shown to cause .009 percent difference.
+      // Testing some OS/browser differences were shown to cause .009 percent difference.
       expect(percentSimilar).to.be.lessThan(0.05);
     });
   });

test/functional/apps/dashboard/_dashboard_state.js

@@ -47,7 +47,7 @@ export default function ({ getService, getPageObjects }) {
       await PageObjects.dashboard.gotoDashboardLandingPage();
 
       await PageObjects.dashboard.clickNewDashboard();
-      await PageObjects.dashboard.setTimepickerInDataRange();
+      await PageObjects.dashboard.setTimepickerInHistoricalDataRange();
 
       await dashboardAddPanel.addVisualization(AREA_CHART_VIS_NAME);
       await PageObjects.dashboard.saveDashboard('Overridden colors');
@@ -70,7 +70,7 @@ export default function ({ getService, getPageObjects }) {
       await PageObjects.dashboard.gotoDashboardLandingPage();
 
       await PageObjects.header.clickDiscover();
-      await PageObjects.dashboard.setTimepickerInDataRange();
+      await PageObjects.dashboard.setTimepickerInHistoricalDataRange();
       await PageObjects.discover.clickFieldListItemAdd('bytes');
       await PageObjects.discover.saveSearch('my search');
       await PageObjects.header.waitUntilLoadingHasFinished();
@@ -120,7 +120,7 @@ export default function ({ getService, getPageObjects }) {
       await PageObjects.dashboard.gotoDashboardLandingPage();
 
       await PageObjects.dashboard.clickNewDashboard();
-      await PageObjects.dashboard.setTimepickerInDataRange();
+      await PageObjects.dashboard.setTimepickerInHistoricalDataRange();
 
       await dashboardAddPanel.addVisualization('Visualization TileMap');
       await PageObjects.dashboard.saveDashboard('No local edits');

test/functional/apps/dashboard/_dashboard_time_picker.js

@@ -43,7 +43,7 @@ export default function ({ getService, getPageObjects }) {
       await PageObjects.dashboard.addVisualizations([PIE_CHART_VIS_NAME]);
       await dashboardExpect.pieSliceCount(0);
 
-      await PageObjects.dashboard.setTimepickerInDataRange();
+      await PageObjects.dashboard.setTimepickerInHistoricalDataRange();
       await dashboardExpect.pieSliceCount(10);
     });
 

test/functional/apps/dashboard/_panel_controls.js

@@ -53,7 +53,7 @@ export default function ({ getService, getPageObjects }) {
     describe('panel edit controls', function () {
       before(async () => {
         await PageObjects.dashboard.clickNewDashboard();
-        await PageObjects.dashboard.setTimepickerInDataRange();
+        await PageObjects.dashboard.setTimepickerInHistoricalDataRange();
         await dashboardAddPanel.addVisualization(PIE_CHART_VIS_NAME);
       });
 

test/functional/apps/dashboard/_view_edit.js

@@ -113,7 +113,7 @@ export default function ({ getService, getPageObjects }) {
         });
 
         it('when a filter is deleted', async function () {
-          await PageObjects.dashboard.setTimepickerInDataRange();
+          await PageObjects.dashboard.setTimepickerInHistoricalDataRange();
           await PageObjects.dashboard.filterOnPieSlice();
           await PageObjects.dashboard.saveDashboard(dashboardName);
 
@@ -238,7 +238,7 @@ export default function ({ getService, getPageObjects }) {
 
       it('when a dashboard has a filter and remains unchanged', async function () {
         await PageObjects.dashboard.gotoDashboardEditMode(dashboardName);
-        await PageObjects.dashboard.setTimepickerInDataRange();
+        await PageObjects.dashboard.setTimepickerInHistoricalDataRange();
         await PageObjects.dashboard.filterOnPieSlice();
         await PageObjects.dashboard.saveDashboard(dashboardName);
         await PageObjects.dashboard.clickEdit();

test/functional/apps/dashboard/index.js

@@ -29,7 +29,7 @@ export default function ({ getService, loadTestFile, getPageObjects }) {
         await PageObjects.dashboard.initTests({
           kibanaIndex: 'dashboard/current/kibana',
           dataIndex: 'dashboard/current/data',
-          defaultIndex: 'logstash-*'
+          defaultIndex: 'logstash-*',
         });
         await PageObjects.dashboard.preserveCrossAppState();
       });
@@ -53,6 +53,7 @@ export default function ({ getService, loadTestFile, getPageObjects }) {
       loadTestFile(require.resolve('./_dashboard_filtering'));
       loadTestFile(require.resolve('./_panel_expand_toggle'));
       loadTestFile(require.resolve('./_dashboard_grid'));
+      loadTestFile(require.resolve('./_dashboard_snapshots'));
     });
 
     // Each of these tests call initTests themselves, the way it was originally written.  The above tests only load
@@ -63,7 +64,6 @@ export default function ({ getService, loadTestFile, getPageObjects }) {
 
       loadTestFile(require.resolve('./_dashboard_time_picker'));
       loadTestFile(require.resolve('./_bwc_shared_urls'));
-      loadTestFile(require.resolve('./_dashboard_snapshots'));
       loadTestFile(require.resolve('./_panel_controls'));
       loadTestFile(require.resolve('./_view_edit'));
       loadTestFile(require.resolve('./_dashboard_state'));

test/functional/page_objects/common_page.js

@@ -70,9 +70,9 @@ export function CommonPageProvider({ getService, getPageObjects }) {
             .then(function (defaultIndex) {
               if (appName === 'discover' || appName === 'visualize' || appName === 'dashboard') {
                 if (!defaultIndex) {
-                // https://github.com/elastic/kibana/issues/7496
-                // Even though most tests are using esClient to set the default index, sometimes Kibana clobbers
-                // that change.  If we got here, fix it.
+                  // https://github.com/elastic/kibana/issues/7496
+                  // Even though most tests are using esClient to set the default index, sometimes Kibana clobbers
+                  // that change.  If we got here, fix it.
                   log.debug(' >>>>>>>> WARNING Navigating to [' + appName + '] with defaultIndex=' + defaultIndex);
                   log.debug(' >>>>>>>> Setting defaultIndex to "logstash-*""');
                   return kibanaServer.uiSettings.update({
@@ -127,14 +127,14 @@ export function CommonPageProvider({ getService, getPageObjects }) {
               // Browsers don't show the ':port' if it's 80 or 443 so we have to
               // remove that part so we can get a match in the tests.
               const navSuccessful = new RegExp(appUrl.replace(':80', '').replace(':443', '')
-             + '.{0,' + maxAdditionalLengthOnNavUrl + '}$')
+                + '.{0,' + maxAdditionalLengthOnNavUrl + '}$')
                 .test(currentUrl);
 
               if (!navSuccessful) {
                 const msg = 'App failed to load: ' + appName +
-              ' in ' + defaultFindTimeout + 'ms' +
-              ' appUrl = ' + appUrl +
-              ' currentUrl = ' + currentUrl;
+                  ' in ' + defaultFindTimeout + 'ms' +
+                  ' appUrl = ' + appUrl +
+                  ' currentUrl = ' + currentUrl;
                 log.debug(msg);
                 throw new Error(msg);
               }
@@ -149,7 +149,7 @@ export function CommonPageProvider({ getService, getPageObjects }) {
           .then(function (currentUrl) {
             let lastUrl = currentUrl;
             return retry.try(function () {
-            // give the app time to update the URL
+              // give the app time to update the URL
               return self.sleep(501)
                 .then(function () {
                   return remote.getCurrentUrl();
@@ -303,11 +303,18 @@ export function CommonPageProvider({ getService, getPageObjects }) {
       });
     }
 
+    async closeToast() {
+      const toast = await find.byCssSelector('.euiToast');
+      await remote.moveMouseTo(toast);
+      await find.clickByCssSelector('.euiToast__closeButton');
+    }
+
     async clearAllToasts() {
       const toasts = await find.allByCssSelector('.euiToast');
       for (const toastElement of toasts) {
         try {
-          const closeBtn = await toastElement.findByCssSelector('euiToast__closeButton');
+          await remote.moveMouseTo(toastElement);
+          const closeBtn = await toastElement.findByCssSelector('.euiToast__closeButton');
           await closeBtn.click();
         } catch (err) {
           // ignore errors, toast clear themselves after timeout

test/functional/page_objects/dashboard_page.js

@@ -449,18 +449,24 @@ export function DashboardPageProvider({ getService, getPageObjects }) {
       await dashboardAddPanel.addVisualizations(visualizations);
     }
 
-    async setTimepickerInDataRange() {
+    async setTimepickerInHistoricalDataRange() {
       const fromTime = '2015-09-19 06:31:44.000';
       const toTime = '2015-09-23 18:31:44.000';
       await PageObjects.header.setAbsoluteRange(fromTime, toTime);
     }
 
-    async setTimepickerIn63DataRange() {
+    async setTimepickerInDataRange() {
       const fromTime = '2018-01-01 00:00:00.000';
       const toTime = '2018-04-13 00:00:00.000';
       await PageObjects.header.setAbsoluteRange(fromTime, toTime);
     }
 
+    async setTimepickerInLogstashDataRange() {
+      const fromTime = '2018-04-09 00:00:00.000';
+      const toTime = '2018-04-13 00:00:00.000';
+      await PageObjects.header.setAbsoluteRange(fromTime, toTime);
+    }
+
     async setSaveAsNewCheckBox(checked) {
       log.debug('saveAsNewCheckbox: ' + checked);
       const saveAsNewCheckbox = await testSubjects.find('saveAsNewCheckbox');

test/functional/services/dashboard/visualizations.js

@@ -42,7 +42,7 @@ export function DashboardVisualizationProvider({ getService, getPageObjects }) {
       log.debug(`createSavedSearch(${name})`);
       await PageObjects.header.clickDiscover();
 
-      await PageObjects.dashboard.setTimepickerInDataRange();
+      await PageObjects.dashboard.setTimepickerInHistoricalDataRange();
 
       if (query) {
         await queryBar.setQuery(query);

test/functional/services/find.js

@@ -169,6 +169,7 @@ export function FindProvider({ getService }) {
       log.debug(`clickByPartialLinkText(${linkText})`);
       await retry.try(async () => {
         const element = await this.byPartialLinkText(linkText, timeout);
+        await remote.moveMouseTo(element);
         await element.click();
       });
     }
@@ -177,6 +178,7 @@ export function FindProvider({ getService }) {
       log.debug(`clickByLinkText(${linkText})`);
       await retry.try(async () => {
         const element = await this.byLinkText(linkText, timeout);
+        await remote.moveMouseTo(element);
         await element.click();
       });
     }
@@ -185,6 +187,7 @@ export function FindProvider({ getService }) {
       log.debug(`clickByCssSelector(${selector})`);
       await retry.try(async () => {
         const element = await this.byCssSelector(selector, timeout);
+        await remote.moveMouseTo(element);
         await element.click();
       });
     }

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

@@ -137,7 +137,7 @@ export default function ({ getService, getPageObjects }) {
       });
 
       it('can filter on a visualization', async () => {
-        await PageObjects.dashboard.setTimepickerInDataRange();
+        await PageObjects.dashboard.setTimepickerInHistoricalDataRange();
         await PageObjects.dashboard.filterOnPieSlice();
         const filters = await PageObjects.dashboard.getFilters();
         expect(filters.length).to.equal(1);