Тестирование компонентов Razor в ASP.NET Core Blazor

Egil Hansen

Тестирование компонентов Razor — важный аспект создания стабильных и поддерживаемых приложений Blazor.

Для тестирования компонента Razor используется тестируемый компонент (CUT):

• Отображено с соотвествующими входными данными для теста.
• В зависимости от типа выполняемого теста возможно взаимодействие или изменение. Например, могут активироваться обработчики событий, такие как обработчик событий onclick для нажатия кнопки.
• Проверка на наличие ожидаемых значений. Тест проходит успешно, когда одно или несколько проверенных значений соответствуют ожидаемым значениям для теста.

Методы тестирования

Два распространенных метода тестирования компонентов Razor — сквозное тестирование (E2E) и модульное тестирование.

• Модульное тестирование: модульные тесты записываются с помощью библиотеки модульного тестирования, которая предоставляет:

  • рендеринг компонента.
  • проверку выходных данных и состояния компонента;
  • активацию обработчиков событий и методов жизненного цикла;
  • Утверждения, проверяющие, что поведение компонента корректное.

  bUnit — это пример библиотеки, позволяющей выполнять модульное тестирование компонентовRazor.

• Тестирование E2E: средство выполнения тестов запускает приложение Blazor, содержащее CUT, и автоматизирует экземпляр браузера. Средство тестирования проверяет CUT и взаимодействует с ним через браузер. Playwright для .NET — это пример платформы тестирования E2E, которую можно использовать с приложениями Blazor.

В модульном тестировании участвует только компонент Razor (Razor/C#). Внешние зависимости, такие как службы и взаимодействие программ JS, должны быть замещены модулями для имитации. При тестировании E2E проверяются компонент Razor и вся его вспомогательная инфраструктура, включая CSS, JS и API модели DOM и браузера.

Область тестирования описывает, насколько обширны тесты. Область тестирования обычно влияет на скорость тестов. Модульные тесты запускаются на подмножестве подсистем приложения и обычно выполняются в течение миллисекунд. Тесты E2E, которые проверяют обширную группу подсистем приложения, могут выполняться несколько секунд.

Модульное тестирование также предоставляет доступ к экземпляру CUT, позволяя просматривать и проверять внутреннее состояние компонента. При тестировании E2E обычно это невозможно.

В зависимости от среды компонента тесты E2E должны проверять, что ожидаемое состояние среды достигнуто до начала проверки. В противном случае результат будет непредсказуемым. В модульном тестировании отрисовка CUT и жизненный цикл теста более интегрированы, что повышает стабильность тестирования.

Тестирование E2E включает в себя запуск нескольких процессов, сетевые и дисковые операции ввода-вывода и другие действия подсистем, которые часто приводят к плохой надежности тестов. Модульные тесты обычно изолированы от подобных проблем.

В следующей таблице приведены различия между этими двумя методами тестирования.

Выбор наиболее подходящего метода тестирования

Рассмотрим сценарий, когда требуется выбрать тип выполняемого тестирования. Некоторые аспекты описаны в следующей таблице.

Тестирование компонентов с помощью bUnit

Для Blazor отсутствует официальная платформа тестирования Майкрософт, но поддерживаемый сообществом проект bUnit предоставляет удобный способ модульного тестирования компонентов Razor.

bUnit работает с платформами тестирования общего назначения, такими как MSTest, NUnit и xUnit. На этих платформах тестирования тесты bUnit выглядят так же, как обычные модульные тесты. Тесты bUnit, интегрированные с платформой тестирования общего назначения, обычно выполняются с помощью:

• обозревателя тестов Visual Studio;
• команда dotnet test CLI в командной строке.
• автоматизированного конвейера тестирования DevOps.

Ниже показана структура теста bUnit для компонента Counter в приложении на основе шаблона проекта Blazor. Компонент Counter отображает счетчик и увеличивает его значение при нажатии пользователем кнопки на странице.

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

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

Следующий тест bUnit проверяет правильность увеличения счетчика CUT при нажатии кнопки.

@code {
    [Fact]
    public void CounterShouldIncrementWhenClicked()
    {
        // Arrange
        using var ctx = new TestContext();
        var cut = ctx.Render(@<Counter />);
        var paraElm = cut.Find("p");

        // Act
        cut.Find("button").Click();

        // Assert
        var paraElmText = paraElm.TextContent;
        paraElm.MarkupMatches("Current count: 1");
    }
}

Тесты также можно записать в файл класса C#:

public class CounterTests
{
    [Fact]
    public void CounterShouldIncrementWhenClicked()
    {
        // Arrange
        using var ctx = new TestContext();
        var cut = ctx.RenderComponent<Counter>();
        var paraElm = cut.Find("p");

        // Act
        cut.Find("button").Click();

        // Assert
        var paraElmText = paraElm.TextContent;
        paraElmText.MarkupMatches("Current count: 1");
    }
}

На каждом шаге теста выполняются следующие действия.

• Упорядочить: компонент Counter визуализируется с помощью TestContext bUnit. Элемент абзаца CUT (<p>) обнаружен и назначен paraElm. В синтаксисе Razor компонент может быть передан как RenderFragment для bUnit.

• Act: элемент кнопки <button> находится и выбирается путем вызова Click, который должен увеличивать счетчик и обновлять содержимое тега абзаца <p>. Текстовое содержимое элемента абзаца извлекается путем вызова TextContent.

• Assert. Для текстового содержимого вызывается метод MarkupMatches, который проверяет его соответствие ожидаемой строке Current count: 1.

Дополнительные ресурсы

• Начало работы с bUnit. Инструкции по bUnit включают руководство по созданию тестового проекта, ссылки на пакеты платформ тестирования, а также инструкции по созданию и выполнению тестов.
• Blazor Тестирование от A до Z - Эгиль Хансен - NDC Лондон 2025 (NDC Лондон)