How to test custom events?

[majorimi]

Hi @egil,

Some time ago we had a chat about Blazor testing. Good to see your package reached v1 :) Now had time to update from Preview-x...

Anyway I'm working on some open sourced Blazor components. One of the components had some issues with Blazor mouse events. As suggested here I implemented "custom" mouse events onmouseleave and onmouseenter.

[EventHandler("onmouseleave", typeof(MouseEventArgs), true, true)]
[EventHandler("onmouseenter", typeof(MouseEventArgs), true, true)]
public static class EventHandlers
{}

And now I want to test this component but run into some issues. Your test framework exposes lots of methods to raise events for a rendered test element e.g.: PointerEnter(), MouseOver(), etc. However I cannot use any of those to my "custom defined" onmouseleave and onmouseenter events. All tests fail with any provided mouse/pointer methods.

Message: 
    Test method Majorsoft.Blazor.Components.PermaLink.Tests.PermaLinkElementTest.PermaLinkElement_should_rendered_ShowPermaLinkIcon_OnHover_correctly threw exception: 
    Bunit.MissingEventHandlerException: The element does not have an event handler for the event 'onmouseover'. It does however have event handlers for these events, 'onmouseenter', 'onmouseleave'.

Any suggestion how can be these custom mouse events triggered? Thanks a lot.

[egil]

Hi @majorimi,

I've taken the liberty of converting this issue to a Q/A discussion instead.

This is related to the issue #341, but this should actually be possible with the current release of bUnit.

bUnit has a method, TriggerEventAsync, that you can use to trigger any custom event bound attached to the DOM, and the error message you quote from bUnit highlights that the two custom events you have in your component library is indeed available for invocation (onmouseenter, onmouseleave).

What you need to do is this:

await cut.Find("element-with-custom-events").TriggerEventAsync("onmouseenter", new MouseEventArgs());
await cut.Find("element-with-custom-events").TriggerEventAsync("onmouseleave", new MouseEventArgs());

If that doesn't work, please let me know in the #341 issue.

[majorimi]

Hi @egil,

Sore no problem you can convert it to discussion. And your answer worked perfectly once more! So I can test now those custom events as well. Thanks for all help!
Have a nice weekend.

[egil]

Thanks, you too!