How to Configure Syncfusion® Blazor Component in bUnit Testing

29 Nov 202413 minutes to read

This section explains how to configure Syncfusion® Blazor component in bUnit testing.

Configure bUnit with xUnit Test Project

Create xUnit Test Project

  1. Open Visual Studio 2022 and create a new xUnit Test Project.

    xUnit project creation in VS 2022

  2. Specify the project name and click the Next button.

    Specify xUnit project name in Blazor

  3. Select specific Target Framework and click the Create button.

    Select target framework for xUnit project in Blazor

  4. Right-click on the project in the Solution Explorer and select Manage NuGet Package.

    Manage NuGet package on xUnit project

  5. Search bunit and install both NuGet packages in the test project.

    Installing bunit NuGet package in Blazor

Add Existing Blazor App and Configure it on xUnit Project

  1. Right-click on the Solution and select Add -> Existing Project. Browse and add your existing project from the local machine.

    Add existing Blazor project

    NOTE

    Refer to Blazor Web App Getting Started documentation, if you don’t have any existing application.

  2. Now, right-click on the xUnit project and select Add -> Project Reference and select the added project reference.

    Add existing project reference on xUnit project

  3. Add the below Syncfusion® Button sample in ~/Pages/Home.razor or Index.razor file on the Blazor project for testing purpose. You can test your Blazor component from your application instead of the below example component.

     @using Syncfusion.Blazor.Buttons

 <SfButton @onclick="OnButtonClick">My Button</SfButton>

 <span class="alert alert-info">Count: @clickCount</span>

 @code {
     private int clickCount = 0;

     [Parameter]
     public int Step { get; set; } = 1;

     private void OnButtonClick()
     {
         clickCount += Step;
     }
 }

  4. Add the below bUnit test cases in the ~/UnitTest1.cs file on xUnit project.

     using Xunit;
 using Bunit;
 using {Your App namespace}.Pages;
 using Syncfusion.Blazor;
 using Syncfusion.Blazor.Buttons;
 using Microsoft.Extensions.DependencyInjection;

 namespace BlazorXUnitTesting
 {
     public class UnitTest1
     {
         [Fact]
         public void TestIndex()
         {
             using var testContext = new TestContext();

             // Add Syncfusion Blazor service.
             testContext.Services.AddSyncfusionBlazor();
             testContext.Services.AddOptions();

             // Rendering application Home component (~/Pages/Home.razor).
             var indexComponent = testContext.RenderComponent<Home>();
             // Find Syncfusion Button component.
             var sfButton = indexComponent.FindComponent<SfButton>();
             // Find span element.
             var span = indexComponent.Find("span.alert.alert-info");

             // Assert
             // Testing span element markup.
             span.MarkupMatches("<span class=\"alert alert-info\">Count: 0</span>");

             // Click Syncfusion Button component.
             sfButton.Find(".e-btn").Click();

             // Testing span element markup again.
             span.MarkupMatches("<span class=\"alert alert-info\">Count: 1</span>");
         }
     }
 }

    From the above code snippet:

    • Created a new TestContext and added Syncfusion® Blazor Service.
     using var testContext = new TestContext();

 // Add Syncfusion Blazor service.
 testContext.Services.AddSyncfusionBlazor();
 testContext.Services.AddOptions();
    • Rendered the Blazor application’s Home component which we added in the 3rd step.
     // Rendering application Home component (~/Pages/Home.razor).
 var indexComponent = testContext.RenderComponent<Home>();
    • Find Syncfusion® Button component and span element from the rendered Home component.
     // Find Syncfusion Button component.
 var sfButton = indexComponent.FindComponent<SfButton>();
 // Find span element.
 var span = indexComponent.Find("span.alert.alert-info");
    • Test the span element’s markup at initial state.
     // Testing span element markup.
 span.MarkupMatches("<span class=\"alert alert-info\">Count: 0</span>");
    • Find the button element from Syncfusion® Button component and trigger the click action. Test the span element’s markup state after the button click.
     // Click Syncfusion Button component.
 sfButton.Find(".e-btn").Click();
 // Testing span element markup again.
 span.MarkupMatches("<span class=\"alert alert-info\">Count: 1</span>");

  5. Right-click on the xUnit project and select Run Tests. The test cases will run and report the output.

    xUnit test case result in Blazor

Configure bUnit with NUnit Test Project

Create NUnit Test Project

  1. Open Visual Studio 2022 and create a new NUnit 3 Text Project.

    NUnit project creation in VS 2022

  2. Specify the project name and click the Next button.

    Specify NUnit project name in Blazor

  3. Select specific Target Framework and click the Create button.

    Select target framework for NUnit project in Blazor

  4. Right-click on the project in the Solution Explorer and select Manage NuGet Package.

    Manage NuGet package on NUnit project

  5. Search bunit and install both NuGet packages in the test project.

    Installing bunit NuGet package

Add existing Blazor App and configure it on NUnit project

  1. Right-click on the Solution and select Add -> Existing Project. Browse and add your existing project from the local machine.

    Add existing Blazor project

    NOTE

    Refer to Blazor Web App Getting Started documentation, if you don’t have any existing application.

  2. Now, right-click on the NUnit project and select Add -> Project Reference and select the added project reference.

    Add existing project reference on NUnit project

  3. Add the below Syncfusion® Button sample in ~/Pages/Home.razor or Index.razor file on the Blazor project for testing purpose. You can test your Blazor component from your application instead of the below example component.

     @using Syncfusion.Blazor.Buttons

 <SfButton @onclick="OnButtonClick">My Button</SfButton>

 <span class="alert alert-info">Count: @clickCount</span>

 @code {
     private int clickCount = 0;

     [Parameter]
     public int Step { get; set; } = 1;

     private void OnButtonClick()
     {
         clickCount += Step;
     }
 }

  4. Add the below bUnit test cases in the ~/UnitTest1.cs file on NUnit project.

     using Bunit;
 using NUnit.Framework;
 using {Your App namespace}.Pages;
 using Syncfusion.Blazor;
 using Syncfusion.Blazor.Buttons;
 using Microsoft.Extensions.DependencyInjection;

 namespace BlazorNUnitTesting
 {
     public class Tests
     {
         [Test]
         public void TestIndex()
         {
             // Arrange
             using var testContext = new Bunit.TestContext();

             // Add Syncfusion Blazor service.
             testContext.Services.AddSyncfusionBlazor();
             testContext.Services.AddOptions();

             // Rendering application Home component (~/Pages/Home.razor).
             var indexComponent = testContext.RenderComponent<Home>();
             // Find Syncfusion Button component.
             var sfButton = indexComponent.FindComponent<SfButton>();
             // Find span element.
             var span = indexComponent.Find("span.alert.alert-info");

             // Assert
             // Testing span element markup.
             span.MarkupMatches("<span class=\"alert alert-info\">Count: 0</span>");

             // Click Syncfusion Button component.
             sfButton.Find(".e-btn").Click();

             // Testing span element markup again.
             span.MarkupMatches("<span class=\"alert alert-info\">Count: 1</span>");
         }
     }
 }

    From the above code snippet:

    • Created a new TestContext and added Syncfusion® Blazor Service.
     using var testContext = new Bunit.TestContext();

 // Add Syncfusion Blazor service.
 testContext.Services.AddSyncfusionBlazor();
 testContext.Services.AddOptions();
    • Rendered the Blazor application’s Home component which we added in the 3rd step.
     // Rendering application Home component (~/Pages/Home.razor).
 var indexComponent = testContext.RenderComponent<Home>();
    • Find Syncfusion® Button component and span element from the rendered Home component.
     // Find Syncfusion Button component.
 var sfButton = indexComponent.FindComponent<SfButton>();
 // Find span element.
 var span = indexComponent.Find("span.alert.alert-info");
    • Test the span element’s markup at initial state.
     // Testing span element markup.
 span.MarkupMatches("<span class=\"alert alert-info\">Count: 0</span>");
    • Find the button element from Syncfusion® Button component and trigger the click action. Test the span element’s markup state after the button click.
     // Click Syncfusion Button component.
 sfButton.Find(".e-btn").Click();
 // Testing span element markup again.
 span.MarkupMatches("<span class=\"alert alert-info\">Count: 1</span>");

  5. Right-click on the NUnit project and select Run Tests. The test cases will run and report the output.

    NUnit test case result in Blazor

Passing Parameters to the Blazor Component Testing

You can set the Blazor component parameter using SetParametersAndRender method.

[Fact]
public void TestParameter()
{
    using var testContext = new TestContext();

    // Add Syncfusion Blazor service.
    testContext.Services.AddSyncfusionBlazor();
    testContext.Services.AddOptions();

    // Rendering application Home component (~/Pages/Home.razor).
    var indexComponent = testContext.RenderComponent<Home>();
    // Set Index component parameter Step value.
    indexComponent.SetParametersAndRender(parameters => parameters.Add(p => p.Step, 5));

    // Find Syncfusion Button component.
    var sfButton = indexComponent.FindComponent<SfButton>();
    // Find span element.
    var span = indexComponent.Find("span.alert.alert-info");

    // Assert
    // Testing span element markup initial state.
    span.MarkupMatches("<span class=\"alert alert-info\">Count: 0</span>");

    // Click Syncfusion Button component.
    sfButton.Find(".e-btn").Click();

    // Testing span element markup again.
    span.MarkupMatches("<span class=\"alert alert-info\">Count: 5</span>");
}

See Also