Blazor - bUnit 컴포넌트 서비스 주입 테스트

참고

• https://bunit.dev/docs/providing-input/inject-services-into-components.html

개요

• bUnit 을 이용하여 Blazor 컴포넌트 단위의 단위 테스트 하는 방법에 대해서 정리 진행합니다.
• 그 중에서, 컴포넌트 내에서 서비스를 주입받아서 데이터를 처리하는 경우가 있습니다.
• 해당 상황을 가정하여 bUnit 테스트 코드 작성하는 방법에 대해서 알려드립니다.

IDataService 인터페이스 구현

• 테스트를 위해, IDataService 인터페이스 하나를 생성하였습니다.

namespace bUnitSample;

public interface IDataService
{
    List<string> GetData();
}

DataService 구현체 구현

• 구현체에서는 IDataService 를 상속받아, GetData() 메서드를 구현하였습니다.

namespace bUnitSample;

public class DataService : IDataService
{
    public List<string> GetData() => new List<string> { "Data 1", "Data2" };
}

테스트 컴포넌트 작성

• IDataService 를 주입받아서 해당 데이터를 사용하는 테스트 컴포넌트를 하나 생성합니다.
• TestComponent.razor 이름의 컴포넌트를 생성하였고, 아래와 같이 코드를 작성하였습니다.

@inject IDataService DataService;

@if (MyData is null)
{
    <p>Retrieving data...</p>
}
else
{
    <p>Data retrieved</p>
}

@code {
    public List<string> MyData { get; set; }
    protected override void OnInitialized()
    {
        MyData = DataService.GetData();
    }
}

테스트 프로젝트 Microsoft.Extensions.DependencyInjection NuGet 추가

• 단위 테스트 코드를 작성하기에 앞서, xUnit 프로젝트에서 DependencyInjection 서비스 주입 관련 테스트를 하기 위해서는 Microsoft.Extensions.DependencyInjection NuGet Package 를 먼저 설치 해야 합니다.

테스트 방법 1 - Injecting Services

• bUnit 에서 서비스 주입하여 테스트 하는 방법에는 크게 2가지 방법이 있습니다.
  • Injeciton Services
  • Fallback Service Provider
• 위 2가지 방법이 있고, 먼저 Injection Services 방법의 단위 테스트 코드입니다.

using Bunit;
using bUnitSample;
using bUnitSample.Pages;
using Microsoft.Extensions.DependencyInjection;

namespace bUnitTest
{
    public class UnitTest1
    {
        [Fact]
        public void TestComponent()
        {
            // Arrange
            using var ctx = new TestContext();

            // Dependency Inject register
            ctx.Services.AddSingleton<IDataService>(new DataService());

            var cut = ctx.RenderComponent<TestComponent>();
            var paraElm = cut.Find("p");

            // Act
            var paraElmText = paraElm.TextContent;

            // Assert
            Assert.NotNull(cut.Instance.MyData);
            paraElmText.MarkupMatches("Data retrieved");

        }
    }
}

• ctx.Services.AddSingleton<IDataService>(new DataService()); 코드와 같이 직접 서비스를 주입하여 단위테스트를 진행하는 방법입니다.
• 위와 같이 작성 후, 컴포넌트 테스트 진행하게 되면 테스트 정상 실행됩니다.
• 만약, 서비스가 주입되어 있는 컴포넌트를 테스트 하는데 DI 를 해주지 않으면 단위테스트 중간에 등록되지 않은 서비스가 있다고 에러가 발생하게 됩니다.

테스트 방법 2 - Fallback Service Provider

• bUnit 에서 서비스 주입 테스트 2번째 방법은 Fallback Service Provider 를 이용하는 것입니다.
• Fallback Service Provider 는 기본 제공 테스트 서비스 공급자에 등록할 수 있습니다.
• Fallback Service Provider 사용 예제 코드는 아래와 같습니다.

using Bunit;
using bUnitSample;
using bUnitSample.Pages;

namespace bUnitTest
{
    public class UnitTest1
    {
        [Fact]
        public void TestComponent()
        {
            // Arrange
            using var ctx = new TestContext();

            // Dependency Inject register
            ctx.Services.AddFallbackServiceProvider(new FallbackServiceProvider());
            var dataService = ctx.Services.GetService<DataService>();

            var cut = ctx.RenderComponent<TestComponent>();
            var paraElm = cut.Find("p");

            // Act
            var paraElmText = paraElm.TextContent;

            // Assert
            Assert.NotNull(dataService);
            Assert.NotNull(cut.Instance.MyData);
            paraElmText.MarkupMatches("Data retrieved");

        }
    }

    public class FallbackServiceProvider : IServiceProvider
    {
        public object GetService(Type serviceType)
        {
            return new DataService();
        }
    }
}