Blazor - bUnit 컴포넌트 이벤트 핸들러 테스트

개요

• bUnit 을 이용하여 Blazor 컴포넌트 단위의 단위 테스트 하는 방법에 대해서 정리 진행합니다.
• 그 중에서, 컴포넌트 내의 발생되는 이벤트 핸들러를 테스트 하는 방법에 대해서 알아봅니다.

테스트 컴포넌트 생성

• 우선 테스트를 진행하기 위해서 TestComponent.razor 파일을 생성 후 아래와 같이 코드를 추가합니다.
• HTML 영역에는 단락을 나타내는 p 태그가 있고, p 태그 내용은 Button 컴포넌트의 Click 유무를 True, False 로 체크하여 출력해주는 역할이니다.
• button 태그에는 @onclick 클릭 이벤트가 있고, OnClick 이벤트 핸들러를 호출하도록 하였습니다.
• 아래와 같은 구조에서 Click 이 일어났을 때의 상황을 단위테스트 진행합니다.

<p>Button clicked: @buttonClicked</p>

<button @onclick="OnClick">Click me</button>

@code {
    bool buttonClicked = false;
    void OnClick() => buttonClicked = true;
}

단위 테스트 코드

using Bunit;
using bUnitSample.Pages;

namespace bUnitTest
{
    public class UnitTest1
    {
        [Fact]
        public void TestComponent()
        {
            // Arrange
            using var ctx = new TestContext();
            var cut = ctx.RenderComponent<TestComponent>();
            var paraElm = cut.Find("p");

            // Act
            cut.Find("button").Click();
            var paraElmText = paraElm.TextContent;

            // Assert
            paraElmText.MarkupMatches("Button clicked: True");
        }
    }
}

• 1차적으로 var cut = ctx.RenderComponent<TestComponent>(); 코드를 통해 TestComponent 전체 렌더링 요소들을 가져옵니디ㅏ.
• 다음으로 var paraElm = cut.Find("p"); 코드에서 p 태그 요소만 찾아옵니다.
• Act 영역에서 cut.Find("button").Click(); button 태그를 찾아서 Click 이벤트를 발생시킵니다.
• Click 이벤트가 발생되면, Click 상태가 Fase -> True 로 변경됨에 따라서 우리가 최종적으로 Assert 할 대상의 내용이 paraElmText.MarkupMatches("Button clicked: True"); 와 같게 되는 것입니다.