Единичное тестирование передачи сигналов директив angularjs

Question

Мне никогда не приходилось проверять свои директивы angularjs раньше, а также директивы, которые я написал для моей текущей компании, использует события для передачи директив директивам и службам.

И поэтому я написал директиву, например. директиву поиска.

<m-search /> 

Эта директива транслирует "searchbox-valuechanged" событие и ключ, теперь я должен писать тесты для него.

'use strict'; 

describe('<m-search>', function() { 

    beforeEach(module('hey.ui')); 
    var rootScope; 
    beforeEach(inject(function($injector) { 
    rootScope = $injector.get('$rootScope'); 
    spyOn(rootScope, '$broadcast'); 
    })); 

    it("should broadcast something", function() { 
    expect(rootScope.$broadcast).toHaveBeenCalledWith('searchbox-valuechanged'); 
    }); 

}); 

Update Об изменении на входе,

<input class="m-input m-input--no-border" type="search" placeholder="Search" 
     ng-model="ctrl.searchValue" 
     ng-model-options="{debounce: 100}" 
     ng-change="ctrl.onChange({search: ctrl.searchValue})"> 

Это вызывает метод в регуляторе директивы

vm.onChange = function (searchValue) { 
    $rootScope.$broadcast('searchbox-valuechanged', {data: searchValue}); 
}; 

Как проверить вещание?

Answer 1

Вот как я бы это сделать ...

describe('m-search directive', function() { 
    var ctrl, // your directive's controller 
     $rootScope; // a reference to $rootScope 

    beforeEach(function() { 
     // bootstrap your module 
     module('hey.ui'); 

     inject(function($compile, _$rootScope_) { 
      $rootScope = _$rootScope_; 
      // see https://docs.angularjs.org/api/ngMock/function/angular.mock.inject#resolving-references-underscore-wrapping- 

      // create an instance of your directive 
      var element = $compile('<m-search></m-search')($rootScope.$new()); 
      $rootScope.$digest(); 

      // get your directive's controller 
      ctrl = element.controller('mSearch'); 
      // see https://docs.angularjs.org/api/ng/function/angular.element#methods 

      // spy on $broadcast 
      spyOn($rootScope, '$broadcast').and.callThrough(); 
     }); 
    }); 

    it('broadcasts searchbox-valuechanged on change', function() { 
     var searchValue = {search: 'search string'}; 
     ctrl.onChange(searchValue); 

     expect($rootScope.$broadcast).toHaveBeenCalledWith(
      'searchbox-valuechanged', {data: searchValue}); 
    }); 
}); 

Вы отметите это не зависит от шаблона вашей директивы на всех. Я не считаю, что функциональность шаблона находится в области модульного тестирования; это лучше всего для тестирования e2e с помощью транспортира. Тестирование модулей - это тестирование API ваших компонентов, чтобы они выполняли то, что они хотели сделать.