feat: Add programmatic state change validation for Checkbox widget #39980
Conversation
WalkthroughThis pull request adds a new test case to validate that the Changes
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
|
|
/build-deploy-preview skip-tests=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/14167590262. |
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBox_spec.js(1 hunks)app/client/src/widgets/CheckboxWidget/widget/index.tsx(1 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/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBox_spec.js
🪛 Biome (1.9.4)
app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBox_spec.js
[error] 88-88: Don't focus the test.
The 'only' method is often used for debugging or during implementation. It should be removed before deploying to production.
Consider removing 'only' to ensure all tests are executed.
Unsafe fix: Remove focus from test.
(lint/suspicious/noFocusedTests)
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: client-unit-tests / client-unit-tests
- GitHub Check: client-lint / client-lint
- GitHub Check: client-build / client-build
- GitHub Check: client-check-cyclic-deps / check-cyclic-dependencies
- GitHub Check: client-prettier / prettier-check
🔇 Additional comments (1)
app/client/src/widgets/CheckboxWidget/widget/index.tsx (1)
419-432: Good implementation of programmatic state change event handling.The added code properly handles programmatic changes to the checkbox state by checking if the
isCheckedproperty has changed and ifonCheckChangeis defined. This ensures that the event callback is triggered when the checkbox state is modified programmatically, not just through UI interaction.
app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBox_spec.js
Outdated
Show resolved
Hide resolved
|
Deploy-Preview-URL: https://ce-39980.dp.appsmith.com |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBox_spec.js (3)
90-90: Consider using locator constants for selectorsThe string selector
.t--property-control-textshould be extracted to a locator constant for better maintainability.- cy.updateCodeInput(".t--property-control-text", `{{checker.isChecked}}`); + cy.updateCodeInput(formWidgetsPage.propertyControlText, `{{checker.isChecked}}`);
96-97: Extract repeated text to a constantThe alert message "Checkbox state changed programmatically" is used in multiple places. Extract it to a constant to improve maintainability.
+ const CHECKBOX_CHANGE_MESSAGE = "Checkbox state changed programmatically"; // Then update the occurrences: - "{{showAlert('Checkbox state changed programmatically')}}", + "{{showAlert('" + CHECKBOX_CHANGE_MESSAGE + "')}}", - _.agHelper.ValidateToastMessage( - "Checkbox state changed programmatically", - ); + _.agHelper.ValidateToastMessage(CHECKBOX_CHANGE_MESSAGE); // And similarly for the second validationAlso applies to: 107-108, 114-115
105-109: Consider creating a helper function for repeating stepsThe button click and toast validation steps are repeated. Consider extracting them to a helper function to reduce duplication.
function toggleCheckboxAndValidateToast(expectedMessage) { _.agHelper.ClickButton("Submit"); _.agHelper.ValidateToastMessage(expectedMessage); } // Then use it in the test: toggleCheckboxAndValidateToast("Checkbox state changed programmatically"); _.agHelper.GetNAssertElementText(_.locators._textWidget, "true"); toggleCheckboxAndValidateToast("Checkbox state changed programmatically"); _.agHelper.GetNAssertElementText(_.locators._textWidget, "false");Also applies to: 112-116
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro (Legacy)
📒 Files selected for processing (1)
app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBox_spec.js(1 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/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBox_spec.js
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: perform-test / client-build / client-build
- GitHub Check: perform-test / rts-build / build
- GitHub Check: perform-test / server-build / server-unit-tests
- GitHub Check: client-unit-tests / client-unit-tests
- GitHub Check: client-lint / client-lint
- GitHub Check: client-check-cyclic-deps / check-cyclic-dependencies
- GitHub Check: client-build / client-build
- GitHub Check: client-prettier / prettier-check
🔇 Additional comments (1)
app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBox_spec.js (1)
88-120: Good implementation of programmatic state change testThis test case successfully validates that the
onCheckChangeevent is triggered when the checkbox state is changed programmatically. It thoroughly verifies both state transitions (false→true and true→false) and confirms the callback is properly invoked.
…ppsmithorg#39980) ## Description In the case of programmatically changing the checkbox state, the onCheckboxChange event was not being triggered. I have added logic to handle this issue. Fixes #`Issue Number` _or_ Fixes appsmithorg/appsmith-ee#6823 > [!WARNING] > _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.Checkbox" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/14169747454> > Commit: 81c1da0 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=14169747454&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Checkbox` > Spec: > <hr>Mon, 31 Mar 2025 11:11:12 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Enhanced the checkbox widget to reflect programmatic state changes with corresponding UI updates and notifications. - **Tests** - Added a new automated test case to validate that programmatic changes to the checkbox state trigger the appropriate alerts and update the UI accordingly. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Description
In the case of programmatically changing the checkbox state, the onCheckboxChange event was not being triggered. I have added logic to handle this issue.
Fixes #
Issue Numberor
Fixes https://github.com/appsmithorg/appsmith-ee/issues/6823
Warning
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.Checkbox"
🔍 Cypress test results
Tip
🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/14169747454
Commit: 81c1da0
Cypress dashboard.
Tags:
@tag.CheckboxSpec:
Mon, 31 Mar 2025 11:11:12 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit