test: fix tabs skipped test CE #37023
Conversation
NandanAnantharamu
requested review from
ApekshaBhosale and
sagar-qa007
as code owners
WalkthroughThe pull request introduces modifications to the test suite for the Tabs widget, re-enabling a previously skipped test case that verifies colors, borders, and shadows. The assertion for border color has been updated to a new expected value. The tests now include checks for property visibility, tab management (renaming, duplication, deletion), and behavior when toggling the "Show Tabs" property. Additionally, error handling for invalid default tabs is validated. Changes also include updating the test file path in the limited tests configuration. Changes
Suggested labels
Suggested reviewers
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
|
|
/ci-test-limit-count run_count=25 |
github-actions
bot
added
skip-changelog
|
Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/11476105357. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (2)
app/client/cypress/e2e/Regression/ClientSide/Widgets/Tab/Tabs_2_spec.ts (2)
191-191: Consider removing hardcoded test number from the title.Remove the number "7" from the test title to make it more maintainable. Test numbers can change as new tests are added or removed.
- it("7. Verify colors, borders and shadows", () => { + it("Verify colors, borders and shadows", () => {
Line range hint
73-74: Replace agHelper.Sleep() calls with proper Cypress commands.According to the coding guidelines, we should avoid using agHelper.Sleep(). Instead, use Cypress's built-in commands like cy.wait('@apiCall') for network requests or cy.should() for assertions.
Example refactor:
- agHelper.Sleep(500); + cy.get('element').should('exist'); // Wait for element to exist- agHelper.Sleep(1000); + cy.get('element').should('be.visible'); // Wait for element to be visibleAlso applies to: 266-266, 276-276, 282-282
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (2)
- app/client/cypress/e2e/Regression/ClientSide/Widgets/Tab/Tabs_2_spec.ts (2 hunks)
- app/client/cypress/limited-tests.txt (1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
app/client/cypress/e2e/Regression/ClientSide/Widgets/Tab/Tabs_2_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.
app/client/cypress/limited-tests.txt (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.
🔇 Additional comments (2)
app/client/cypress/limited-tests.txt (1)
2-2: LGTM! Verify Template test coverage.The change aligns with the PR objective to fix the skipped Tab test.
Let's verify that the Template tests are covered elsewhere:
app/client/cypress/e2e/Regression/ClientSide/Widgets/Tab/Tabs_2_spec.ts (1)
Line range hint
191-225: LGTM! Test case successfully re-enabled and follows best practices.The test case for verifying colors, borders, and shadows has been properly re-enabled and follows Cypress best practices:
- Uses proper assertions for color verification
- Avoids cy.wait/pause
- Uses appropriate selectors
|
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/11476105357. |
|
/ci-test-limit-count run_count=25 |
|
Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/11497613805. |
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (3)
- app/client/cypress/e2e/Regression/ClientSide/Widgets/Tab/Tabs_2_spec.ts (2 hunks)
- app/client/cypress/support/Objects/CommonLocators.ts (1 hunks)
- app/client/cypress/support/Pages/PropertyPane.ts (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- app/client/cypress/e2e/Regression/ClientSide/Widgets/Tab/Tabs_2_spec.ts
🧰 Additional context used
📓 Path-based instructions (2)
app/client/cypress/support/Objects/CommonLocators.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/support/Pages/PropertyPane.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.
🔇 Additional comments (1)
app/client/cypress/support/Pages/PropertyPane.ts (1)
180-180: LGTM! The selector follows existing patterns.The new property
_borderColorCursorfollows the established naming conventions and selector patterns used throughout the file.
| @@ -341,4 +341,5 @@ export class CommonLocators { | |||
| _saveDatasource = `[data-testid='t--store-as-datasource']`; | |||
| _propertyCollapseBody = ".bp3-collapse-body"; | |||
| _propertyCollapse = ".bp3-collapse"; | |||
| _widgetBorder = ".t--draggable-tabswidget div div div"; | |||
There was a problem hiding this comment.
Use data- attribute selector instead of CSS path*
The current selector .t--draggable-tabswidget div div div is fragile and depends on DOM structure. Consider:
- Using a data-* attribute for better resilience
- Making the property name more specific to tabs widget
Apply this diff:
- _widgetBorder = ".t--draggable-tabswidget div div div";
+ _tabsWidgetBorder = "[data-testid='t--tabs-widget-border']";Then add the corresponding data-testid attribute to the tabs widget border element.
Committable suggestion was skipped due to low confidence.
|
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/11497613805. |
[NandanAnantharamu](https://github.com/NandanAnantharamu) NandanAnantharamu commented [1 hour ago](appsmithorg/appsmith-ee#5425 (comment)) • Skipped test in Tab spec is fixed. There was change in one of the validation step /ok-to-test tags="@tag.Sanity" <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/11504174102> > Commit: 6b0e607 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11504174102&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Sanity` > Spec: > <hr>Thu, 24 Oct 2024 17:52:38 UTC <!-- end of auto-generated comment: Cypress test results --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Bug Fixes** - Re-enabled test case for verifying colors, borders, and shadows of the Tabs widget. - Updated border color assertion to dynamically check the widget's border color. - **Improvements** - Enhanced verification of property visibility and functionality for the Tabs widget, including tab renaming, deletion, and binding with text widgets. - Validated behavior when toggling the "Show Tabs" property and ensured appropriate error handling for invalid default tabs. - **Chores** - Updated the test file reference in the limited-tests configuration to focus on the Tabs widget. - Introduced new selectors for improved interaction with widget properties. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: “NandanAnantharamu” <“nandan@thinkify.io”>
NandanAnantharamu
NandanAnantharamu commented 1 hour ago •
Skipped test in Tab spec is fixed.
There was change in one of the validation step
/ok-to-test tags="@tag.Sanity"
Tip
🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/11504174102
Commit: 6b0e607
Cypress dashboard.
Tags:
@tag.SanitySpec:
Thu, 24 Oct 2024 17:52:38 UTC
Summary by CodeRabbit
Bug Fixes
Improvements
Chores