DevOps Blazor WebAssembly Solution: Part 1 - Add Unit Test projects and use TestHost
Tags: devops, blazor, webassembly, azuredevops
Published: 2020-04-29 03:37:51

---
title: DevOps Blazor WebAssembly Solution: Part 1 - Add Unit Test projects and use TestHost
published: true
description: DevOps Blazor WebAssembly App
tags: DevOps,Blazor,WebAssembly,AzureDevOps
---

As a C# developer, I love Blazor, but there are several things to consider.

- WebAssembly is still in preview
- No official unit test framework is supported (yet)

However, unit testing is essential to DevOps. Fortunately, Steve Sanderson published [Unit testing Blazor components - a prototype](https://blog.stevensanderson.com/2019/08/29/blazor-unit-testing-prototype/) back in Aug last year, so I use this to write unit test and do DevOps Blazor WebAssembly.

# Blazor WebAssembly project

Follow the instruction [here](https://docs.microsoft.com/en-us/aspnet/core/blazor/get-started?view=aspnetcore-3.1&tabs=visual-studio) to create Blazor WebAssembly project. I believe you can do server side Blazor but I stick with WebAssembly this time :)

1\. Install Microsoft.AspNetCore.Components.WebAssembly.Templates and create new project. Select Blazor App.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ddk4xn877p3ttc7evqcd.jpg)

2\. Select WebAssembly App. I decided to host this in ASP.NET Core.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/96knsf3sxmrz8js33ov2.jpg)

3\. Compile and the run the application to make sure it works fine.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fz6a1xv1opr0brk6gttk.jpg)

# Git clone testing repository

To use the testing library, I need to git clone as it's not published as NuGet.

```shell
git clone https://github.com/SteveSandersonMS/BlazorUnitTestingPrototype
```

Copy Microsoft.AspNetCore.Components.Testing to my project.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wdnp1afg0747aznisygc.jpg)

# Add unit test project

The Testing prototype works with Unit Test project such as xUnit. 

1\. Add C# .NET Core xUnit Test project to the solution. I named it as "DevOpsBlazor.UnitTests".
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/prgvcjd6ridk0rd717da.jpg)

2\. Then add existing project by selecting Microsoft.AspNetCore.Components.Testing.csproj.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t5cxu5tfnd9kzf1rbqlb.jpg)

3\. Finally, Add project references to xUnit project. As the server project has references to client and shared, I just added server and testing project.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yrt2om33dzat8z1ue9n6.jpg)

4\. Optionally, update all NuGet and compile entire solution to make sure there is no errors.

# Add Unit Tests

The out of box application has several Blazor components. Let's start adding first unit test. Index.razor is the default page of the application. It just contains static information, so it should be good starting point.

## Assert HTML Element 

**TestHost** is a class which renders Blazor components like a browser. It provides several methods such as Find, FindAll to find HTML elements or GetMarkup to get generated HTML as string.

1\. Rename existing UnitTest1.cs to IndexPageUnitTests.cs and change existing method name to "ShouldRenderHello".

```csharp
using System;
using Xunit;

namespace DevOpsBlazor.UnitTests
{
    public class IndexPageUnitTests
    {
        [Fact]
        public void ShouldRenderHello()
        {

        }
    }
}
```
2\. Add **TestHost** class property and solve using. The Blazor component will be rendered into this TestHost class and I can use it to assert various things.

```csharp
TestHost host = new TestHost();
```

3\. In ShouldRenderHello method, render the Index page. Now the component instance contains rendered results of Index.

```csharp
var component = host.AddComponent<Client.Pages.Index>();
```
4\. Let's assert **h1** tag message. The Find method takes CSS selector and return first found element.

```csharp
Assert.Equal("Hello, world!", component.Find("h1").InnerText);
```
5\. Compile the solution, then run the test in Test Explorer.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/788yv7v3c0vxqxo5v9w6.jpg)

## Assert Child Component

Index.razor contains SurveyPrompt.razor as child component. Let's see how child components are rendered inside TestHost.

1\. Put breakpoint at the Assert statement and run the test in debug mode.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1qmd8e4mbiezv936jzx8.jpg)

2\. See the result of component.GetMarkup() in Watch window.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wyoywkezdwtdaj4x50bq.jpg)

3\. I see child component is also rendered as pure HTML. Stop the debug and replace current assert.

```csharp
// Assert h1
Assert.Equal("Hello, world!", component.Find("h1").InnerText);
// Assert text in the body
Assert.Contains("Welcome to your new app.", component.GetMarkup());
// Assert if survey component exists
Assert.NotNull(component.Find(".alert.alert-secondary"));
// Assert the link
Assert.Equal(
    "https://go.microsoft.com/fwlink/?linkid=2127212",
    component.Find("a").Attributes["href"].Value);
```

## Work with parameters

Though I already test SurveyPrompt as part of Index, I should test this separately as it takes a parameter.

1\. Add SurveyPromptUnitTests.cs to test project. Then replace the code as following.

```csharp
using Microsoft.AspNetCore.Components.Testing;
using System;
using System.Collections.Generic;
using System.Text;
using Xunit;

namespace DevOpsBlazor.UnitTests
{
    public class SurveyPromptUnitTests
    {
        TestHost host = new TestHost();

        [Fact]
        public void ShouldRenderTitle()
        {

        }
    }
}
```
2\. Render the component by passing Title parameter.

```
var title = "Test";
var parameters = new Dictionary<string, object>() { { "Title", title } };
var component = host.AddComponent<SurveyPrompt>(parameters);
Assert.Equal(title, component.Find("strong").InnerText);
```

3\. Compile solution and run the test.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oen0nkf3adzbba1wuog1.jpg)

# Summary

In this article, I simply added several unit tests to try using TestHost. In the next article, I will add more test which covers more scenarios.

[Go to next article](https://dev.to/kenakamu/devops-blazor-webassembly-solution-part-2-add-more-complex-unit-tests-ij6)

# Additional Information

I used BlazorUnitTestingPrototype this time, but there is another interesting unit test project called [bunit](https://github.com/egil/bunit). I will use this in the future too.