diff --git a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Show_Bindings_Menu_Bug38547_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Show_Bindings_Menu_Bug38547_spec.ts new file mode 100644 index 000000000000..17245972b801 --- /dev/null +++ b/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); + }); + }); + }, +); diff --git a/app/client/cypress/locators/commonlocators.json b/app/client/cypress/locators/commonlocators.json index e639171dd524..ccdf52e4853f 100644 --- a/app/client/cypress/locators/commonlocators.json +++ b/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']" } diff --git a/app/client/cypress/support/Pages/ApiPage.ts b/app/client/cypress/support/Pages/ApiPage.ts index de42a2cb0f90..398cb70cbcd1 100644 --- a/app/client/cypress/support/Pages/ApiPage.ts +++ b/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 = "",