Triggering Event Handlers in Components

Blazor makes it possible to bind many event handlers to elements in a Blazor component, using the @onXXXX syntax, e.g. @onclick="MyClickHandler".

bUnit comes with event dispatch helper methods that makes it possible to invoke event handlers for all event types supported by Blazor.

The built-in dispatch event helpers are:

• Clipboard events
• Drag events
• Focus events
• General events
• Input events
• Keyboard events
• Media events
• Mouse events
• Pointer events
• Progress events
• Touch event

To use these, first find the element in the component under test where the event handler is bound to, this is usually done with the Find(string cssSelector) method, and then invoke the event dispatch helper method of choice.

The following section demonstrates how.

Invoking an Event Handler on an Element

To invoke an event handler on an element, first find the element in the component under test, and then call the desired event dispatch helper method.

Let's look at a common example, where a @onclick event handler is invoked. The example will use the <ClickMe> component listed here:

<button @onclick="ClickHandler">Click ME!</button>
@code
{
  void ClickHandler(MouseEventArgs args)
  {
    // ...
  }
}

To trigger the @onclick ClickHandler event handler method in the <ClickMe> component, do the following:

• C# test code
• Razor test code

// Arrange
using var ctx = new TestContext();
var cut = ctx.RenderComponent<ClickMe>();
var buttonElement = cut.Find("button");

// Act
buttonElement.Click();
buttonElement.Click(detail: 3, ctrlKey: true);
buttonElement.Click(new MouseEventArgs());

// Assert
// ...

This is what happens in the test:

1. In the arrange step of the test, the <ClickMe> component is rendered and the <button> element is found using the Find(string cssSelector) method.
2. In the act step of the test, the <button>'s click event handler, in this case, the ClickHandler event handler method, is invoked in three different ways:
   • The first and second invocation uses the same Click method. It has a number of optional arguments, some of which are passed in the second invocation. If any arguments are provided, they are added to an instance of the MouseEventArgs type, which is passed to the event handler, if it has it as an argument.
   • The last invocation uses the Click method that takes an instance of the MouseEventArgs type, which is passed to the event handler, if it has it as an argument.

All the event dispatch helper methods has the same two overloads, one that takes a number of optional arguments, and one that takes the event types EventArgs type.