Question

我正在尝试学习如何为AngularJS编写单元测试。我从一开始就用

开始

angular.module( ... ).config( ... )

我想测试内部配置是什么。以下是相关部分的外观：

angular.module('ogApp', ['ngCookies','ui.router','ogControllers','ogServices','ogDirectives','ogMetricsData'])

.config([
  '$stateProvider', '$locationProvider',
  function ($stateProvider, $locationProvider) {
    $stateProvider.
      state('login', {
        templateUrl: 'connect.html'
      }).state('addViews', {
        templateUrl: 'add-views.html'
      }).state('dashboard', {
        templateUrl: 'dashboard.html'
      });
    $locationProvider.
      html5Mode(true).
      hashPrefix('!');
  }
]);

我认为测试此代码的最简单方法是为$stateProvider和$locationProvider注入模拟。然后执行配置阶段。之后，断言$stateProvider和$locationProvider应该是什么样子。

如果我的想法是正确的，我的问题是，我不知道如何将这些模拟注入模块并从测试中执行其配置阶段。

你能告诉我如何测试这段代码吗？

Answer 1

以下是如何访问您的提供商进行单元测试：

describe('yourProvider', function () {
    var provider;

    // Get the provider
    beforeEach(module('app', function (yourProvider) {
        // This callback is only called during instantiation
        provider = yourProvider;
    });

    // Kick off the above function
    beforeEach(inject(function () {}));

    it('does its thing', function () {
        expect(provider.someMethod()).toEqual('your results');
    });
});

我还没有想出一个非常简单的方法来注入模拟，但是你可以很容易地监视方法并且足够接近。如果你需要从依赖提供者的$ get（）方法返回一个模拟，你也可以和另一个间谍一起做。此示例说明了返回模拟并设置其他间谍。

describe('yourProvider', function () {
    var dependency, mock, provider;

    beforeEach(module('app', function (dependencyProvider) {
        dependency = dependencyProvider;
        mock = jasmine.createSpyObj('dependency', [
            'methodsGoHere'
        ]);
        spyOn(dependency, 'methodName');
        spyOn(dependency, '$get').andReturn(mock);
    }, function (yourProvider) {
        provider = yourProvider;
    });

    beforeEach(inject(function () {}));

    it('does its thing', function () {
        expect(provider.someMethod()).toEqual('your results');
        expect(dependency.methodName).toHaveBeenCalled();
    });

    it('returns the mock from $get', function () {
        expect(dependency.$get).toBe(mock);
    });
});

Answer 2

您可以使用Jasmine's createSpy和createSpyObj来创建模拟服务，以及 angular-mocks.js注入它们。

有关注入模拟的更多说明：Injecting a mock into an AngularJS service

在this test我为我的指示书写了你可以看到以下内容：

第9行包含来自google cdn的angular-mock
第19行＆amp; 20创建一个假的rootScope对象
第21行＆amp; 22创建假q服务
第42行设置提供程序以将假冒注入服务
第48行实例化具有假货的服务（此服务被注入到被测试的指令中）
第53行调用正在测试的方法
第55行 - 59断言假货的状态

Answer 3

我会创建一个指向函数的工厂......然后在config函数中调用该函数。这样你可以对工厂进行单元测试：

angular.module('ogApp', ['ngCookies','ui.router','ogControllers','ogServices','ogDirectives','ogMetricsData']);

// Configuration factory for unit testing
angular.module('ogApp')
.factory('configuration', configuration);

configuration.$inject = ['$stateProvider', '$locationProvider'];

function configuration($stateProvider, $locationProvider) {
  return {
    applyConfig: function () {
      $stateProvider.
        state('login', {
          templateUrl: 'connect.html'
        }).state('addViews', {
          templateUrl: 'add-views.html'
        }).state('dashboard', {
          templateUrl: 'dashboard.html'
        });
      $locationProvider.
        html5Mode(true).
        hashPrefix('!');
    };
}

// Call above configuration function from Angular's config phase
angular.module('ogApp')
.config([
  '$stateProvider', '$locationProvider',
  function ($stateProvider, $locationProvider) {
    var config = configuration($stateProvider, $locationProvider);
    config.applyConfig();
  }
]);

您可以对配置工厂进行单元测试，并像对待任何其他工厂一样注入模拟。

单元测试AngularJS中的配置阶段

3 个答案: