test: Cypress - Map chart automation (#28512)

## Description
- Map Chart Automation
#### PR fixes following issue(s)
- Added tests for Map Chart Widget
#### Type of change
- Cypress
## Testing
>
#### How Has This Been Tested?
- [x] Cypress
>
>

## Checklist:
#### QA activity:
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed

.github/workflows/ci-test-limited.yml

@@ -374,6 +374,13 @@ jobs:
           name: cypress-console-logs
           path: ${{ github.workspace }}/app/client/cypress/cypress-logs
 
+      - name: Upload cypress snapshots
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: snapshots
+          path: ${{ github.workspace }}/app/client/cypress/snapshots
+
       - name: Collect CI container logs
         if: failure()
         working-directory: "."

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

@@ -0,0 +1,220 @@
+/// <reference types="Cypress" />
+import viewWidgetsPage from "../../../../../locators/ViewWidgets.json";
+import {
+  agHelper,
+  entityExplorer,
+  propPane,
+  draggableWidgets,
+  deployMode,
+  locators,
+} from "../../../../../support/Objects/ObjectsCore";
+
+const _mapChartCaption = "g[class*='-caption'] text";
+const _mapChartPlot = (text: string) =>
+  "//text()[contains(., '" + text + "')]/..";
+
+describe("Map Chart Widget Functionality", function () {
+  it("1. Drag and drop a Map Chart widget and verify", function () {
+    entityExplorer.DragDropWidgetNVerify(draggableWidgets.MAPCHART, 200, 200);
+    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAPCHART));
+    agHelper.VerifySnapshot(locators._root, "mapchartsimple");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("MapChart1", "Widgets");
+  });
+
+  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");
+    agHelper.AssertElementLength(viewWidgetsPage.mapChartEntityLabels, 7);
+    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAPCHART));
+    agHelper.VerifySnapshot(locators._root, "mapwithantarctica");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("MapChart1", "Widgets");
+
+    // Change the map type to World and verify the number of entities
+    propPane.SelectPropertiesDropDown("Map type", "World");
+    agHelper.AssertElementLength(viewWidgetsPage.mapChartEntityLabels, 6);
+    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAPCHART));
+    agHelper.VerifySnapshot(locators._root, "mapwithworld");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("MapChart1", "Widgets");
+
+    // Change the map type to Europe and verify the number of entities
+    propPane.SelectPropertiesDropDown("Map type", "Europe");
+    agHelper.AssertElementLength(viewWidgetsPage.mapChartEntityLabels, 47);
+    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAPCHART));
+    agHelper.VerifySnapshot(locators._root, "mapwitheurope");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("MapChart1", "Widgets");
+
+    // Change the map type to North America and verify the number of entities
+    propPane.SelectPropertiesDropDown("Map type", "North America");
+    agHelper.AssertElementLength(viewWidgetsPage.mapChartEntityLabels, 26);
+    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAPCHART));
+    agHelper.VerifySnapshot(locators._root, "mapwithnorthamerica");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("MapChart1", "Widgets");
+
+    // Change the map type to South America and verify the number of entities
+    propPane.SelectPropertiesDropDown("Map type", "South America");
+    agHelper.AssertElementLength(viewWidgetsPage.mapChartEntityLabels, 16);
+    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAPCHART));
+    agHelper.VerifySnapshot(locators._root, "mapwithsouthamerica");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("MapChart1", "Widgets");
+  });
+
+  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");
+    agHelper.AssertElementLength(viewWidgetsPage.mapChartEntityLabels, 15);
+    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAPCHART));
+    agHelper.VerifySnapshot(locators._root, "mapwithoceania");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("MapChart1", "Widgets");
+
+    // Change the map type to Africa and verify the number of entities
+    propPane.SelectPropertiesDropDown("Map type", "Africa");
+    agHelper.AssertElementLength(viewWidgetsPage.mapChartEntityLabels, 56);
+    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAPCHART));
+    agHelper.VerifySnapshot(locators._root, "mapwithafrica");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("MapChart1", "Widgets");
+
+    // Change the map type to USA and verify the number of entities
+    propPane.SelectPropertiesDropDown("Map type", "USA");
+    agHelper.AssertElementLength(viewWidgetsPage.mapChartEntityLabels, 51);
+    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAPCHART));
+    agHelper.VerifySnapshot(locators._root, "mapwithusa");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("MapChart1", "Widgets");
+
+    // Change the map type to Asia and verify the number of entities
+    propPane.SelectPropertiesDropDown("Map type", "Asia");
+    agHelper.AssertElementLength(viewWidgetsPage.mapChartEntityLabels, 49);
+    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAPCHART));
+    agHelper.VerifySnapshot(locators._root, "mapwithasia");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("MapChart1", "Widgets");
+  });
+
+  it("3. Update the Chart data and verify", function () {
+    const data = [
+      {
+        id: "014",
+        value: "2",
+      },
+    ];
+
+    propPane.TypeTextIntoField("Chart data", JSON.stringify(data));
+    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAPCHART));
+    agHelper.VerifySnapshot(locators._root, "mapwithcustomdata");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("MapChart1", "Widgets");
+  });
+
+  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();
+    entityExplorer.SelectEntityByName("MapChart1", "Widgets");
+
+    // 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();
+    entityExplorer.SelectEntityByName("MapChart1", "Widgets");
+
+    // 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();
+    entityExplorer.SelectEntityByName("MapChart1", "Widgets");
+
+    // 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();
+    entityExplorer.SelectEntityByName("MapChart1", "Widgets");
+
+    // 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();
+    entityExplorer.SelectEntityByName("MapChart1", "Widgets");
+  });
+
+  it("5. Update onDataPointClick and Verify", function () {
+    // Create the Alert Modal and verify Modal name
+    propPane.SelectPropertiesDropDown("Map type", "Asia");
+    propPane.SelectPlatformFunction("onDataPointClick", "Show alert");
+    agHelper.TypeText(
+      propPane._actionSelectorFieldByLabel("Message"),
+      "Data Point {{MapChart1.selectedDataPoint.label}} Clicked",
+    );
+    agHelper.GetNClick(propPane._actionSelectorPopupClose);
+    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAPCHART));
+    agHelper.GetNClick(_mapChartPlot("RU"), 0, true);
+    agHelper.ValidateToastMessage("Data Point Russian Federation Clicked");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("MapChart1", "Widgets");
+
+    // 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"), 0, true);
+    agHelper.ValidateToastMessage("Converted to Js and clicked China");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("MapChart1", "Widgets");
+  });
+
+  it("6. Verify the style changes", function () {
+    // Change Color Range and verify
+    const colorRange = [
+      {
+        minValue: 2,
+        maxValue: 3,
+        code: "#FFFFF",
+      },
+    ];
+    propPane.MoveToTab("Style");
+    propPane.TypeTextIntoField("Color Range", JSON.stringify(colorRange));
+    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAPCHART));
+    agHelper.VerifySnapshot(locators._root, "mapChartWithColorRange");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("MapChart1", "Widgets");
+
+    // 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();
+    entityExplorer.SelectEntityByName("MapChart1", "Widgets");
+
+    // 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();
+  });
+});

app/client/cypress/e2e/Regression/ClientSide/Widgets/Others/MapChart_spec.js

@@ -1,152 +0,0 @@
-const commonLocators = require("../../../../../locators/commonlocators.json");
-const viewWidgetsPage = require("../../../../../locators/ViewWidgets.json");
-const widgetsPage = require("../../../../../locators/Widgets.json");
-import * as _ from "../../../../../support/Objects/ObjectsCore";
-
-describe("Map Chart Widget Functionality", function () {
-  before(() => {
-    _.agHelper.AddDsl("MapChartDsl");
-  });
-
-  beforeEach(() => {
-    _.entityExplorer.SelectEntityByName("MapChart1", "Widgets");
-  });
-
-  afterEach(() => {
-    _.deployMode.NavigateBacktoEditor();
-  });
-
-  it("1. Change Title", function () {
-    cy.testJsontext("title", this.dataSet.chartIndata);
-    cy.get(viewWidgetsPage.chartInnerText)
-      .contains("App Sign Up")
-      .should("have.text", "App Sign Up");
-    _.deployMode.DeployApp();
-  });
-
-  it("2. Show Labels: FALSE", function () {
-    cy.togglebarDisable(commonLocators.mapChartShowLabels);
-    cy.get(viewWidgetsPage.mapChartEntityLabels).should("not.exist");
-    _.deployMode.DeployApp();
-    // Show Labels: TRUE
-    _.deployMode.NavigateBacktoEditor();
-    _.entityExplorer.SelectEntityByName("MapChart1", "Widgets");
-    cy.togglebar(commonLocators.mapChartShowLabels);
-    cy.get(viewWidgetsPage.mapChartEntityLabels).eq(1).should("exist");
-    _.deployMode.DeployApp();
-  });
-
-  it("3. Map type: World with Antarctica", function () {
-    // Change the map type
-    cy.updateMapType("World with Antarctica");
-    // Verify the number of entities
-    cy.get(viewWidgetsPage.mapChartEntityLabels).should("have.length", 7);
-    _.deployMode.DeployApp();
-  });
-
-  it("4. Map type: World", function () {
-    // Change the map type
-    cy.updateMapType("World");
-    // Verify the number of entities
-    cy.get(viewWidgetsPage.mapChartEntityLabels).should("have.length", 6);
-    _.deployMode.DeployApp();
-  });
-
-  it("5. Map type: Europe", function () {
-    // Change the map type
-    cy.updateMapType("Europe");
-    // Verify the number of entities
-    cy.get(viewWidgetsPage.mapChartEntityLabels).should("have.length", 47);
-    _.deployMode.DeployApp();
-  });
-
-  it("6. Map type: North America", function () {
-    // Change the map type
-    cy.updateMapType("North America");
-    // Verify the number of entities
-    cy.get(viewWidgetsPage.mapChartEntityLabels).should("have.length", 26);
-    _.deployMode.DeployApp();
-  });
-
-  it("7. Map type: South America", function () {
-    // Change the map type
-    cy.updateMapType("South America");
-    // Verify the number of entities
-    cy.get(viewWidgetsPage.mapChartEntityLabels).should("have.length", 16);
-    _.deployMode.DeployApp();
-  });
-
-  it("8. Map type: Asia", function () {
-    // Change the map type
-    cy.updateMapType("Asia");
-    // Verify the number of entities
-    cy.get(viewWidgetsPage.mapChartEntityLabels).should("have.length", 49);
-    _.deployMode.DeployApp();
-  });
-
-  it("9. Map type: Oceania", function () {
-    // Change the map type
-    cy.updateMapType("Oceania");
-    // Verify the number of entities
-    cy.get(viewWidgetsPage.mapChartEntityLabels).should("have.length", 15);
-    _.deployMode.DeployApp();
-  });
-
-  it("10. Map type: Africa", function () {
-    // Change the map type
-    cy.updateMapType("Africa");
-    // Verify the number of entities
-    cy.get(viewWidgetsPage.mapChartEntityLabels).should("have.length", 56);
-    _.deployMode.DeployApp();
-  });
-
-  it("11. Map type: USA", function () {
-    // Change the map type
-    cy.updateMapType("USA");
-    // Verify the number of entities
-    cy.get(viewWidgetsPage.mapChartEntityLabels).should("have.length", 51);
-    _.deployMode.DeployApp();
-  });
-
-  it("12. Action: onDataPointClick, Open modal", function () {
-    // Create the Alert Modal and verify Modal name
-    cy.createModal(this.dataSet.ModalName, "onDataPointClick");
-    _.deployMode.DeployApp();
-    /*
-    cy.get(widgetsPage.mapChartPlot)
-      .children()
-      .first()
-      .click({ force: true });
-    cy.get(modalWidgetPage.modelTextField).should(
-      "have.text",
-      this.dataSet.ModalName,
-    );
-    */
-  });
-
-  it("13. Action: onDataPointClick, Show message using selectedDataPoint", function () {
-    cy.get(_.locators._jsToggle("ondatapointclick")).scrollIntoView().click();
-    _.propPane.UpdatePropertyFieldValue("onDataPointClick", "");
-    cy.get(_.locators._jsToggle("ondatapointclick")).click();
-
-    const expectedEntityData = {
-      value: 2.04,
-      label: "South America",
-      shortLabel: "SA",
-      originalId: "SA",
-      id: "sa",
-    };
-    // Set the map type to default
-    cy.updateMapType("World");
-    // Set action details for onDataPointClick
-    const boundMessage = `{{JSON.stringify(MapChart1.selectedDataPoint)}}`;
-    cy.addAction(boundMessage, "onDataPointClick");
-    cy.get(commonLocators.chooseMsgType).last().click({ force: true });
-    cy.get(commonLocators.chooseAction).children().contains("Success").click();
-    // Click on the entity, South America
-    cy.get(widgetsPage.mapChartPlot).children().first().click({ force: true });
-    // Assert
-    cy.validateToastMessage(JSON.stringify(expectedEntityData));
-    _.deployMode.DeployApp();
-  });
-});

app/client/cypress/locators/WidgetLocators.ts

@@ -46,6 +46,7 @@ export const WIDGET = {
   MENUBUTTON: "menubuttonwidget",
   DATEPICKER: "datepickerwidget2",
   MAP: "mapwidget",
+  MAPCHART: "mapchartwidget",
 } as const;
 
 // property pane element selector are maintained here