變更或新增程式碼後,您應執行現有的單元測試,並考慮編寫更多項目。所有測試都是在程式碼的未壓縮版本上執行。
單元測試分為兩組:JS 測試和區塊產生器測試。
JS 測試
JS 測試可確認 Blockly 核心中的內部 JavaScript 函式運作。我們會使用 Mocha 執行單元測試、使用 Sinon 執行虛設常式測試,以及使用 Chai 對程式碼做出斷言。
執行測試
在區塊範例和區塊範例中,npm run test
都會執行單元測試。在區塊中,這麼做也會執行其他測試,例如 Lint 和編譯。你也可以在瀏覽器中開啟 tests/mocha/index.html
,以互動方式執行所有 Mocha 測試。
撰寫測試
我們使用 Mocha TDD 介面執行測試。測試會整理成套件,其中可包含額外的子套件和/或測試。一般來說,Blockly 的每個元件 (例如 toolbox
或 workspace
) 都有自己的測試檔案,其中包含一或多個套件。每個套件都可以有 setup
和 teardown
方法,系統會在該套件中的每個測試前後分別呼叫。
測試輔助程式
我們提供許多 Blockly 專屬的輔助函式,這些函式在編寫測試時可能很實用。您可以在核心和區塊範例中找到這些程式庫。
輔助函式包含 sharedTestSetup
和 sharedTestTeardown
,此為測試前後需要呼叫 (請參閱「需求條件」一節)。
sharedTestSetup
:
- 設定 Sinon 假計時器 (在某些測試中,您需要使用
this.clock.runAll
)。 - 使用 Stubs Blockly.Events.fire 立即觸發 (可設定)。
- 針對透過
defineBlocksWithJsonArray
定義的 blockType 設定自動清理功能。 - 在
this
結構定義上宣告幾個可供存取的屬性:this.clock
(但不應還原,會導致sharedTestTeardown
發生問題)this.eventsFireStub
this.sharedCleanup
(與addMessageToCleanup
和addBlockTypeToCleanup
搭配使用) (注意:如果您使用defineBlocksWithJsonArray
定義區塊,則不必使用addBlockTypeToCleanup
)
這個函式提供一個可選用的 options
參數來設定設定。目前,這只是用來判斷是否要立即啟動 Blockly.Events.fire
以立即觸發 (預設為虛設常式)。
sharedTestTeardown
:
- 處理工作區
this.workspace
(視定義位置而定,詳情請參閱「測試規定」一節)。 - 還原所有虛設常式。
- 清理透過
defineBlocksWithJsonArray
和addBlockTypeToCleanup
新增的所有區塊類型。 - 清理透過
addMessageToCleanup
新增的所有訊息。
測試規定
- 每次測試都必須呼叫
sharedTestSetup.call(this);
做為最外套件設定程序的第一行,並將sharedTestTeardown.call(this);
做為檔案最外包套件的最後一行。 - 如果您需要含一般工具箱的工作區,可以在測試
index.html
上使用其中一個預設工具箱。請參考以下範例。 - 您必須正確處理
this.workspace
。在大部分的測試中,您會在最外層套件中定義this.workspace
,並用於所有後續測試,但在某些情況下,您可以在內部套件中定義或重新定義該套件 (例如其中一個測試需要有選項與原先設定的工作區)。請務必在測試結束時丟棄。- 如果在最外層套件中定義了
this.workspace
,且不再重新定義,則無須採取進一步行動。這會由sharedTestTeardown
自動處置。 - 如果您在內部套件中首次定義
this.workspace
(也就是未在最外套件中定義),必須在該套件的拆解中呼叫workspaceTeardown.call(this, this.workspace)
,以手動方式捨棄此套件。 - 如果您在最外層套件中定義了
this.workpace
,然後在內部測試套件中重新定義,則必須先在重新定義程式庫前呼叫workspaceTeardown.call(this, this.workspace)
,才能拆除頂層套件中定義的原始工作區。您也必須在內部套件的撕頁中再次呼叫workspaceTeardown.call(this, this.workspace)
,以手動方式處理新值。
- 如果在最外層套件中定義了
測試結構
單元測試通常會遵循一組結構,這些結構可以匯總為排列、行為、斷言。
- 排列:為測試中的行為設定世界狀態以及任何必要條件。
- Act:呼叫受測試的程式碼,觸發接受測試的行為。
- 「Assert」:針對傳回值或與模擬物件的互動做出斷言,以便驗證正確性。
在簡單的測試中,可能沒有任何行為可以安排,而且行為和宣告階段可以透過斷言中測試中的程式碼來組合。如果是較複雜的情況,只要持續完成這 3 個階段,測試就能更容易理解。
以下是測試檔案範例 (由實際內容簡化)。
suite('Flyout', function() {
setup(function() {
sharedTestSetup.call(this);
this.toolboxXml = document.getElementById('toolbox-simple');
this.workspace = Blockly.inject('blocklyDiv',
{
toolbox: this.toolboxXml
});
});
teardown(function() {
sharedTestTeardown.call(this);
});
suite('simple flyout', function() {
setup(function() {
this.flyout = this.workspace.getFlyout();
});
test('y is always 0', function() {
// Act and assert stages combined for simple test case
chai.assert.equal(this.flyout.getY(), 0, 'y coordinate in vertical flyout is 0');
});
test('x is right of workspace if flyout at right', function() {
// Arrange
sinon.stub(this.flyout.targetWorkspace, 'getMetrics').returns({
viewWidth: 100,
});
this.flyout.targetWorkspace.toolboxPosition = Blockly.TOOLBOX_AT_RIGHT;
this.flyout.toolboxPosition_ = Blockly.TOOLBOX_AT_RIGHT;
// Act
var x = this.flyout.getX();
// Assert
chai.assert.equal(x, 100, 'x is right of workspace');
});
});
});
本範例的注意事項:
- 一個套件可以包含其他具有額外
setup
和teardown
方法的套件。 - 每個套件和測試都有描述性的名稱。
- 使用 Chai 斷言用於對程式碼的斷言。
- 您可以提供選用的字串引數,以便在測試失敗時顯示。這可以幫助您更輕鬆地對故障的測試進行偵錯。
- 參數的順序為
chai.assert.equal(actualValue, expectedValue, optionalMessage)
。如果替換actual
和expected
,錯誤訊息就不會合理。
- 如果您不想呼叫實際程式碼,可以使用 Sinon 來虛設常式方法。在此範例中,我們不想呼叫實際的指標函式,因為它與此測試無關。我們只需要注意測試方法如何使用結果。Sinon 建立虛設常式
getMetrics
函式可傳回罐頭回應,方便我們在測試宣告中進行檢查。 - 每個套件的
setup
方法只能包含適用於所有測試的一般設定。如果特定行為的測試仰賴特定條件,則應在相關測試中清楚載明。
偵錯測試
- 您可以在瀏覽器中開啟測試,並使用開發人員工具設定中斷點,並調查測試是否意外失敗 (或意外通過!)。
在測試或套件上設定
.only()
或.skip()
,以便僅執行該一組測試,或是略過測試。例如:suite.only('Workspace', function () { suite('updateToolbox', function () { test('test name', function () { // ... }); test.skip('test I don’t care about', function () { // ... }); }); });
請記得在提交程式碼前移除這些項目。
區塊產生器測試
每個區塊都有自己的單元測試。這些測試會驗證是否封鎖產生的程式碼,使其不如預期。
- 在 Firefox 或 Safari 中載入
tests/generators/index.html
。請注意,Chrome 和 Opera 設有安全性限制,導致無法從本機「file://」系統載入測試 (問題 41024 和 47416)。 - 從下拉式選單中選擇要測試的系統相關部分,然後按一下「載入」。區塊應該顯示在工作區中。
- 按一下「JavaScript」。
在 JavaScript 控制台中複製並執行產生的程式碼。如果輸出內容的結尾是「OK」,表示測試已通過。 - 按一下「Python」。
在 Python 解譯器中複製並執行產生的程式碼。如果輸出內容的結尾為「OK」,表示測試已通過。 - 按一下 [PHP]。
在 PHP 解譯器中複製並執行產生的程式碼。如果輸出內容的結尾為「OK」,表示測試已通過。 - 按一下「Lua」。
在 Lua 解譯器中複製並執行產生的程式碼。 如果輸出內容的結尾為「OK」,表示測試已通過。 - 按一下「飛鏢」。
在 Dart 解譯器中複製並執行產生的程式碼。 如果輸出內容的結尾為「OK」,表示測試已通過。
編輯區塊產生器測試
- 在瀏覽器中載入
tests/generators/index.html
。 - 從下拉式選單中選取系統的相關部分,然後按一下「載入」。區塊應該顯示在工作區中。
- 在區塊中進行變更或新增。
- 按一下「XML」。
- 將產生的 XML 複製到
tests/generators/
中的適當檔案。