【Blazor】bUnitを使用してHTMLタグ内の値を確認する方法

はじめに

Blazorで使用できる単体テストフレームフレームワークにbUnitについて詰まったところを共有します。

問題

公式チュートリアルを見るとチュートリアルではHTMLタグごと比較している。
CSSなどレイアウト系についてはロジックのテストとは分けたい。
(CSS制御のテストもロジックとは別にしたい)

対象コード

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

テストコード

    [TestMethod]
	public void ClickingButtonIncrementsCounter()
	{
		// Arrange
		var cut = Render(@<Counter />);

		// Act - click button to increment counter
		cut.Find("button").Click();

		// Assert that the counter was incremented
		cut.Find("p").MarkupMatches(@<p role="status">Current count: 1</p>);
	}

解決策

レンダリングした要素からはTextContentやClassListなどから内部の値を取得できる。

	[TestMethod]
	public void ClickingButtonIncrementsCounter3()
	{
		// Arrange
		var cut = Render(@<Counter />);

		// Act - click button to increment counter
		cut.Find("button").Click();

		// Assert that the counter was incremented
		var p = cut.Find("p");
		Assert.AreEqual("Current count: 1", p.TextContent);
	}

おわりに

Bunitはまだまだポテンシャルを秘めていそうなので使いこなしたいです。

参考