blazor webassembly - How to check markup after I get page data in OnInitializedAsync method?

Question

I'm new to Blazor and bUnit. I have component that renders an edit form and I get the values for the form in my OnInitializedAsync event.

I'm having trouble working out how to use cut.WaitForState() or cut.WaitForAssertion().

Here's my razor code:

@page "/{AppId:guid}/app-settings-edit"
<section class="app-settings-edit">
    <h1 class="page-title">Application Settings</h1>
    @if (InitializedComplete)
    {
        <p>Hello World</p>
        ...

And my code behind:

public partial class AppSettingsEdit
{
    protected bool InitializedComplete;

    [Parameter]
    public Guid AppId { get; set; }

    [ValidateComplexType]
    public AppSettings AppSettings { get; set; } = new AppSettings();

    [Inject]
    public IAppSettingsDataService AppSettingsDataService { get; set; }

    protected override async Task OnInitializedAsync()
    {
        AppSettings = await AppSettingsDataService.Get(AppId);
        InitializedComplete = true;
    }
    ...

And here's my Test:

    [Fact]
    public void MyFact()
    {
        Services.AddSingleton<IAppSettingsDataService, MockAppSettingsDataService>(x => new MockAppSettingsDataService(x.GetRequiredService<HttpClient>()));

        var cut = RenderComponent<AppSettingsEdit>(parameters => parameters
            .Add(p => p.AppId, Guid.Parse("55E5097B-B56A-40D7-8A02-A5B94AAAD6E1"))
        );

        Assert.NotNull(cut.Instance.AppSettingsDataService);

        cut.WaitForState(() => cut.Find("p").TextContent == "Hello World", new TimeSpan(0, 0, 5));
        cut.MarkupMatches("<p>Hello World</p>");
    }

When I debug the test, I can see the OnInitializedAsync firing, however my markup never changes to include 'Hello World' and the WaitForState() command fails.

question from:https://stackoverflow.com/questions/65938620/how-to-check-markup-after-i-get-page-data-in-oninitializedasync-method

Answer 1

Are you certain that the task returned from your AppSettingsDataService.Get() method ever completes?

I would make sure that the task returned from AppSettingsDataService.Get() is already completed, otherwise you need to a way to complete the task after the component is rendered. There are many ways to do this, it all depends on how your mock is implemented.

As for your WaitFor, you can just use the WaitForAssertion method in this case, i.e.: cut.WaitForAssertion(() => cut.MarkupMatches("<p>Hello World</p>"));

A little background: The WaitFor* methods are used when the component under test is being rendered asynchronously, since the test, running in a different thread, doesn't know when that will happen.

In general, you should never need to set a custom timeout, the default is 1 second, but the WaitFor* methods will retry the assertion/predicate every time a renderer happens. Its only when the thing that triggers the rendering will take more than one second, e.g. if you are using bUnit to perform end-2-end testing and e.g. pulling data from a real web service.