单元测试 Blazor RenderFragment 元素
Unit Testing a Blazor RenderFragment element
我已经开始编写动态构建 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);
}
我收到的错误是:
Message: Assert.Same() Failure
Expected: RenderFragment { Method = Void b__2_0(Microsoft.AspNetCore.Blazor.RenderTree.RenderTreeBuilder), Target = <>c { } }
Actual: RenderFragment { Method = Void b__0(Microsoft.AspNetCore.Blazor.RenderTree.RenderTreeBuilder), Target = <>c__DisplayClass0_0 { attribute = null, attributeContent = null, element = "p", elementContent = "" } }
我不明白为什么我的 fragment 对象上的 Target 与 Target 结果。
RenderFragment
是一个Delegate方法,所以当你这样写代码时:
RenderFragment fragment = builder =>
{
builder.OpenElement(0, "p");
builder.CloseElement();
};
您不是在创建物化工件,而是在声明可以调用的委托。
因此,代码 Assert.Same(fragment, result);
正在比较两个委托,这两个委托显然不相同 - 它们指向两个不同的方法。
我认为您应该调查 Blazor Source 的 "test" 文件夹
他们应用的技术是检查 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));
Also, this section with a TestRenderer 里面有这段代码
protected RenderTreeFrame[] GetRenderTree(IComponent component)
{
var renderer = new TestRenderer();
renderer.AttachComponent(component);
component.SetParameters(ParameterCollection.Empty);
return renderer.LatestBatchReferenceFrames;
}
看看他们是如何进行测试的,因为我无法在此处重现所有内容,但这些是关键...
我发现有一个非常有用的库,用于单元测试 Blazor 组件,名为 bUnit 库。编写测试非常简单。下面是验证按钮点击是否有效的示例。
[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>");
}
这是另一个示例,其中包括使用 JustMock Lite
模拟服务
[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);
}
例子来自博客postUnit Testing Blazor Components with bUnit and JustMock
我已经开始编写动态构建 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);
}
我收到的错误是:
Message: Assert.Same() Failure Expected: RenderFragment { Method = Void b__2_0(Microsoft.AspNetCore.Blazor.RenderTree.RenderTreeBuilder), Target = <>c { } } Actual: RenderFragment { Method = Void b__0(Microsoft.AspNetCore.Blazor.RenderTree.RenderTreeBuilder), Target = <>c__DisplayClass0_0 { attribute = null, attributeContent = null, element = "p", elementContent = "" } }
我不明白为什么我的 fragment 对象上的 Target 与 Target 结果。
RenderFragment
是一个Delegate方法,所以当你这样写代码时:
RenderFragment fragment = builder =>
{
builder.OpenElement(0, "p");
builder.CloseElement();
};
您不是在创建物化工件,而是在声明可以调用的委托。
因此,代码 Assert.Same(fragment, result);
正在比较两个委托,这两个委托显然不相同 - 它们指向两个不同的方法。
我认为您应该调查 Blazor Source 的 "test" 文件夹
他们应用的技术是检查 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));
Also, this section with a TestRenderer 里面有这段代码
protected RenderTreeFrame[] GetRenderTree(IComponent component)
{
var renderer = new TestRenderer();
renderer.AttachComponent(component);
component.SetParameters(ParameterCollection.Empty);
return renderer.LatestBatchReferenceFrames;
}
看看他们是如何进行测试的,因为我无法在此处重现所有内容,但这些是关键...
我发现有一个非常有用的库,用于单元测试 Blazor 组件,名为 bUnit 库。编写测试非常简单。下面是验证按钮点击是否有效的示例。
[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>");
}
这是另一个示例,其中包括使用 JustMock Lite
模拟服务[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);
}
例子来自博客postUnit Testing Blazor Components with bUnit and JustMock