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 5 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}')]`;
Comment thread
sagar-qa007 marked this conversation as resolved.

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"));
Comment thread
sagar-qa007 marked this conversation as resolved.
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"));
Comment thread
sagar-qa007 marked this conversation as resolved.

// 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"));
Comment thread
sagar-qa007 marked this conversation as resolved.

// 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"));
Comment thread
sagar-qa007 marked this conversation as resolved.

// 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"));
Comment thread
sagar-qa007 marked this conversation as resolved.
});

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"));
Comment thread
sagar-qa007 marked this conversation as resolved.

// 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"));
Comment thread
sagar-qa007 marked this conversation as resolved.

// 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);
Comment on lines +141 to +109

@coderabbitai coderabbitai Bot Sep 17, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great test for the "onDataPointClick" property, but let's avoid using agHelper.Sleep! 🚫💤

The test effectively verifies the behavior of the "onDataPointClick" property by setting it to "Show alert" with a custom message, entering preview mode, clicking on a specific data point, and validating the presence of the expected toast message. This is a good way to ensure the map chart is triggering the correct action when a data point is clicked.

However, the code is using agHelper.Sleep, which is not recommended as per the additional instructions.

Consider removing the usage of agHelper.Sleep to align with the best practices and improve the test's reliability.

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",
);
});
},
);
3 changes: 2 additions & 1 deletion app/client/cypress/limited-tests.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
# To run only limited tests - give the spec names in below format:
cypress/e2e/Regression/ClientSide/Templates/Fork_Template_spec.js
#cypress/e2e/Regression/ClientSide/Templates/Fork_Template_spec.js
cypress/e2e/Regression/ClientSide/Widgets/Others/MapChart_Spec.ts

# For running all specs - uncomment below:
#cypress/e2e/**/**/*
Expand Down
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