Cannot test EventCallback parameters.

[majorimi]

I'm working on a set of Blazor components and extensions.. And want to have consistent quality so trying to test my components. But run into issues when tried to supply EventCallback parameters.

According to the docs it can be done like this:

var rendered = _testContext.RenderComponent<LoadingButton>(
	EventCallback(nameof(LoadingButton.OnClicked), (MouseEventArgs args) => { /* handle callback */ }));

But I'm getting build error:

Severity	Code	Description	Project	File	Line	Suppression State
Error	CS1955	Non-invocable member 'EventCallback' cannot be used like a method.	Blazor.Components.Loading.Tests	D:\Projects\GitHub\blazor-components\src\Blazor.Components.Loading.Tests\LoadingButtonTest.cs	72	Active

Currently using .NET 5 MSTests with bunit 1.0.0-beta-11

[egil]

Hi @majorimi

Check out the tip at the top of docs page you link to. I am pretty sure you are missing the using static Bunit.ComponentParameterFactory; in your code.

That said, I would really recommend using the builder pattern for passing parameter instead. Its strongly typed. E.g.:

var cut= _testContext.RenderComponent<LoadingButton>(parameters => parameters
   .Add(p => p.OnClicked, args => { ... })
);

[majorimi]

Sorry did not not noticed there is a common section at the top. Yes meanwhile switched to other code example what you recommended. And it was working.
Thanks.

[egil]

No worries, glad it is sorted out. I am considering deprecating the factory methods, or at least moving them to a separate nuget in the future. In most cases, the builder version is preferred.

[majorimi]

Hi @egil,

Actually I think factory methods is useful in some cases and should not be deprecated. Consider the following scenario: when a component captures HTML attributes via [Parameter(CaptureUnmatchedValues = true)] parameter. And we want to test if those captured parameters were assigned via @attributes=AdditionalAttributes to the rendered element or not?

I think in this case typed params won't work, so we need to use name/value pairs.

[TestMethod]
public void DebounceInput_should_rendered_correctly_html_attributes()
{
	var rendered = _testContext.RenderComponent<DebounceInput>(
		("id", "id1"), //HTML attributes
		("class", "form-control w-100") //HTML attributes);

	var input = rendered.Find("input");

	Assert.IsNotNull(input);
	input.MarkupMatches(@"<input id=""id1"" class=""form-control w-100"" />");
}

[egil]

I would not remove the tuple variant you are using here, it is very concise and works well. It'd the factory methods I think are redundant.

Btw. the builder supports passing unmatched parameters, see https://bunit.egilhansen.com/docs/providing-input/passing-parameters-to-components.html#unmatched-parameters

[majorimi]

Hi @egil,

Since we are started discussing Blazor testing (with this cool framework 🥇) I have further issues which might be stupid mistakes again...

One of my component is: LoadingButton which is pretty simple. When clicked it will represent a Loading/Progress state until a registered event (could be Action) code was not finished, called by the click handler code. I call this an Automatic mode and it can be activated Manually as well by calling 2 public methods: Set()/Reset(). Here is the LoadingButton code. Currently I'm trying to unit test this component.

So the issues is for me it seems component is not re-rendered. Unit test run correctly I can debug it. Code is calling into events and public methods my component code runs. Internal variables set as expected which should be reflected on UI. By disabling button and switching content, etc. I have a demo page where component works as expected.

Test case 1:

• Expected: button should be rendered with default content, when clicked content switched and button disabled.
• Result: Test passes but when debugged WaitForAssertion actually waits 2 sec and throws error because Markup was not changed and exception swallowed, hence test False positive

[TestMethod]
public void LoadingButton_should_rendered_correctly_loading_state()
{
	var clicked = false;
	IRenderedComponent<LoadingButton> rendered = null;

	rendered = _testContext.RenderComponent<LoadingButton>(parameters => parameters
		.Add(p => p.Type, ButtonTypes.Submit)
		.Add(p => p.Content, (RenderFragment)(builder =>
		{
			builder.AddMarkupContent(1, "hello...");
		}))
		.Add(p => p.LoadingContent, (RenderFragment)(builder =>
		{
			builder.AddMarkupContent(1, "loading...");
		}))
		.Add(p => p.OnClicked, args => { CheckClick(); clicked = true; }));

	var button = rendered.Find("button");
	button.Click();

	Assert.IsNotNull(button);
	Assert.IsTrue(clicked);

	async Task CheckClick()
	{
		rendered.WaitForAssertion(() => rendered.MarkupMatches("<button blazor:onclick=\"1\" type=\"submit\" disabled=\"\">loading...</button>"), timeout: TimeSpan.FromSeconds(2));
	}
}

Test case 2:

• Expected: button should be rendered with default content, when public Set() method called on instance content switched and button disabled.
• Result: Test failed WaitForAssertion actually waits 2 sec and throws error because Markup was not changed. When debugged Set() method code executed component variables changed but no re-render.

[TestMethod]
public async Task LoadingButton_should_be_loading_state_when_Set_called()
{
	var rendered = _testContext.RenderComponent<LoadingButton>(parameters => parameters
		.Add(p => p.Type, ButtonTypes.Submit)
		.Add(p => p.Content, (RenderFragment)(builder =>
		{
			builder.AddMarkupContent(1, "hello...");
		}))
		.Add(p => p.LoadingContent, (RenderFragment)(builder =>
		{
			builder.AddMarkupContent(1, "loading...");
		})));

	rendered.Instance.Set();

	rendered.WaitForAssertion(() => rendered.MarkupMatches("<button blazor:onclick=\"1\" type=\"submit\" disabled=\"\">loading...</button>"), timeout: TimeSpan.FromSeconds(2));
}

Do you have any idea what can be the issue?

Another issue is that when I tried to force render by adding StateHasChanged() method call to my component e.g to Set(), then bUnit tests are throwing exception. As I understand unit tests are not UI threads but unfortunately InvokeAsync() is not available in unit tests. Or am I wrong?

 System.InvalidOperationException: The current thread is not associated with the Dispatcher. Use InvokeAsync() to switch execution to the Dispatcher when triggering rendering or component state.
  Stack Trace: 
    Dispatcher.AssertAccess()
    Renderer.AddToRenderQueue(Int32 componentId, RenderFragment renderFragment)
    RenderHandle.Render(RenderFragment renderFragment)
    ComponentBase.StateHasChanged()
    LoadingButton.Set() line 32
    LoadingButtonTest.LoadingButton_should_be_loading_state_when_Set_called() line 121
    ThreadOperations.ExecuteWithAbortSafety(Action action)

Sorry to bother you. Thanks.

[egil]

Hi @majorimi

1. In this test, you are calling CheckClick from your event handler. That wont work, since the renderer will most likely wait to rerender till after the event handler is done running. Move your rendered.MarkupMatches("...") out after the button.Click() call.

   Also, The markup in markup matches should not (does not need to) include the special blazor:xxxx attributes. They are automatically ignored when the semantic comparison runs.

2. You problem is likely that calling Set doesnt trigger a render. I generally advice against calling methods directly on components, as that generally goes against the ethos of Blazor. If you want to trigger a re-render, you can always call cut.Render() or cut.SetParametersAndRender(). See https://bunit.egilhansen.com/docs/interaction/trigger-renders.html

3. Since your test code and the blazor renderer runs in different threads, you need to use the invoke method to call statehaschanged. E.g. cut.InvokeAsync(() => cut.Instance.Set())

ps. this should really be its own question/discussion thread :)

[majorimi]

Hi @egil

1. Yes exactly that is the tricky part. My component switches state when the event begins. And when click handler finished the component revert back to the default state. So no other option to check the Loading/Progress state just when it is happening. If I move the rendered.MarkupMatches("...") after the click event. Test will always fail since I need to check for LoadingContent being rendered.

2. Set() method is changing a private bool variable. Based on this bool UI content will be switched. And it works when using from UI and demo app. So technically it should be triggering a render.... You are also right not recommended to use public methods, and I'm using it only for this component and nowhere else. The reason is if this button is in an EditForm then click events should be ignored since form cannot be submitted until it is valid. So I would need to cascade down all EditForm values which I found too complex for this at that time. Simple public methods worked perfectly.

3. Cool so InvokeAsync is also available. Actually I don't need it now since removed StateHasChanged method call. And now manually calling cut.Render() in my tests and all looks fine now.

Conclusion: this component might be a bit "weird"... Some part of it not following recommendations. However it works when used from Blazor apps. For some reason from bUnit it does not trigger render.

Thanks again for the help.