Visual Studio Apache Cordova Apps 單元測試首部曲


這篇文章中您可以閱讀到以下資訊:

要做一個好的 App 就像是偉大的藝術家,演員和運動選手,都是場偉大的演出。人們透過大量的訓練、練習、演練以及實際的回饋檢討,不斷的驗證及持續改善他們的演出。在橫跨整個 App 生命週期裡,我們透過許多層次的嚴格測試,或持續驗證來實現軟體開發上相同的目標。

也許你聽過單元測試,但很可能你並不怎麼清楚明白單元測試實際上是什麼,以及該如何在跨平台的 Apache Cordova 專案上結合單元測試。在 Visual Studio Tools for Apache Cordova 文件內容裡,我們最近新增了一個章節,透過一系列全面性的例子來探討 Cordova apps 的單元測試細節。

在這二篇的文章裡,我會透過一個精簡版本的示範讓大家熟知整個過程。第一篇首先說明單元測試的本質以及一個使用 Visual Studio來進行的基本 Cordova apps 範例,第二篇將稍微深入一點有關測試驅動開發以及單元測試偵錯的主題。

 

單元測試其它形式的測試

 單元測試相較於其它形式測試的獨特點

單元測試

其它形式

直接呼叫或使用App的程式碼測試單位(類別、方法、屬性及方法)

透過使用者界面測試已部署在模擬器或測試設備上的 App

了解到App的程式碼是怎麼寫的(白箱測試)

無法了解到 App 的程式碼是怎麼寫的(黑箱測試)

測試是執行在開發及建置機器的測試執行器(例如一個獨立的JavaScript 執行環境,Node.js)

測試是在模擬器或實體設備上執行的

測試是自我的一部份程式碼 ( 通常是以相同語言撰寫的,例如JavaScript )

測試是腳本(手動撰寫或由錄製器產生)或者只是一組手動測試的步驟

發生於開發週期裡,同步撰寫程式碼甚至是早於開發階段 ( 測試驅動開發TDD )

發生在開發建置成功後

理想情況下是非常快速的,所以可以結合在每一次的建置過程中,有助於程式碼變更時進行回歸測試

是否有時效性 ( 取決於發行管理的過程 )

測試失敗時中止建置或是提交至版本管理

測試失敗是發行管理的流程中止步驟

下圖說明了多數的測試形式(左側)不同於單元測試 (右側),以及說明了單元測試通常獨立於應用程式平台之外。

 

注釋:當你著手於單元測試是完全專注於撰寫或修改程式碼。你不需測試函式庫或其它不是在專案裡正在修改的程式碼,因為這些函式開發者應該已經測試完它們。如果測試欠缺你所需要使用的函式庫,那麼正確的做法應該是在函式庫的原始碼來源進行,而不是在你的專案裡。

 

JavaScript 與 Apache Cordova 的單元測試環境

單元測試環境由三個組成項目:執行階段 (runtime),測試框架 (Test framework) 和測試執行器  (test runner)。以下列表說明了這些項目,並且有一些例子。

項目

說明

JavaScript例子

執行階段(runtime)

在App之外裝載並執行程式碼。它可以一個瀏覽器或是獨立的執行環境,有時被稱做為headless browser

Browsers, or Node.js, PhantomJS, Chrome V8

測試框架(Test framework)

定義如何撰寫具體的”測試”,通常是在同樣的程式語言裡被測試,這樣可以共享相同的執行階段(runtime),但這不是必需的。

Jasmine, QUnit, Mocha along with libraries like Chai and assert.js

測試執行器(test runner)

在所支援的執行階段(runtime)裡執行依測試框(Test framework)架定義的測試,並且產出測試報告。

Chutzpah (uses PhantomJS), Karma (uses a browser)

這些關係如下圖所示:

 

單元測試是在適當的時間點調用測試執行器 (test runner) 和查看報告,它可以透過手動進行或是在自動建置過程中的一部份,測試執行器 (test runner) 可以利用命令模式或是整合於 Visual Studio IDE。

一些測試執行器 (test runner),例如 Chutzpah,有整合 Visual Studio 測試橋接器工具,反應在 Visual Studio 測試總管介面裡。其它測試執行器 (test runner),例如 Karma,沒有測試橋接器但它仍然可以整合到 Visual Studio 的工作執行器總管 (Task Runner Explorer),關連到像是 Grunt 及 gulp 。這二種方式都含蓋在文件裡,針對 Karma 及 gulp,請查閱 Basic unit testing  及 Test Apache Cordova apps with Karma and Jasmine

 

動手做單元測試

為了更好理解單元測試的機制,讓我們現在用一段程式碼,透過 Chutzpah,QUnit (jQuery的 unit test framework),以及 Visual Studio 來進行基本的單元測試過程。

 

unit”

首先,假設你已經安裝了 Visual Studio Tools for Apache Cordova,然後透過"檔案 > 新增 >專案 > 選擇 JavaScript >Apache Cordova Apps > 空白應用程式"。然後在 www/scripts 資料夾建立一個叫做 normalize.js 的 JavaScript 檔案,並且輸入以下的程式碼。 

/** @description Converts JSON data that may contain Name and PersonalIdentifier 
 *    properties to an object with the properties name (string) and id (positive 
 *    integer up to 9999999999.
 * @param {string} jsonIn The JSON data to normalize.
 * @return {object} An object with name (string) and id (integer) properties,
 *    defaulting to "default" and 0, or null if the JSON is null or invalid.
 */
function normalizeData(jsonIn) {
}

 這個簡單的 normalizeData 函式是我們要測試的單元 (unit),現在我們先讓它保持空白。請注意到這個函式是 App 的一個函式,它跟我們所選擇的測試框架 (test framework) 及測試執行器 (test runner) 無關。

 

單元測試

接下來,每個單元測試都是一段驗證單元的程式碼,透過:

  1. 給與特定的輸入值然後呼叫,接著
  2. 確認期望值的輸出

單元測試必須遵循你所使用的測試框架 (test framework)。因為我們正在測試 JavaScript 程式碼,我們有眾多容易使用的 JavaScript  測試框架可以選擇。在這個例子中,我們將要使用 Jasmine ,它內建支援我們待會要使用的 Chutzpah 測試執行器 (test runner),所以我們不需要額外為 Jasmine 安裝其它特別的東西。

針對單元測試,在專案內建立一個資料夾並命名為 Test,然後在這個資料夾內建立一個 normalize_tests.js 的 JavaScript 檔案,並且輸入以下內容:

// First argument to "describe" is the name of this group of tests
describe("normalizeData tests", function () {
    // First argument to "it" is the name of the specific test
    it("accepts golden path data", function () {
        // Use the unit being tested as necessary
        var json = '{"Name": "Maria", "PersonalIdentifier": 2111858}';
        var norm = normalizeData(json);

        // Check the results; "expect" is a Jasmine method.
        expect(norm.name).toEqual("Maria");
        expect(norm.id).toEqual(2111858);
    });
});

在 Jasmine 裡,你建立了一組測試在 describe 方法裡,然後每一個測試在it函式裡,最後形成描繪出這個整個測試。使用單元測試程式碼針對任何你想要的測試,然後使用 Jasmine 的 expect 方法確認結果,最終輸出 pass 或 fail 。

這裡我們只是一個簡單的測試,但請注意它是很明確具體,有特定的輸入呼叫,並且針對輸入給定了確切的名稱/描述。這遵循了最佳原則,每個測試針對一個測試案例,測試的名稱建立成 1:1 的對應,因為這個名稱會呈現在報告上,以及精確的測試案例(意謂:測試使用的參數)。當測試執行器 (test runner) 報告失敗時,你可以確切的知道到哪裡查看你的程式碼,然後很輕易透過在除錯器的測試到達失敗點。這最終會節省你的時間,因為假如你合併多個的測試,當你必須偵錯哪裡失敗時,你很有可能最後會解析所有測試。

 

 測試行器 (test runner)

有了單元程式碼以及至少一個單元測試,現在我們可以執行 Chutzpah 測試執行器 (test runner)。先到 Visual Studio 裡的"工具>擴充功能和更新….",選擇線上,搜尋及安裝"Chutzpah Test Adapter"(你會被提示重新啟動 Visual Studio)

 

在專案根目錄下建立 Chutzpah.json 檔案,然後輸入以下內容,告訴 Chutzpah 它應該執行的檔案。

{
  "References": [
    { "Path": "www/scripts/js/normalize.js" }
  ],

  "Tests": [
      { "Path": "test/normalize_tests.js" }
  ]
}

“References” 區段用來明確指定要測試的程式碼,然後“Tests”區段指定單元測試檔案。當你加入愈多程式碼及測試檔案時,這個列表清單就會愈多。

現在選擇"測試> >測試總管"然後你應該會看到列出可用的測試清單 “References”  區段用來明確指定要測試的程式碼,然後 “Tests” 區段指定單元測試檔案。當你加入愈多程式碼及測試檔案時,這個列表清單就會愈多。

 

注意:如果沒有任何清單,那很有可能是你的測試檔案有語法上的錯誤,而造成 Chutzpah 無法辨示。

點選全部,開始建置專案,執行測試,並查看結果。因為我們在 normalizeData 裡沒有任何實作,所以測試應該會失敗:

這證實了你具有可以在 Visual Studio 裡使用 Chutzpah 的機制。

如果你想要通過測試,實作 normalizeData,至少處理預期的輸入,然後再次執行測試:

function normalizeData(jsonIn) {
    data = JSON.parse(jsonIn);
    return {
        name: data.Name,
        id: Number(data.PersonalIdentifier)
    };
}

當然這個程式碼無法完美的處理其它 JSON,所以肯定是有改善的空間!我們將會在第二篇來談論有關於測試驅動開發 (test-driven development) 以及單元測試除錯。

在此同時,我希望聽聽你是如何在 Cordova apps 進行單元測試,你是如何進行 UI 測試(手動及自動),以及我們可以如何進一步提升我們的支援透過 Visual Studio Tools for Apache Cordova。透過 kraigb (at) microsoft.com留言給我,或是到 http://visualstudio.uservoice.com/. 提出建議。當然這個程式碼無法完美的處理其它 JSON,所以肯定是有改善的空間!我們將會在第二篇來談論有關於測試驅動開發 (test-driven development) 以及單元測試除錯。

本文翻譯自 Unit Testing Apache Cordova Apps with Visual Studio, Part 1

[延伸閱讀 – 影片教學] 

使用 Visual Studio 2015 TACO 建置 Windows 10 應用程式

Visual Studio 2015 tools for Apache Cordova Build apps for Windows 10

Comments (0)

Skip to main content