使用Jasmine和Chutzpah在AngularJS中進行單元測試

Question

我正在嘗試為基於angularJS構建的現有SPA項目編寫單元測試用例。 每當我嘗試執行代碼時，都會收到“找不到變量：模塊”錯誤。

我使用npm安裝了庫。

我為此使用了Chutzpah和Jasmine庫。

appModule.js

(function () {
    'use strict';

    angular.module('app', [
        'ngMessages',
        'ui.router',
        'ui.router.title'
    ]).run(['REQ_TOKEN', function (REQ_TOKEN) {
        //...
    }]).config(['$httpProvider', function ($httpProvider) {
        $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
    }]);
})();

site.js

(function () {
    'use strict';

    window.deferredBootstrapper.bootstrap({
        element: window.document,
        module: 'app',
        resolve: {
            REQ_TOKEN: ['$http', function ($http) {
                return $http.get('/.../', { ignoreLoadingBar: true, params: { ts: new Date().getTime() } });
            }]
        }
    });
})();

appController.js：

(function () {
'use strict';

  angular
      .module('app')
      .controller('appController', appController);

  appController.$inject = ['apiServices', '$scope'];

  function appController(apiServices, $scope) {
    $scope.value = 5;
  }
})();

apiServices.js

(function () {
'use strict';

  angular
      .module('app')
      .factory('apiServices', apiServices);

  apiServices.$inject = ['$http', '$log', '$q'];

  function apiServices($http, $log, $q) {
    var clientServicesPath = '/api/ClientServices',
    service =
       {  .......  };

    return service;
  }
})();

appControllerSpec.js

/// <reference path="../../../lib/angular/angular.js" />
/// <reference path="../../../lib/angular-deferred-bootstrap/angular-deferred-bootstrap.js" />
/// <reference path="../../../lib/angular-ui-router/release/angular-ui-router.js" />
/// <reference path="../../../lib/angular-ui-router-title/angular-ui-router-title.js" />
/// <reference path="../../../lib/angular-messages/angular-messages.js" />

/// <reference path="../../modules/appmodule.js" />
/// <reference path="../../site.js" />
/// <reference path="../../factories/sharedfunctions.js" />

/// <reference path="../../services/apiservices.js" />
/// <reference path="../../controllers/appcontroller.js" />
/// <reference path="../../../../node_modules/jasmine/bin/jasmine.js" />
/// <reference path="../../../../node_modules/jasmine/lib/jasmine.js" />
/// <reference path="../../../../node_modules/jasmine-ajax/lib/mock-ajax.js" />
/// <reference path="../../../lib/angular-mocks/angular-mocks.js" />

describe('When using appController ', function () {
  //initialize Angular
  beforeEach(module('app'));   
  var ctrl, scope, apiServices;

  beforeEach(inject(function ($injector) {
    apiServices = $injector.get('apiServices');
  }));

  beforeEach(inject(function ($controller, $rootScope, apiServices) {
    scope = $rootScope.$new();
    var ctrl = $controller('appController', { $scope: scope, apiServices: apiServices });
  }));

  it('initial value is 5', function () {
    expect(scope.value).toBe(5);
  });
});

我收到以下錯誤：

測試'使用appController時：初始值為5'失敗錯誤：[$ injector：unpr]未知提供程序：REQ_TOKENProvider <-REQ_TOKEN http://errors.angularjs.org/1.5.1/ $ injector / unpr？p0 = REQ_TOKENProvider％ getService（file：/// C：/ Users）中的文件：/// C：/Users/Bhanu/......./lib/angular/angular.js（第4418行）中的20％3C-％20REQ_TOKEN /Bhanu/......./lib/angular/angular.js:4571:46），位於文件：/// C：/Users/Bhanu/......./lib/angular/angular。 js：4423：48在getService（文件：/// C：/Users/Bhanu/......./lib/angular/angular.js：4571：46）在injectionArgs（文件：/// C： /Users/Bhanu/......./lib/angular/angular.js:4595:68）在調用時（file：/// C：/Users/Bhanu/......./lib/ angular / angular.js：4617：31）錯誤：[$ injector：unpr]未知提供程序：REQ_TOKENProvider <-REQ_TOKEN http://errors.angularjs.org/1.5.1/ $ injector / unpr？p0 = REQ_TOKENProvider％20％ getService（file：/// C：/ Users / Bhanu）中的文件：/// C：/Users/Bhanu/......./lib/angular/angular.js（第4418行）中的3C-％20REQ_TOKEN /......./lib/angular/angular.js:4571:46），位於文件：/// C：/ Users / Bha nu /......./ lib / angular / angular.js：4423：48（位於getService（file：/// C：/Users/Bhanu/......./lib/angular/angular。 js：4571：46）在InjectionArgs（文件：/// C：/Users/Bhanu/......./lib/angular/angular.js：4595：68）在調用（file：/// C ：/ Users / Bhanu /......./ lib / angular / angular.js：4617：31）在C：\\ Users \\ Bhanu ....... \\ js \\ TestingJS \\ controllers \\ appControllerSpec.js中（第43行）

0個通過，1個失敗，總共1個（chutzpah）。

我嘗試了所有可能的解決方案，但沒有一個對我有用。 我通過右鍵單擊“測試”控制器文件並選擇“運行JS測試”選項直接運行測試。

我覺得還有更多關於配置的內容。 請幫我解決一下這個。

Answer 1

這不是將控制器服務傳遞給測試的方式，並且正在使用forEach創建新的var ctrl變量。 此外，每個應用程序只有一個注射器實例。 您必須使用相同的inject(...)獲取控制器和服務實例inject(...)

錯誤

var ctrl = $controller('appController', { $scope: scope, apiServices: apiServices });

對

describe('When using appController ', function () {

  var ctrl, scope, apiServices;

  beforeEach(inject(function ($controller, $rootScope) {
    // Put it here for the sake of organization
    //initialize Angular
    module('app');

    scope = $rootScope.$new();
    // Get controller instance
    ctrl = $controller('appController');
    // Get service instance
    apiServices = $injector.get('apiServices');
  }));

  it('initial value is 5', function () {
    expect(scope.value).toBe(5);
  });

});

Answer 2

根據deferredBootstrapper的文檔，

由於deferredBootstrapper添加到應用程序模塊的常量在單元測試中不可用，因此在全局beforeEach（）中提供它們是有意義的：

因此， appControllerSpec.js應該是

/// <reference path="../../../lib/angular/angular.js" />
/// <reference path="../../../lib/angular-deferred-bootstrap/angular-deferred-bootstrap.js" />
/// <reference path="../../../lib/angular-ui-router/release/angular-ui-router.js" />
/// <reference path="../../../lib/angular-ui-router-title/angular-ui-router-title.js" />
/// <reference path="../../../lib/angular-messages/angular-messages.js" />

/// <reference path="../../modules/appmodule.js" />
/// <reference path="../../site.js" />
/// <reference path="../../factories/sharedfunctions.js" />

/// <reference path="../../services/apiservices.js" />
/// <reference path="../../controllers/appcontroller.js" />
/// <reference path="../../../../node_modules/jasmine/bin/jasmine.js" />
/// <reference path="../../../../node_modules/jasmine/lib/jasmine.js" />
/// <reference path="../../../../node_modules/jasmine-ajax/lib/mock-ajax.js" />
/// <reference path="../../../lib/angular-mocks/angular-mocks.js" />

describe('When using appController ', function () {
  //initialize Angular
  beforeEach(module('app'));   
  var ctrl, scope, apiServices, REQ_TOKEN;

  beforeEach(function () {
      module(function ($provide) {
          $provide.constant('REQ_TOKEN', { token: '/dummyValue' });
      });
  });

  beforeEach(inject(function ($controller, $rootScope, apiServices) {
    scope = $rootScope.$new();
    REQ_TOKEN = $injector.get('REQ_TOKEN');
    apiServices = $injector.get('apiServices');
    var ctrl = $controller('appController', { $scope: scope});
  }));

  it('initial value is 5', function () {
    expect(scope.value).toBe(5);
  });
});