Skip to content

chore: fix map chart spec #36370

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jsartisan merged 6 commits into from
Sep 18, 2024
Merged

chore: fix map chart spec #36370

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
847571c
update the spec
Sep 17, 2024
d771d79
update the spec
Sep 17, 2024
19fe96a
update the spec
Sep 17, 2024
4ed89de
fix prettier error
Sep 18, 2024
bf5730e
update selector
Sep 18, 2024
6e88177
remove file from limited
Sep 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
176 changes: 39 additions & 137 deletions app/client/cypress/e2e/Regression/ClientSide/Widgets/Others/MapChart_Spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/// <reference types="Cypress" />
import viewWidgetsPage from "../../../../../locators/ViewWidgets.json";
import publishWidgetspage from "../../../../../locators/publishWidgetspage.json";
import {
agHelper,
entityExplorer,
Expand All @@ -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 () {
Expand All @@ -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 () {
Expand All @@ -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);
});

Expand All @@ -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 changes: 4 additions & 2 deletions app/client/cypress/locators/publishWidgetspage.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
1 change: 1 addition & 0 deletions app/client/src/widgets/MapChartWidget/component/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down