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:
parent
ec3d406115
commit
a1181523df
|
|
@ -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();
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user