Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore: fix map chart spec (#36370)

Browse Source 
/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: 6e88177f19e0b2deff3eed2d2531a8f88ec06a68
> <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>
This commit is contained in:
Pawan Kumar 2024-09-18 11:53:42 +05:30 committed by GitHub
parent 0388f634a0
commit 27aeb4dc18
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 44 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
/// <reference types="Cypress" />
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",
);
});
},
);

6
app/client/cypress/locators/publishWidgetspage.json
View File

@ -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",

1
app/client/src/widgets/MapChartWidget/component/index.tsx
View File

@ -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} />