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

…-pane (#38577)

## Description
This PR introduces test cases to validate the visibility and correctness
of the "Show Bindings" menu when working with JavaScript Objects and API
queries in the split-pane mode. It ensures that the bindings are
displayed as expected.

Tests: #38547

## Automation

/ok-to-test tags="@tag.Datasource, @tag.Sanity, @tag.JS"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/12708509894>
> Commit: 91840c0
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12708509894&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Datasource, @tag.Sanity, @tag.JS`
> Spec:
> <hr>Fri, 10 Jan 2025 12:29:18 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Added automated tests for validating the "Show Bindings" menu in split
pane mode.
	- Introduced new locators for list toggle and bindings menu.

- **Tests**
- Created test cases for checking "Show Bindings" functionality for
JavaScript Objects and API queries.

- **Chores**
- Updated test configurations to focus on specific test cases and
modified locator references in support files.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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 = "",