diff --git a/.github/workflows/ci-test-hosted.yml b/.github/workflows/ci-test-hosted.yml index 10e48a2fe4..9464fe2920 100644 --- a/.github/workflows/ci-test-hosted.yml +++ b/.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 diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Others/MapWidget_Spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Others/MapWidget_Spec.ts new file mode 100644 index 0000000000..db84eaccfa --- /dev/null +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Others/MapWidget_Spec.ts @@ -0,0 +1,164 @@ +/// +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"); + }); +}); diff --git a/app/client/cypress/locators/WidgetLocators.ts b/app/client/cypress/locators/WidgetLocators.ts index 3e356fb068..ef362c8c76 100644 --- a/app/client/cypress/locators/WidgetLocators.ts +++ b/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 diff --git a/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithBorderRadius.snap.png b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithBorderRadius.snap.png new file mode 100644 index 0000000000..073ed59d28 Binary files /dev/null and b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithBorderRadius.snap.png differ diff --git a/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithBoxShadow.snap.png b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithBoxShadow.snap.png new file mode 100644 index 0000000000..9d02413822 Binary files /dev/null and b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithBoxShadow.snap.png differ diff --git a/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithDefaultMarker1.snap.png b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithDefaultMarker1.snap.png new file mode 100644 index 0000000000..79b48d2857 Binary files /dev/null and b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithDefaultMarker1.snap.png differ diff --git a/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithDefaultMarker2.snap.png b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithDefaultMarker2.snap.png new file mode 100644 index 0000000000..a27c00a799 Binary files /dev/null and b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithDefaultMarker2.snap.png differ diff --git a/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithDefaultZoomIn.snap.png b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithDefaultZoomIn.snap.png new file mode 100644 index 0000000000..af196e948d Binary files /dev/null and b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithDefaultZoomIn.snap.png differ diff --git a/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithDefaultZoomOut.snap.png b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithDefaultZoomOut.snap.png new file mode 100644 index 0000000000..c30e60de62 Binary files /dev/null and b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithDefaultZoomOut.snap.png differ diff --git a/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithEnableSearchLocationOff.snap.png b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithEnableSearchLocationOff.snap.png new file mode 100644 index 0000000000..912836e846 Binary files /dev/null and b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithEnableSearchLocationOff.snap.png differ diff --git a/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithEnablingClusteringON.snap.png b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithEnablingClusteringON.snap.png new file mode 100644 index 0000000000..df9aa88996 Binary files /dev/null and b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithEnablingClusteringON.snap.png differ diff --git a/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithEnablingClusteringOff.snap.png b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithEnablingClusteringOff.snap.png new file mode 100644 index 0000000000..a61315a9e0 Binary files /dev/null and b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithEnablingClusteringOff.snap.png differ diff --git a/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithInitalLocation.snap.png b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithInitalLocation.snap.png new file mode 100644 index 0000000000..9734ba0ba3 Binary files /dev/null and b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithInitalLocation.snap.png differ diff --git a/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithMapNMarkerCenteringOff.snap.png b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithMapNMarkerCenteringOff.snap.png new file mode 100644 index 0000000000..7efb7e7d5c Binary files /dev/null and b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithMapNMarkerCenteringOff.snap.png differ diff --git a/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithPickLocationOff.snap.png b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithPickLocationOff.snap.png new file mode 100644 index 0000000000..7efb7e7d5c Binary files /dev/null and b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithPickLocationOff.snap.png differ diff --git a/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithVisibilityOff.snap.png b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithVisibilityOff.snap.png new file mode 100644 index 0000000000..3c8da7146c Binary files /dev/null and b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithVisibilityOff.snap.png differ diff --git a/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithVisibilityOnWithJS.snap.png b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithVisibilityOnWithJS.snap.png new file mode 100644 index 0000000000..af196e948d Binary files /dev/null and b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithVisibilityOnWithJS.snap.png differ diff --git a/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithinItalLocationAsJS.snap.png b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithinItalLocationAsJS.snap.png new file mode 100644 index 0000000000..f84ce5da5d Binary files /dev/null and b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapWithinItalLocationAsJS.snap.png differ diff --git a/app/client/cypress/snapshots/MapWidget_Spec.ts/mapsimple.snap.png b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapsimple.snap.png new file mode 100644 index 0000000000..7e1c9ff5cb Binary files /dev/null and b/app/client/cypress/snapshots/MapWidget_Spec.ts/mapsimple.snap.png differ diff --git a/app/client/cypress/support/Objects/CommonLocators.ts b/app/client/cypress/support/Objects/CommonLocators.ts index dd44be6e2f..60017c8745 100644 --- a/app/client/cypress/support/Objects/CommonLocators.ts +++ b/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"; } diff --git a/app/client/cypress/support/Pages/AggregateHelper.ts b/app/client/cypress/support/Pages/AggregateHelper.ts index 0217b56fa9..c1747ae00d 100644 --- a/app/client/cypress/support/Pages/AggregateHelper.ts +++ b/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 diff --git a/app/client/cypress/support/Pages/PropertyPane.ts b/app/client/cypress/support/Pages/PropertyPane.ts index 9c88e1424b..ed91976e76 100644 --- a/app/client/cypress/support/Pages/PropertyPane.ts +++ b/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); + }); + } } diff --git a/app/client/cypress_ci_custom.config.ts b/app/client/cypress_ci_custom.config.ts index 025ee81137..8d4ca29b36 100644 --- a/app/client/cypress_ci_custom.config.ts +++ b/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", ], }, }); diff --git a/app/client/cypress_ci_hosted.config.ts b/app/client/cypress_ci_hosted.config.ts index 33948c1aa5..fd3f80f2c0 100644 --- a/app/client/cypress_ci_hosted.config.ts +++ b/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"],