Testing (Part 2)

 

Mocking The API

We can implement the mock API in two ways. One option is to set up an in-memory database, but to maintain simplicity, we'll opt for the alternative and create posts on demand:

• Under MyBlog.Shared.Tests, right-click on the Dependencies node and select Add Project References.

• Check MyBlog.Shared and click Ok. Now our test project has access to all the classes in our shared project as well as all the classes the shared project is referring to, such as Interfaces in the MyBlog.Data.Shared project.

• Select the MyBlog.Shared.Tests project. Press Shift + F2 to create a new file and name the file MyBlogApiMock.cs.

• Add the following namespaces-

using MyBlog.Data.Interfaces;

using MyBlog.Data.Models;

• Implement the IMyBlogApi interface.

• For BlogPost, add code in the class. When we get a blog post, we simply create one and fill it with predefined information that we can later use in our tests. The same thing goes for getting a list of blog posts.

• The same thing goes for tags, add code. We will not add tests for other methods in the API. We do need to add them to the mock class to fulfill the interface.

Writing Tests

• Right-click and select MyBlog.Shared.Tests, then select Add | New folder. Name the folder Pages.

• Select the Pages folder. Press Shift + F2 to create a new Razor component and name the file IndexTest.cs. Don’t name it the same as the component we are testing; otherwise, it will be hard to make sure we are testing the right one.

• Open IndexTest.cs and add the bUnit namespace-

using Bunit;

using Microsoft.Extensions.DependencyInjection;

using MyBlog.Data.Interfaces;

using Xunit;

• Inherit from TestContext by adding code.

• Now add the test. The test is quite straightforward. We are aware that there are 10 blog posts provided by the mock API. Additionally, we know that each blog post is displayed within an article tag. We locate all article tags and verify that there are 10 of them in total. Given that we are utilizing injection, we must set up the dependency injection, which is something we can accomplish in the constructor.

• We need to add the IndexTest method. This method will run when the class is created and if the components ask for an instance of IMyBlogApi, it will return an instance of our mock API.

• In Visual Studio, bring up Test Explorer by searching for it using Ctrl + Q. We can also find it in View | Test Explorer.

Now we have a test that tests the first post and the tenth post.

Authentication

Using bUnit, we can test authentication and authorization. We can use the AddTestAuthorization method to authorize our tests. This method adds TestAuthorization but is not authorized. The page will then display the text "Not Authorized". To test when the user is authorized, we just set the user as authorized. We can add claims, roles, and much more. The user we utilize for testing has no correlation with the users or roles in the database. The authorization is mocked by bUnit. Authentication and authorization could be tricky to test, but using bUnit, it is really simple.

Testing JavaScript

Testing JavaScript is not supported by bUnit. We can, however, test the interop ourselves. We ensure that the JavaScript module is loaded before executing the showConfirm method. In bUnit, JavaScript testing can be performed in two modes- strict and loose. The default setting is strict, indicating that we must specify each module and method. If we choose loose, all methods will just return the default value. For a Boolean, it would return false.

Conclusion

We have successfully tested our application. We learnt how to mock an API to make reliable tests. We also covered how to test JavaScript interop as well as authentication.