модульное тестирование директивы angularjs

Я хотел бы начать модульное тестирование для моего проекта angularjs. Это далеко не так просто, я нахожу это действительно трудным. Я использую Карму и Жасмин. Для тестирования моих маршрутов и зависимостей приложений я в порядке. Но как бы вы протестировали такую ​​директиву?

angular.module('person.directives', []).
directive("person", function() {
return {
    restrict: "E",
    templateUrl: "person/views/person.html",
    replace: true,
    scope: {
        myPerson: '='
    },
    link: function (scope, element, attrs) {

    }        
}

});

Как я могу проверить, например, что шаблон был найден?


angularjs karma-runner
person Sam    schedule 16.04.2013    source источник
comment
Есть видео о тестировании директив, может помочь - youtube.com/watch?v=rB5b67Cg6bc   -  person Neil    schedule 16.04.2013

Ответы (1)


arrow_upward
15
arrow_downward

Вот как это сделать https://github.com/vojtajina/ng-directive-testing

По сути, вы используете beforeEach для создания, компиляции и представления элемента и его области действия, затем вы моделируете изменения области действия и обработчики событий и смотрите, код реагирует и обновляет элементы и область действия соответствующим образом. Вот довольно простой пример.

Предположим это:

scope: {
  myPerson: '='
},
link: function(scope, element, attr) {
  element.bind('click', function() {console.log('testes');
    scope.$apply('myPerson = "clicked"');
  });
}

Мы ожидаем, что когда пользователь щелкнет элемент с директивой, свойство myPerson станет clicked. Это поведение нам нужно протестировать. Итак, мы предоставляем скомпилированную директиву (привязанную к элементу) для всех спецификаций:

var elm, $scope;

beforeEach(module('myModule'));

beforeEach(inject(function($rootScope, $compile) {
  $scope = $rootScope.$new();
  elm = angular.element('<div t my-person="outsideModel"></div>');
  $compile(elm)($scope);
}));

Тогда вы просто утверждаете, что:

it('should say hallo to the World', function() {
  expect($scope.outsideModel).toBeUndefined(); // scope starts undefined
  elm.click(); // but on click
  expect($scope.outsideModel).toBe('clicked'); // it become clicked
});

Загрузите здесь. Вам понадобится jQuery для этого теста, чтобы имитировать click().

person Caio Cunha    schedule 16.04.2013
comment
что касается шаблона html, для динамической загрузки в $templateCache. вы можете просто использовать препроцессор кармы html2js, это сводится к добавлению шаблонов '.html' в ваши файлы в файле conf.js, а также preprocessors = { '.html': 'html2js' }; и укажите html как модули в файле тестирования js. - person Lior; 10.05.2013