使用Jasmine和Chutzpah在AngularJS中进行单元测试

时间：2016-03-30 19:28:03

标签： angularjs unit-testing jasmine chutzpah

我正在尝试为在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＆lt; - REQ_TOKEN   http://errors.angularjs.org/1.5.1/ $注射器/ unpr？P0 = REQ_TOKENProvider％20％3 C-％20REQ_TOKEN   在file：/// C：/Users/Bhanu/......./lib/angular/angular.js（第4418行）         在getService   （file：/// C：/Users/Bhanu/......./lib/angular/angular.js：4571：46）at at   file：/// C：/Users/Bhanu/......./lib/angular/angular.js：4423：48 at   的getService   （file：/// C：/Users/Bhanu/......./lib/angular/angular.js：4571：46）at at   injectionArgs   （file：/// C：/Users/Bhanu/......./lib/angular/angular.js：4595：68）at at   invoke（file：/// C：/Users/Bhanu/......./lib/angular/angular.js：4617：31）     错误：[$ injector：unpr]未知提供者：REQ_TOKENProvider＆lt; -   REQ_TOKEN   http://errors.angularjs.org/1.5.1/ $注射器/ unpr？P0 = REQ_TOKENProvider％20％3 C-％20REQ_TOKEN   在file：/// C：/Users/Bhanu/......./lib/angular/angular.js（第4418行）         在getService   （file：/// C：/Users/Bhanu/......./lib/angular/angular.js：4571：46）at at   file：/// C：/Users/Bhanu/......./lib/angular/angular.js：4423：48 at   的getService   （file：/// C：/Users/Bhanu/......./lib/angular/angular.js：4571：46）at at   injectionArgs   （file：/// C：/Users/Bhanu/......./lib/angular/angular.js：4595：68）at at   invoke（file：/// C：/Users/Bhanu/......./lib/angular/angular.js：4617：31）   在   C：\用户\巴努•....... \ JS \ TestingJS \控制器\ appControllerSpec.js   （第43行）

     

0通过，1次失败，1次（chutzpah）。

我已经尝试了所有可能的解决方案，但没有一个对我有效。我通过右键单击Test控制器文件并选择“Run JS Tests”选项直接运行测试。

我觉得有更多的配置。请帮帮我。

2 个答案:

答案 0 :(得分：1)

这不是您将控制器服务传递给测试的方式，而是使用forEach创建新的var ctrl变量。此外，每个应用程序都有一个注射器实例。您必须使用相同的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);
  });

});

答案 1 :(得分：0)

根据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);
  });
});
相关问题
最新问题