Modal related cases done

appsmithorg · Nov 21, 2024 · 59e9362 · 59e9362
1 parent ba6a61d
commit 59e9362
Show file tree

Hide file tree

Showing 5 changed files with 177 additions and 4 deletions.
diff --git a/...ress/e2e/Regression/ClientSide/ActionExecution/ActionSelector_NavigateToFunctions_spec.ts b/...ress/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/...press/e2e/Regression/ClientSide/ActionExecution/ActionSelector_ShowAlertFunctions_spec.ts b/...press/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/.../e2e/Regression/ClientSide/ActionExecution/ActionSelector_ShowCloseModalFunctions_spec.ts b/.../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
@@ -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
@@ -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);
+  }
 }