单元测试的角度右键指令 [英] Unit test angular right-click directive

问题描述

我想写一个AngularJS指令茉莉花单元测试。该指令只需绑定一个contextmenu事件处理函数的元素：

I want to write a Jasmine unit test for an AngularJS directive. The directive simply binds a contextmenu event handler function to the element:

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 属性未定义。然而，该指令正确地调用应用程序本身的功能。我怎样才能在测试确定一个功能已正确绑定到元素的oncontextmenu事件？

The unit test fails on the last assertion, because the element oncontextmenu attribute is undefined. However, the directive correctly invokes the function in the application itself. How can I determine in a test that a function has been correctly bound to the element's oncontextmenu event?

修改

或者，作为一种替代和更好的方法，我怎么能线了事件处理程序，并通过在测试指令调用它，这样我可以检查它实际上被调用？

Or, as an alternative and better approach, how can I wire up an event handler and invoke it via the directive in the test so that I can check that it actually gets called?

推荐答案

下面的JavaScript函数将火传递给它的JQueryLite元素contextmenu事件：

The following javascript function will fire the contextmenu event on the JQueryLite element passed to it:

//simulate user right-clicking on the element and check handler gets called
function fireContextMenuEvent(element) {
    if (document.createEvent) {
        var ev = document.createEvent('HTMLEvents');
        ev.initEvent('contextmenu', true, false);
        element.dispatchEvent(ev);
    } else { // Internet Explorer
        element.fireEvent('oncontextmenu');
    }
}

这篇关于单元测试的角度右键指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！