如何模擬角度測試模塊

Question

讓我們說我有一個角度模塊定義為

var app = angular.module('app',[dependenceny1Module,dependenceny2Module,dependenceny3Module......])

app是一個依賴於大量其他模塊的模塊。 現在進行單元測試我可以使用模擬模塊

mock('app') 

但我必須為所有依賴模塊創建模擬模塊，如下所示

mockDependency1 = angular.module('dependency1Module')
mockDependency1 = angular.module('dependency2Module')

或者我必須加載包含這些模塊的所有腳本文件。

我想知道最好的方法來模擬依賴模塊嗎？ 特別是當依賴模塊太多時。

Answer 1

查看requireJs以加載您的依賴項。 使用RequireJs，您可以為生產代碼和測試代碼加載不同的文件。

這是一個（基本）例子。

假設您有一個javascript文件，用於定義您的角度模塊 （名為app.js ）：

define(['dependency1Module', 'dependency2Module'], function(dependency1Module, dependency2Module) {
   var app = angular.module('app',['dependenceny1Module', 'dependenceny2Module']);
   return app;
}

模塊dependency1Module，dependency2Module，...有類似的設置：

define(function() {
   var module = angular.module('dependenceny1Module');
   return module;
}

現在你需要一個bootstrap文件（名為bootstrap.js來定義文件的位置。所以你將有兩個引導程序文件：一個是你的生產代碼（使用某些庫的可能的縮小版本）和一個用於測試目的的版本：

require.config({
  baseUrl: "path/to/production|test scripts",
  paths: {
    angular: 'path/to/angular',
    jquery: 'path/to/jquery',
  },
  shim: {
    angular: {
      exports: 'angular',
      deps: ['jquery']
    }
  }
});

require(["angular", "app", ], function(angular, app) {
  angular.element(document).ready(function() {
    angular.bootstrap(document, ['app']);
  });
});

您可以為要模擬的模塊定義不同的路徑，而不是更改baseUrl ：

paths: {
   dependency1Module: 'path/to.mock/dependency1Module'
}

最后一步是在你的html代碼（生產或測試）中插入bootstrap文件：

<script type="text/javascript" src="path/to/require.js"></script>
<script type="text/javascript" src="path/to/bootstrap(production|test).js"></script>

這是一個基本的requirejs設置。 當然，在你可以使用某種角度類型（例如控制器，服務......）之前，你還需要為它設置一個requirejs模塊（例如在你的app.js require它）。

Answer 2

模塊化您自己的應用程序將有所幫助。

如果您的應用看起來像這樣：

var app = angular.module('app',[dependenceny1Module, dependenceny2Module, dependenceny3Module......])

並包含50個過濾器，指令和控制器等內容。 其中一些依賴依賴尼特模塊，其中一些依賴依賴尼姆模塊。

根據他們的責任和依賴性將他們分開。

var mymodule1 = angular.module('mymodule1',[dependenceny2Module, dependenceny3Module])

var mymodule2 = angular.module('mymodule2',[dependenceny1Module,])

然后讓您的應用程序依賴於您自己的模塊：

var app = angular.module('app',[ mymodule1, mymodule2])

您的app應該包含大部分引導代碼。

現在，當你想測試mymodule2 controller13時， 如果該模塊有依賴關系，你只需要模擬mymodule2的依賴關系。 因此測試套件不會加載app ，只會加載他們測試的模塊。

請參閱此示例 ，其中mymodule1 MyMainCtrl1測試僅關注來自external1 s1 ，即使app整體依賴於external1 ， external2和external3 。

Answer 3

這一切都取決於你真正想要測試的內容，如果你是單元測試，你想盡可能少地加載/模擬。 例如，如果您對控制器進行單元測試，則模擬模塊並僅加載/模擬它使用的任何依賴項。