{"type":"doc","content":[{"type":"paragraph","content":[{"text":"What is bUnit?","type":"text","marks":[{"type":"underline"},{"type":"strong"}]},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"bUnit is a testing library for Blazor components. And its goal is to make it easy to write comprehensive, stable unit tests. ","type":"text"}]},{"type":"paragraph","content":[{"text":"You can:Setup and define components under tests in C# or Razor syntax ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Verify outcome using semantic HTML comparer ","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Interact with and inspect components ","type":"text"}]}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Trigger event handlers ","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Provide cascading values ","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Inject services ","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Mock IJsRuntime ","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Perform snapshot testing ","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"bUnit builds on top of existing unit testing frameworks such as xUnit, NUnit, and MSTest, which runs the Blazor components tests, just as any normal unit test. ","type":"text"}]},{"type":"paragraph","content":[{"text":"Note: ","type":"text"}]},{"type":"paragraph","content":[{"text":"Here are some of the links I think are useful and that I have been using to learn about this topic: ","type":"text"}]},{"type":"paragraph","content":[{"type":"inlineCard","attrs":{"url":"https://github.com/egil/bunit"}},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"https://bunit.egilhansen.com/docs/getting-started/","type":"text","marks":[{"type":"underline"},{"type":"link","attrs":{"href":"https://bunit.egilhansen.com/docs/getting-started/"}}]},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"https://www.telerik.com/blogs/unit-testing-blazor-components-bunit-justmock","type":"text","marks":[{"type":"underline"},{"type":"link","attrs":{"href":"https://www.telerik.com/blogs/unit-testing-blazor-components-bunit-justmock"}}]},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"https://www.telerik.com/blogs/unit-testing-blazor-components-bunit-justmock","type":"text","marks":[{"type":"underline"},{"type":"link","attrs":{"href":"https://www.telerik.com/blogs/unit-testing-blazor-components-bunit-justmock"}}]},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"using the link above I have come up with the following notes:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"First, we will start with how to set up our projects and then continue with simple unit test examples. ","type":"text"}]},{"type":"paragraph","content":[{"text":"Project Setup:","type":"text","marks":[{"type":"underline"},{"type":"strong"}]},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"Let us begin setting up our projects. As with any other technology you will need at least two projects. The first one is the Blazor application and the second one is for the unit tests. ","type":"text"}]},{"type":"paragraph","content":[{"text":"Creating the Blazor App Project","type":"text","marks":[{"type":"underline"},{"type":"strong"}]},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"We can just use the premade visual studio template to create our Blazor project. ","type":"text"}]},{"type":"paragraph","content":[{"text":"Our newly created project has the default pages and data classes. Which we will work on them for our examples. ","type":"text"}]},{"type":"paragraph","content":[{"text":"Creating the Unit Test Project ","type":"text","marks":[{"type":"underline"},{"type":"strong"}]},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"We will then start creating our Unit test project by following the following steps down below: ","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"As a first step create a Razor Class Library targeting .NET Core 3.1. The same version should be for the Blazor application as well. ","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"The Link below shows us how to create a razor class library: ","type":"text"}]},{"type":"paragraph","content":[{"text":"https://www.youtube.com/watch?v=BtXWj-yQF6c","type":"text","marks":[{"type":"underline"},{"type":"link","attrs":{"href":"https://www.youtube.com/watch?v=BtXWj-yQF6c"}}]},{"text":" ","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add the Microsoft.NET.Test.Sdk NuGet package to the project. ","type":"text"}]}]}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add ","type":"text"},{"text":"bUnit","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.nuget.org/packages/bunit/"}}]},{"text":" as a NuGet package to the project. Please notice that this package is still in beta and you will need to check the include prerelease checkbox. When trying to add the package you will notice the following error: ","type":"text"}]}]}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add ","type":"text"},{"text":"xUnit","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.nuget.org/packages/xunit/"}}]},{"text":" as a NuGet package to the project. I am using xUnit as I saw that it is supported by bUnit. ","type":"text"}]}]}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add the ","type":"text"},{"text":"xunit.runner.visualstudio","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.nuget.org/packages/xunit.runner.visualstudio/"}}]},{"text":" NuGet package to the project. We need this package to execute the unit tests in Visual Studio. ","type":"text"}]}]}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add the ","type":"text"},{"text":"JustMock","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.nuget.org/packages/JustMock/"}}]},{"text":" NuGet package ","type":"text"}]}]}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Note: JustMock is","type":"text","marks":[{"type":"strong"}]},{"text":": ","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Telerik ","type":"text"},{"text":"JustMock is","type":"text","marks":[{"type":"strong"}]},{"text":" an easy to use mocking tool designed to help you create better unit tests, faster than ever. ","type":"text"},{"text":"JustMock","type":"text","marks":[{"type":"strong"}]},{"text":" makes it easier for you to create mock objects and set expectations independently of external dependencies like databases, web service calls, or proprietary code. ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"What Is Mocking and Why Do I Need It?","type":"text","marks":[{"type":"underline"},{"type":"strong"}]},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"https://docs.telerik.com/devtools/justmock/introduction.html#:~:text=Telerik%20JustMock%20is%20an%20easy,service%20calls%2C%20or%20proprietary%20code.","type":"text","marks":[{"type":"underline"},{"type":"link","attrs":{"href":"https://docs.telerik.com/devtools/justmock/introduction.html#:~:text=Telerik%20JustMock%20is%20an%20easy,service%20calls%2C%20or%20proprietary%20code"}}]},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"Mocking is a concept in unit testing where real objects are substituted with fake objects that imitate the behavior of the real ones. Mocking is done so that a test can focus on the code being tested and not on the behavior or state of external dependencies. ","type":"text"}]},{"type":"paragraph","content":[{"text":"For example, if you have a data repository class that runs business logic and then saves information to a database, you want your unit test to focus on the business logic and not on the database. Mocking the “save” calls to your database ensures your tests run quickly and do not depend on the availability or state of your database. When you’re ready to make sure the “save” calls are working, then you’re moving on to integration testing. Unit tests should not cross system boundaries, but integration tests are allowed to cross boundaries and make sure everything works together (your code, your database, your web services, etc.). ","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add a reference to the Blazor Demo application. ","type":"text"}]}]}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Build to validate there are no errors. ","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"OK, we have created the test project and we successfully built it. Now we need to prepare our test class. ","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add one class that will be used for the unit tests ","type":"text"}]}]}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add usings to Bunit, Xunit and Telerik.JustMock ","type":"text"}]}]}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Make the class public ","type":"text"}]}]}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Inherit the ","type":"text"},{"text":"ComponentTestFixture","type":"text","marks":[{"type":"strike"}]},{"text":" abstract class ","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Note:","type":"text","marks":[{"type":"underline"},{"type":"strong"}]},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"I got into a bit of problem while trying to inherit from ","type":"text"},{"text":"ComponentTestFixture. ","type":"text","marks":[{"type":"strike"}]},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"Visual studio does not support this piece of code anymore. And it has been replaced by TestContext. So we are going to instead inherit from TestContext and then continue creating our unit test. ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"Now we are ready to start writing our first test. ","type":"text"}]},{"type":"paragraph","content":[{"text":"The Simplest Unit Test","type":"text","marks":[{"type":"underline"},{"type":"strong"}]},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"Running the Blazor Demo application that we have added takes us to a page which has three links for Home, Counter and Fetch Data. We Will start by testing out the functionality of the counter page where clicking a button will increase the counter. ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"------------------------------------------------------------------------------------------------------------ ","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"[Fact] ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"public void TestCounter() ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"{ ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" // Arrange ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" var cut = RenderComponent(); ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" // Act ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" var element = cut.Find(\"button\"); ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" element.Click(); ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" //Assert ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" cut.Find(\"p\").MarkupMatches(\"

Current count: 1

\"); ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" } ","type":"text","marks":[{"type":"code"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"------------------------------------------------------------------------------------------------------------ ","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Note:","type":"text","marks":[{"type":"underline"},{"type":"strong"}]},{"text":" ","type":"text","marks":[{"type":"strong"}]},{"text":"While using the “ ","type":"text"},{"text":"var cut = RenderComponent(); ","type":"text","marks":[{"type":"code"}]},{"text":"“ keep in mind that we will get an error for Counter and it will be underlined with red color. In order to fix it highlight the word Counter and then click on : ","type":"text"}]},{"type":"paragraph","content":[{"text":"“using AutomatedTesting.Paged;”. ","type":"text"}]},{"type":"paragraph","content":[{"text":"Once the code above is written we can test to see if our test passes. ","type":"text"}]},{"type":"paragraph","content":[{"text":"To test click on test in the top navigation bar and select Test explorer. You can get to the same page by pressing ctrl + E ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"After selecting Test Explored the following pop up will show up. Click on the green arrow to test the test case the counter test case. Once the test case passes you should be getting the following message ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"And now we can start writing test cases for the FetchData page. For this particular page we need to write two unit tests. The first should test that the loading text is shown when the forecasts variable is null. And the second one is to test that the data is shown correctly when there is actual data. ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"First Scenario:","type":"text","marks":[{"type":"underline"},{"type":"strong"}]},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"Forecast in Null Scenario:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"The first step for testing this scenario is registering the WeatherForecastService.Services.AddSingleton(); ","type":"text"}]},{"type":"paragraph","content":[{"text":"Note: AddSingleton is: ","type":"text"}]},{"type":"paragraph","content":[{"text":"AddSingleton() - As the name implies, AddSingleton() method creates a Singleton service. A Singleton service is created when it is first requested. This same instance is then used by all the subsequent requests. ... A new instance of a Scoped service is created once per request within the scope. ","type":"text"}]},{"type":"paragraph","content":[{"text":" text is shown. Here is how the unit test looks like: ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"------------------------------------------------------------------------------------------------------------ ","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"[Fact] ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"public void TestFetchData_NullForecast() ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"{ ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" Services.AddSingleton(); ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" var cut = RenderComponent(); ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" // Assert that it renders the initial loading message ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" var initialExpectedHtml = ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" @\"

Weather forecast

","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"

This component demonstrates fetching data from a service.

","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"

Loading...

\"; ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" cut.MarkupMatches(initialExpectedHtml); ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"} ","type":"text","marks":[{"type":"code"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"------------------------------------------------------------------------------------------------------------ ","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Note:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"Once you write the code shown above in your unit test class. We will get errors on “","type":"text"},{"text":"AddSingleton","type":"text","marks":[{"type":"code"}]},{"text":"” and “","type":"text"},{"text":"WeatherForecastService","type":"text","marks":[{"type":"code"}]},{"text":"”. In order to fix this, we just got to add the following two lines of code: ","type":"text"}]},{"type":"paragraph","content":[{"text":"“using Microsoft.Extensions.DependencyInjection;” ","type":"text"}]},{"type":"paragraph","content":[{"text":"“using AutomatedTesting.Data;” ","type":"text"}]},{"type":"paragraph","content":[{"text":"Note:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"There is another way to run the test case for a line of code. We can just click on the “references” line of code shown below [Fact] and click on run. This will automatically run the test cases for us. ","type":"text"}]},{"type":"paragraph","content":[{"text":"If you execute this test now you will notice that it will fail. The reason for this is because the WeatherForecastService generates random values and the forecasts variable in the component will never be null. ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"This is a good candidate for mocking. If you are not familiar with the concept, in mocking, to test the required logic in isolation the external dependencies are replaced by closely controlled replacements objects that simulate the behavior of the real ones. For our scenario, the external dependency is the call to the WeatherForecastService.GetForecastAsync method. To mock this method, we will have to use a mocking framework like Telerik JustMock. ","type":"text"}]},{"type":"paragraph","content":[{"text":"We then need to modify the WeatherForecastService to inherit an interface. We will work with that interface. ","type":"text"}]},{"type":"paragraph","content":[{"text":"Add the following code: ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"------------------------------------------------------------------------------------------------------------ ","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"public interface IWeatherForecastService ","type":"text"}]},{"type":"paragraph","content":[{"text":"{ ","type":"text"}]},{"type":"paragraph","content":[{"text":" Task GetForecastAsync(DateTime startDate); ","type":"text"}]},{"type":"paragraph","content":[{"text":"} ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"------------------------------------------------------------------------------------------------------------ ","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"Do not forget to that the WeatherForecastService should inherit this interface. Your code should look like the snippet shown below. ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"Next, the FetchData page should use it. Here is the chunk of code that should be modified: ","type":"text"}]},{"type":"paragraph","content":[{"text":"Add the following line of code shown below: ","type":"text"}]},{"type":"paragraph","content":[{"text":"@using AutomatedTesting.Data ","type":"text"}]},{"type":"paragraph","content":[{"text":"@inject WeatherForecastService ForecastService ","type":"text"}]},{"type":"paragraph","content":[{"text":"@inject IWeatherForecastService ForecastService ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"****************************************************************** ","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"Need to double check with Walter/Kajal/Yong, not sure if I did this part correctly ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"****************************************************************** ","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Also, for the BlazorDemo App to continue working I need to modify the Startup.ConfigureServices method located in the startup page and add IWeatherForecastService as a singleton service with implementation WeatherForecastService. Like this: ","type":"text"}]},{"type":"paragraph","content":[{"text":"services.AddSingleton(); ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"Now we are ready to create the mock. What we will do is create a mock of type IWeatherForecastService and arrange the GetForecastAsync method for any DateTime argument to return a value that will result in null value for the forecast variable. At the end, the mocked instance should be registered as implementation of our interface. Here is how the whole test looks: ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"------------------------------------------------------------------------------------------------------------ ","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"[Fact] ","type":"text"}]},{"type":"paragraph","content":[{"text":"public void TestFetchData_ForecastIsNull() ","type":"text"}]},{"type":"paragraph","content":[{"text":"{ ","type":"text"}]},{"type":"paragraph","content":[{"text":" // Arrange ","type":"text"}]},{"type":"paragraph","content":[{"text":" var weatherForecastServiceMock = Mock.Create(); ","type":"text"}]},{"type":"paragraph","content":[{"text":" Mock.Arrange(() => weatherForecastServiceMock.GetForecastAsync(Arg.IsAny())) ","type":"text"}]},{"type":"paragraph","content":[{"text":" .Returns(new TaskCompletionSource().Task); ","type":"text"}]},{"type":"paragraph","content":[{"text":" Services.AddSingleton(weatherForecastServiceMock); ","type":"text"}]},{"type":"paragraph","content":[{"text":" // Act ","type":"text"}]},{"type":"paragraph","content":[{"text":" var cut = RenderComponent(); ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":" // Assert - that it renders the initial loading message ","type":"text"}]},{"type":"paragraph","content":[{"text":" var initialExpectedHtml = ","type":"text"}]},{"type":"paragraph","content":[{"text":" @\"

Weather forecast

","type":"text"}]},{"type":"paragraph","content":[{"text":"

This component demonstrates fetching data from a service.

","type":"text"}]},{"type":"paragraph","content":[{"text":"

Loading...

\"; ","type":"text"}]},{"type":"paragraph","content":[{"text":" cut.MarkupMatches(initialExpectedHtml); ","type":"text"}]},{"type":"paragraph","content":[{"text":"} ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"------------------------------------------------------------------------------------------------------------ ","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"We will get an error for “TaskCompletionSource(); ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" Mock.Arrange(() => weatherForecastServiceMock.GetForecastAsync(Arg.IsAny())) ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" .Returns(Task.FromResult(forecasts)); ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" Services.AddSingleton(weatherForecastServiceMock); ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" // Act - render the FetchData component ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" var cut = RenderComponent(); ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" var actualForcastDataTable = cut.FindComponent(); // find the component ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" // Assert ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" var expectedDataTable = RenderComponent((nameof(ForecastDataTable.Forecasts), forecasts)); ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" actualForcastDataTable.MarkupMatches(expectedDataTable.Markup); ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"} ","type":"text","marks":[{"type":"code"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"------------------------------------------------------------------------------------------------------------ ","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Note: Writing the code above will give an error for “ForecastDataTable”. To fix this error we need to do couple of things. ","type":"text"}]},{"type":"paragraph","content":[{"text":"First, we need to right click on Pages ->Add -> razor components ","type":"text"}]},{"type":"paragraph","content":[{"text":"Name it ForecastDataTable.razor ","type":"text"}]},{"type":"paragraph","content":[{"text":"Once we create the page, we then need to write down the following code. ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"------------------------------------------------------------------------------------------------------------ ","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"@using AutomatedTesting.Data ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" Date ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" Temp. (C) ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" Temp. (F) ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" Summary ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" @foreach (var forecast in Forecasts) ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" { ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" @forecast.Date.ToShortDateString() ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" @forecast.TemperatureC ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" @forecast.TemperatureF ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" @forecast.Summary ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" } ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"@code { ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" private WeatherForecast[] _forecasts = Array.Empty(); ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" [Parameter] ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" public WeatherForecast[] Forecasts ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" { ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" get => _forecasts; ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" set => _forecasts = value ?? Array.Empty(); ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" } ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"} ","type":"text","marks":[{"type":"code"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"------------------------------------------------------------------------------------------------------------ ","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Note: We cannot do this final test due to us having to use Telerik until the end of the demo. ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]}],"version":1}

Browser not supported