diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Others/MapChart_Spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Others/MapChart_Spec.ts
index 3e4e9fa9649..d08455c47be 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Others/MapChart_Spec.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Others/MapChart_Spec.ts
@@ -1,5 +1,5 @@
///
-import viewWidgetsPage from "../../../../../locators/ViewWidgets.json";
+import publishWidgetspage from "../../../../../locators/publishWidgetspage.json";
import {
agHelper,
entityExplorer,
@@ -14,7 +14,7 @@ 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",
@@ -22,10 +22,11 @@ describe(
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);
});
@@ -33,86 +34,37 @@ describe(
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,13 +101,12 @@ 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
@@ -206,12 +114,10 @@ describe(
"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",
+ );
});
},
);
diff --git a/app/client/cypress/locators/publishWidgetspage.json b/app/client/cypress/locators/publishWidgetspage.json
index 43f8c1d17f2..08220ba5db4 100644
--- a/app/client/cypress/locators/publishWidgetspage.json
+++ b/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",
diff --git a/app/client/src/widgets/MapChartWidget/component/index.tsx b/app/client/src/widgets/MapChartWidget/component/index.tsx
index d3be8617cfd..cee05f08c02 100644
--- a/app/client/src/widgets/MapChartWidget/component/index.tsx
+++ b/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()}
>