test: fix cypress tests for custom widgets #39905
Conversation
rahulbarwal
requested review from
jacquesikot and
jsartisan
and removed request for
ApekshaBhosale
rahulbarwal
added
the
Custom Widgets
WalkthroughThis pull request updates both the Cypress tests and the widget configuration. The Cypress test file updates selectors from targeting paragraph elements ( Changes
Sequence Diagram(s)sequenceDiagram
participant T as Cypress Test
participant W as Widget Component
participant C as JSON Config
T->>W: Load custom widget page
W->>C: Fetch updated widget configuration
C-->>W: Return restructured JSON (includes new TEXT_WIDGET)
W->>T: Render widget with new `.content` element in tip-container
T->>W: Query `.tip-container .content`
T-->>W: Assert expected text content
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🪧 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
|
rahulbarwal
changed the title
github-actions
bot
added
skip-changelog
rahulbarwal
added
ok-to-test
github-actions
bot
added
skip-changelog
|
/ci-test-limit-count run_count=20 update_snapshot=false specs_to_run=cypress/e2e/Regression/ClientSide/Widgets/Custom/CustomWidgetDefaultComponent_spec.ts |
|
/ci-test-limit-count run_count=20 update_snapshot=false specs_to_run=cypress/e2e/Regression/ClientSide/Widgets/Custom/CustomWidgetEditorPropertyPane_spec.ts |
|
Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/14057114197. |
|
Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/14057119885. |
|
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/14057119885. |
|
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/14057114197. |
…r React and ReactDOM
|
/ci-test-limit-count run_count=20 update_snapshot=false specs_to_run=cypress/e2e/Regression/ClientSide/Widgets/Custom/CustomWidgetDefaultComponent_spec.ts |
|
/ci-test-limit-count run_count=20 update_snapshot=false specs_to_run=cypress/e2e/Regression/ClientSide/Widgets/Custom/CustomWidgetEditorPropertyPane_spec.ts |
|
Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/14124977432. |
|
Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/14124980094. |
![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
🧹 Nitpick comments (1)
app/client/cypress/fixtures/customWidget.json (1)
64-68: CSS Formatting Consistency in Source Documents
BothsrcDocanduncompiledSrcDocprovide similar CSS definitions; however, there is a minor inconsistency in their formatting (e.g., spaces versus tabs). For easier maintenance and clarity, consider standardizing the CSS formatting between these sections.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro (Legacy)
📒 Files selected for processing (4)
app/client/cypress/fixtures/customWidget.json(2 hunks)app/client/src/pages/Editor/CustomWidgetBuilder/Editor/Header/CodeTemplates/Templates/anvilTemplates/react.ts(2 hunks)app/client/src/pages/Editor/CustomWidgetBuilder/Editor/Header/CodeTemplates/Templates/react.ts(2 hunks)app/client/src/widgets/CustomWidget/widget/defaultApp.ts(4 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`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. ...
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/fixtures/customWidget.json
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: perform-test / client-build / client-build
- GitHub Check: perform-test / server-build / server-unit-tests
- GitHub Check: perform-test / rts-build / build
- GitHub Check: client-lint / client-lint
- GitHub Check: client-check-cyclic-deps / check-cyclic-dependencies
- GitHub Check: client-build / client-build
- GitHub Check: client-unit-tests / client-unit-tests
- GitHub Check: client-prettier / prettier-check
🔇 Additional comments (11)
app/client/src/pages/Editor/CustomWidgetBuilder/Editor/Header/CodeTemplates/Templates/anvilTemplates/react.ts (2)
91-92: Import statements modernizedThe imports have been updated from JSDelivr CDN to ESM.sh and
reactDomvariable is now properly capitalized asReactDOMto follow React naming conventions.
135-135: Variable reference updatedReference updated from
reactDomtoReactDOMto match the import statement.app/client/src/widgets/CustomWidget/widget/defaultApp.ts (4)
86-87: Import statements modernizedThe imports have been updated from JSDelivr CDN to ESM.sh and
reactDomvariable is now properly capitalized asReactDOMto follow React naming conventions.
130-130: Variable reference updatedReference updated from
reactDomtoReactDOMto match the import statement.
215-216: Import statements modernized in compiled codeSimilar updates to the imports in the compiled section of the code, ensuring consistency throughout the file.
257-257: Variable reference updated in compiled codeReference updated from
reactDomtoReactDOMin the compiled section, maintaining consistency.app/client/src/pages/Editor/CustomWidgetBuilder/Editor/Header/CodeTemplates/Templates/react.ts (2)
88-89: Import statements modernizedThe imports have been updated from JSDelivr CDN to ESM.sh and
reactDomvariable is now properly capitalized asReactDOMto follow React naming conventions.
132-132: Variable reference updatedReference updated from
reactDomtoReactDOMto match the import statement.app/client/cypress/fixtures/customWidget.json (3)
23-80: Custom Widget ("Custom1") Configuration and Source Document Update
The CUSTOM_WIDGET "Custom1" now features an enriched configuration. The updatedsrcDoccontains enhanced CSS (e.g., added padding, improved box-sizing, and background settings) along with streamlined HTML and React-based JS logic for managing the tip index. The integration with the appsmith model and event system appears consistent with the new documentation structure.
81-140: New Text Widget ("Text1") Configuration
The new TEXT_WIDGET "Text1" is properly added to display the current index from the CUSTOM_WIDGET via the binding{{Custom1.model.currentIndex}}. All visual and dynamic properties (font size, style, responsiveness, etc.) are defined appropriately. Ensure that these properties and the binding syntax continue to align with both updated documentation and the selectors used in the Cypress tests.
142-142: DSL Block Closure Verification
The closing brace for the DSL block (line 142) is correctly placed. Ensure that the overall JSON structure validates against the expected schema for custom widget fixtures.
|
/build-deploy-preview skip-tests=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/14125137595. |
|
Deploy-Preview-URL: https://ce-39905.dp.appsmith.com |
|
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/14124980094. |
|
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/14124977432. |
rahulbarwal
added
the
Query & Widgets Pod
rahulbarwal
deleted the
rahulbarwal/fix-cypress-tests-related-to-custom-widget-due-to-new-structure
branch
Description
Updates the specs with new doc structure in custom widget.
Fixes #
Issue Numberor
Fixes
Issue URLWarning
If no issue exists, please create an issue first, and check with the maintainers if the issue is valid.
Automation
/ok-to-test tags="@tag.Widget"
🔍 Cypress test results
Tip
🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/14126379520
Commit: c043c29
Cypress dashboard.
Tags:
@tag.WidgetSpec:
Fri, 28 Mar 2025 11:26:17 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit