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

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

• 單元測試與其他形式的測試
• JavaScript 與 Apache Cordova 的單元測試環境
• 動手做單元測試
• “unit”
• 單元測試
• 測試執行器 (test runner)

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

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

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

單元測試與其它形式的測試

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

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

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

JavaScript 與 Apache Cordova 的單元測試環境

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

這些關係如下圖所示：

單元測試是在適當的時間點調用測試執行器 (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留言給我，或是到 https://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