Skip to content
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

chore: fix map chart spec #36370

Merged
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}')]`;
sagar-qa007 marked this conversation as resolved.
Show resolved Hide 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"));
sagar-qa007 marked this conversation as resolved.
Show resolved Hide 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"));
sagar-qa007 marked this conversation as resolved.
Show resolved Hide 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"));
sagar-qa007 marked this conversation as resolved.
Show resolved Hide 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"));
sagar-qa007 marked this conversation as resolved.
Show resolved Hide 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"));
sagar-qa007 marked this conversation as resolved.
Show resolved Hide 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"));
sagar-qa007 marked this conversation as resolved.
Show resolved Hide 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"));
sagar-qa007 marked this conversation as resolved.
Show resolved Hide 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);
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
Loading