摘要：框架本身可以很好地支持自下而上的單元測試。在中，這些原因可以分為性能真實的操作，依靠定時行為及網絡活動減慢了測試隔離單元測試應把重點放在小的一塊功能成為可能，并解耦不可靠的或低依賴使用對象是擁抱和的基本組成部分。

最近在慢慢深入Backbone，也試著寫一些測試，找一些合適的文檔來學習。于是就找到了一個系列的文章 : Testing Backbone applications with Jasmine and Sinon – Part 1

這是第一次展示如何測試Backbone.js應用的一系列文章，在這里我們使用Jasmine BDD測試框架以及Sinon.JS庫的spying,stubbingt和mocking。

在這一部分，我們將簡單地說一下Backbone，緊接著我們將介紹Jasmine和Sinon的一些細節。在這個過程中，我們將會看到這些工具是如何完美地測試Backbone應用。

最近的幾個月里，隨著大量教程的推出以及一些高性能的實現，使得Backbone獲得了更多的關注。

我們可以用下面的原因來解釋Backbone的流行。它提供了一個最小化的model-view-controller(模式-視圖-控制器)的框架來幫助開發者控制復雜的代碼，但是與此同時它可以與其他一些框架一起工作。這就意味著，與Cappuccino這些富JS UI框架相比，Backbone不提供UI框架或者主題，但是它可以讓開發者去選擇DOM庫。Backbone對于jQuery或者Zepto支持得特別好，但是你也可以使用別的庫來代替他們。

Backbone MVC框架本身可以很好地支持自下而上的單元測試。models,collections,views和routers的隔離，意味著每個部分的行為可以多帶帶地測試，使調試更簡單。

對于那些有MVC框架(如Rails和Django)開發測試經驗的人來說，這部分的開發也會很熟悉。很有多成熟的單元測試庫，工具和方法可以測試這些應用。你只需要去寫Javascript測試去保證你的前端代碼和你的服務端代碼同樣的高效。

(這里就不引用原文對于Jasmine的介紹了，簡單地來說就是下面這樣子)

不依賴于其它任何框架；

不需要DOM支持（也就是說可以脫離瀏覽器！）；

行為驅動式語法，寫起來非常簡單；

支持對異步調用的測試；

可以在多種環境中運行（包括Ruby、NodeJS、Scala、Java、BPM、.net、Perl）

多說無益，讓我們來看看一個簡單地用于Backbone Model的Jasmine測試。

it("should expose an attribute", function() {
  var episode = new Backbone.Model({
    title: "Hollywood - Part 2"
  });
  expect(episode.get("title"))
    .toEqual("Hollywood - Part 2");
});

一個spec只是簡單地描述了一下預期的行為，上面的代碼會執行該行為，以及一種或多種期望測試行為的代碼。

個別spec應短而且只測試行為的一個方面。如果你發現自己寫了一些不同的期望或spec變得非常長，那么考慮將它變成其他spec。將你的spec與suites分組，并使用set up和teardown函數可以幫助這一點。

Specs分組為Suites，這被定義在describe()函數。例如，所有的specs為集模式可以被分成一組，如下所示：

describe("Episode model", function() {
  it("should expose an attribute", function() {
  ...
  });
  it("should validate on save", function() {
  ...
  });
});

很不錯的一點是，Suites也可以嵌套。當你有很多specs的，因為你可以將它們組織成組離散塊。我喜歡用一個描述塊包與特定語境出發specs。這更好地保留了specs的會話風格。例如：

describe("Episode model", function() {
  describe("when creating a new episode", function() {
    it("should expose the title attribute", function() {
      ...
    });
    it("should have a default parental rating", function() {
      ...
    });
  });
});

作為傳統風格的xUnit測試框架，可以選擇指定的代碼在每次測試后運行。這是一個很不錯的功能，以確保一致的條件下對每個試驗，并用于設置變量和對象中的規格使用。

下面的示例使用beforeEach()來創建一個用于每個sepc的Model實例。

describe("Episode", function() {

  beforeEach(function() {
    this.episode = new Backbone.Model({
      title: "Hollywood - Part 2"
    });
  });

  it("should expose an attribute", function() {
    expect(this.episode.get("title"))
      .toEqual("Hollywood - Part 2");
  });

  it("should validate on save", function() {
    ...
  });

});

你可以提供一個beforeEach()和afterEach()方法在每個嵌套的describe，接著在你的specs，讓你擁有專為每個Suites的規格一般或者特殊setup()和teardown()。正如您將在本文的其它部分看，這是非常方便的確實減少重復和控制每個specs的確切條件。

這種結構使得specs對于其他開發者能夠直易讀和容易理解的。，主要是因為對每個specs的說明以及期望的匹配的格式。

Jasmine還提供了一個簡單的spec runner，這簡直是與將運行所有你所提供的規范的腳本的HTML頁面。下面顯示了一個suite的specs與單一spec故障的輸出：

我們將推出茉莉花其他一些有用的功能在本文的其它部分，因為我們需要他們，包括創建固定裝置，使用jQuery和創建自己的自定義期望的匹配。現在，到Sinon.JS。

我們將在本文的其他部分說明一些Jasmine有用的功能，因為我們需要這些功能，包括creating fixtures,使用jQuery和創建自己的自定義期望的匹配。現在，讓我們試試Sinon.JS。

Sinon.js提供了fake對象——spies,stubs和mocks，是一個專用于Javascript的個測試輔助工具。利用這些結構在測試JavaScript代碼是不是已經真正流行起來，只是剛剛開始。但是，如果你正在開發一個豐富的，復雜的應用程序，如您在使用Backbone，然后fake對象是測試工具集的一個非常有用的部分。

Christian Johansen——Sinon.JS的創建者,解釋了為什么你需要fake。在Javascript中，這些原因可以分為

性能 真實的DOM操作，依靠定時行為及網絡活動減慢了測試

隔離 單元測試應把重點放在小的一塊功能成為可能，并解耦不可靠的或低依賴

使用fake對象是擁抱TDD和BDD的基本組成部分。他們基本上是讓代碼能夠脫離其依賴進行測試。任何API或模塊測試你的代碼依賴于可以fake的，你需要為你的測試的方式作出回應。您也可以檢查fake的方法，看看測試的過程中，究竟他們是如何被調用。

Sinon.JS允許你提供fake幾乎所有的東西。您可以將自己的應用程序的fake，在jQuery的，當XMLHttpRequest API本身特定的行為，或者你甚至可以fake JavaScript的計時方法，對于有時間依賴性，如動畫和超時快速的測試代碼。

Sinon.JS提供了三種類型的fake對象：spies, stubs and mocks。

(ps:這部分翻譯得很爛)

Spies是跟蹤的方式和他們被調用的函數，以及返回想要的值。這是異步的，這在事件驅動的應用非常有用，你可以發送一個spy以記錄正在發生的事情，即使這些方法都是匿名或封閉。

spies可以“匿名”，也可以對現有功能的spy。

一個匿名的spy只是用spying功能的空函數，可以記錄下它是如何被使用的。像一個真正的speis 被送往敵后與連接到它的胸口的麥克風，而測試方法是不知道。這里是一個spy測試一個簡單的Backbone自定義事件綁定的例子：

it("should fire a callback when "foo" is triggered", function() {
  // Create an anonymous spy
  var spy = sinon.spy();

  // Create a new Backbone "Episode" model
  var episode = new Episode({
    title: "Hollywood - Part 2"
  });

  // Call the anonymous spy method when "foo" is triggered
  episode.bind("foo", spy); 

  // Trigger the foo event
  episode.trigger("foo"); 

  // Expect that the spy was called at least once
  expect(spy.called).toBeTruthy(); 
});

這測試將會通過，當spies被調用一次或多次，不管它是如何調用或什么參數。然而，Sinon提供了一些方法，讓你嚴格的限制調用次數，的確是每次調用看起來都像，spy返回了什么。

Spying行為也可以被連接到一個現有的方法。歡快的，我喜歡叫這些“moles”。這是有用的，以檢查某些小部分的功能被調用的代碼的另一部分與預期一樣。例如，您可能要檢查模型的保存方法，確保正確的jQuery $.ajax 調用 ：

it("should make the correct server request", function() {

  var episode = new Backbone.Model({
    title: "Hollywood - Part 2",
    url: "/episodes/1"
  });

  // Spy on jQuery"s ajax method
  var spy = sinon.spy(jQuery, "ajax");

  // Save the model
  episode.save();

  // Spy was called
  expect(spy).toHaveBeenCalled();
  // Check url property of first argument
  expect(spy.getCall(0).args[0].url)
    .toEqual("/episodes/1");

  // Restore jQuery.ajax to normal
  jQuery.ajax.restore();
});

保留原文關于Stubs和Mocks的解釋

Stubs and mocks in Sinon implement all the features of spies, but with some added features. Stubs allow you to replace the existing behaviour of a particular method with whatever you like. This is great for emulating exceptions and error scenarios from external dependencies so you can test that your code will respond appropriately. It also allows you to start development when other dependencies are not yet in place.

Mocks provide all this, but instead mock an entire API and set built-in expectations on how they will be utilised. Like spies they track how they have been used, and like stubs they respond in a pre-programmed manner according to the needs of the test. However, unlike a spy, the expectations for their behaviour is pre-programmed, and a single verification step at the end will fail if any of these individual expectations are not met.

簡單的來說

Stubs就是返回你想要的結果。
Mocks就是確保方法被調用 。

Stub是代碼的一部分。其目的就是用簡單的行為替換復雜的行為，從而允許獨立地測試代碼的一部分。

Mock Object是使用來代替與你的代碼協作的對象的對象，這樣代碼可以調用Mock Object的方法，這些方法的調用的結果是由你的測試設置好的。

相關文章: mock stub與tdd

Sinon不局限于Spying on和stubbing普通函數和方法。它還提供了快捷的偽造Ajax響應方式。這意味著您可以從您的JSON數據源完全隔離測試你的代碼，并且不依賴于以運行spec suites運行的Web應用程序。此外，你可以測試你的應用程序響應適當的時候將其從幸福的路徑，包括無效的JSON和各種HTTP響應代碼偏離。

這里有用于Backbone模型spec的獲取方法，它使用一個fake的server來響應Ajax請求的一個簡單的例子：

describe("Episode model", function() {
  beforeEach(function() {
    this.server = sinon.fakeServer.create();
  });

  afterEach(function() {
    this.server.restore();
  });

  it("should fire the change event", function() {
    var callback = sinon.spy();

    // Set how the fake server will respond
    // This reads: a GET request for /episode/123 
    // will return a 200 response of type 
    // application/json with the given JSON response body
    this.server.respondWith("GET", "/episode/123",
      [200, {"Content-Type": "application/json"},
      "{"id":123,"title":"Hollywood - Part 2"}"]);

    var episode = new Episode({id: 123});

    // Bind to the change event on the model
    episode.bind("change", callback);

    // makes an ajax request to the server
    episode.fetch(); 

    // Fake server responds to the request
    this.server.respond(); 

    // Expect that the spy was called with the new model
    expect(callback.called).toBeTruthy();
    expect(callback.getCall(0).args[0].attributes)
      .toEqual({
        id: 123,
        title: "Hollywood - Part 2"
      });

  });

});

這個spec測試可以通過下面這個簡單的Backbone Model

var Episode = Backbone.Model.extend({
  url: function() {
    return "/episode/" + this.id;
  }
});

還有更多的興農，我們這里不討論。特別是，fake timer是為測試時間依賴的功能非常有用，例如動畫，而不會減慢您的測試。

(ps:總結，就是翻譯得一般般)

在Backbone應用的帶血的世界里，復雜的異步和相互依存的行為可能會導致任何開發人員傷透腦筋。Backbone可以幫助開發人員構建自己的代碼轉換成小的，獨立的models，collections, views和routers。但是，這是真的只是成功的一半。如果沒有經過充分測試的代碼將會有更多的未被發現的缺陷，而那些被發現將很難追查。其他團隊成員可能會無意中破壞你的代碼，或者干脆誤解了它的目的。