unit-testing - 单元测试 Angular 右键单击指令

Question

我想为 AngularJS 指令编写 Jasmine 单元测试。该指令只是将 contextmenu 事件处理函数绑定(bind)到元素:

var myDirectives = angular.module('myApp.directives', []);

myDirectives.directive('myRightClick', ['$parse', function ($parse) {
    return function (scope, element, attrs) {
        var fn = $parse(attrs.myRightClick);
        element.bind('contextmenu', function (event) {
            scope.$apply(function () {
                event.preventDefault();
                fn(scope, { $event: event });
            });
        });
    };
}]);

<div my-right-click="myFunction"></div>

单元测试:

describe('Unit Test Directives', function () {
    var $compile;
    var $rootScope;

    beforeEach(module('myClientApp.directives'));

    beforeEach(inject(function (_$compile_, _$rootScope_) {
        $compile = _$compile_;
        $rootScope = _$rootScope_;
    }));

    it('should wire a contextmenu event binding for the element', function () {
        // Compile a piece of HTML containing the directive
        var element = $compile("<div my-right-click='myFunction'></div>")($rootScope)[0];
        // Check that the compiled element contains the templated content
        expect(element.attributes["my-right-click"].value).toEqual("myFunction");
        expect(element.attributes["oncontextmenu"]).toNotEqual(undefined);
    })
});

单元测试在最后一个断言上失败，因为元素 oncontextmenu属性未定义。但是，该指令正确地调用了应用程序本身中的函数。如何在测试中确定函数已正确绑定(bind)到元素的 oncontextmenu 事件？

编辑

或者，作为一种替代和更好的方法，我如何连接一个事件处理程序并通过测试中的指令调用它，以便我可以检查它是否实际被调用？

Answer 1

我刚刚遇到了完全相同的问题，这是我的解决方案...

使用triggerHandler调度一个事件，然后测试提供的函数是否被调用:

var called;
$rootScope.myFunction = function() {
    called = true;
}

var element = $compile('<div my-right-click="myFunction"></div>')($rootScope);
element.triggerHandler('contextmenu');
expect(called).toEqual(true);

米