Firing a submit event in a form with submit type button but no event handlers

[agiletea]

Being both new to Blazor and bUnit, I'm hoping I'm missing the obvious! Taking the following razor in which an authorized user would see the logout button, the button has no click event handler, nor does the encapsulating form have an onsubmit handler. As a result, I am not able to test this code. Any ideas as to how I get around this without the need to add in unnecessary event handlers into the html? I understand the error message, just not what my options are for effectively mimicking someone clicking the button!

<AuthorizeView>
	<Authorized>
		<form action="authentication/logout" method="post">
			<AntiforgeryToken />
			<input type="hidden" name="ReturnUrl" />
			<button class="btn btn-danger" type="submit">Logout</button>
		</form>
	</Authorized>
	<NotAuthorized>
		<button class="btn btn-primary" type="button" @onclick="@OnLogin">Login</button>
	</NotAuthorized>
</AuthorizeView>

Unit test:

[Fact]
public async Task GivenAUserIsLoggedIn_WhenLogoutButtonIsClicked_ThenNavigateBackToBaseAddress()
{
	// arrange
	var authContext = this.AddTestAuthorization();
	JSInterop.Mode = JSRuntimeMode.Loose;
	authContext.SetAuthorized("testuser");
	var navMan = Services.GetRequiredService<FakeNavigationManager>();
	var cut = RenderComponent<LoginOrOut>();

	var logoutForm = cut.Find("form");

	// act
	await logoutForm.SubmitAsync();

	// assert
	Assert.Equal("http://localhost/", navMan.Uri);
}

Error message from test explorer:

  Message: 
Bunit.MissingEventHandlerException : The element does not have an event handler for the event 'onsubmit', nor any other events.

[linkdotnet]

Hey hey @agiletea

I'm hoping I'm missing the obvious

No, but something may not be so obvious. bUnit, unlike Playwright and similar e2e test tools, isn't a browser running your code. We emulate a lot of things, but not everything. One of the things we don't emulate is form-post navigation. And the reason is that this is neither a Blazor nor (more importantly) your domain-concern.

To have a better example. if you set an style on an element display: none then the object is still there, but as bUnit doesn't render anything, nothing really changes (except the attribute).

From your code's point of view, it is the browser's concern that the navigation will happen. So, you would basically test 3rd party code. While this might make sense in an e2e-test fashion, it is less useful with bUnit (and as you saw it doesn't work).

When you call OnSubmitAsync we try to invoke the @onsubmit event callback - that is all. Like your @onclick="@OnLogin" code. If you call cut.Find(".btn .btn-primary").Click() we would invoke just your @OnLogin method.

I know that is different in the e2e test world. Maybe not the answer you were looking for, but this is by design.

[agiletea]

That's really helpful @linkdotnet - I'm predominantly a backend developer so either testing it or mocking it! Seeing how difficult it is unit testing the front end and knowing where to exclude and where adds value is still a learning path for me so this is invaluable advice for me to take forward!
Many thanks for the prompt and thorough answer!