Upgrading bunit to 1.2.49 causes tests to fail

[robalexclark]

I upgraded bunit today but now some tests using click events fail.

Here is an example of a test:

public void DocumentsGrid_DeleteButton()
{
      InsertTestData(Services.GetService<IDbContextFactory<CAIRSContext>>());

      //Act
      IRenderedComponent<DocumentsGrid> cut = RenderComponent<DocumentsGrid>();
      Renderer.Dispatcher.InvokeAsync(() => cut.Instance.SelectedAnimalChanged(1));

      var deleteButton = cut.FindAll(".btn").Single(x => x.InnerHtml.Contains("Delete"));
      deleteButton.Click();

      TestSetupCheck(cut, MethodBase.GetCurrentMethod().Name + ".html");

      //Assert
      string expectedHtml = ExpectedResultsHelper.GetExpectedHtml(Path.Combine(testProjectRoot, "Components", "Grids", MethodBase.GetCurrentMethod().Name + ".html"));
      cut.WaitForAssertion(() => cut.MarkupMatches(expectedHtml));
}

The error is:
There is no event handler with ID '82' associated with the 'onclick' event in the current render tree. This can happen, for example, when using cut.FindAll(), and calling event trigger methods on the found elements after a re-render of the render tree. The workaround is to use re-issue the cut.FindAll() after each render of a component, this ensures you have the latest version of the render tree and DOM tree available in your test code.

However I am doing the FindAll and then Click together, so it should be working on the latest render (?).

[egil]

hi @robalexclark

The previous version of bUnit had a bug where it swallowed an error from the Blazor renderer, when an event handler that was previously attached to an element had been disposed.

I am guessing you have something in your component under test that does some work asynchronously, perhaps SelectedAnimalChanged, that causes a render after the work is done, e.g. by calling StateHasChanged. Since you are not awaiting the InvokeAsync operation, you effectively have a race condition between the code running in the test thread and the re-rendering of your CUT in the renderer.

Try this:

public async Task DocumentsGrid_DeleteButton()
{
      InsertTestData(Services.GetService<IDbContextFactory<CAIRSContext>>());

      //Act
      var cut = RenderComponent<DocumentsGrid>();
      
      // Either do `await cut.InvokeAsync(...)` (btw. cut.InvokeAsync is a shorthand for Renderer.Dispatcher.InvokeAsync)
      await cut.InvokeAsync(() => cut.Instance.SelectedAnimalChanged(1));
      // Or do something like this, where you wait for some state that indicate that all async operations are done
      cut.WaitForState(() => /* some check that verifies that has been done */);

      var deleteButton = cut.FindAll(".btn").Single(x => x.InnerHtml.Contains("Delete"));
      deleteButton.Click();

      TestSetupCheck(cut, MethodBase.GetCurrentMethod().Name + ".html");

      //Assert
      var expectedHtml = ExpectedResultsHelper.GetExpectedHtml(Path.Combine(testProjectRoot, "Components", "Grids", MethodBase.GetCurrentMethod().Name + ".html"));
      cut.WaitForAssertion(() => cut.MarkupMatches(expectedHtml));
}

Let me know if this helps!

[robalexclark]

Hi @egil that does indeed work - thanks! Also some of the tests that I had commented and couldn't fix are now working.

[egil]

Btw. I noticed the var expectedHtml = ExpectedResultsHelper.GetExpectedHtml(Path.Combine(testProjectRoot, "Components", "Grids", MethodBase.GetCurrentMethod().Name + ".html")); line.

You can probably turn that into a custom data attribute, if you are using xUnit, to have that passed in as a parameter (https://andrewlock.net/creating-a-custom-xunit-theory-test-dataattribute-to-load-data-from-json-files/). If its not large amount of markup, you can also consider writing your tests in .razor files and then do something like this:

// ...
cut.MarkupMatches(@<div>foo bar baz</div>);

Works really well.