单元测试 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');
  });

});

更新输入变化时，

<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});
    });
});

您会注意到这根本不依赖于您的指令模板。我不认为模板功能属于单元测试领域；这是最好留给使用量角器进行端到端测试的东西。单元测试是关于测试组件的 API 以确保它们按照预期的方式工作。

单元测试 angularjs 指令的事件广播

Unit testing angularjs directives's event broadcast

unit-testing

angularjs

karma-jasmine

angular-directive

angular-broadcast