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..821bbd7e50 --- /dev/null +++ b/docs/en/Community-Articles/2022-01-10-How-to-test-Blazor-components-in-ABP/POST.md @@ -0,0 +1,85 @@ +# 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 the Blazor component. + +## Getting Started + +Use ABP CLI to create a blazor app, then add `BookStore.Blazor.Tests` unit test project to the solution. + +`abp new BookStore -t app -u blazor` + +Add [bUnit](https://github.com/bUnit-dev/bUnit) package and `ProjectReference` and to the test project. + +```xml + + + + +``` + +Create `BookStoreBlazorTestModule` and depends on `AbpAspNetCoreComponentsModule` and `BookStoreEntityFrameworkCoreTestModule`. + +```cs +[DependsOn( + typeof(AbpAspNetCoreComponentsModule), + typeof(BookStoreEntityFrameworkCoreTestModule) +)] +public class BookStoreBlazorTestModule : AbpModule +{ + +} +``` + +Create `BookStoreBlazorTestBase` class and add `CreateTestContext` method. The `CreateTestContext` have key code. + +It use ABP's `ServiceProvider` as an 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