chore: cypress test for canvas view mode #32354
Conversation
…o cypress/canvas-view-mode
github-actions
bot
added
IDE Infra
albinAppsmith
added
ok-to-test
WalkthroughThe recent updates introduce a new Cypress test file for validating the Canvas view mode in an IDE environment, alongside enhancements in Cypress support for better widget interaction and tooltip verification. Additionally, the changes include a new constant for generating tooltip messages and an update to the CodeModeTooltip component for dynamic message customization based on the canvas view mode. These changes collectively aim to improve testing capabilities and user interface feedback within the application. Changes
Assessment against linked issues
Possibly related issues
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 as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
github-actions
bot
added
IDE Infra
github-actions
bot
added
Release
Task
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
|
|
||
| export const CANVAS_VIEW_MODE_TOOLTIP = (shortcutKey: string) => | ||
| `💡 ${shortcutKey} click a widget to navigate to UI mode.`; |
There was a problem hiding this comment.
Consider adding a more descriptive name for the constant CANVAS_VIEW_MODE_TOOLTIP.
- export const CANVAS_VIEW_MODE_TOOLTIP = (shortcutKey: string) =>
+ export const CANVAS_VIEW_MODE_SHORTCUT_TOOLTIP = (shortcutKey: string) =>A more descriptive name like CANVAS_VIEW_MODE_SHORTCUT_TOOLTIP would improve readability and make the purpose of the constant clearer.
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.
| export const CANVAS_VIEW_MODE_TOOLTIP = (shortcutKey: string) => | |
| `💡 ${shortcutKey} click a widget to navigate to UI mode.`; | |
| export const CANVAS_VIEW_MODE_SHORTCUT_TOOLTIP = (shortcutKey: string) => | |
| `💡 ${shortcutKey} click a widget to navigate to UI mode.`; |
| Cypress.Commands.add( | ||
| "assertTooltipPresence", | ||
| (tooltipSelector = "", expectedText) => { | ||
| cy.get(tooltipSelector).should("be.visible").and("contain", expectedText); | ||
| }, | ||
| ); |
There was a problem hiding this comment.
Consider making the expectedText parameter optional in the assertTooltipPresence command to allow for more flexible assertions.
Cypress.Commands.add(
"assertTooltipPresence",
(tooltipSelector = "", expectedText = null) => {
- cy.get(tooltipSelector).should("be.visible").and("contain", expectedText);
+ const assertion = cy.get(tooltipSelector).should("be.visible");
+ if (expectedText !== null) {
+ assertion.and("contain", expectedText);
+ }
},
);This enhancement allows the command to be used for asserting both the presence of a tooltip and, optionally, its content.
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.
| Cypress.Commands.add( | |
| "assertTooltipPresence", | |
| (tooltipSelector = "", expectedText) => { | |
| cy.get(tooltipSelector).should("be.visible").and("contain", expectedText); | |
| }, | |
| ); | |
| Cypress.Commands.add( | |
| "assertTooltipPresence", | |
| (tooltipSelector = "", expectedText = null) => { | |
| const assertion = cy.get(tooltipSelector).should("be.visible"); | |
| if (expectedText !== null) { | |
| assertion.and("contain", expectedText); | |
| } | |
| }, | |
| ); |
| hoverOnWidget(widgetType: string) { | ||
| const selector = `.t--draggable-${widgetType}`; | ||
| agHelper.Sleep(500); | ||
| cy.get(selector).first().trigger("mouseover", { force: true }).wait(500); | ||
| } |
There was a problem hiding this comment.
Consider replacing fixed waits (agHelper.Sleep(500) and .wait(500)) with more reliable waiting mechanisms, such as waiting for specific conditions or elements to be visible, to reduce potential flakiness and improve test performance.
- agHelper.Sleep(500);
- cy.get(selector).first().trigger("mouseover", { force: true }).wait(500);
+ cy.get(selector).first().trigger("mouseover", { force: true }).should('be.visible');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.
| hoverOnWidget(widgetType: string) { | |
| const selector = `.t--draggable-${widgetType}`; | |
| agHelper.Sleep(500); | |
| cy.get(selector).first().trigger("mouseover", { force: true }).wait(500); | |
| } | |
| hoverOnWidget(widgetType: string) { | |
| const selector = `.t--draggable-${widgetType}`; | |
| cy.get(selector).first().trigger("mouseover", { force: true }).should('be.visible'); | |
| } |
| } | ||
| } | ||
|
|
||
| hoverOnWidget(widgetType: string) { |
There was a problem hiding this comment.
Is it possible to make this accept a widget name instead of widgetType?
hetunandu
added
ok-to-test
Description
This PR added cypress test for canvas view mode.
Fixes #31874
Automation
/ok-to-test tags="@tag.Sanity, @tag.IDE"
🔍 Cypress test results
Important
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/8534736683
Commit:
f1d8cc5c4437571b5bbe9a43e892068ae774c75fCypress dashboard url: Click here!
All cypress tests have passed 🎉🎉🎉
Summary by CodeRabbit
New Features
Refactor
Tests
Documentation
assertTooltipPresencemethod.