Модуль тестирования фазы конфигурации в AngularJS

Я пытаюсь научиться писать модульные тесты для AngularJS. Я начал с самого начала,

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

Я хочу проверить, что внутри 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('!');
  }
]);

Я думаю, что самый простой способ проверить этот код - ввести mocks для $stateProvider и $locationProvider. Затем выполните фазу конфигурации. После этого укажите, как должны выглядеть $stateProvider и $locationProvider.

Если мое мышление правильное, тогда моя проблема заключается в том, что я не знаю, как вводить эти mocks в модуль и выполнять его фазу конфигурации из теста.

Не могли бы вы показать мне, как проверить этот код?

Ответы

Ответ 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);
    });
});

Ответ 2

Вы можете использовать Jasmine createSpy и createSpyObj для создания макетных сервисов и angular-mocks.js, чтобы ввести их.

Дополнительные инструкции по инъекциям mocks здесь: Внедрение макета в службу AngularJS

В этот тест, который я написал для моей директивы, вы можете увидеть следующее:

  • Строка 9 Включить angular -mock из google cdn
  • Строка 19 и 20 Создайте поддельный объект rootScope
  • Строка 21 и 22 Создание фальшивой службы q
  • Линия 42 Настройте поставщика, чтобы ввести подделки в службу
  • Строка 48 Мгновенное действие службы, которая имеет подделки (эта служба вводится в тестируемую директиву)
  • Строка 53 Вызовите тестируемый метод
  • Строка 55 - 59 Утверждение о состоянии подделок

Ответ 3

Я бы создал factory, который указывает на функцию... эта функция также вызывается внутри функции config. Таким образом вы можете unit test factory:

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 config phase
angular.module('ogApp')
.config([
  '$stateProvider', '$locationProvider',
  function ($stateProvider, $locationProvider) {
    var config = configuration($stateProvider, $locationProvider);
    config.applyConfig();
  }
]);

Вы можете unit test конфигурацию factory и вводить mocks так же, как и с любым другим factory.