如何在没有EditForm的情况下测试EditForm组件？

Question

我收到此错误：

System.InvalidOperationException：Microsoft.AspNetCore.Components.Forms.InputText 需要一个 EditContext 类型的 >> 级联参数。例如，您可以在 EditForm 中使用 Microsoft.AspNetCore.Components.Forms.InputText。

这是我的组件（_Item）：

@if (UtiliseItemCostum())
{
    <div class="form-group mt-3">
        <label>Item</label>
        @if (EpicerieDetailsUtiliseItemCustom())
        {
            <InputText id="itemNonEnregistre" @bind-Value="EpicerieDetailsDto.ItemCustom"></InputText>
        }
        else if (GabaritDetailsUtiliseItemCustom())
        {
            <InputText id="itemNonEnregistre" @bind-Value="GabaritDetailsDto.ItemCustom"></InputText>
        }
    </div>
}
else
{
    <_MenuDeroulantItems EpicerieDetailsDto="@EpicerieDetailsDto" GabaritDetailsDto="@GabaritDetailsDto" />
}

这是父组件：

<EditForm Model="EpicerieDetailsDto" OnValidSubmit="GererEpicerieDetails">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div class="form-group mt-3">
        <label>@(EpicerieDetailsDto.UtiliseItemCustom ? "Item créé par soi-même:" : "Item dans l'application:")</label>
        <InputCheckbox id="choisirItem" @bind-Value="@EpicerieDetailsDto.UtiliseItemCustom"></InputCheckbox>
    </div>

    <_Item EpicerieDetailsDto="@EpicerieDetailsDto"/>

    <_MenuDeroulantEpicerie EpicerieDetailsDto="@EpicerieDetailsDto"/>
    <ValidationMessage For="()=>EpicerieDetailsDto.Epicerie"></ValidationMessage>

    <_MenuDeroulantUnitesMesure EpicerieDetailsDto="@EpicerieDetailsDto"/>
    <ValidationMessage For="()=>EpicerieDetailsDto.UniteMesure"></ValidationMessage>

    <div class="form-group mt-3">
        <label>Acheté?</label>
        <InputCheckbox @bind-Value="EpicerieDetailsDto.Achete"></InputCheckbox>
    </div>

    <div class="form-group mt-3">
        <label>Quantité</label>
        <InputNumber @bind-Value="EpicerieDetailsDto.Quantite" class="form-control"></InputNumber>
        <ValidationMessage For="()=>EpicerieDetailsDto.Quantite"></ValidationMessage>
    </div>

    <div class="d-flex justify-content-between align-items-end mt-3">
        <NavLink href="@Chemins.EpiceriesDetails(EpicerieId)" class="btn btn-secondary">Retour</NavLink>
        <button class="btn btn-primary py-2" id="soumettre-details-epicere">@Titre</button>
    </div>
</EditForm>

问题是当我尝试这个测试时：

public static IEnumerable<TestCaseData> ItemTestCases()
{
    yield return new TestCaseData(null, new EpicerieDetailsDto() { UtiliseItemCustom = true });
    yield return new TestCaseData(new GabaritDetailsDto() { UtiliseItemCustom = true }, null);
}

[Test]
[TestCaseSource(nameof(ItemTestCases))]
public void QuandChangeCheckBox_AlorsChangeChoixItem(GabaritDetailsDto gabarit, EpicerieDetailsDto epicerie)
{
    var cut = _testContext.RenderComponent<_Item>(parametres => 
        parametres
            .Add(p => p.EpicerieDetailsDto, epicerie)
            .Add(p => p.GabaritDetailsDto, gabarit)
    );

    // Agir Affirmer
    Assert.NotNull(cut.Find("#itemNonEnregistre"));
}

InputText 找不到 EditForm。我该如何测试呢？

我希望我能够使用 InputText 来测试我的组件，以某种方式模拟 EditForm 我猜？

Answer 1

如果您需要完整的解释，请查看@Qiang Fu提到的bUnit上的讨论。

TL;DR 版本： FormComponent 确实需要级联值（

EditContext

）才能正常工作。

使用 bUnit，您可以将

EditContext

作为组件的父级附加到组件，如下所示：

var model = new EpicerieDetailsDto();
var editContext = new EditContext(model);
var form = RenderComponent<CascadingValue<EditContext>>(
  p => p.Add(s => s.Value, editContext)
        .AddChildContent<_Item>(/*Your parameters goes here*/)
);

var cut = form.FindComponent<_Item>(); // This is your component