iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 29
1
Modern Web

大內魔術 Blazor - 誰說前端一定要寫JS系列 第 29

測試魔術

Blazor WebAssembly 新手入門會碰上的問題也講得差不多了,最後的最後我們來講講如何在 Blazor 中撰寫測試吧!


為什麼要寫測試對於現在的時空背景來說,已經有太多文章撰寫了,如果不了解測試、不知道如何測試,可以先看看各大神的文章,解釋的一定比我還要詳細,看完覺得測試對你有幫助,再往下閱讀吧!

官方並沒有提供 Blazor 的測試框架,現在主流都是使用社群專案(bUnit)來提供便利的 Blazor 單元測試所需要的元件,也因為來源於社群,所以微軟並不會支援與維護,完全倚賴社群。

而使用 bUnit 前,是需要由測試框架來執行,所以先建立 MSTestNUnitxUnit 中的任何一個測試專案,如果你曾經寫過 .NET 的單元測試,選擇你熟悉的測試框架即可。

然後安裝 bunit 套件即可撰寫 Blazor 測試,但因為 bunit 還在 beta 狀態,如果你是使用 Nuget 來安裝需要勾選「包括搶鮮版」,否則是看不到該套件的,撰文當下的版本號為 1.0.0-beta-10

如果你選擇的是 xUnit 你需要安裝 bunit.webbunit.xunit 套件。

如果你選擇的是 NUnitMSTest 你只需要安裝 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 是否一致。

  1. 測試服務呼叫 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


上一篇
元件類別庫魔術
下一篇
謝幕
系列文
大內魔術 Blazor - 誰說前端一定要寫JS30

尚未有邦友留言

立即登入留言