發行項
06/04/2015

本文章是由機器翻譯。

現代化應用程式

端到端測試在現代 Web 網站和應用程式

Rachel Appel 軟體是比以往任何時候都更加複雜。無論是為 Windows、 iOS、 Web、安卓、物聯網 (物聯網) 設備或 smartwatch 應用程式 — — 軟體做了很多。因此，該軟體必須是準確的。它必須按照規格工作。所以它是開發人員能夠測試他們的軟體。

如果沒有測試，它很難驗證代碼是否按它的應該。它也是難隔離代碼以修復 bug。雖然它很重要要測試，它也是重要測試合適的理由，不只是為測試或吹噓的緣故權利約 100%覆蓋。小小的智慧考驗總是戰勝無意義的測試覆蓋整個代碼庫。本文將介紹如何向單元測試伺服器和用戶端代碼，以及如何自動 UI 測試與編碼的 UI 測試（CUITs）。這三個基本領域的測試將測試您的軟體功能的主要方面。

單位由單位

單元測試可説明減少錯誤，並提供他們正在測試的代碼檔。回歸、使用者驗收、 UI 自動化和其他品質保證措施也是重要的。通常的預算很緊和團隊很小，很多時候你不得不選擇了另一個。這得由你來決定多少品質保證進入您的應用程式。在最起碼，單元測試和 UI 測試將有助於保持高品質。

那裡有很多的開源和商業單元測試套裝軟體可用。很多流行的測試套件發佈 NuGet 套裝程式，所以您可以輕鬆地下載他們直接進入Visual Studio。最受歡迎的 C# 測試框架中的一些 xUnit，nUnit，MSTest 和 TestDriven.NET。對於 JavaScript 測試，有量子系統，JSUnit 和 YUI 測試。

單元測試通常是預設類型的測試，而其他的方式來測試您的軟體。那些包括 UI 自動化或 CUITs、使用者接受度測試、迴歸測試、集成測試和所有類型的專業測試。維琪百科列出幾十個軟體測試的方法 bit.ly/14066q8。

良好的單元測試只測試每個測試的一個函數。單一責任原則（SRP）是確保您的代碼是模組化的途徑之一。SRP 意味著代碼集中在一件事和那件事做得好，無論是執行代碼還是測試本身。單元測試不應該直接存取資料庫、檔或其他資源。他們應該依靠類比這些資源的模仿物件，只是與任何其他代碼，單元測試應該是小的。

另一種方式來編寫好的測試是通過遵循測試驅動開發 (TDD) 原則。TDD 是一種開發代碼周圍一套測試方法。開發人員創建失敗，然後寫入適當的代碼，以符合對測試、重構的測試。我叫它"紅色，綠色，重構"。這項技術可説明您結構和一貫地編寫代碼。一致性是在軟體發展中的一種美德。雖然 TDD 是超出了這篇文章的範圍，看看它，嘗試與您的團隊。

這篇文章將涵蓋單元測試 xUnit 與量子系統。我也會看看 UI 自動化測試與 CUITs。這種方式你可以熟悉了你需要的測試最重要的類型。

用 xUnit 測試伺服器端 C#

你會高興地發現它是多麼容易將一個單元測試包集成到Visual Studio。很多框架都可用作 NuGet 套裝程式。例如，如果您想要使用 xUnit，只是推出 NuGet封裝管理員，搜索"xUnit，"然後按一下安裝核心套裝軟體和其轉輪測試包。你可以使用 xUnit 測試ASP.NETWeb 網站，Windows 表單、Windows Presentation Foundation(WPF)、 Windows 應用商店和 Windows Phone 的應用程式，再加上任何一種語言，將編譯為 Microsoft 中間語言或 MSIL。你能甚至單位測試 F # 使用 xUnit — — 這就是所有微軟技術的開發。

若要使用 xUnit，請將一個類庫專案添加到解決方案中。為簡單起見，您可能想要堅持共同的命名約定和使用類似于 ProjectName.Tests，在"專案名稱"是您要測試的專案的名稱。在測試中，請確保您添加到該專案的引用。然後將其命名並將類檔添加到測試和一個類，用於測試的東西。

圖 1 與一項測試，以及在它測試的代碼顯示一個 xUnit 測試類的示例。中的代碼圖 1 確定基於他們花了多少客戶狀態。在測試圖 1 確保代碼是正確的。

圖 1 測試 xUnit 代碼示例

// Unit tests that test customer-related features
public class CustomerTests
{
  [Theory]
  [InlineData(99D)]
  [InlineData(1001D)]
  [InlineData(5001D)]
  [InlineData(10001D)]
  public void VerifyCustomerStatus(double TotalSpent) {
    // Arrange           
    var status = new Status();
    var testStatus=OrderForm.Models.Status.StatusLevel.None;
    // Act
    var currentStatus = status.GetCurrentStatus(TotalSpent);
    // Assert           
    Assert.True(testStatus <= currentStatus);
  }
}
// Logic that sets the customer status
public class Status
{
  public StatusLevel GetCurrentStatus(decimal ForAmount)
  {
    var level = StatusLevel.None;
    var amt = Convert.ToInt32(ForAmount);
    if (amt > 1000 && amt <= 5000) { level = StatusLevel.Silver; }
    else if (amt > 5000 && amt <= 10000) { level = StatusLevel.Gold; }
    else if (amt > 10000) { level = StatusLevel.Platinum; }
    return level;
  }
  public enum StatusLevel
  {
    None = 0,
    Silver = 1,
    Gold = 2,
    Platinum = 3
  }          
}

在單元測試方法中，會發現最受歡迎的排列、行事，斷言（或 AAA）模式，還表現在圖 1。首先安排的測試條件，然後採取行動的條件了，最後，斷言輸出。

你可以使用 aaa 級的東西，但如果你想要高品質的軟體，您必須具有有意義的試驗。測試框架往往會來一個艦隊的斷言，例如平等、平等，同樣，NotSame，包含、 DoesNotContain、 InRange、 IsNotEmpty 和其他幾個人。當然，確切的命名或方法不會是相同的但每個框架給了你幾個可供選擇。

你可能已經注意到 [理論] 和 [InlineData] 屬性裝飾測試類，而不是受歡迎的 [測試] 屬性。當試驗方法不具有任何參數時，在 xUnit 您可以使用 [事實] 屬性來標記該方法作為一種測試方法。這些資料注釋讓你接受你看到在測試方法簽名中的 TotalSpent 參數的測試圖 1。一個測試將運行每個 [InlineData] 屬性的方法，並在Visual Studio文本瀏覽器中，顯示每個測試的結果，如中所示圖 2。

圖 2 VerifyCustomerStatus 測試方法與測試資源管理器中的四個資料點

你可以使用內容功能表測試中測試資源管理器在任何時間以顯示要運行、調試、分析和設定檔的選項。每當您更改代碼或測試，您必須編譯並運行測試。您可以設置在每次生成上自動運行測試，去Visual Studio測試功能表上的選項選擇測試設定，然後選擇運行後生成的測試。

你不會得到遠與單元測試之前，你撞了 mock 物件的需要。一般來說，當你嘗試測試資料庫，你不想修改實際的即時資料。因此，您可以使用嘲笑作為一種方式來類比實際的資料庫、 Web 服務或業務物件。嘲諷是超出了這篇文章的範圍，所以當你到達那個點，搜索網站，尋找最小起訂量、 Telerik JustMock 或犀牛般的嘲弄。所有都是最受歡迎的嘲笑與完整文檔和支援軟體標題。

測試用戶端 JavaScript 與量子系統

量子系統是一個用戶端 JavaScript 的測試框架。它是羽量級、簡單和容易使用。量子系統用於測試任何 JavaScript 或 jQuery。因為你在處理用戶端 JavaScript，可能發生的事情你不需要測試的 UI 中活動。你可以跳到審美的 UI 的連結懸停或調整等方面。您還可以使用 UI 自動化測試，以涵蓋 UI 測試。您的商務規則、 API 代碼和伺服器端驗證都必須有良好的覆蓋。執行邏輯和驗證任何 JavaScript 需要測試，以及。

與直接結合Visual Studio的已編譯的語言測試，不同的是，你得打造您的量子系統測試控管。它是相當容易的不過，和需要大約 17 行代碼，您可以從複製圖 3。

圖 3 量子系統 HTML 測試控管

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Qunit Unit Testing</title>
  <link href="Content/qunit.css" rel="stylesheet" />
</head>
<body>
  <h1 id="qunit-header">QUnit Test Suite</h1>
  <h2 id="qunit-banner"></h2>
  <div id="qunit-testrunner-toolbar"></div>
  <h2 id="qunit-userAgent"></h2>
  <ol id="qunit-tests"></ol>
  <script src="Scripts/qunit.js"></script>      
  <script src="Scripts/logic.js"></script>
  <script src="Scripts/tests.js"></script>   
</body>
</html>

圖 3 顯示 qunit.css，然後 qunit.js、 logic.js 和 tests.js 的引用。順序非常重要。之前你的邏輯和你的邏輯，在試驗前，必須先載入 qunit.js。您可以命名 logic.js 任何你想要的因為它是您自己的代碼。可能有多個.js 檔 qunit.js 和測試之間。測試線束頁的 HTML 結構包含幾個標題的標籤，以及有序的清單，其中顯示單獨的測試結果。這些所有的樣式都是在 qunit.css 檔中。作為最佳實踐，把 JavaScript 引用之前關閉該 Web 頁的末尾僅 < / 體 > 標記，如中所示圖 3。

若要測試與量子系統，可以將測試放在一個.js 檔，並命名為 tests.js。在這裡，是函數的對量子系統的測試功能，接受要調用的字串名稱和一個匿名函數，實際執行的測試的調用。傳遞到測試函數的名稱顯示在測試回合中測試的名稱作為示圖 4。而不是傳遞參數來測試，使用 JavaScript 的動態性質來調用的代碼問題多次使用多個斷言。圖 5 顯示了在 VerifyCustomerStatus 中的多個輸出斷言測試測試功能。

圖 4 的量子系統測試，getCurrentStatus 函數及邏輯本身在 JavaScript 中

// Tests to test customer statuses
test('VerifyCustomerStatus', function () {
  var silver = getCurrentStatus(1001);
  equals(silver, "Silver", "Pass");
  var gold = getCurrentStatus(5001);
  equals(gold, "Gold", "Pass");
  var platinum = getCurrentStatus(10001);
  equals(platinum, "Platinum", "Pass");
})
// Logic to set customer statuses
function getCurrentStatus(amt) {
  if (amt > 1000 && amt <= 5000) { return "Silver"; }
  else if (amt > 5000 && amt <= 10000) { return "Gold"; }
  else if (amt > 10000) { return "Platinum"; }
  return "None";
}

圖 5 的瀏覽器中的量子系統測試的結果

如果您正在編寫 Windows 應用商店或 Windows Phone 應用程式在使用 Windows 庫對 JavaScript （WinJS），不要害怕。還有你可以在下載的 qUnitMetro bit.ly/1F2RsO7。該套裝程式允許在應用程式存儲容器中運行，就像它在 Web 頁中的量子系統。編碼和您編寫測試的方法是完全相同的量子系統，因為它的確是量子系統。

測試與 CUITs UI

當你需要自動化測試本機教科文組織統計研究所時，轉到 CUITs。CUITs 似乎鮮為人知Visual Studio中的測試功能。為 Web、 Windows 應用商店和 Windows Phone 的應用程式，您可以創建在Visual Studio中的 CUITs。Visual StudioCUITs 可以測試 Windows 上的任何使用者介面。你甚至不需要原始程式碼進行測試的 UI。您可以配置測試，以任何正在運行的程式的目標。

有Visual Studio範本對於您基本程式的使用者介面 — — Web、 Windows 應用商店和 Windows Phone。當你從這些範本之一創建一個專案時，Visual Studio將推出你直接進入第一次的交談視窗，所示圖 6，詢問您是否要記錄新的測試或編輯現有的。選擇"記錄的操作，編輯 UI 映射或添加斷言，"，將出現一個工具視窗（請參閱圖 7)。這相同的對話方塊和工具視窗將出現每次向專案中添加一個新的電路檔（檔 |新的專案)。在這一點上，您可以按一下記錄，然後再開始與您的 Web 頁或應用程式使用者介面進行交互。

圖 6 對話方塊Visual Studio顯示記錄或編輯編碼的 UI 測試

圖 7 的工具，記錄並編輯斷言

當你完成後時，按一下視窗的底部添加和製作按鈕（請參閱圖 8），添加詳細的描述性中繼資料，並讓Visual Studio生成的代碼。

圖 8 對話方塊，創建編碼的 UI 測試

當你創建一個編碼的 UI 專案，並將編碼的 UI 測試添加到它，Visual Studio生成相當數量的代碼。然而，Visual Studio是瞭解它是如何生成的測試代碼相當聰明的。輸出是乾淨的尤其是對生成的代碼。Visual Studio生成的代碼通過使用某個特定的程式時記錄你的行動。如果您按一下工具箱中的記錄圖 7，這台答錄機跟蹤你做什麼來生成代碼，執行相同的操作。你可以自由地寫這段代碼，但很容易產生。

一旦你完成編碼的 UI 測試產生器，Visual Studio創建幾個檔，第一個是編碼 UI 測試。這是一個.cs 檔，包含一類具有執行相同的步驟，使用者要使用的使用者介面的方法。其他檔是映射檔：UIMap.uitest、 UIMap.cs 和 UIMap.designer.cs。與生成太多代碼而聞名的傳統Visual Studio設計器，不同的是這一表現得更好。它很容易修改測試沒有設計師擋你的路。在任何時候，您可以通過按右鍵.uitest 檔，並從選項中選擇編輯編碼的 UI 測試產生器與修改設計器。這將啟動工具箱中，你看到在圖 7。再次，你也可以手動編寫您自己的測試。在決定之前，看看一些執行這四個測試所生成的代碼：

它測試正確地創建一個新的客戶
它測試而無需輸入一個名稱創建一個新的客戶
它測試而無需輸入位址創建一個新的客戶
它測試創建一個新的客戶通過輸入郵遞區號無效格式

您可以在設計器檔中，找到四個測試和編碼的 UI 測試類中的代碼調用它們中繼承，正如你可以看到在圖 9。

圖 9 的編碼的 UI 測試和地圖的設計器檔的部分內容

// In the Coded UI Test C# file
[CodedUITest]
  public class CodedUITest1
  {
    [TestMethod]
    public void CodedUITestMethod1()
    {
      this.UIMap.CreateNewCustomerCorrectly();
      this.UIMap.CreateNewCustomerWithoutName();
      this.UIMap.CreateNewCustomerWithoutAddress();
      this.UIMap.CreateNewCustomerWihtoutValidPostalCode();       
    }
    // Some other framework code for Coded UI
  }
// In the Coded UI UIMap.Designer.cs file
public void CreateNewCustomerWithoutName()
    {
      #region Variable Declarations
      // Click 'Create New' link
      Mouse.Click(uICreateNewHyperlink, new Point(51, 8));
      // Type '' in 'Name' text box
      uINameEdit.Text = this.CreateNewCustomerMissingNameParams.UINameEditText;
      // Type '{Tab}' in 'Name' text box
      Keyboard.SendKeys(uINameEdit,
        this.CreateNewCustomerMissingNameParams.UINameEditSendKeys,
        ModifierKeys.None);
      // Type '234 Lane St' in 'Address' text box
      uIAddressEdit.Text =
        this.CreateNewCustomerMissingNameParams.UIAddressEditText;
      // Type '{Tab}' in 'Address' text box
      Keyboard.SendKeys(uIAddressEdit,
        this.CreateNewCustomerMissingNameParams.UIAddressEditSendKeys,
        ModifierKeys.None);
  }
}

編碼的 UI 測試，就像任何其他測試。它們就像一個使用者與 UI 交互。幸運的是，編碼的 UI 工具非常適合記錄你的行動和生成代碼做同樣的事情。在任何時候，您可以拋棄和再生試驗，或者修改代碼，不用擔心。也像單元測試，你可以從Visual Studio測試資源管理器運行編碼的 UI 測試。它們會顯示在單元測試。

提高你的軟體品質

有真正的好處，從各種形式的測試。很重要的是要測試即使是很小的 Windows 應用商店或 Windows Phone 的應用程式，尤其是如果你賣他們的應用程式存儲區中。測試應用程式的可靠工作的應用程式 — — 他們有檔和稽核線索。

你可以像 xUnit 和量子系統和使用自動化測試 Web 或本機應用程式與 CUITs 庫的單元測試。這並不是提及其他類型的重要測試（例如使用者接受度測試、集成測試、系統測試等等。一旦你有了一套可靠的單位和使用者介面中添加這些測試將大大提高你的軟體的品質。

Rachel Appel 是 20 多年的經驗，在 IT 行業顧問、作者、導師和前微軟員工。她說話在一流的行業會議，如Visual Studio活！，DevConnections，混合和更多。她的專長在於內開發對齊業務和技術集中在微軟開發堆疊上，打開 Web 的解決方案。阿佩爾的更多資訊，請訪問她的網址 rachelappel.com。

由於下面的技術專家，檢討這篇文章：OrenNovotony