Как написать тест для директивы Angular?

Question

[Денис Денис]

Всем привет.
Пробую писать тесты Karma + Jasmine. Полное понимание еще не пришло.
Подскажите пазязя, как написать тест для директивы

taskApp.directive('backButton', function ($location) {
    return {
        restrict: 'A',
        link: function (scope, element) {
            element.on('click', function () {
                $location.path('/');
		scope.$apply();
            });
        }
    };
});

Или хотя бы в каком направлении копать.
Спасибо

Answer 1

[Сергей Протько]

мокаем сервис $location, и трекаем что наш код вызовет метод path с нужными нам аргументами. Создаем инстанс директивы (сервисом $compile) и кликаем на элемент. Проверяем был ли вызван метод.

Но этот тест можно существенно упростить. У нас уже есть покрытая тестами директива ngClick, потому можно сделать так:

function HomeButtonController($location) {
         var vm = this;
     vm.goHome = function () {
          $location.path('/');
     }
}

function homeButtonDirective() {
    restrict: 'E',
    controller: HomeButtonController,
    controllerAs: 'vm',
    transclude: true,
    template: '<button ng-click="vm.goHome()" ng-transclude></button>'
}

в этом случае мы можем только проверить биндинг (что есть такой метод у контроллера) в рамках статического тестирования (код ревью считай), а логику - можно просто дергать контроллеры. В этом есть очень важное преимущество, так как вопервых мы отвязываем логику приложения от DOM и это позволяет гонять наши тесты просто в консольке без браузера, а случаи с взаимодействием с DOM можно покрыть E2E тестами.

https://github.com/AngularClass/NG6-todomvc-starter/ - примерчик.

Comments

[Денис Денис]

Спасибо большое!

[Денис Денис]

Не каждый так развернуто отвечает. Удачи Вам!

[Сергей Протько]

Денис Денис: рекомендую еще посмотреть на angular 1.5, там много вкусностей которые позволяют чуть упростить код который я привел.

https://toddmotto.com/exploring-the-angular-1-5-co...

ну и в целом рекомендую подумать в сторону компонентного подхода. Сейчас все фреймворки (angular/ember/react) идут именно в этом направлении. Представление UI как композиция stateless UI компонентов.

[Денис Денис]

Спасибо :)

[Алексей]

... stateless UI компонентов

Сергей Протько , подскажите вы имеете ввиду компоненты у которых нет внутренней памяти, просто отображающие какую то внешнюю модель данных?

[Сергей Протько]

Алексей: да. У них может быть свое состояние заточенное под логику представления (типа флагов isEditing и т.д.) но именно забирать данные из сервиса сами они не должны. Им все данные прокидывают внутрь через биндинги и все.

[Алексей]

ясно, спасибо