From d4643df7cb327ed431bbdd62cc45434bb051d0af Mon Sep 17 00:00:00 2001 From: maliming Date: Mon, 10 Jan 2022 12:01:47 +0800 Subject: [PATCH 1/3] How to test Blazor components in ABP. --- .../POST.md | 85 +++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 docs/en/Community-Articles/2022-01-10-How-to-test-Blazor-components-in-ABP/POST.md 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 From 6e793fe34b54bbc0e716802632c6be485bb50568 Mon Sep 17 00:00:00 2001 From: maliming Date: Tue, 11 Jan 2022 09:29:42 +0800 Subject: [PATCH 2/3] Update POST.md --- .../POST.md | 38 ++++++++++++++++--- 1 file changed, 32 insertions(+), 6 deletions(-) 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 index 821bbd7e50..4920c626d8 100644 --- 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 @@ -9,17 +9,43 @@ In this article I will use [bUnit](https://github.com/bUnit-dev/bUnit) for a sim ## Getting Started -Use ABP CLI to create a blazor app, then add `BookStore.Blazor.Tests` unit test project to the solution. +Use ABP CLI to create a blazor app `abp new BookStore -t app -u blazor` -Add [bUnit](https://github.com/bUnit-dev/bUnit) package and `ProjectReference` and to the test project. +Then add `BookStore.Blazor.Tests` xunit test project to the solution, and add [bUnit](https://github.com/bUnit-dev/bUnit) package and `ProjectReference` and 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` and depends on `AbpAspNetCoreComponentsModule` and `BookStoreEntityFrameworkCoreTestModule`. From 560f69224b56461195149334c0456f24da23b7d0 Mon Sep 17 00:00:00 2001 From: Hamza Albreem <94292623+braim23@users.noreply.github.com> Date: Tue, 11 Jan 2022 11:20:45 +0300 Subject: [PATCH 3/3] Update POST.md Simple changes and especially articles like "the", "a", and "an". --- .../POST.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) 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 index 4920c626d8..df4265a4a0 100644 --- 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 @@ -1,19 +1,19 @@ -# How to test Blazor components in ABP +# 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. +In this article, I will use [bUnit](https://github.com/bUnit-dev/bUnit) for a simple test of a Blazor component. ## Getting Started -Use ABP CLI to create a blazor app +Use the ABP CLI to create a blazor app `abp new BookStore -t app -u blazor` -Then add `BookStore.Blazor.Tests` xunit test project to the solution, and add [bUnit](https://github.com/bUnit-dev/bUnit) package and `ProjectReference` and to the test project. +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 @@ -48,7 +48,7 @@ The contents of `BookStore.Blazor.Tests.csproj` ``` -Create `BookStoreBlazorTestModule` and depends on `AbpAspNetCoreComponentsModule` and `BookStoreEntityFrameworkCoreTestModule`. +Create `BookStoreBlazorTestModule` that depends on `AbpAspNetCoreComponentsModule` and `BookStoreEntityFrameworkCoreTestModule`. ```cs [DependsOn( @@ -61,9 +61,9 @@ public class BookStoreBlazorTestModule : AbpModule } ``` -Create `BookStoreBlazorTestBase` class and add `CreateTestContext` method. The `CreateTestContext` have key code. +Create a `BookStoreBlazorTestBase` class and add the `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`. +It uses ABP's `ServiceProvider` as a fallback `ServiceProvider` and add all ABP's services to the `TestContext`. ```cs public abstract class BookStoreBlazorTestBase : BookStoreTestBase @@ -82,7 +82,7 @@ public abstract class BookStoreBlazorTestBase : BookStoreTestBase