Geomap: Map control options e2e (#54809)

devenv/dev-dashboards/panel-geomap/geomap-spatial-operations-transformer.json

@@ -70,11 +70,11 @@
       "options": {
         "controls": {
           "mouseWheelZoom": true,
-          "showAttribution": true,
+          "showAttribution": false,
           "showDebug": false,
           "showMeasure": false,
           "showScale": false,
-          "showZoom": true
+          "showZoom": false
         },
         "tooltip": {
           "mode": "details"

e2e/geomap-suite/geomap-map-controls.spec.ts

@@ -0,0 +1,35 @@
+import { e2e } from '@grafana/e2e';
+const DASHBOARD_ID = 'P2jR04WVk';
+
+e2e.scenario({
+  describeName: 'Geomap map controls options',
+  itName: 'Tests map controls options',
+  addScenarioDataSource: false,
+  addScenarioDashBoard: false,
+  skipScenario: false,
+  scenario: () => {
+    e2e.flows.openDashboard({ uid: DASHBOARD_ID, queryParams: { editPanel: 1 } });
+
+    // Show zoom
+    e2e.components.OptionsGroup.group('Map controls').scrollIntoView().should('exist');
+    cy.get('input[id="controls.showZoom"]').check({ force: true });
+    cy.contains('+');
+    cy.get('.ol-zoom').should('exist');
+
+    // Show attribution
+    cy.get('input[id="controls.showAttribution"]').check({ force: true });
+    cy.get('.ol-attribution').should('exist');
+
+    // Show scale
+    cy.get('input[id="controls.showScale"]').check({ force: true });
+    cy.get('.ol-scale-line').should('exist');
+
+    // Show measure tool
+    cy.get('input[id="controls.showMeasure"]').check({ force: true });
+    e2e.components.PanelEditor.measureButton().should('exist');
+
+    // Show debug
+    cy.get('input[id="controls.showDebug"]').check({ force: true });
+    e2e.components.DebugOverlay.wrapper().should('exist');
+  },
+});

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -127,6 +127,9 @@ export const Components = {
     toggleVizPicker: 'toggle-viz-picker',
     toggleVizOptions: 'toggle-viz-options',
     toggleTableView: 'toggle-table-view',
+
+    // [Geomap] Map controls
+    measureButton: 'show measure tools',
   },
   PanelInspector: {
     Data: {
@@ -368,4 +371,7 @@ export const Components = {
     inputField: 'data-testid-file-upload-input-field',
     fileNameSpan: 'data-testid-file-upload-file-name',
   },
+  DebugOverlay: {
+    wrapper: 'debug-overlay',
+  },
 };

public/app/plugins/panel/geomap/components/DebugOverlay.tsx

@@ -6,6 +6,7 @@ import React, { PureComponent } from 'react';
 import tinycolor from 'tinycolor2';
 
 import { GrafanaTheme } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors/src';
 import { stylesFactory } from '@grafana/ui';
 import { config } from 'app/core/config';
 
@@ -43,7 +44,7 @@ export class DebugOverlay extends PureComponent<Props, State> {
     const { zoom, center } = this.state;
 
     return (
-      <div className={this.style.infoWrap}>
+      <div className={this.style.infoWrap} aria-label={selectors.components.DebugOverlay.wrapper}>
         <table>
           <tbody>
             <tr>