diff --git a/docs/en/Community-Articles/2022-01-10-How-to-test-Blazor-components-in-ABP/POST.md b/docs/en/Community-Articles/2022-01-10-How-to-test-Blazor-components-in-ABP/POST.md new file mode 100644 index 0000000000..df4265a4a0 --- /dev/null +++ b/docs/en/Community-Articles/2022-01-10-How-to-test-Blazor-components-in-ABP/POST.md @@ -0,0 +1,111 @@ +# How to Test Blazor Components in ABP + +## Source Code + +You can find the source of the example solution used in this article [here](https://github.com/abpframework/abp-samples/tree/master/BlazorPageUniTest). + + +In this article, I will use [bUnit](https://github.com/bUnit-dev/bUnit) for a simple test of a Blazor component. + +## Getting Started + +Use the ABP CLI to create a blazor app + +`abp new BookStore -t app -u blazor` + +Then add the `BookStore.Blazor.Tests` xunit test project to the solution, and add [bUnit](https://github.com/bUnit-dev/bUnit) package and `ProjectReference` to the test project. + +The contents of `BookStore.Blazor.Tests.csproj` +```xml + + + + net6.0 + enable + false + + + + + + + + + runtime; build; native; contentfiles; analyzers; buildtransitive + all + + + runtime; build; native; contentfiles; analyzers; buildtransitive + all + + + + + + + + + +``` + +Create `BookStoreBlazorTestModule` that depends on `AbpAspNetCoreComponentsModule` and `BookStoreEntityFrameworkCoreTestModule`. + +```cs +[DependsOn( + typeof(AbpAspNetCoreComponentsModule), + typeof(BookStoreEntityFrameworkCoreTestModule) +)] +public class BookStoreBlazorTestModule : AbpModule +{ + +} +``` + +Create a `BookStoreBlazorTestBase` class and add the `CreateTestContext` method. The `CreateTestContext` have key code. + +It uses ABP's `ServiceProvider` as a fallback `ServiceProvider` and add all ABP's services to the `TestContext`. + +```cs +public abstract class BookStoreBlazorTestBase : BookStoreTestBase +{ + protected virtual TestContext CreateTestContext() + { + var testContext = new TestContext(); + testContext.Services.AddFallbackServiceProvider(ServiceProvider); + foreach (var service in ServiceProvider.GetRequiredService().Services) + { + testContext.Services.Add(service); + } + testContext.Services.AddBlazorise().AddBootstrap5Providers().AddFontAwesomeIcons(); + return testContext; + } +} +``` + +Finally, we add an `Index_Tests` class to test the `Index` component. + +```cs +public class Index_Tests : BookStoreBlazorTestBase +{ + [Fact] + public void Index_Test() + { + using (var ctx = CreateTestContext()) + { + // Act + var cut = ctx.RenderComponent(); + + // Assert + cut.Find(".lead").InnerHtml.Contains("Welcome to the application. This is a startup project based on the ABP framework. For more information, visit abp.io.").ShouldBeTrue(); + + cut.Find("#username").InnerHtml.Contains("Welcome admin").ShouldBeTrue(); + } + } +} +``` + +## Reference document + +https://github.com/bUnit-dev/bUnit + +https://docs.microsoft.com/en-us/aspnet/core/blazor/test