feat: Add programmatic state change validation for Checkbox widget (#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 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
<!-- 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: 81c1da076cf7d5abbbae65c0c4cf6d5906fc1d3b
> <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 -->
This commit is contained in:
Rahul Barwal 2025-03-31 16:44:20 +05:30 committed by GitHub
parent ec3d406115
commit a1181523df
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 48 additions and 0 deletions

View File

@ -84,6 +84,40 @@ describe(
cy.get(".t--widget-textwidget").should("contain", "false");
_.deployMode.DeployApp();
});
it("Validate onCheckChange event is triggered on programmatic state change", function () {
cy.openPropertyPane("textwidget");
cy.updateCodeInput(".t--property-control-text", `{{checker.isChecked}}`);
_.agHelper.GetNAssertElementText(_.locators._textWidget, "false");
cy.openPropertyPane("checkboxwidget");
_.propPane.EnterJSContext(
"onCheckChange",
"{{showAlert('Checkbox state changed programmatically')}}",
);
cy.openPropertyPane("buttonwidget");
_.propPane.EnterJSContext(
"onClick",
"{{checker.setValue(!checker.isChecked)}}",
);
_.agHelper.ClickButton("Submit");
_.agHelper.ValidateToastMessage(
"Checkbox state changed programmatically",
);
_.agHelper.GetNAssertElementText(_.locators._textWidget, "true");
_.agHelper.ClickButton("Submit");
_.agHelper.ValidateToastMessage(
"Checkbox state changed programmatically",
);
_.agHelper.GetNAssertElementText(_.locators._textWidget, "false");
_.deployMode.DeployApp();
});
},
);

View File

@ -416,6 +416,20 @@ class CheckboxWidget extends BaseWidget<CheckboxWidgetProps, WidgetState> {
) {
this.props.updateWidgetMetaProperty("isDirty", false);
}
// Handle programmatic changes
if (
this.props.isChecked !== prevProps.isChecked &&
this.props.onCheckChange
) {
this.props.updateWidgetMetaProperty("isChecked", this.props.isChecked, {
triggerPropertyName: "onCheckChange",
dynamicString: this.props.onCheckChange,
event: {
type: EventType.ON_CHECK_CHANGE,
},
});
}
}
static getSetterConfig(): SetterConfig {