[英]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);
}
我收到的錯誤是:
消息:Assert.Same() 預期失敗:RenderFragment { Method = Void b__2_0(Microsoft.AspNetCore.Blazor.RenderTree.RenderTreeBuilder), Target = <>c { } } 實際:RenderFragment { Method = Void b__0(Microsoft.AspNetCore.Blazor .RenderTree.RenderTreeBuilder), Target = <>c__DisplayClass0_0 { attribute = null, attributeContent = null, element = "p", elementContent = "" } }
我不明白為什么我的目標對象片段上是從結果目標不同。
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));
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);
}
這些示例來自博客文章Unit Testing Blazor Components with bUnit and JustMock
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.