chore: fix map chart spec (#36370)

/ok-to-test tags="@tag.Maps"

<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10916335124>
> Commit: 6e88177
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10916335124&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Maps`
> Spec:
> <hr>Wed, 18 Sep 2024 06:11:15 UTC
<!-- end of auto-generated comment: Cypress test results  -->

---------

Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>

app/client/cypress/e2e/Regression/ClientSide/Widgets/Others/MapChart_Spec.ts

@@ -1,5 +1,5 @@
 /// <reference types="Cypress" />
-import viewWidgetsPage from "../../../../../locators/ViewWidgets.json";
+import publishWidgetspage from "../../../../../locators/publishWidgetspage.json";
 import {
   agHelper,
   entityExplorer,
@@ -14,105 +14,57 @@ import EditorNavigation, {
 
 const _mapChartCaption = "text:last-child";
 const _mapChartPlot = (text: string) =>
-  "//text()[contains(., '" + text + "')]/..";
+  `//*[name()='svg']//*[name()='text' and contains(text(), '${text}')]`;
 
 describe(
   "Map Chart Widget Functionality",
   { tags: ["@tag.Widget", "@tag.Maps", "@tag.Visual"] },
   function () {
     it("1. Drag and drop a Map Chart widget and verify", function () {
       entityExplorer.DragDropWidgetNVerify(draggableWidgets.MAPCHART, 200, 200);
+      agHelper.AssertElementExist(_mapChartPlot("AS"));
       deployMode.DeployApp(
         locators._widgetInDeployed(draggableWidgets.MAPCHART),
       );
-      agHelper.VerifySnapshot(locators._root, "mapchartsimple");
+      agHelper.AssertElementExist(_mapChartPlot("AS"));
       deployMode.NavigateBacktoEditor();
       EditorNavigation.SelectEntityByName("MapChart1", EntityType.Widget);
     });
 
     it("2.1 Update the Map type to different types and verify - part1", function () {
       // Change the map type to World with Antarctica and verify the number of entities
       propPane.SelectPropertiesDropDown("Map type", "World with Antarctica");
-      deployMode.DeployApp(
-        locators._widgetInDeployed(draggableWidgets.MAPCHART),
-      );
-      agHelper.VerifySnapshot(locators._root, "mapwithantarctica");
-      deployMode.NavigateBacktoEditor();
-      EditorNavigation.SelectEntityByName("MapChart1", EntityType.Widget);
-
-      // Change the map type to World and verify the number of entities
-      propPane.SelectPropertiesDropDown("Map type", "World");
-      deployMode.DeployApp(
-        locators._widgetInDeployed(draggableWidgets.MAPCHART),
-      );
-      agHelper.VerifySnapshot(locators._root, "mapwithworld");
-      deployMode.NavigateBacktoEditor();
-      EditorNavigation.SelectEntityByName("MapChart1", EntityType.Widget);
+      agHelper.AssertElementExist(_mapChartPlot("AT"));
 
       // Change the map type to Europe and verify the number of entities
       propPane.SelectPropertiesDropDown("Map type", "Europe");
-      deployMode.DeployApp(
-        locators._widgetInDeployed(draggableWidgets.MAPCHART),
-      );
-      agHelper.VerifySnapshot(locators._root, "mapwitheurope");
-      deployMode.NavigateBacktoEditor();
-      EditorNavigation.SelectEntityByName("MapChart1", EntityType.Widget);
+      agHelper.AssertElementExist(_mapChartPlot("FR"));
 
       // Change the map type to North America and verify the number of entities
       propPane.SelectPropertiesDropDown("Map type", "North America");
-      deployMode.DeployApp(
-        locators._widgetInDeployed(draggableWidgets.MAPCHART),
-      );
-      agHelper.VerifySnapshot(locators._root, "mapwithnorthamerica");
-      deployMode.NavigateBacktoEditor();
-      EditorNavigation.SelectEntityByName("MapChart1", EntityType.Widget);
+      agHelper.AssertElementExist(_mapChartPlot("CA"));
 
       // Change the map type to South America and verify the number of entities
       propPane.SelectPropertiesDropDown("Map type", "South America");
-      deployMode.DeployApp(
-        locators._widgetInDeployed(draggableWidgets.MAPCHART),
-      );
-      agHelper.VerifySnapshot(locators._root, "mapwithsouthamerica");
-      deployMode.NavigateBacktoEditor();
-      EditorNavigation.SelectEntityByName("MapChart1", EntityType.Widget);
+      agHelper.AssertElementExist(_mapChartPlot("BR"));
     });
 
     it("2.2 Update the Map type to different types and verify - part2", function () {
       // Change the map type to Oceania and verify the number of entities
       propPane.SelectPropertiesDropDown("Map type", "Oceania");
-      deployMode.DeployApp(
-        locators._widgetInDeployed(draggableWidgets.MAPCHART),
-      );
-      agHelper.VerifySnapshot(locators._root, "mapwithoceania");
-      deployMode.NavigateBacktoEditor();
-      EditorNavigation.SelectEntityByName("MapChart1", EntityType.Widget);
+      agHelper.AssertElementExist(_mapChartPlot("AU"));
 
       // Change the map type to Africa and verify the number of entities
       propPane.SelectPropertiesDropDown("Map type", "Africa");
-      deployMode.DeployApp(
-        locators._widgetInDeployed(draggableWidgets.MAPCHART),
-      );
-      agHelper.VerifySnapshot(locators._root, "mapwithafrica");
-      deployMode.NavigateBacktoEditor();
-      EditorNavigation.SelectEntityByName("MapChart1", EntityType.Widget);
+      agHelper.AssertElementExist(_mapChartPlot("ZA"));
 
       // Change the map type to USA and verify the number of entities
       propPane.SelectPropertiesDropDown("Map type", "USA");
-      deployMode.DeployApp(
-        locators._widgetInDeployed(draggableWidgets.MAPCHART),
-      );
-      agHelper.VerifySnapshot(locators._root, "mapwithusa");
-      deployMode.NavigateBacktoEditor();
-      EditorNavigation.SelectEntityByName("MapChart1", EntityType.Widget);
+      agHelper.AssertElementExist(_mapChartPlot("TX"));
 
       // Change the map type to Asia and verify the number of entities
       propPane.SelectPropertiesDropDown("Map type", "Asia");
-      deployMode.DeployApp(
-        locators._widgetInDeployed(draggableWidgets.MAPCHART),
-      );
-      agHelper.VerifySnapshot(locators._root, "mapwithasia");
-      deployMode.NavigateBacktoEditor();
-      EditorNavigation.SelectEntityByName("MapChart1", EntityType.Widget);
+      agHelper.AssertElementExist(_mapChartPlot("IN"));
     });
 
     it("3. Update the Chart data and verify", function () {
@@ -124,64 +76,21 @@ describe(
       ];
 
       propPane.TypeTextIntoField("Chart data", JSON.stringify(data));
-      deployMode.DeployApp(
-        locators._widgetInDeployed(draggableWidgets.MAPCHART),
-      );
-      agHelper.VerifySnapshot(locators._root, "mapwithcustomdata");
-      deployMode.NavigateBacktoEditor();
-      EditorNavigation.SelectEntityByName("MapChart1", EntityType.Widget);
+      agHelper.AssertElementExist(_mapChartPlot("IN: 2"));
     });
 
     it("4. Verify General settings", function () {
       // update the title and verify
       propPane.TypeTextIntoField("Title", "App Sign Up");
-      deployMode.DeployApp(
-        locators._widgetInDeployed(draggableWidgets.MAPCHART),
-      );
       agHelper.AssertText(_mapChartCaption, "text", "App Sign Up");
-      agHelper.VerifySnapshot(locators._root, "mapwithcustomtitle");
-      deployMode.NavigateBacktoEditor();
-      EditorNavigation.SelectEntityByName("MapChart1", EntityType.Widget);
-
-      // update the visibility using toggle and verify
-      propPane.TogglePropertyState("Visible", "Off");
-      deployMode.DeployApp();
-      agHelper.AssertElementAbsence(
-        locators._widgetInDeployed(draggableWidgets.MAPCHART),
-      );
-      agHelper.VerifySnapshot(locators._root, "mapwithvisibilityoff");
-      deployMode.NavigateBacktoEditor();
-      EditorNavigation.SelectEntityByName("MapChart1", EntityType.Widget);
-
-      // update the visibility using JS and verify
-      propPane.EnterJSContext("Visible", "true");
-      deployMode.DeployApp(
-        locators._widgetInDeployed(draggableWidgets.MAPCHART),
-      );
-      agHelper.AssertElementVisibility(
-        locators._widgetInDeployed(draggableWidgets.MAPCHART),
-      );
-      agHelper.VerifySnapshot(locators._root, "mapwithvisibilityon");
-      deployMode.NavigateBacktoEditor();
-      EditorNavigation.SelectEntityByName("MapChart1", EntityType.Widget);
 
       // update the show labels using toggle and verify
       propPane.TogglePropertyState("Show Labels", "Off");
-      deployMode.DeployApp(
-        locators._widgetInDeployed(draggableWidgets.MAPCHART),
-      );
-      agHelper.VerifySnapshot(locators._root, "mapwithshowlabelsoff");
-      deployMode.NavigateBacktoEditor();
-      EditorNavigation.SelectEntityByName("MapChart1", EntityType.Widget);
+      agHelper.AssertElementAbsence(_mapChartPlot("IN: 2"));
 
       // update the visibility using JS and verify
       propPane.EnterJSContext("Show Labels", "true");
-      deployMode.DeployApp(
-        locators._widgetInDeployed(draggableWidgets.MAPCHART),
-      );
-      agHelper.VerifySnapshot(locators._root, "mapwithshowlableson");
-      deployMode.NavigateBacktoEditor();
-      EditorNavigation.SelectEntityByName("MapChart1", EntityType.Widget);
+      agHelper.AssertElementExist(_mapChartPlot("IN: 2"));
     });
 
     it("5. Update onDataPointClick and Verify", function () {
@@ -192,26 +101,23 @@ describe(
         propPane._actionSelectorFieldByLabel("Message"),
         "Data Point {{MapChart1.selectedDataPoint.label}} Clicked",
       );
-      agHelper.GetNClick(propPane._actionSelectorPopupClose);
-      deployMode.DeployApp(
-        locators._widgetInDeployed(draggableWidgets.MAPCHART),
-      );
-      agHelper.GetNClick(_mapChartPlot("RU: 1.30"), 0, true);
-      agHelper.ValidateToastMessage("Data Point Russian Federation Clicked");
-      deployMode.NavigateBacktoEditor();
+
+      agHelper.GetNClick(locators._enterPreviewMode);
+      agHelper.GetElement(_mapChartPlot("IN: 2")).click();
+
+      agHelper.ValidateToastMessage("Data Point India Clicked");
+      agHelper.GetNClick(locators._exitPreviewMode);
       EditorNavigation.SelectEntityByName("MapChart1", EntityType.Widget);
 
       // Convert the onDataPointClick to JS, update and verify
       propPane.EnterJSContext(
         "onDataPointClick",
         "{{showAlert('Converted to Js and clicked '+ MapChart1.selectedDataPoint.label)}}",
       );
-      deployMode.DeployApp(
-        locators._widgetInDeployed(draggableWidgets.MAPCHART),
-      );
-      agHelper.GetNClick(_mapChartPlot("CN: .40"), 0, true);
-      agHelper.ValidateToastMessage("Converted to Js and clicked China");
-      deployMode.NavigateBacktoEditor();
+      agHelper.GetNClick(locators._enterPreviewMode);
+      agHelper.GetElement(_mapChartPlot("IN: 2")).click();
+      agHelper.ValidateToastMessage("Converted to Js and clicked India");
+      agHelper.GetNClick(locators._exitPreviewMode);
       EditorNavigation.SelectEntityByName("MapChart1", EntityType.Widget);
     });
 
@@ -226,33 +132,29 @@ describe(
       ];
       propPane.MoveToTab("Style");
       propPane.TypeTextIntoField("Color Range", JSON.stringify(colorRange));
-      deployMode.DeployApp(
-        locators._widgetInDeployed(draggableWidgets.MAPCHART),
-      );
-      agHelper.VerifySnapshot(locators._root, "mapChartWithColorRange");
-      deployMode.NavigateBacktoEditor();
-      EditorNavigation.SelectEntityByName("MapChart1", EntityType.Widget);
+      cy.get(publishWidgetspage.mapChartWidget)
+        .find("svg")
+        .find("path")
+        .should("have.attr", "fill", "#aeaeae");
 
       // Change border radius and verify
       propPane.MoveToTab("Style");
       propPane.EnterJSContext("Border radius", "1.5rem");
-      deployMode.DeployApp(
-        locators._widgetInDeployed(draggableWidgets.MAPCHART),
-      );
-      agHelper.VerifySnapshot(locators._root, "mapChartWithBorderRadius");
-      deployMode.NavigateBacktoEditor();
-      EditorNavigation.SelectEntityByName("MapChart1", EntityType.Widget);
+      cy.get(publishWidgetspage.mapChartWidget)
+        .find(publishWidgetspage.mapChartWidgetContainer)
+        .should("have.css", "border-radius", "24px");
 
-      // Change box shadow and verify
       const boxShadow =
         "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
       propPane.MoveToTab("Style");
       propPane.EnterJSContext("Box shadow", boxShadow);
-      deployMode.DeployApp(
-        locators._widgetInDeployed(draggableWidgets.MAPCHART),
-      );
-      agHelper.VerifySnapshot(locators._root, "mapChartWithBoxShadow");
-      deployMode.NavigateBacktoEditor();
+      cy.get(publishWidgetspage.mapChartWidget)
+        .find(publishWidgetspage.mapChartWidgetContainer)
+        .should(
+          "have.css",
+          "box-shadow",
+          "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px",
+        );
     });
   },
 );

app/client/cypress/locators/publishWidgetspage.json

@@ -6,7 +6,7 @@
   "datepickerWidget": ".t--widget-datepickerwidget",
   "backToEditor": ".t--back-to-editor",
   "inputWidget": ".t--widget-inputwidgetv2",
-  "iconWidget":".t--widget-iconwidget",
+  "iconWidget": ".t--widget-iconwidget",
   "checkboxWidget": ".t--widget-checkboxwidget",
   "switchwidget": ".t--widget-switchwidget",
   "radioWidget": ".t--widget-radiogroupwidget",
@@ -24,6 +24,8 @@
   "tableWidget": ".t--widget-tablewidget",
   "chartCanvasVal": ".t--widget-chartwidget svg rect",
   "mapWidget": ".t--widget-mapwidget",
+  "mapChartWidget": ".t--widget-mapchartwidget",
+  "mapChartWidgetContainer": "[data-testid='t--map-chart-container']",
   "tableLength": ".t--widget-tablewidget .tbody",
   "tableV2Length": ".t--widget-tablewidgetv2 .tbody",
   "mapSearch": ".t--widget-mapwidget input",
@@ -41,7 +43,7 @@
   "tableFilterInputValue": ".t--table-filter-value-input input",
   "canvas": ".canvas",
   "removeFilter": ".t--table-filter-remove-btn",
-    "rowHeight": ".t--property-control-rowheight .bp3-popover-target",
+  "rowHeight": ".t--property-control-rowheight .bp3-popover-target",
   "rowHeightOpt": ".t--table-compact-mode-option",
   "visibilityMode": ".t--table-column-visibility-toggle-btn",
   "visibilityOpt": ".option-title",

app/client/src/widgets/MapChartWidget/component/index.tsx

@@ -153,6 +153,7 @@ export default function EchartComponent(props: MapChartComponentProps) {
       className={clsx({
         "bp3-skeleton": isLoading,
       })}
+      data-testid="t--map-chart-container"
       onClick={(e) => e.stopPropagation()}
     >
       <div ref={chartContainer} />