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

개요

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

테스트 컴포넌트 생성

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

<p>Control key pressed: @controlKeyPressed</p>

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

@code {
    bool controlKeyPressed = false;
    void OnClick(MouseEventArgs e) => controlKeyPressed = e.CtrlKey;
}

단위 테스트 코드

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(ctrlKey: true);
            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(ctrlKey: true); button 태그를 찾아서 Click 이벤트를 발생시킵니다. 또한, Click 메서드 안에 ctrlKey: true 라고 하여 앞서 매개변수 값을 넘겨 주도록 하였습니다.
• Click 이벤트가 발생되면, Click 상태가 Fase -> True 로 변경됨에 따라서 우리가 최종적으로 Assert 할 대상의 내용이 paraElmText.MarkupMatches("Button clicked: True"); 와 같게 되는 것입니다.