测试魔术

Blazor WebAssembly 新手入门会碰上的问题也讲得差不多了，最後的最後我们来讲讲如何在 Blazor 中撰写测试吧！

为什麽要写测试对於现在的时空背景来说，已经有太多文章撰写了，如果不了解测试、不知道如何测试，可以先看看各大神的文章，解释的一定比我还要详细，看完觉得测试对你有帮助，再往下阅读吧！

官方并没有提供 Blazor 的测试框架，现在主流都是使用社群专案(bUnit)来提供便利的 Blazor 单元测试所需要的元件，也因为来源於社群，所以微软并不会支援与维护，完全倚赖社群。

而使用 bUnit 前，是需要由测试框架来执行，所以先建立 MSTest、NUnit、xUnit 中的任何一个测试专案，如果你曾经写过 .NET 的单元测试，选择你熟悉的测试框架即可。

然後安装 bunit 套件即可撰写 Blazor 测试，但因为 bunit 还在 beta 状态，如果你是使用 Nuget 来安装需要勾选「包括抢鲜版」，否则是看不到该套件的，撰文当下的版本号为 1.0.0-beta-10。

如果你选择的是 xUnit 你需要安装 bunit.web 与 bunit.xunit 套件。

如果你选择的是 NUnit 与 MSTest 你只需要安装 bunit.web 套件。

这样就可以来撰写测试专案了，这边我准备两个简单的测试范例，以昨天建立的 Component1.razor 来当作测试范本。

1. 测试元件的基本画面：

// Arrange
using var ctx = new TestContext();
var cut = ctx.RenderComponent<Component1>();

// Act
var div = cut.Find("div.my-component");

// Assert
div.MarkupMatches("<div class=\"my-component\">This Blazor component is defined in the <strong>Blazor30daysRCL</strong> package.</div>");

TestContext 是用来创建受测元件的工厂，透过 RenderComponent<TComponent> 来实体化并执行 TComponent 组件的第一次渲染。

这边我使用 Find(string cssSelector) 来取得 div.my-component 元素，型别为 IElement 想要取得基本的元素成员或者执行任何事件都可以，最後透过 MarkupMatches 方法来比较两边的 HTML 是否一致。

2. 测试服务呼叫 JSRuntime：

// Arrange
using var ctx = new TestContext();
var mockJS = ctx.Services.AddMockJSRuntime();
mockJS.SetupVoid("exampleJsFunctions.showPrompt");
var JSRuntime = ctx.Services.GetService<IJSRuntime>();

// Act
ExampleJsInterop.Prompt(JSRuntime, "message");

// Assert
mockJS.VerifyInvoke("exampleJsFunctions.showPrompt");

这边针对 TestContext 注入 MockJSRuntime，并透过 SetupVoid(string identifier) 修改呼叫识别码为 exampleJsFunctions.showPrompt 时其传回结果为空值，并以 VerifyInvoke(string identifier) 来判断此识别码是否被呼叫过，若要测试指定呼叫次数可以带入第二个参数代表呼叫次数，若为不曾呼叫过则建议使用 VerifyNotInvoke(string identifier) 语意更清楚。

以上就是简单的测试撰写介绍，测试也是一个很大的坑，现在网路上的资源也不多，毕竟是 blazor 的测试套件，而且还在 beta 阶段，如果以後有机会再来好好分享。

感谢大家的阅读，我们明天见。

参考资料
测试 ASP.NET Core Blazor 中的元件
bUnit
bUnit Github