test: validate 'Show Bindings' menu for queries & JS Objects in split-pane

app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Show_Bindings_Menu_Bug38547_spec.ts

@@ -0,0 +1,94 @@
+import commonLocators from "../../../../locators/commonlocators.json";
+import {
+  agHelper,
+  apiPage,
+  jsEditor,
+} from "../../../../support/Objects/ObjectsCore";
+import EditorNavigation, {
+  EditorViewMode,
+  PageLeftPane,
+} from "../../../../support/Pages/EditorNavigation";
+import apiWidgetLocator from "../../../../locators/apiWidgetslocator.json";
+
+describe(
+  // https://github.com/appsmithorg/appsmith/issues/38547
+  "Validate if Show Bindings menu shows up in split pane mode for queries & JS Objects",
+  { tags: ["@tag.IDE", "@tag.JS"] },
+  () => {
+    // Utility function to validate the bindings list against expected bindings
+    const validateBindings = (bindingsList, expectedBindings) => {
+      // Assert that the number of bindings matches the expected count
+      expect(bindingsList).to.have.length(expectedBindings.length);
+      expectedBindings.forEach((binding, index) => {
+        const element = bindingsList.eq(index); // Get the binding element by index
+        expect(element).to.contain(binding); // Assert the binding content matches the expected value
+      });
+    };
+
+    it("1. Validate 'Show bindings' gets displayed for JS Objects in split pane view", () => {
+      jsEditor.CreateJSObject("", { prettify: false, toRun: false });
+
+      // Switch to split view
+      EditorNavigation.SwitchScreenMode(EditorViewMode.SplitScreen);
+
+      // Switch to list view
+      cy.get(commonLocators.listToggle).click();
+      PageLeftPane.assertPresence("JSObject1");
+      agHelper.GetNClick(jsEditor._jsPageActions, 0, true);
+      cy.contains("Show bindings").click();
+
+      // Assert that the bindings menu is visible
+      cy.xpath(commonLocators.showBindingsMenu).should("be.visible");
+
+      /*
+      // There is a bug in which the order of bindings is incorrectly shown for JS Objects. Will enable the below validation once that is fixed.
+      // Expected bindings for the JavaScript Object
+      const expectedJSBindings = [
+        "{{JSObject1.myVar1}}",
+        "{{JSObject1.myVar2}}",
+        "{{JSObject1.myFun1()}}",
+        "{{JSObject1.myFun1.data}}",
+        "{{JSObject1.myFun2()}}",
+        "{{JSObject1.myFun2.data}}",
+      ];
+
+      // Validate that the bindings in the menu match the expected bindings
+      cy.get(jsEditor._propertyList).then(($lis) => {
+        validateBindings($lis, expectedJSBindings);
+      });
+      */
+    });
+
+    it("2. Validate 'Show bindings' gets displayed for queries in split pane view", () => {
+      // Switch to standard view
+      EditorNavigation.SwitchScreenMode(EditorViewMode.FullScreen);
+      apiPage.CreateAndFillApi("www.google.com");
+
+      // Switch back to split view
+      EditorNavigation.SwitchScreenMode(EditorViewMode.SplitScreen);
+
+      // Switch to list view
+      cy.get(commonLocators.listToggle).click();
+      PageLeftPane.assertPresence("Api1");
+      agHelper.GetNClick(apiPage.splitPaneContextMenuTrigger, 0, true);
+      cy.contains("Show bindings").click();
+
+      // Assert that the bindings menu is visible
+      cy.xpath(commonLocators.showBindingsMenu).should("be.visible");
+
+      // Expected bindings for the API
+      const expectedApiBindings = [
+        "{{Api1.isLoading}}",
+        "{{Api1.data}}",
+        "{{Api1.responseMeta}}",
+        "{{Api1.run()}}",
+        "{{Api1.clear()}}",
+      ];
+
+      // Validate that the bindings in the menu match the expected bindings
+      cy.get(apiWidgetLocator.propertyList).then(($lis) => {
+        validateBindings($lis, expectedApiBindings);
+      });
+    });
+  },
+);

app/client/cypress/locators/commonlocators.json

@@ -245,5 +245,7 @@
   "enableClientSideSearch": ".t--property-control-enableclientsidesearch input[type='checkbox']",
   "fixedFooterInput": ".t--property-control-fixedfooter input",
   "tostifyIcon": ".Toastify--animate-icon > span",
-  "downloadFileType": "button[class*='t--open-dropdown-Select-file-type'] > span:first-of-type"
+  "downloadFileType": "button[class*='t--open-dropdown-Select-file-type'] > span:first-of-type",
+  "listToggle": "[data-testid='t--list-toggle']",
+  "showBindingsMenu": "//*[@id='entity-properties-container']"
 }

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

@@ -103,6 +103,7 @@ export class ApiPage {
   private runOnPageLoadJSObject =
     "input[name^='execute-on-page-load'][type='checkbox']";
   public settingsTriggerLocator = "[data-testid='t--js-settings-trigger']";
+  public splitPaneContextMenuTrigger = ".entity-context-menu";
 
   CreateApi(
     apiName = "",