[Maps] properly wait for map pan and zoom in functional tests (#33993)

* [Maps] properly wait for map pan and zoom in functional tests

* unskip tests from merge with master

* do not check original view with setView

* update expect statements for numbers instead of strings

x-pack/test/functional/apps/maps/es_search_source.js

@@ -73,7 +73,7 @@ export default function ({ getPageObjects, getService }) {
         expect(beforeQueryRefreshTimestamp).not.to.equal(afterQueryRefreshTimestamp);
       });
 
-      it.skip('should apply query to fit to bounds', async () => {
+      it('should apply query to fit to bounds', async () => {
         // Set view to other side of world so no matching results
         await PageObjects.maps.setView(-15, -100, 6);
         await PageObjects.maps.clickFitToBounds('logstash');
@@ -98,7 +98,7 @@ export default function ({ getPageObjects, getService }) {
         expect(hits).to.equal('2');
       });
 
-      it.skip('should apply layer query to fit to bounds', async () => {
+      it('should apply layer query to fit to bounds', async () => {
         // Set view to other side of world so no matching results
         await PageObjects.maps.setView(-15, -100, 6);
         await PageObjects.maps.clickFitToBounds('logstash');

x-pack/test/functional/apps/maps/saved_object_management.js

@@ -39,9 +39,9 @@ export default function ({ getPageObjects, getService }) {
 
       it('should set map location to value stored with map', async () => {
         const { lat, lon, zoom } = await PageObjects.maps.getView();
-        expect(lat).to.equal('-0.04647');
-        expect(lon).to.equal('77.33426');
-        expect(zoom).to.equal('3.02');
+        expect(lat).to.equal(-0.04647);
+        expect(lon).to.equal(77.33426);
+        expect(zoom).to.equal(3.02);
       });
 
       it('should load map layers stored with map', async () => {

x-pack/test/functional/page_objects/gis_page.js

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import _ from 'lodash';
+
 export function GisPageProvider({ getService, getPageObjects }) {
   const PageObjects = getPageObjects(['common', 'header', 'timePicker']);
 
@@ -51,6 +53,26 @@ export function GisPageProvider({ getService, getPageObjects }) {
       }
     }
 
+    // Since there are no DOM indicators that signal when map pan and zoom actions are complete,
+    // this method waits until the map view has stabilized, signaling that the panning/zooming is complete.
+    // Pass origView parameter when the new map view determinition is async
+    // so method knows when panning/zooming has started.
+    async waitForMapPanAndZoom(origView) {
+      await retry.try(async () => {
+        log.debug('Waiting for map pan and zoom to complete');
+        const prevView = await this.getView();
+        await PageObjects.common.sleep(1000);
+        const currentView = await this.getView();
+        if (origView && _.isEqual(origView, currentView)) {
+          throw new Error('Map pan and zoom has not started yet');
+        }
+        if (!_.isEqual(prevView, currentView)) {
+          throw new Error('Map is still panning and zooming');
+        }
+      });
+      await this.waitForLayersToLoad();
+    }
+
     async waitForLayersToLoad() {
       log.debug('Wait for layers to load');
       const tableOfContents = await testSubjects.find('mapLayerTOC');
@@ -169,9 +191,7 @@ export function GisPageProvider({ getService, getPageObjects }) {
       await testSubjects.setValue('longitudeInput', lon.toString());
       await testSubjects.setValue('zoomInput', zoom.toString());
       await testSubjects.click('submitViewButton');
-      await this.waitForLayersToLoad();
-      // there is no way to wait for canvas been reloaded
-      await PageObjects.common.sleep(5000);
+      await this.waitForMapPanAndZoom();
     }
 
     async getView() {
@@ -181,7 +201,11 @@ export function GisPageProvider({ getService, getPageObjects }) {
       const lon = await testSubjects.getAttribute('longitudeInput', 'value');
       const zoom = await testSubjects.getAttribute('zoomInput', 'value');
       await testSubjects.click('toggleSetViewVisibilityButton');
-      return { lat, lon, zoom };
+      return {
+        lat: parseFloat(lat),
+        lon: parseFloat(lon),
+        zoom: parseFloat(zoom)
+      };
     }
 
     async toggleLayerVisibility(layerName) {
@@ -192,9 +216,10 @@ export function GisPageProvider({ getService, getPageObjects }) {
 
     async clickFitToBounds(layerName) {
       log.debug(`Fit to bounds, layer: ${layerName}`);
+      const origView = await this.getView();
       await this.openLayerTocActionsPanel(layerName);
       await testSubjects.click('fitToBoundsButton');
-      await this.waitForLayersToLoad();
+      await this.waitForMapPanAndZoom(origView);
     }
 
     async openLayerTocActionsPanel(layerName) {