C# Blazor RenderFragment元素的单元测试

我已经开始编写一个动态构建RenderFragment元素的方法。因此，我也尝试在方法旁边编写单元测试

我从一个非常基本的元素开始，但它失败了。以下是测试中的具体方法：

public RenderFragment buildFragment(string element, string elementContent, string[] attribute, string[] attributeContent)
    {
        RenderFragment content = builder => {
            builder.OpenElement(0, element);
            if (attribute != null)
            {
                for (int i = 0; attribute.Length - 1 >= i; ++i)
                {
                    builder.AddAttribute(0, attribute[i], attributeContent[i]);
                }
            }
            if (!string.IsNullOrEmpty(elementContent))
            {
                builder.AddContent(0, elementContent);
            }
            builder.CloseElement();
        };

        return content;
    }

这是我对使用xUnit的方法进行的第一次基本测试：

public void BuildFragmentReturnsOneElement()
        {
            //Arrange
            RenderFragment fragment = builder =>
            {
                builder.OpenElement(0, "p");
                builder.CloseElement();
            };

            //Act
            RenderFragment result = _dynamicContentHelper.buildFragment("p", string.Empty, null, null);

            //Assert
            Assert.Same(fragment, result);
        }

我收到的错误是：

消息：Assert.Same（）失败 应为：RenderFragment{Method=Void b_u2_0（Microsoft.AspNetCore.Blazor.RenderTree.RenderTreeBuilder），Target=c{} 实际值：RenderFragment{Method=Void b__0（Microsoft.AspNetCore.Blazor.RenderTree.RenderTreeBuilder），Target=c_显示类0_0{attribute=null，attributeContent=null，element=“p”，elementContent=“”}

---

我不明白为什么我的片段对象上的目标与结果上的目标不同

渲染片段

是一种委托方法，所以当您编写这样的代码时：

RenderFragment fragment = builder =>
            {
                builder.OpenElement(0, "p");
                builder.CloseElement();
            };

您不是在创建一个具体化的工件，而是在声明一个可以调用的委托

代码

Assert.Same（片段，结果）正在比较两个明显不同的委托-它们指向两种不同的方法

我相信你应该调查Blazor源的“测试”文件夹


他们应用的技术是检查RenderTree的框架

// Act
var frames = GetRenderTree(component);

// Assert
Assert.Collection(
 frames,
 frame => AssertFrame.Component(frame, "Test.RenderChildContent", 2, 0),
 frame => AssertFrame.Attribute(frame, RenderTreeBuilder.ChildContent, 1),
 frame => AssertFrame.Markup(frame, "\n  <div></div>\n", 2));

看看他们是如何进行测试的，因为我无法在这里全部复制，但这些是关键…
我发现有一个非常有用的库，用于对Blazor组件进行单元测试，名为library。这些测试编写起来非常简单。下面是一个验证按钮单击是否有效的示例

[Fact]
public void TestCounter()
{
    // Arrange
    var cut = RenderComponent<Counter>();
    cut.Find("p").MarkupMatches("<p>Current count: 0</p>");

    // Act
    var element = cut.Find("button");
    element.Click();

    //Assert
    cut.Find("p").MarkupMatches("<p>Current count: 1</p>");
}

[事实]
公共无效测试计数器（）
{
//安排
var cut=RenderComponent（）；
cut.Find（“p”）.MarkupMatches（“当前计数：0
”）；
//表演
var元素=切割。查找（“按钮”）；
元素。单击（）；
//断言
cut.Find（“p”）.MarkupMatches（“当前计数：1
”）；
}

下面是另一个例子，其中包括使用

[事实]
public void TestFetchData_forecastisnall（）
{
//安排
var weatherForecastServiceMock=Mock.Create（）；
Mock.Arrange（（）=>weatherForecastServiceMock.GetForecastSync（Arg.IsAny（）））
.Returns（新建TaskCompletionSource（）.Task）；
服务。AddSingleton（weatherForecastServiceMock）；
//表演
var cut=RenderComponent（）；
//断言-它呈现初始加载消息
var initialExpectedHtml=
@"天气预报
此组件演示如何从服务获取数据

加载…
“；
cut.MarkupMatches（initialExpectedHtml）；
}

示例来自博客帖子
查看链接，该链接使用名称空间Microsoft.ASpNetCore.Components。我正在使用Microsoft.ASpNetCore.Blazor。一般来说，我使用的是Microsoft.AspNetCore 2.1.2，它没有组件名称空间。从链接和您的代码片段来看，似乎
GetRenderTree
方法是关键，但我在任何地方都无法使用它。我也在使用Blazor 0.7.0。逻辑是一样的，他们只是更改了名称空间。你可以在渲染片段上使用GetFrames，然后对其进行测试。我在任何地方都看不到GetFrames，你能确认这个名称空间吗？我已经更新了答案-完整的测试方法在我在Github上链接的项目中-它太大了，无法在这里复制，但我突出显示的部分应该足以让你继续。正如我之前所说，它们更改了名称空间，但您感兴趣的类仍将存在于Blazor 0.7.0中，但在名称空间Microsoft.AspNetCore.Blazor中
[Fact]
public void TestCounter()
{
    // Arrange
    var cut = RenderComponent<Counter>();
    cut.Find("p").MarkupMatches("<p>Current count: 0</p>");

    // Act
    var element = cut.Find("button");
    element.Click();

    //Assert
    cut.Find("p").MarkupMatches("<p>Current count: 1</p>");
}

[Fact]
public void TestFetchData_ForecastIsNull()
{
    // Arrange
    var weatherForecastServiceMock = Mock.Create<IWeatherForecastService>();
    Mock.Arrange(() => weatherForecastServiceMock.GetForecastAsync(Arg.IsAny<DateTime>()))
        .Returns(new TaskCompletionSource<WeatherForecast[]>().Task);
    Services.AddSingleton<IWeatherForecastService>(weatherForecastServiceMock);

    // Act
    var cut = RenderComponent<FetchData>();

    // Assert - that it renders the initial loading message
    var initialExpectedHtml = 
                @"<h1>Weather forecast</h1>
                <p>This component demonstrates fetching data from a service.</p>
                <p><em>Loading...</em></p>";
    cut.MarkupMatches(initialExpectedHtml);
}