test: validate 'Show Bindings' menu for queries & JS Objects in split-pane #38577
Conversation
shadabbuchh
requested review from
ApekshaBhosale and
sagar-qa007
as code owners
WalkthroughThis pull request introduces a new Cypress test suite focusing on validating the "Show Bindings" menu functionality for JavaScript Objects and API queries in split pane mode. The changes include a new test file, updates to common locators, and a minor enhancement to the ApiPage class. The tests aim to ensure the correct visibility and interaction of the bindings menu across different application contexts. Changes
Sequence DiagramsequenceDiagram
participant User
participant App
participant JSObject/API
participant BindingsMenu
User->>App: Create JS Object/API
User->>App: Switch to Split View
App->>JSObject/API: Display in Left Pane
User->>JSObject/API: Click "Show Bindings"
JSObject/API->>BindingsMenu: Trigger Bindings Menu
BindingsMenu->>User: Display Bindings
Possibly related PRs
Suggested Labels
Suggested Reviewers
Poem
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (1)app/client/cypress/limited-tests.txt (1)Pattern
⏰ Context from checks skipped due to timeout of 90000ms (4)
🔇 Additional comments (2)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
github-actions
bot
added
skip-changelog
|
/ci-test-limit-count run_count=20 update_snapshot=true specs_to_run=cypress/e2e/Regression/ClientSide/ExplorerTests/Show_Bindings_Menu_Bug38547_spec.ts |
|
Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/12707602573. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Show_Bindings_Menu_Bug38547_spec.ts(1 hunks)app/client/cypress/locators/commonlocators.json(1 hunks)app/client/cypress/support/Pages/ApiPage.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
app/client/cypress/support/Pages/ApiPage.ts (1)
Pattern app/client/cypress/**/**.*: Review the following e2e test code written using the Cypress test library. Ensure that:
- Follow best practices for Cypress code and e2e automation.
- Avoid using cy.wait in code.
- Avoid using cy.pause in code.
- Avoid using agHelper.sleep().
- Use locator variables for locators and do not use plain strings.
- Use data-* attributes for selectors.
- Avoid Xpaths, Attributes and CSS path.
- Avoid selectors like .btn.submit or button[type=submit].
- Perform logins via API with LoginFromAPI.
- Perform logout via API with LogOutviaAPI.
- Perform signup via API with SignupFromAPI.
- Avoid using it.only.
- Avoid using after and aftereach in test cases.
- Use multiple assertions for expect statements.
- Avoid using strings for assertions.
- Do not use duplicate filenames even with different paths.
- Avoid using agHelper.Sleep, this.Sleep in any file in code.
app/client/cypress/locators/commonlocators.json (1)
Pattern app/client/cypress/**/**.*: Review the following e2e test code written using the Cypress test library. Ensure that:
- Follow best practices for Cypress code and e2e automation.
- Avoid using cy.wait in code.
- Avoid using cy.pause in code.
- Avoid using agHelper.sleep().
- Use locator variables for locators and do not use plain strings.
- Use data-* attributes for selectors.
- Avoid Xpaths, Attributes and CSS path.
- Avoid selectors like .btn.submit or button[type=submit].
- Perform logins via API with LoginFromAPI.
- Perform logout via API with LogOutviaAPI.
- Perform signup via API with SignupFromAPI.
- Avoid using it.only.
- Avoid using after and aftereach in test cases.
- Use multiple assertions for expect statements.
- Avoid using strings for assertions.
- Do not use duplicate filenames even with different paths.
- Avoid using agHelper.Sleep, this.Sleep in any file in code.
app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Show_Bindings_Menu_Bug38547_spec.ts (1)
Pattern app/client/cypress/**/**.*: Review the following e2e test code written using the Cypress test library. Ensure that:
- Follow best practices for Cypress code and e2e automation.
- Avoid using cy.wait in code.
- Avoid using cy.pause in code.
- Avoid using agHelper.sleep().
- Use locator variables for locators and do not use plain strings.
- Use data-* attributes for selectors.
- Avoid Xpaths, Attributes and CSS path.
- Avoid selectors like .btn.submit or button[type=submit].
- Perform logins via API with LoginFromAPI.
- Perform logout via API with LogOutviaAPI.
- Perform signup via API with SignupFromAPI.
- Avoid using it.only.
- Avoid using after and aftereach in test cases.
- Use multiple assertions for expect statements.
- Avoid using strings for assertions.
- Do not use duplicate filenames even with different paths.
- Avoid using agHelper.Sleep, this.Sleep in any file in code.
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: client-unit-tests / client-unit-tests
- GitHub Check: client-lint / client-lint
- GitHub Check: client-build / client-build
- GitHub Check: client-prettier / prettier-check
🔇 Additional comments (1)
app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Show_Bindings_Menu_Bug38547_spec.ts (1)
19-26: Well-structured utility function for validating bindings.The
validateBindingsutility function is well-implemented with proper assertions.
| 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); | ||
| }); | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Similar issues with cy.wait and xpath selectors.
The second test case has the same violations of Cypress best practices.
Apply the same fixes as suggested for the first test case:
- Replace
agHelper.GetNClick - Use data-* attributes for selectors
| 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); | ||
| }); | ||
| */ | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Avoid using cy.wait and xpath selectors.
The test case violates Cypress best practices:
agHelper.GetNClickimplicitly uses cy.wait- Using xpath selector
commonLocators.showBindingsMenu
Consider:
- Replace
agHelper.GetNClickwith proper assertions or intercepts - Use data-* attributes instead of xpath for
showBindingsMenu
-cy.xpath(commonLocators.showBindingsMenu).should("be.visible");
+cy.get("[data-testid='entity-properties-container']").should("be.visible");Committable suggestion skipped: line range outside the PR's diff.
| @@ -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"; | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
Use data- attribute for selector.*
The selector uses a class which violates the coding guidelines.
Replace with a data-* attribute:
-public splitPaneContextMenuTrigger = ".entity-context-menu";
+public splitPaneContextMenuTrigger = "[data-testid='entity-context-menu']";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| public splitPaneContextMenuTrigger = ".entity-context-menu"; | |
| public splitPaneContextMenuTrigger = "[data-testid='entity-context-menu']"; |
| "downloadFileType": "button[class*='t--open-dropdown-Select-file-type'] > span:first-of-type", | ||
| "listToggle": "[data-testid='t--list-toggle']", | ||
| "showBindingsMenu": "//*[@id='entity-properties-container']" |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Replace xpath with data- attribute.*
The showBindingsMenu locator uses xpath which violates the coding guidelines.
Update the locator to use a data-* attribute:
-"showBindingsMenu": "//*[@id='entity-properties-container']",
+"showBindingsMenu": "[data-testid='entity-properties-container']",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "downloadFileType": "button[class*='t--open-dropdown-Select-file-type'] > span:first-of-type", | |
| "listToggle": "[data-testid='t--list-toggle']", | |
| "showBindingsMenu": "//*[@id='entity-properties-container']" | |
| "downloadFileType": "button[class*='t--open-dropdown-Select-file-type'] > span:first-of-type", | |
| "listToggle": "[data-testid='t--list-toggle']", | |
| "showBindingsMenu": "[data-testid='entity-properties-container']" |
|
/ci-test-limit-count run_count=20 update_snapshot=true specs_to_run=cypress/e2e/Regression/ClientSide/ExplorerTests/Show_Bindings_Menu_Bug38547_spec.ts |
|
Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/12707774911. |
|
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/12707774911. |
shadabbuchh
added
ok-to-test
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
Tip
🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/12708509894
Commit: 91840c0
Cypress dashboard.
Tags:
@tag.Datasource, @tag.Sanity, @tag.JSSpec:
Fri, 10 Jan 2025 12:29:18 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit
New Features
Tests
Chores