[Maps] add functional test for tooltip filter actions (#38988)

x-pack/plugins/maps/public/components/map/feature_tooltip.js

@@ -102,6 +102,7 @@ export class FeatureTooltip extends React.Component {
           aria-label={i18n.translate('xpack.maps.tooltip.filterOnPropertyAriaLabel', {
             defaultMessage: 'Filter on property'
           })}
+          data-test-subj="mapTooltipCreateFilterButton"
         />
       </td>
     );
@@ -151,6 +152,7 @@ export class FeatureTooltip extends React.Component {
           aria-label={i18n.translate('xpack.maps.tooltip.closeAriaLabel', {
             defaultMessage: 'Close tooltip'
           })}
+          data-test-subj="mapTooltipCloseButton"
         />
       </EuiTextAlign>
     );

x-pack/plugins/maps/public/components/map/mb/view.js

@@ -508,7 +508,14 @@ export class MBMapContainer extends React.Component {
   };
 
   render() {
-    return (<div id={'mapContainer'} className="mapContainer" ref="mapContainer"/>);
+    return (
+      <div
+        id="mapContainer"
+        className="mapContainer"
+        ref="mapContainer"
+        data-test-subj="mapContainer"
+      />
+    );
   }
 }
 

x-pack/test/functional/apps/maps/embeddable/index.js

@@ -0,0 +1,13 @@
+/*
+ * 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.
+ */
+
+export default function ({ loadTestFile }) {
+  describe('embeddable', function () {
+    loadTestFile(require.resolve('./dashboard'));
+    loadTestFile(require.resolve('./embeddable_state'));
+    loadTestFile(require.resolve('./tooltip_filter_actions'));
+  });
+}

x-pack/test/functional/apps/maps/embeddable/tooltip_filter_actions.js

@@ -0,0 +1,43 @@
+/*
+ * 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';
+
+export default function ({ getPageObjects, getService }) {
+  const PageObjects = getPageObjects(['common', 'dashboard', 'maps']);
+  const kibanaServer = getService('kibanaServer');
+  const testSubjects = getService('testSubjects');
+  const filterBar = getService('filterBar');
+
+  describe('tooltip filter actions', () => {
+
+    before(async () => {
+      await kibanaServer.uiSettings.replace({
+        'defaultIndex': 'c698b940-e149-11e8-a35a-370a8516603a'
+      });
+      await PageObjects.common.navigateToApp('dashboard');
+      await PageObjects.dashboard.loadSavedDashboard('dash for tooltip filter action test');
+
+      await PageObjects.maps.lockTooltipAtPosition(200, -200);
+    });
+
+    it('should display create filter button when tooltip is locked', async () => {
+      const exists = await testSubjects.exists('mapTooltipCreateFilterButton');
+      expect(exists).to.be(true);
+    });
+
+    it('should create filters when create filter button is clicked', async () => {
+      await testSubjects.click('mapTooltipCreateFilterButton');
+
+      const hasSourceFilter = await filterBar.hasFilter('name', 'charlie');
+      expect(hasSourceFilter).to.be(true);
+
+      const hasJoinFilter = await filterBar.hasFilter('shape_name', 'charlie');
+      expect(hasJoinFilter).to.be(true);
+    });
+
+  });
+}

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

@@ -43,8 +43,7 @@ export default function ({ loadTestFile, getService }) {
       loadTestFile(require.resolve('./joins'));
       loadTestFile(require.resolve('./add_layer_panel'));
       loadTestFile(require.resolve('./layer_errors'));
-      loadTestFile(require.resolve('./embeddable/dashboard'));
-      loadTestFile(require.resolve('./embeddable/embeddable_state'));
+      loadTestFile(require.resolve('./embeddable'));
     });
   });
 }

x-pack/test/functional/es_archives/maps/kibana/data.json

@@ -227,7 +227,7 @@
           "type": "envelope"
         },
         "description": "",
-        "layerListJSON": "[{\"id\":\"0hmz5\",\"label\":\"EMS base layer (road_map)\",\"sourceDescriptor\":{\"type\":\"EMS_TMS\",\"id\":\"road_map\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"TILE\",\"properties\":{}},\"type\":\"TILE\",\"minZoom\":0,\"maxZoom\":24},{\"id\":\"n1t6f\",\"label\":null,\"minZoom\":0,\"maxZoom\":24,\"sourceDescriptor\":{\"id\":\"62eca1fc-fe42-11e8-8eb2-f2801f1b9fd1\",\"type\":\"ES_SEARCH\",\"geoField\":\"geometry\",\"limit\":2048,\"filterByMapBounds\":false,\"showTooltip\":true,\"tooltipProperties\":[],\"indexPatternRefName\":\"layer_1_source_index_pattern\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"VECTOR\",\"properties\":{\"fillColor\":{\"type\":\"DYNAMIC\",\"options\":{\"field\":{\"label\":\"max(prop1) group by meta_for_geo_shapes*.shape_name\",\"name\":\"__kbnjoin__max_of_prop1_groupby_meta_for_geo_shapes*.shape_name\",\"origin\":\"join\"},\"color\":\"Blues\"}},\"iconSize\":{\"type\":\"STATIC\",\"options\":{\"size\":10}}},\"temporary\":true,\"previousStyle\":null},\"type\":\"VECTOR\",\"joins\":[{\"leftField\":\"name\",\"right\":{\"id\":\"855ccb86-fe42-11e8-8eb2-f2801f1b9fd1\",\"indexPatternTitle\":\"meta_for_geo_shapes*\",\"term\":\"shape_name\",\"metrics\":[{\"type\":\"max\",\"field\":\"prop1\"}],\"indexPatternRefName\":\"layer_1_join_0_index_pattern\"}}]}]",
+        "layerListJSON": "[{\"id\":\"0hmz5\",\"label\":\"EMS base layer (road_map)\",\"sourceDescriptor\":{\"type\":\"EMS_TMS\",\"id\":\"road_map\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"TILE\",\"properties\":{}},\"type\":\"TILE\",\"minZoom\":0,\"maxZoom\":24},{\"id\":\"n1t6f\",\"label\":null,\"minZoom\":0,\"maxZoom\":24,\"sourceDescriptor\":{\"id\":\"62eca1fc-fe42-11e8-8eb2-f2801f1b9fd1\",\"type\":\"ES_SEARCH\",\"geoField\":\"geometry\",\"limit\":2048,\"filterByMapBounds\":false,\"showTooltip\":true,\"tooltipProperties\":[\"name\"],\"indexPatternRefName\":\"layer_1_source_index_pattern\"},\"visible\":true,\"temporary\":false,\"style\":{\"type\":\"VECTOR\",\"properties\":{\"fillColor\":{\"type\":\"DYNAMIC\",\"options\":{\"field\":{\"label\":\"max(prop1) group by meta_for_geo_shapes*.shape_name\",\"name\":\"__kbnjoin__max_of_prop1_groupby_meta_for_geo_shapes*.shape_name\",\"origin\":\"join\"},\"color\":\"Blues\"}},\"iconSize\":{\"type\":\"STATIC\",\"options\":{\"size\":10}}},\"temporary\":true,\"previousStyle\":null},\"type\":\"VECTOR\",\"joins\":[{\"leftField\":\"name\",\"right\":{\"id\":\"855ccb86-fe42-11e8-8eb2-f2801f1b9fd1\",\"indexPatternTitle\":\"meta_for_geo_shapes*\",\"term\":\"shape_name\",\"metrics\":[{\"type\":\"max\",\"field\":\"prop1\"}],\"indexPatternRefName\":\"layer_1_join_0_index_pattern\"}}]}]",
         "mapStateJSON": "{\"zoom\":3.02,\"center\":{\"lon\":77.33426,\"lat\":-0.04647},\"timeFilters\":{\"from\":\"now-17m\",\"to\":\"now\",\"mode\":\"quick\"},\"refreshConfig\":{\"isPaused\":true,\"interval\":1000}}",
         "title": "join example",
         "uiStateJSON": "{\"isLayerTOCOpen\":true,\"openTOCDetails\":[\"n1t6f\"]}"
@@ -477,3 +477,43 @@
     }
   }
 }
+
+{
+  "type": "doc",
+  "value": {
+    "id": "dashboard:03c7cbf0-8eae-11e9-b674-69d1999628e4",
+    "index": ".kibana",
+    "source": {
+      "dashboard": {
+        "title" : "dash for tooltip filter action test",
+        "hits" : 0,
+        "description" : "Zoomed in so entire screen is covered by filter so click to open tooltip can not miss.",
+        "panelsJSON" : "[{\"gridData\":{\"x\":0,\"y\":0,\"w\":48,\"h\":26,\"i\":\"1\"},\"version\":\"8.0.0\",\"panelIndex\":\"1\",\"embeddableConfig\":{\"mapCenter\":{\"lat\":-1.31919,\"lon\":59.53306,\"zoom\":9.67},\"isLayerTOCOpen\":false,\"openTOCDetails\":[\"n1t6f\"]},\"panelRefName\":\"panel_0\"}]",
+        "optionsJSON" : "{\"useMargins\":true,\"hidePanelTitles\":false}",
+        "version" : 1,
+        "timeRestore" : true,
+        "timeTo" : "2015-09-20T01:00:00.000Z",
+        "timeFrom" : "2015-09-20T00:00:00.000Z",
+        "refreshInterval" : {
+          "pause" : true,
+          "value" : 1000
+        },
+        "kibanaSavedObjectMeta" : {
+          "searchSourceJSON" : "{\"query\":{\"query\":\"\",\"language\":\"kuery\"},\"filter\":[]}"
+        }
+      },
+      "type" : "dashboard",
+      "references" : [
+        {
+          "name" : "panel_0",
+          "type" : "map",
+          "id" : "1649cc70-f736-11e8-8ce0-9723965e01e3"
+        }
+      ],
+      "migrationVersion" : {
+        "dashboard" : "7.0.0"
+      },
+      "updated_at" : "2019-06-14T14:09:25.039Z"
+    }
+  }
+}

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

@@ -16,6 +16,7 @@ export function GisPageProvider({ getService, getPageObjects }) {
   const find = getService('find');
   const queryBar = getService('queryBar');
   const comboBox = getService('comboBox');
+  const browser = getService('browser');
 
   function escapeLayerName(layerName) {
     return layerName.split(' ').join('_');
@@ -437,6 +438,19 @@ export function GisPageProvider({ getService, getPageObjects }) {
       await PageObjects.timePicker.pauseAutoRefresh();
       await this.waitForLayersToLoad();
     }
+
+    async lockTooltipAtPosition(xOffset, yOffset) {
+      await retry.try(async () => {
+        const mapContainerElement = await testSubjects.find('mapContainer');
+        await browser.moveMouseTo(mapContainerElement, xOffset, yOffset);
+        await browser.clickMouseButton(mapContainerElement, xOffset, yOffset);
+        // Close button is only displayed with tooltip is locked
+        const hasCloseButton = await testSubjects.exists('mapTooltipCloseButton');
+        if (!hasCloseButton) {
+          throw new Error('Tooltip is not locked at position');
+        }
+      });
+    }
   }
   return new GisPage();
 }