You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Unable to Simulate User Interaction for FluentCheckbox of Blazor Fluent Component via UI in bUnit A #1739
[Test]
public void Selecting_checkbox_updates_model()
{
// Arrange
var options = new List<TeamOption>
{
new TeamOption { Name = "Option 1", IsSelected = false},
new TeamOption { Name = "Option 2", IsSelected = false }
};
using var ctx = new Bunit.TestContext();
ctx.Services.AddFluentUIComponents();
var cut = ctx.RenderComponent<TeamOptionComp>(parameters => parameters
.Add(p => p.Options, options)
);
Console.WriteLine(cut.Markup);
// Act
var checkboxes = cut.FindAll("fluent-checkbox");
//Simulate user interaction
// 1) Simulate clicking the first checkbox
//checkboxes[0].Click();// it throws an exception because the FluentCheckbox does not have an 'onclick' event handler.
// 2)Using Change in the first checkbox
// checkboxes[0].Change(true);// it throws an exception because the FluentCheckbox does not have an 'onchange' event handler.
//3) using TriggerEvent, supported but has no effect
checkboxes[0].TriggerEvent("oncheckedchange", new CheckboxChangeEventArgs { Checked = true });
cut.Render();
//update checkboxes after the change
checkboxes = cut.FindAll("fluent-checkbox");
//Assert
Assert.That(options[0].IsSelected, Is.True, "options[0] should be checked");
Assert.That(options[1].IsSelected, Is.False);
//Assert markup updates as well
Assert.That(checkboxes[0].ClassList, Does.Contain("checked"), "First checkbox should have 'checked' class");
Assert.That(checkboxes[1].ClassList, Does.Not.Contain("checked"), "Second checkbox should not have 'checked' class");
}
In the above test,the test fail. I am unable to simulate user interaction that updates the bound model property using TriggerEvent in bUnit .
<FluentCheckbox> does not support calling .Change(true) or Click()
Attempting to use .TriggerEvent() has no effect.
Is there a recommended bUnit approach to simulate user interaction (checking/unchecking) for FluentCheckbox that causes the model to update as it would in a browser?
Note: The component uses @bind-Value, and the only reliable way is to update from model to UI by setting the bound value directly and re-render. This does not simulate a real user interaction.
Thanks @linkdotnet for reply.
I can't use two-way binding approach because i don't use EventCallback. i use only @bind-value for every checkbox as documented.
Also, using cut.WaitForAssertion with timeout don't help and I find more iteration inside it.
The only way to fix the issue is to add a delay before Assert, like
//add 100ms delay for UI to be updated after TriggerEvent
Task.Delay(100).Wait()
It seem that the TriggerEvent has not finished updating the UI and rededering is still in progress.
Activity
linkdotnet commentedon Aug 1, 2025
Egil and I are currently one holiday so can only use mobile right now:
To interact with the bind directive we have a whole chapter in our docs: https://bunit.dev/docs/providing-input/passing-parameters-to-components.html?tabs=csharp#configure-two-way-with-component-parameters-bind-directive
My personal opinion would be not to rely on their party and instead try to mock/fake the component (3rd party) with a test double. This can be achieved via: https://bunit.dev/docs/providing-input/substituting-components.html?tabs=moq
moh-hassan commentedon Aug 4, 2025
Thanks @linkdotnet for reply.
I can't use two-way binding approach because i don't use
EventCallback.i use only@bind-valuefor every checkbox as documented.Also, using
cut.WaitForAssertionwith timeout don't help and I find more iteration inside it.The only way to fix the issue is to add a delay before Assert, like
It seem that the TriggerEvent has not finished updating the UI and rededering is still in progress.
linkdotnet commentedon Aug 4, 2025
If that is the case and there are async updates, you should use the
WaitForXXXhelpers: https://bunit.dev/docs/interaction/awaiting-async-state.htmllinkdotnet commentedon Aug 4, 2025
I will convert this into a discussion as this isn't a bug per-se.