单元测试AngularJS中的配置阶段

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 的 createSpy和createSpyObj创建模拟服务并 angular-mocks.js注入它们。

有关注入模拟的更多说明，请参见：将模拟注入 AngularJS 服务

在我为我的指令编写的测试中，您可以看到以下内容：

• 第 9 行包含来自 google cdn 的 Angular-Mock
• 第 19 行和第 20 行创建一个假 rootScope 对象
• 第 21 和 22 行创建一个假 q 服务
• 第 42 行设置提供商将伪造品注入到服务中
• 第 48 行实例化具有伪造品的服务（该服务被注入到被测试的指令中）
• 第53行调用被测试的方法
• 第 55 - 59 行 断言赝品的状态