AntDesignBlazorを使用している場合のコンポーネントのテスト方法

やりたいこと

AntDesignBlazorを使用しているBlazorコンポーネントの単体テストコードを作成したい

対象クラス

cmbDemoコンポーネントを対象にテストを作成する。

cmbBase

<div>
    <Select 
        TItem="KeyValuePair<string,string>"
            TItemValue="KeyValuePair<string,string>"
        DataSource="@Source.ToList()"
            LabelName="@nameof(KeyValuePair<string, string>.Value)"
            @bind-value="@ChildValue" />
</div>

@code {
    [Parameter]
    public Dictionary<string, string> Source { get; set; } = new();
    [Parameter] 
    public KeyValuePair<string, string> Value { get; set; }
    [Parameter]
    public KeyValuePair<string, string> ChildValue
    {
        get => Value;
        set => ValueChanged.InvokeAsync(value);
    }
    [Parameter]
    public EventCallback<KeyValuePair<string, string>> ValueChanged { get; set; }
}

cmbParamKey

<CmbBase Source="GetSource()" @bind-value="@ChildValue"></CmbBase>

@code {
    [Parameter]
    public　int? Value { get; set; }
    [Parameter]
    public KeyValuePair<string, string> ChildValue
    {
        get => Convert(Value);
        set => ValueChanged.InvokeAsync(Convert(value.Key));
    }
    [Parameter]
    public EventCallback<int?> ValueChanged { get; set; }

    protected Dictionary<int, string> Source = new();
    protected bool CanNotSelect = false;

    private Dictionary<string, string> GetSource()
    {
        var dic = new Dictionary<string, string>();
        if (CanNotSelect) dic.Add(string.Empty, string.Empty);
        foreach (var item in Source)
        {
            dic.Add(item.Key.ToString(), item.Value);
        }
        return dic;
    }

    private KeyValuePair<string, string> Convert(int? value)
    {
        return value.HasValue ?
        new KeyValuePair<string, string>(value.Value.ToString(), Source[value.Value]) :
        new KeyValuePair<string, string>(string.Empty, string.Empty);
    }

    private int? Convert(string value)
    {
        return string.IsNullOrEmpty(value) ? null : int.Parse(value);
    }
}

cmbDemo

@inherits CmbParamKey
@{
    base.BuildRenderTree(__builder);
}

@code {
    protected override void OnInitialized()
    {
        Source = new Dictionary<int, string>()
        {
            {1,"秋田" },
            {2,"石巻" },
            {3,"浦和" },
        };
    }
}

方法

BUnitの活用

• BUnitをインストールする
  https://bunit.dev/
• プロジェクトの生成
  GUIから作成できなかったので、コマンドで作成。

dotnet new bunit -o <テストＰＪ名>

AntDesignTestKitの活用

テスト用のベースクラスを提供してくれる。

dotnet add package AntDesign.TestKit --version 0.15.4

テストコードの作成

AntDesignTestKitのAntDesignTestBaseクラスを継承したテストクラスにテストコードを作成する。

CmbDemoTests

using AntDesign;
using AntDesign.Tests;
using EmptyBlazorApp1.Pages.ComboBoxs;

namespace TestProject1;

public class CmbDemoTests : AntDesignTestBase
{
	
	public CmbDemoTests()
	{
		JSInterop.Setup<AntDesign.JsInterop.DomRect>(JSInteropConstants.GetBoundingClientRect, _ => true)
					.SetResult(new AntDesign.JsInterop.DomRect());
	}

	[Fact]
	public void TestCmbDemoB()
	{
		var cut = RenderComponent<CmbDemoB>();
		var options = cut.FindAll(".ant-select-item-option-content");
		Assert.Equal(3, options.Count);
		Assert.Equal("秋田", options[0].TextContent.Trim('\n').Trim());
		Assert.Equal("石巻", options[1].TextContent.Trim());
		Assert.Equal("浦和", options[2].TextContent.Trim());
	}
}

テスト結果が成功になったため、コンボボックスに正しい選択肢が設定されていることが確認できた。

結果

AntDesignを使用したBlazorコンポーネントのテスト方法が分かった。
BUnitにはコンポーネントのパラメータを設定できる方法があったりするため、その他のテストパターンも実施できそうである。
AntDesignの他のコンポーネントのテストコードの例は、TestKitのGitにあるため、参考にするとよさそう。