diff --git a/app/client/cypress/e2e/Regression/ClientSide/ActionExecution/ActionSelector_NavigateToFunctions_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/ActionExecution/ActionSelector_NavigateToFunctions_spec.ts index 667a92ef953..d3026820326 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/ActionExecution/ActionSelector_NavigateToFunctions_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/ActionExecution/ActionSelector_NavigateToFunctions_spec.ts @@ -15,8 +15,8 @@ import EditorNavigation, { import PageList from "../../../../support/Pages/PageList"; describe( - "JS to non-JS mode in Action Selector", - { tags: ["@tag.JS", "@tag.Binding"] }, + "To verify action selector navigate to functions", + { tags: ["@tag.JS"] }, () => { let pageTwoUrl: string = ""; before(() => { diff --git a/app/client/cypress/e2e/Regression/ClientSide/ActionExecution/ActionSelector_ShowAlertFunctions_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/ActionExecution/ActionSelector_ShowAlertFunctions_spec.ts index 9272703ef4c..c35578098d3 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/ActionExecution/ActionSelector_ShowAlertFunctions_spec.ts +++ b/app/client/cypress/e2e/Regression/ClientSide/ActionExecution/ActionSelector_ShowAlertFunctions_spec.ts @@ -14,8 +14,8 @@ import EditorNavigation, { } from "../../../../support/Pages/EditorNavigation"; describe( - "JS to non-JS mode in Action Selector", - { tags: ["@tag.JS", "@tag.Binding"] }, + "To verify the action selector - Show Alert functions", + { tags: ["@tag.JS"] }, () => { before(() => { entityExplorer.DragDropWidgetNVerify(draggableWidgets.BUTTON); diff --git a/app/client/cypress/e2e/Regression/ClientSide/ActionExecution/ActionSelector_ShowCloseModalFunctions_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/ActionExecution/ActionSelector_ShowCloseModalFunctions_spec.ts new file mode 100644 index 00000000000..9b19ecffe64 --- /dev/null +++ b/app/client/cypress/e2e/Regression/ClientSide/ActionExecution/ActionSelector_ShowCloseModalFunctions_spec.ts @@ -0,0 +1,163 @@ +import { + agHelper, + apiPage, + appSettings, + deployMode, + draggableWidgets, + entityExplorer, + jsEditor, + locators, + propPane, +} from "../../../../support/Objects/ObjectsCore"; +import EditorNavigation, { + EntityType, + PageLeftPane, +} from "../../../../support/Pages/EditorNavigation"; + +describe( + "To verify action selector - Show Modal function", + { tags: ["@tag.JS"] }, + () => { + before(() => { + entityExplorer.DragDropWidgetNVerify(draggableWidgets.BUTTON); + }); + + it("1. To verify a modal is displayed automatically when the page loads using a JSObject with 'Run on Page Load' enabled.", () => { + EditorNavigation.SelectEntityByName("Button1", EntityType.Widget); + propPane.CreateModal("onClick"); + agHelper.GetNClick(locators._closeModal, 0, true, 0); + + const jsObjectBody = `export default { + myFun1 () { + {{showModal(Modal1.name);}} + }, + }`; + + jsEditor.CreateJSObject(jsObjectBody, { + paste: true, + completeReplace: true, + toRun: false, + prettify: false, + shouldCreateNewJSObj: true, + }); + apiPage.ToggleOnPageLoadRunJsObject(true); + + EditorNavigation.SelectEntityByName("Button1", EntityType.Widget); + propPane.ToggleJSMode("onClick", true); + propPane.EnterJSContext("onClick", "{{JSObject1.myFun1()}}", true, false); + agHelper.RefreshPage(); + agHelper.AssertElementVisibility(locators._modalWrapper); + agHelper.AssertText(locators._modalButtonText, "text", "Confirm", 2); + agHelper.AssertText(locators._modalButtonText, "text", "Close", 1); + agHelper.GetNClick(locators._closeModal, 0, true, 0); + + deployMode.DeployApp(); + agHelper.AssertElementVisibility(appSettings.locators._header); + agHelper.RefreshPage(); + agHelper.AssertElementVisibility(locators._modalWrapper); + agHelper.AssertText(locators._modalButtonText, "text", "Confirm", 2); + agHelper.AssertText(locators._modalButtonText, "text", "Close", 1); + agHelper.GetNClick(locators._closeModal, 0, true, 0); + deployMode.NavigateBacktoEditor(); + }); + + it("2. To verify the modal remains in focus after it is opened using the showModal() function preventing interaction with the underlying page.", () => { + EditorNavigation.SelectEntityByName("Button1", EntityType.Widget); + agHelper.ClickButton("Submit"); + cy.get(locators._closeModal).focus().should("have.focus"); + agHelper.RefreshPage(); + }); + + it("3. To verify the behavior when an invalid modal name is provided to the showModal() function. The modal should not open, and an error should be thrown.", () => { + EditorNavigation.SelectEntityByName("Button1", EntityType.Widget); + propPane.EnterJSContext("onClick", `{{showModal(Modal2.name);}}`, true); + agHelper.ClickButton("Submit"); + agHelper.ValidateToastMessage("Modal2 is not defined", 0, 1); + + deployMode.DeployApp(); + agHelper.AssertElementVisibility(appSettings.locators._header); + agHelper.ClickButton("Submit"); + agHelper.ValidateToastMessage("Modal2 is not defined", 0, 1); + deployMode.NavigateBacktoEditor(); + + const jsObjectBody = `export default { + myFun1 () { + {{showModal(Modal2.name);}} + }, + }`; + + jsEditor.CreateJSObject(jsObjectBody, { + paste: true, + completeReplace: true, + toRun: false, + prettify: false, + shouldCreateNewJSObj: true, + }); + + EditorNavigation.SelectEntityByName("Button1", EntityType.Widget); + propPane.ToggleJSMode("onClick", true); + propPane.EnterJSContext("onClick", "{{JSObject2.myFun1()}}", true, false); + agHelper.ClickButton("Submit"); + agHelper.ValidateToastMessage("Modal2 is not defined", 0, 1); + + deployMode.DeployApp(); + agHelper.AssertElementVisibility(appSettings.locators._header); + agHelper.ClickButton("Submit"); + agHelper.ValidateToastMessage("Modal2 is not defined", 0, 1); + deployMode.NavigateBacktoEditor(); + }); + + it("4. To verify the behavior when an invalid modal name is provided to the closeModal() function. The modal should not close, and there should be no action and an error should be thrown", () => { + EditorNavigation.SelectEntityByName("Button1", EntityType.Widget); + propPane.EnterJSContext("onClick", `{{showModal(Modal1.name);}}`, true); + agHelper.ClickButton("Submit"); + PageLeftPane.expandCollapseItem("Modal1"); + EditorNavigation.SelectEntityByName("IconButton1", EntityType.Widget); + propPane.ToggleJSMode("onClick", true); + propPane.EnterJSContext("onClick", `{{closeModal(Modal2.name);}}`, true); + agHelper.RefreshPage(); + agHelper.ClickButton("Submit"); + agHelper.GetNClick(locators._modalButtonText, 0, true, 0); + agHelper.ValidateToastMessage("Modal2 is not defined", 0, 1); + + deployMode.DeployApp(); + agHelper.AssertElementVisibility(appSettings.locators._header); + agHelper.ClickButton("Submit"); + agHelper.GetNClick(locators._modalButtonText, 0, true, 0); + agHelper.ValidateToastMessage("Modal2 is not defined", 0, 1); + deployMode.NavigateBacktoEditor(); + agHelper.GetNClick(locators._closeModal, 0, true, 0); + const jsObjectBody = `export default { + myFun1 () { + {{closeModal(Modal2.name);}} + }, + }`; + + jsEditor.CreateJSObject(jsObjectBody, { + paste: true, + completeReplace: true, + toRun: false, + prettify: false, + shouldCreateNewJSObj: true, + }); + + EditorNavigation.SelectEntityByName("Button1", EntityType.Widget); + propPane.EnterJSContext("onClick", `{{showModal(Modal1.name);}}`, true); + PageLeftPane.expandCollapseItem("Modal1"); + EditorNavigation.SelectEntityByName("IconButton1", EntityType.Widget); + propPane.ToggleJSMode("onClick", true); + propPane.EnterJSContext("onClick", `{{JSObject3.myFun1()}}`, true); + agHelper.RefreshPage(); + agHelper.ClickButton("Submit"); + agHelper.GetNClick(locators._modalButtonText, 0, true, 0); + agHelper.ValidateToastMessage("Modal2 is not defined", 0, 1); + + deployMode.DeployApp(); + agHelper.AssertElementVisibility(appSettings.locators._header); + agHelper.ClickButton("Submit"); + agHelper.GetNClick(locators._modalButtonText, 0, true, 0); + agHelper.ValidateToastMessage("Modal2 is not defined", 0, 1); + deployMode.NavigateBacktoEditor(); + }); + }, +); diff --git a/app/client/cypress/support/Objects/CommonLocators.ts b/app/client/cypress/support/Objects/CommonLocators.ts index 2200d6eb181..45911a3e91e 100644 --- a/app/client/cypress/support/Objects/CommonLocators.ts +++ b/app/client/cypress/support/Objects/CommonLocators.ts @@ -342,4 +342,6 @@ export class CommonLocators { _propertyCollapseBody = ".bp3-collapse-body"; _propertyCollapse = ".bp3-collapse"; _widgetBorder = ".t--draggable-tabswidget div div div"; + _modalButtonText = "[data-testid='modal-wrapper'] .bp3-button"; + _showBoundary = ".show-boundary"; } diff --git a/app/client/cypress/support/Pages/ApiPage.ts b/app/client/cypress/support/Pages/ApiPage.ts index 57b7d33abbb..fbb1231877d 100644 --- a/app/client/cypress/support/Pages/ApiPage.ts +++ b/app/client/cypress/support/Pages/ApiPage.ts @@ -96,6 +96,8 @@ export class ApiPage { private curlImport = ".t--datasoucre-create-option-new_curl_import"; private _curlTextArea = "//label[text()='Paste CURL Code Here']/parent::form/div"; + private runOnPageLoadJSObject = + "input[name^='execute-on-page-load'][type='checkbox']"; CreateApi( apiName = "", @@ -494,4 +496,10 @@ export class ApiPage { ); this.RunAPI(); } + + ToggleOnPageLoadRunJsObject(enable = true || false) { + this.SelectPaneTab("Settings"); + if (enable) this.agHelper.CheckUncheck(this.runOnPageLoadJSObject, true); + else this.agHelper.CheckUncheck(this.runOnPageLoadJSObject, false); + } }