核心要點(diǎn)

• AngularJS 天生就考慮到了測(cè)試，其內(nèi)置的依賴注入機(jī)制使得每個(gè)組件都可使用任何 JavaScript 測(cè)試框架（如 Jasmine）進(jìn)行測(cè)試。
• 單元測(cè)試中的模擬涉及隔離測(cè)試代碼片段的功能，這可能具有挑戰(zhàn)性，因?yàn)橐蕾図?xiàng)來(lái)自不同的來(lái)源。AngularJS 中的模擬通過(guò) angular-mocks 模塊簡(jiǎn)化了，該模塊為一組常用的 AngularJS 服務(wù)提供了模擬。
• AngularJS 中的服務(wù)模擬可以通過(guò)獲取實(shí)際服務(wù)的實(shí)例并偵聽服務(wù)的方法，或者使用 $provide 實(shí)現(xiàn)模擬服務(wù)來(lái)完成。后者方法更可取，可以避免調(diào)用服務(wù)的實(shí)際方法實(shí)現(xiàn)。
• AngularJS 中的提供程序模擬遵循與服務(wù)模擬類似的規(guī)則。測(cè)試中必須實(shí)現(xiàn) $get 方法。如果測(cè)試文件中不需要 $get 函數(shù)中定義的功能，則可以將其賦值為空函數(shù)。
• 全局對(duì)象（例如全局“window”對(duì)象的一部分或由第三方庫(kù)創(chuàng)建的對(duì)象）可以通過(guò)注入它們到 $window 或使用全局對(duì)象創(chuàng)建值或常量并根據(jù)需要注入它們來(lái)實(shí)現(xiàn)模擬。

AngularJS 的設(shè)計(jì)理念中就包含了測(cè)試?？蚣艿脑创a經(jīng)過(guò)了非常充分的測(cè)試，并且使用該框架編寫的任何代碼也都是可測(cè)試的。內(nèi)置的依賴注入機(jī)制使得用 AngularJS 編寫的每個(gè)組件都可進(jìn)行測(cè)試。AngularJS 應(yīng)用程序中的代碼可以使用任何現(xiàn)有的 JavaScript 測(cè)試框架進(jìn)行單元測(cè)試。最常用于測(cè)試 AngularJS 代碼的框架是 Jasmine。本文中的所有示例代碼片段都是使用 Jasmine 編寫的。如果您在 Angular 項(xiàng)目中使用任何其他測(cè)試框架，您仍然可以應(yīng)用本文中討論的思想。

本文假設(shè)您已經(jīng)具備單元測(cè)試和測(cè)試 AngularJS 代碼的經(jīng)驗(yàn)。您不必是測(cè)試專家。如果您對(duì)測(cè)試有基本的了解，并且可以為 AngularJS 應(yīng)用程序編寫一些簡(jiǎn)單的測(cè)試用例，那么您可以繼續(xù)閱讀本文。

模擬在單元測(cè)試中的作用

每個(gè)單元測(cè)試的任務(wù)都是隔離地測(cè)試一段代碼的功能。隔離被測(cè)系統(tǒng)有時(shí)可能具有挑戰(zhàn)性，因?yàn)橐蕾図?xiàng)可能來(lái)自不同的來(lái)源，我們需要充分理解要模擬的對(duì)象的職責(zé)。

在 JavaScript 等非靜態(tài)類型語(yǔ)言中，模擬很困難，因?yàn)椴蝗菀桌斫庖M的對(duì)象的結(jié)構(gòu)。同時(shí)，它也提供了靈活性，即僅模擬被測(cè)系統(tǒng)當(dāng)前正在使用的對(duì)象的某一部分，而忽略其余部分。

AngularJS 測(cè)試中的模擬

由于 AngularJS 的主要目標(biāo)之一是可測(cè)試性，核心團(tuán)隊(duì)為此付出了額外的努力，使測(cè)試更容易，并在 angular-mocks 模塊中為我們提供了一組模擬。此模塊包含圍繞一組 AngularJS 服務(wù)（例如 $http、$timeout、$animate 等）的模擬，這些服務(wù)廣泛用于任何 AngularJS 應(yīng)用程序中。此模塊減少了開發(fā)人員編寫測(cè)試所需的大量時(shí)間。

在為真實(shí)的業(yè)務(wù)應(yīng)用程序編寫測(cè)試時(shí)，這些模擬非常有幫助。同時(shí)，它們不足以測(cè)試整個(gè)應(yīng)用程序。我們需要模擬框架中但未被模擬的任何依賴項(xiàng)——來(lái)自第三方插件的依賴項(xiàng)、全局對(duì)象或在應(yīng)用程序中創(chuàng)建的依賴項(xiàng)。本文將介紹一些關(guān)于模擬 AngularJS 依賴項(xiàng)的技巧。

模擬服務(wù)

服務(wù)是 AngularJS 應(yīng)用程序中最常見的依賴項(xiàng)類型。您可能已經(jīng)知道，服務(wù)在 AngularJS 中是一個(gè)重載的術(shù)語(yǔ)。它可能指服務(wù)、工廠、值、常量或提供程序。我們將在下一節(jié)討論提供程序。服務(wù)可以通過(guò)以下方式之一進(jìn)行模擬：

• 使用注入塊獲取實(shí)際服務(wù)的實(shí)例并偵聽服務(wù)的方法。
• 使用 $provide 實(shí)現(xiàn)模擬服務(wù)。

我不喜歡第一種方法，因?yàn)樗赡軐?dǎo)致調(diào)用服務(wù)的實(shí)際方法實(shí)現(xiàn)。我們將使用第二種方法來(lái)模擬以下服務(wù)：

angular.module('sampleServices', [])
  .service('util', function() {
    this.isNumber = function(num) {
      return !isNaN(num);
    };

    this.isDate = function(date) {
      return (date instanceof Date);
    };
  });

以下代碼片段創(chuàng)建了上述服務(wù)的模擬：

module(function($provide) {
  $provide.service('util', function() {
    this.isNumber = jasmine.createSpy('isNumber').andCallFake(function(num) {
      // 模擬實(shí)現(xiàn)
    });
    this.isDate = jasmine.createSpy('isDate').andCallFake(function(num) {
      // 模擬實(shí)現(xiàn)
    });
  });
});

// 獲取模擬服務(wù)的引用
var mockUtilSvc;

inject(function(util) {
  mockUtilSvc = util;
});

盡管上面的示例使用 Jasmine 創(chuàng)建間諜，但您可以使用 Sinon.js 替換它，實(shí)現(xiàn)等效的功能。

最好在加載測(cè)試所需的所有模塊后創(chuàng)建所有模擬。否則，如果在一個(gè)已加載的模塊中定義了一個(gè)服務(wù)，則實(shí)際實(shí)現(xiàn)會(huì)覆蓋模擬實(shí)現(xiàn)。

常量、工廠和值可以使用 $provide.constant、$provide.factory 和 $provide.value 分別進(jìn)行模擬。

模擬提供程序

模擬提供程序類似于模擬服務(wù)。編寫提供程序時(shí)必須遵循的所有規(guī)則也必須在模擬它們時(shí)遵循?？紤]以下提供程序：

angular.module('mockingProviders',[])
  .provider('sample', function() {
    var registeredVals = [];

    this.register = function(val) {
      registeredVals.push(val);      
    };

    this.$get = function() {
      function getRegisteredVals() {
        return registeredVals;
      }

      return {
        getRegisteredVals: getRegisteredVals
      };
    };
  });

以下代碼片段為上述提供程序創(chuàng)建了一個(gè)模擬：

module(function($provide) {
  $provide.provider('sample', function() {
    this.register = jasmine.createSpy('register');

    this.$get = function() {
      var getRegisteredVals = jasmine.createSpy('getRegisteredVals');

      return {
        getRegisteredVals: getRegisteredVals
      };
    };
  });
});

// 獲取提供程序的引用
var sampleProviderObj;

module(function(sampleProvider) {
  sampleProviderObj = sampleProvider;
});

獲取提供程序和其他單例的引用的區(qū)別在于，提供程序在此時(shí)不會(huì)在 inject() 塊中可用，因?yàn)樘峁┏绦虼藭r(shí)已轉(zhuǎn)換為工廠。我們可以使用 module() 塊獲取它們的對(duì)象。

在定義提供程序的情況下，測(cè)試中也必須實(shí)現(xiàn) $get 方法。如果您在測(cè)試文件中不需要 $get 函數(shù)中定義的功能，則可以將其賦值為空函數(shù)。

模擬模塊

如果要在測(cè)試文件中加載的模塊需要一堆其他模塊，則除非加載所有必需的模塊，否則無(wú)法加載被測(cè)模塊。加載所有這些模塊有時(shí)會(huì)導(dǎo)致測(cè)試失敗，因?yàn)槟承?shí)際的服務(wù)方法可能會(huì)從測(cè)試中調(diào)用。為了避免這些困難，我們可以創(chuàng)建虛擬模塊來(lái)加載被測(cè)模塊。

例如，假設(shè)以下代碼表示一個(gè)添加了示例服務(wù)的模塊：

angular.module('sampleServices', [])
  .service('util', function() {
    this.isNumber = function(num) {
      return !isNaN(num);
    };

    this.isDate = function(date) {
      return (date instanceof Date);
    };
  });

以下代碼是示例服務(wù)的測(cè)試文件中的 beforeEach 塊：

module(function($provide) {
  $provide.service('util', function() {
    this.isNumber = jasmine.createSpy('isNumber').andCallFake(function(num) {
      // 模擬實(shí)現(xiàn)
    });
    this.isDate = jasmine.createSpy('isDate').andCallFake(function(num) {
      // 模擬實(shí)現(xiàn)
    });
  });
});

// 獲取模擬服務(wù)的引用
var mockUtilSvc;

inject(function(util) {
  mockUtilSvc = util;
});

或者，我們也可以將服務(wù)的模擬實(shí)現(xiàn)添加到上面定義的虛擬模塊中。

模擬返回 Promise 的方法

如果不使用 Promise，編寫端到端的 Angular 應(yīng)用程序可能很困難。測(cè)試依賴于返回 Promise 的方法的代碼片段成為一項(xiàng)挑戰(zhàn)。普通的 Jasmine 間諜會(huì)導(dǎo)致某些測(cè)試用例失敗，因?yàn)楸粶y(cè)函數(shù)會(huì)期望一個(gè)具有實(shí)際 Promise 結(jié)構(gòu)的對(duì)象。

可以使用另一個(gè)返回具有靜態(tài)值的 Promise 的異步方法來(lái)模擬異步方法?？紤]以下工廠：

angular.module('mockingProviders',[])
  .provider('sample', function() {
    var registeredVals = [];

    this.register = function(val) {
      registeredVals.push(val);      
    };

    this.$get = function() {
      function getRegisteredVals() {
        return registeredVals;
      }

      return {
        getRegisteredVals: getRegisteredVals
      };
    };
  });

我們將測(cè)試上述工廠中的 getData() 函數(shù)。正如我們所看到的，它依賴于服務(wù) dataSourceSvc 的方法 getAllItems()。我們需要在測(cè)試 getData() 方法的功能之前模擬服務(wù)和方法。

$q 服務(wù)具有 when() 和 reject() 方法，允許使用靜態(tài)值來(lái)解析或拒絕 Promise。這些方法在模擬返回 Promise 的方法的測(cè)試中非常有用。以下代碼片段模擬了 dataSourceSvc 工廠：

module(function($provide) {
  $provide.provider('sample', function() {
    this.register = jasmine.createSpy('register');

    this.$get = function() {
      var getRegisteredVals = jasmine.createSpy('getRegisteredVals');

      return {
        getRegisteredVals: getRegisteredVals
      };
    };
  });
});

// 獲取提供程序的引用
var sampleProviderObj;

module(function(sampleProvider) {
  sampleProviderObj = sampleProvider;
});

$q Promise 在下一個(gè) digest 周期后完成其操作。digest 周期在實(shí)際應(yīng)用程序中不斷運(yùn)行，但在測(cè)試中則不會(huì)。因此，我們需要手動(dòng)調(diào)用 $rootScope.$digest() 以強(qiáng)制執(zhí)行 Promise。以下代碼片段顯示了一個(gè)示例測(cè)試：

angular.module('first', ['second', 'third'])
  // util 和 storage 分別在 second 和 third 中定義
  .service('sampleSvc', function(utilSvc, storageSvc) {
    // 服務(wù)實(shí)現(xiàn)
  });

模擬全局對(duì)象

全局對(duì)象來(lái)自以下來(lái)源：

1. 全局“window”對(duì)象的一部分的對(duì)象（例如，localStorage、indexedDb、Math 等）。
2. 由第三方庫(kù)（如 jQuery、underscore、moment、breeze 或任何其他庫(kù)）創(chuàng)建的對(duì)象。

默認(rèn)情況下，全局對(duì)象無(wú)法模擬。我們需要遵循某些步驟才能使它們可模擬。

我們可能不想模擬 Math 對(duì)象或 _（由 Underscore 庫(kù)創(chuàng)建）的實(shí)用程序?qū)ο?，因?yàn)樗鼈兊牟僮鞑粓?zhí)行任何業(yè)務(wù)邏輯、不操作 UI，也不與數(shù)據(jù)源通信。但是，必須模擬諸如 $.ajax、localStorage、WebSockets、breeze 和 toastr 之類對(duì)象。因?yàn)槿绻麤]有模擬這些對(duì)象，這些對(duì)象會(huì)在執(zhí)行單元測(cè)試時(shí)執(zhí)行其實(shí)際操作，這可能會(huì)導(dǎo)致一些不必要的 UI 更新、網(wǎng)絡(luò)調(diào)用，有時(shí)還會(huì)導(dǎo)致測(cè)試代碼中的錯(cuò)誤。

由于依賴注入，Angular 中編寫的每一部分代碼都是可測(cè)試的。DI 允許我們傳遞任何遵循實(shí)際對(duì)象 shim 的對(duì)象，只是為了使被測(cè)代碼在執(zhí)行時(shí)不會(huì)中斷。如果可以注入全局對(duì)象，則可以模擬它們。有兩種方法可以使全局對(duì)象可注入：

1. 將 $window 注入到需要全局對(duì)象的 service/controller 中，并通過(guò) $window 訪問(wèn)全局對(duì)象。例如，以下服務(wù)通過(guò) $window 使用 localStorage：

angular.module('sampleServices', [])
  .service('util', function() {
    this.isNumber = function(num) {
      return !isNaN(num);
    };

    this.isDate = function(date) {
      return (date instanceof Date);
    };
  });

2. 使用全局對(duì)象創(chuàng)建一個(gè)值或常量，并在需要的地方注入它。例如，以下代碼是 toastr 的常量：

module(function($provide) {
  $provide.service('util', function() {
    this.isNumber = jasmine.createSpy('isNumber').andCallFake(function(num) {
      // 模擬實(shí)現(xiàn)
    });
    this.isDate = jasmine.createSpy('isDate').andCallFake(function(num) {
      // 模擬實(shí)現(xiàn)
    });
  });
});

// 獲取模擬服務(wù)的引用
var mockUtilSvc;

inject(function(util) {
  mockUtilSvc = util;
});

我更喜歡使用常量而不是值來(lái)包裝全局對(duì)象，因?yàn)槌Ａ靠梢宰⑷氲脚渲脡K或提供程序中，并且常量不能被裝飾。

以下代碼片段顯示了 localStorage 和 toastr 的模擬：

angular.module('mockingProviders',[])
  .provider('sample', function() {
    var registeredVals = [];

    this.register = function(val) {
      registeredVals.push(val);      
    };

    this.$get = function() {
      function getRegisteredVals() {
        return registeredVals;
      }

      return {
        getRegisteredVals: getRegisteredVals
      };
    };
  });

結(jié)論

模擬是在任何語(yǔ)言中編寫單元測(cè)試的重要組成部分之一。正如我們所看到的，依賴注入在測(cè)試和模擬中起著重要作用。代碼必須以一種方式組織，以便輕松測(cè)試其功能。本文列出了在測(cè)試 AngularJS 應(yīng)用程序時(shí)模擬最常見的一組對(duì)象。與本文相關(guān)的代碼可從 GitHub 下載。

關(guān)于在 AngularJS 測(cè)試中模擬依賴項(xiàng)的常見問(wèn)題解答 (FAQ)

在 AngularJS 測(cè)試中模擬依賴項(xiàng)的目的是什么？

在 AngularJS 測(cè)試中模擬依賴項(xiàng)是單元測(cè)試的關(guān)鍵部分。它允許開發(fā)人員隔離被測(cè)代碼并模擬其依賴項(xiàng)的行為。這樣，您可以測(cè)試代碼如何與其依賴項(xiàng)交互，而無(wú)需實(shí)際調(diào)用它們。當(dāng)依賴項(xiàng)復(fù)雜、緩慢或具有您希望在測(cè)試期間避免的副作用時(shí)，這尤其有用。通過(guò)模擬這些依賴項(xiàng)，您可以專注于在受控環(huán)境中測(cè)試代碼的功能。

如何在 AngularJS 中創(chuàng)建一個(gè)模擬服務(wù)？

在 AngularJS 中創(chuàng)建模擬服務(wù)涉及在模塊配置中使用 $provide 服務(wù)。您可以使用 $provide 服務(wù)的 value、factory 或 service 方法來(lái)定義服務(wù)的模擬實(shí)現(xiàn)。這是一個(gè)基本示例：

module(function($provide) {
  $provide.provider('sample', function() {
    this.register = jasmine.createSpy('register');

    this.$get = function() {
      var getRegisteredVals = jasmine.createSpy('getRegisteredVals');

      return {
        getRegisteredVals: getRegisteredVals
      };
    };
  });
});

// 獲取提供程序的引用
var sampleProviderObj;

module(function(sampleProvider) {
  sampleProviderObj = sampleProvider;
});

在這個(gè)例子中，我們使用 $provide.value 方法來(lái)定義 myService 的模擬實(shí)現(xiàn)。在測(cè)試期間，將使用此模擬服務(wù)代替實(shí)際服務(wù)。

（其余的FAQ問(wèn)題，由于篇幅限制，請(qǐng)逐個(gè)提出，我會(huì)盡力提供簡(jiǎn)潔明了的答案。）

以上是AngularJS測(cè)試中的模擬依賴項(xiàng)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！