test: Map widget automation (#27901)

## Description
- Map widget automation

#### Type of change
- Added spec to verify the map widget with all the possible settings
- Updated the workflows to include map widget spec for hosted runs and
not run for normal runs
## Testing
>
#### How Has This Been Tested?
- [x] Cypress
>
>
## Checklist:
#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed

---------

Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>

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

@@ -311,6 +311,13 @@ jobs:
           name: results-${{github.run_attempt}}
           path: ~/results
 
+      - name: Upload cypress snapshots
+        if: failure()
+        uses: actions/upload-artifact@v3
+        with:
+          name: snapshots
+          path: ${{ github.workspace }}/app/client/cypress/snapshots
+
       # Set status = failedtest
       - name: Set fail if there are test failures
         id: test_status

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

@@ -0,0 +1,164 @@
+/// <reference types="Cypress" />
+import {
+  agHelper,
+  entityExplorer,
+  propPane,
+  draggableWidgets,
+  deployMode,
+  locators,
+} from "../../../../../support/Objects/ObjectsCore";
+
+const location = [
+  {
+    lat: 28.7040592,
+    long: 77.10249019999999,
+    title: "Delhi, India",
+  },
+  {
+    lat: 28.4594965,
+    long: 77.0266383,
+    title: "Gurugram, Haryana, India",
+  },
+  {
+    lat: 40.7127753,
+    long: -74.0059728,
+    title: "New York, NY, USA",
+  },
+];
+
+describe("Map Widget", function () {
+  it("1.Drag Map Widget and Verify the Map Widget with Initial Location", () => {
+    //Add map and verify
+    entityExplorer.DragDropWidgetNVerify(draggableWidgets.MAP, 200, 200);
+    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+    agHelper.VerifySnapshot(locators._root, "mapsimple");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("Map1", "Widgets");
+
+    // Add Initial location and verify
+    propPane.TypeTextIntoField("Initial location", "New York, NY, USA");
+    agHelper.PressEnter();
+    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+    agHelper.VerifySnapshot(locators._root, "mapWithInitalLocation");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("Map1", "Widgets");
+
+    // convert Initial location to JS, update and verify
+    propPane.EnterJSContext("Initial location", JSON.stringify(location[0]));
+    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+    agHelper.VerifySnapshot(locators._root, "mapWithinItalLocationAsJS");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("Map1", "Widgets");
+  });
+
+  it("2.Verify the Map Widget with Default markers", () => {
+    // With single default marker
+    propPane.TypeTextIntoField(
+      "Default Markers",
+      JSON.stringify(location.slice(0, 1)),
+    );
+    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+    agHelper.VerifySnapshot(locators._root, "mapWithDefaultMarker1");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("Map1", "Widgets");
+
+    // With multiple default marker
+    propPane.TypeTextIntoField(
+      "Default Markers",
+      JSON.stringify(location.slice(0, 2)),
+    );
+    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+    agHelper.VerifySnapshot(locators._root, "mapWithDefaultMarker2");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("Map1", "Widgets");
+  });
+
+  it("3.Verify the Map Widget with zoom level", () => {
+    // With multiple default marker
+    propPane.SetZoomLevel(70);
+    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+    agHelper.VerifySnapshot(locators._root, "mapWithDefaultZoomOut");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("Map1", "Widgets");
+
+    // Zoom in and verify
+    propPane.SetZoomLevel(30);
+    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+    agHelper.VerifySnapshot(locators._root, "mapWithDefaultZoomIn");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("Map1", "Widgets");
+  });
+
+  it("4.1 Verify the Map Widget with different general settings", () => {
+    // With visibility off
+    propPane.TogglePropertyState("Visible", "Off");
+    deployMode.DeployApp();
+    agHelper.VerifySnapshot(locators._root, "mapWithVisibilityOff");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("Map1", "Widgets");
+
+    // Convert visibility to JS and set the visibility "On" and verify
+    propPane.EnterJSContext("Visible", "true");
+    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+    agHelper.VerifySnapshot(locators._root, "mapWithVisibilityOnWithJS");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("Map1", "Widgets");
+
+    // Toggle off Enable pick location and verify
+    propPane.TogglePropertyState("Enable pick location", "Off");
+    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+    agHelper.VerifySnapshot(locators._root, "mapWithPickLocationOff");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("Map1", "Widgets");
+
+    // Toggle off Map & marker centering and verify
+    propPane.TogglePropertyState("Map & marker centering", "Off");
+    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+    agHelper.VerifySnapshot(locators._root, "mapWithMapNMarkerCenteringOff");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("Map1", "Widgets");
+  });
+
+  it("4.2 Verify the Map Widget with different general settings", () => {
+    // Toggle On Enabling clustering and verify
+    propPane.TogglePropertyState("Enable clustering", "On");
+    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+    agHelper.VerifySnapshot(locators._root, "mapWithEnablingClusteringON");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("Map1", "Widgets");
+
+    // Convert Enabling clustering and disable it and verify
+    propPane.EnterJSContext("Enable clustering", "false");
+    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+    agHelper.VerifySnapshot(locators._root, "mapWithEnablingClusteringOff");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("Map1", "Widgets");
+
+    // Toggle off Enable search location and verify
+    propPane.TogglePropertyState("Enable search location", "Off");
+    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+    agHelper.VerifySnapshot(locators._root, "mapWithEnableSearchLocationOff");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("Map1", "Widgets");
+  });
+
+  it("5 Verify the style changes", () => {
+    // Change border radius and verify
+    propPane.MoveToTab("Style");
+    propPane.EnterJSContext("Border radius", "1.5rem");
+    deployMode.DeployApp(locators._widgetInDeployed(draggableWidgets.MAP));
+    agHelper.VerifySnapshot(locators._root, "mapWithBorderRadius");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("Map1", "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.MAP));
+    agHelper.VerifySnapshot(locators._root, "mapWithBoxShadow");
+    deployMode.NavigateBacktoEditor();
+    entityExplorer.SelectEntityByName("Map1", "Widgets");
+  });
+});

app/client/cypress/locators/WidgetLocators.ts

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

app/client/cypress/support/Objects/CommonLocators.ts

@@ -319,4 +319,5 @@ export class CommonLocators {
   _richText_line = "#tinymce p span";
   _treeSelectedContent = ".rc-tree-select-selection-item-content";
   _switcherIcon = ".switcher-icon";
+  _root = "#root";
 }

app/client/cypress/support/Pages/AggregateHelper.ts

@@ -1663,6 +1663,10 @@ export class AggregateHelper extends ReusableHelper {
     this.GetElement(selector).should("have.class", className);
   }
 
+  public VerifySnapshot(selector: string, identifier: string) {
+    this.GetElement(selector).matchImageSnapshot(identifier);
+  }
+
   //Not used:
   // private xPathToCss(xpath: string) {
   //     return xpath

app/client/cypress/support/Pages/PropertyPane.ts

@@ -53,11 +53,11 @@ export class PropertyPane {
   _mode = (modeName: string) =>
     "//span[contains(text(),'" + modeName + "')]//parent::span";
   _propertyToggle = (controlToToggle: string) =>
-    ".t--property-control-" +
+    "//div[contains(@class,'t--property-control-" +
     controlToToggle.replace(/ +/g, "").toLowerCase() +
-    " input[type='checkbox'], label:contains('" +
+    "')]//input[@type='checkbox'] | //label[text()='" +
     controlToToggle +
-    "') input[type='checkbox']";
+    "']//input[@type='checkbox']";
   _colorPickerV2Popover = ".t--colorpicker-v2-popover";
   _colorPickerV2Color = ".t--colorpicker-v2-color";
   _colorInput = (option: string) =>
@@ -163,6 +163,10 @@ export class PropertyPane {
   _countryCodeChangeDropDown = ".t--input-country-code-change .remixicon-icon";
   _searchCountryPlaceHolder = "[placeholder='Search by ISD code or country']";
   _closeModal = "//*[contains(@class,'ads-v2-button t--close')]";
+  _zoomLevelInput = ".t--property-control-zoomlevel input";
+  _zoomLevelControl = (control: "start" | "end") =>
+    ".t--property-control-zoomlevel .ads-v2-input__input-section-icon-" +
+    control;
 
   _dataIcon = (icon: string) => `[data-icon="${icon}"]`;
   public OpenJsonFormFieldSettings(fieldName: string) {
@@ -636,4 +640,20 @@ export class PropertyPane {
       );
     });
   }
+
+  public SetZoomLevel(zoom: number) {
+    this.agHelper.GetAttribute(this._zoomLevelInput, "value").then((value) => {
+      const currentValue = Number(value?.replace("%", ""));
+
+      if (currentValue === zoom || currentValue === 100 || currentValue === 0) {
+        return;
+      }
+      if (zoom > currentValue) {
+        this.agHelper.GetElement(this._zoomLevelControl("end")).click();
+      } else if (zoom < currentValue) {
+        this.agHelper.GetElement(this._zoomLevelControl("start")).click();
+      }
+      this.SetZoomLevel(zoom);
+    });
+  }
 }

app/client/cypress_ci_custom.config.ts

@@ -58,6 +58,7 @@ export default defineConfig({
       "cypress/e2e/EE/Enterprise/MultipleEnv/ME_airtable_spec.ts",
       "cypress/e2e/Regression/ServerSide/Datasources/ElasticSearch_Basic_Spec.ts",
       "cypress/e2e/Regression/ServerSide/Datasources/Oracle_Spec.ts",
+      "cypress/e2e/Regression/ClientSide/Widgets/Others/MapWidget_Spec.ts",
     ],
   },
 });

app/client/cypress_ci_hosted.config.ts

@@ -52,8 +52,8 @@ export default defineConfig({
     specPattern: [
       "cypress/e2e/Sanity/Datasources/Airtable_Basic_Spec.ts",
       "cypress/e2e/GSheet/**/**/*",
-      "cypress/e2e/Regression/ServerSide/Datasources/ElasticSearch_Basic_Spec.ts",
       "cypress/e2e/Regression/ServerSide/Datasources/Oracle_Spec.ts",
+      "cypress/e2e/Regression/ClientSide/Widgets/Others/MapWidget_Spec.ts",
     ],
     testIsolation: false,
     excludeSpecPattern: ["cypress/e2e/**/spec_utility.ts"],