在 OnInitializedAsync 方法中获取页面数据后如何检查标记？

问题描述

我是 Blazor 和 bUnit 的新手。我有一个呈现编辑表单的组件，我在我的 OnInitializedAsync 事件中获取表单的值。

我不知道如何使用 cut.WaitForState() 或 cut.WaitForAssertion()。

这是我的剃须刀代码：

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

还有我背后的代码：

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;
    }
    ...

这是我的测试：

    [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,5));
        cut.MarkupMatches("<p>Hello World</p>");
    }

当我调试测试时，我可以看到 OnInitializedAsync 触发，但是我的标记从未更改为包含“Hello World”并且 WaitForState() 命令失败。

解决方法

您确定从您的 AppSettingsDataService.Get() 方法返回的任务会完成吗？

我会确保从 AppSettingsDataService.Get() 返回的任务已经完成，否则您需要在组件呈现后完成任务。有很多方法可以做到这一点，这完全取决于您的模拟是如何实现的。

至于您的 WaitFor，在这种情况下您可以只使用 WaitForAssertion 方法，即：cut.WaitForAssertion(() => cut.MarkupMatches("<p>Hello World</p>"));

一点背景： WaitFor* 方法在被测组件异步呈现时使用，因为在不同线程中运行的测试不知道何时会发生这种情况。

通常，您永远不需要设置自定义超时，默认为 1 秒，但 WaitFor* 方法将在每次渲染器发生时重试断言/谓词。只有当触发渲染的事情需要超过一秒钟时，例如如果您使用 bUnit 来执行端到端测试，例如从真实的网络服务中提取数据。