How to Configure Syncfusion Blazor Component in bUnit Testing

3 Aug 202114 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 2019 and create a new xUnit Test Project.

    xUnit project creation in VS 2019

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

    Specify xUnit project name

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

    Select target framework for xUnit project

  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

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

    Refer to Blazor Server 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/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 BlazorServerApp.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 and Ignore script isolation.
                 testContext.Services.AddSyncfusionBlazor(options => {
                     options.IgnoreScriptIsolation = true;
                 });
                 testContext.Services.AddOptions();
    
                 // Rendering application Index component (~/Pages/Index.razor).
                 var indexComponent = testContext.RenderComponent<Index>();
                 // 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 and Ignore script isolation.
     testContext.Services.AddSyncfusionBlazor(options => {
         options.IgnoreScriptIsolation = true;
     });
     testContext.Services.AddOptions();
    • Rendered the Blazor application’s Index component which we added in the 3rd step.
     // Rendering application Index component (~/Pages/Index.razor).
     var indexComponent = testContext.RenderComponent<Index>();
    • Find Syncfusion Button component and span element from the rendered Index 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 be run and reports the output.

    xUnit test case result

Configure bUnit with NUnit Test Project

Create NUnit Test Project

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

    NUnit project creation in VS 2019

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

    Specify NUnit project name

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

    Select target framework for NUnit project

  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

    Refer to Blazor Server 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/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 BlazorServerApp.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 and Ignore script Isolation.
                 testContext.Services.AddSyncfusionBlazor(options => {
                     options.IgnoreScriptIsolation = true;
                 });
                 testContext.Services.AddOptions();
    
                 // Rendering application Index component (~/Pages/Index.razor).
                 var indexComponent = testContext.RenderComponent<Index>();
                 // 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 and Ignore script isolation.
     testContext.Services.AddSyncfusionBlazor(options => {
         options.IgnoreScriptIsolation = true;
     });
     testContext.Services.AddOptions();
    • Rendered the Blazor application’s Index component which we added in the 3rd step.
     // Rendering application Index component (~/Pages/Index.razor).
     var indexComponent = testContext.RenderComponent<Index>();
    • Find Syncfusion Button component and span element from the rendered Index 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 be run and reports the output.

    NUnit test case result

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 and Ignore script isolation.
    testContext.Services.AddSyncfusionBlazor(options => {
        options.IgnoreScriptIsolation = true;
    });
    testContext.Services.AddOptions();

    // Rendering application Index component (~/Pages/Index.razor).
    var indexComponent = testContext.RenderComponent<Index>();
    // 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