How do you unit test Toast Service using Blazored Toast OnShow

[anitagov]

The Toast Service OnShow throws a new popup window which is not part of the HTML being rendered.
How do you test this scenario which is primarily to validate the contents of the message (Successful/Failure)?
One idea that we came up with was to add this message to the rendered html page. This needs to be done in the Mock Toast Service routine but not sure how to achieve this.
Thanks for any help and/or pointers.
https://github.com/Blazored/Toast => Blazored Toast Service that is being mocked

• Anita

[egil]

Hi Anita

Can you share an example of the test setup, the component under test, and the test (assertion) you are trying to write?

@chrissainty might also be able to share some insights about the Toast component or have an idea about how to test a component that uses it.

[egil]

So bUnit only includes the generates HTML content of the components below the component under test, so anything outside it won't be in the cut.Markup.

Looked briefly at the Toast library, and it seems you need to do the following:

1. Create a mock or fake of the IToastService. You can use something like NSubstitute to create a mock or just create a simple fake manually.
2. Register your fake/mock with the ctx.Services collection INSTEAD of calling AddBlazoredToast(), e.g. ctx.Services<IToastService>(myFakeToastService).
3. Use the myFakeToastService to verify that the right type of toast was requested.

[chrissainty]

We're working on adding bUnit test helpers right now, just as we did for Blazored LocalStorage and SessionStorage. Once these are in place it should make writing bUnit tests much simpler for apps which use Blazored Toast.

[anitagov]

So bUnit only includes the generates HTML content of the components below the component under test, so anything outside it won't be in the cut.Markup.

Looked briefly at the Toast library, and it seems you need to do the following:

1. Create a mock or fake of the [`IToastService`](https://www.github.com/Blazored/Toast/tree/main/src%2FBlazored.Toast%2FServices%2FIToastService.cs). You can use something like NSubstitute to create a mock or just create a simple fake manually.

2. Register your fake/mock with the `ctx.Services` collection INSTEAD of calling `AddBlazoredToast()`, e.g. `ctx.Services<IToastService>(myFakeToastService)`.

3. Use the `myFakeToastService` to verify that the right type of toast was requested.

Thanks Egil. Yes, I did something similar after my original post but have not been able to get that to work yet. I used Moq to mock IToastService.

[anitagov]

We're working on adding bUnit test helpers right now, just as we did for Blazored LocalStorage and SessionStorage. Once these are in place it should make writing bUnit tests much simpler for apps which use Blazored Toast.

Thanks @chrissainty . This is great news indeed. Do you have a timeline on when these helpers will be available.

[chrissainty]

I'm hoping, in the next couple of weeks.

[anitagov]

@egil I was able to get my code that used Moq to mock IToastService to work. It was a minor bug in my code which I since figured out (had an incorrect type as the second parameter to ShowToast).
@chrissainty Will check out the bunit test helpers whenever they become available for Blazored Toast.
But I have a solution for now.
Thanks for your quick responses and providing great tools, such as bunit and Blazored Toast.

[egil]

Awesome @anitagov, glad you sorted it out.

If you can, please add your solution as an answer to your own question so that others might benefit.

[anitagov]

Here is a relevant portion of my initial quick fix (moving the Mock to a different .cs file as I have various other Mock files)

using Moq;

// Arrange
var toastMoq = new Mock<IToastService>();
toastMoq.Setup(t => t.ShowToast(It.Is<ToastLevel>(t => t == ToastLevel.Success), It.IsAny<RenderFragment>(), It.IsAny<string>())).Verifiable();
using var ctx = new TestContext();
ctx.Services.AddSingleton<IToastService>(toastMoq.Object);

// Act
......
var cut = ctx.RenderComponent<MyPage>();
// Add Resource Group Name and Owner Name to the Form
cut.Find("input[name=resgroupname]").Change("TestResourceGroup");
cut.Find("input[name=ownername]").Change("TestOwner");

Action<List<AzureResourceGroup>> OnValidSubmit = _ => { };
var cut1 = ctx.RenderComponent<MyTool.Pages.Azure>(parameters => parameters
                .Add(p => p.AzureResourceGroupsChanged, OnValidSubmit)
 );
.....

// Assert
cut.Find("form").Submit();
toastMoq.Verify();

[skerr4311]

Thanks for this, just ran into the same issue

[egil]

There is also builtin support for bUnit in Blazored Toasts now, so it's even easier than ever. Jump over to their repo for the details.