49

我已经尝试遵循ng-directive-testing repo 的格式来编写我编写的指令。当用户点击一个元素时，该指令基本上呈现一个覆盖。这是指令（简化）：

mod.directive('uiCopyLinkDialog', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var $elm = angular.element(element);
            element.bind('click', function(event) {
                $elm.addClass('test');
            });
        }
    };
});

我正在编写的测试如下所示：

describe('pre-compiled link', function () {

    beforeEach(mocks.inject(function($compile, $rootScope) {
        scope = $rootScope;
        element = angular.element('<span class="foo" ui-copy-link-dialog="url"></span>');
        $compile(element)(scope);
        scope.$digest();
    }));

    it("should change the class when clicked", function () {
        element.click(); // this returns "'undefined' is not a function"
        element[0].click(); // so does this
        $(elm).click(); // this uses jquery and doesn't *seem* to fail
        waits(500); // hack to see if it was a race condition
        expect(elm.className).toContain('test'); // always fails
    });

});

您可以在测试中看到我尝试了几种方法来触发click()链接上的事件，其中大多数都给出了undefined错误。

谁能告诉我我在这里做错了什么？阅读示例这听起来像是正确的语法，但我的测试跑步者（Karma via Grunt）不想打球。

4

6 回答 6

57

您可以使用 triggerHandler，它是 JQLite 的一部分。

我用它来触发指令上的点击事件......

element = angular.element("<div myDirective-on='click'></div>");
compiled = $compile(element)($rootScope);
compiled.triggerHandler('click');

此博客文章中提供了完整示例：http: //sravi-kiran.blogspot.co.nz/2013/12/TriggeringEventsInAngularJsDirectiveTests.html

于 2014-08-14T02:11:36.740 回答
18

所以这被证明是 PhantomJS 的一个问题：当元素实际上不在任何地方的文档上，而只是在内存中时，一些作用于元素的事件似乎不会触发（无论如何，这是我的理论）。为了解决这个问题，我必须使用这个函数来触发click元素上的事件：

define(function () {
    return {
        click: function (el) {
            var ev = document.createEvent("MouseEvent");
            ev.initMouseEvent(
                "click",
                true /* bubble */, true /* cancelable */,
                window, null,
                0, 0, 0, 0, /* coordinates */
                false, false, false, false, /* modifier keys */
                0 /*left*/, null
            );
            el.dispatchEvent(ev);
        }
    };
});

这行得通，尽管其他事情更难：我还想编写一个测试来确保给定的表单input具有焦点，但是使用 PhantomJS 几乎不可能获得这个值，因为我猜如果浏览器没有屏幕上的表示，它就无法使焦点集中. 任何需要这个的人都可以看看 CasperJS，它为其中一些需求提供了一个简单的 API。

于 2013-06-25T09:13:13.333 回答
4

我也遇到过这个问题。对于我编译的任何元素，似乎对我来说 PhantomJS似乎click()根本不起作用。它总是返回未定义的。

虽然不如实际点击好，但您可以在 ng-click 中访问指令的功能，以通过其隔离范围模拟点击：

var element = $compile('<a ng-click="myfunc()">Click me</a>')(scope);
var isolateScope = element.isolateScope();
isolateScope.myfunc();
scope.$digest();

/* check that things changed ... */
于 2014-10-22T03:56:10.887 回答
4

所以我对此的解决方案是将元素实际附加到正文中。由于根本问题是 phantomJs 不会为内存中的元素触发事件，因此附加每个元素以使事件真正起作用似乎更简单。

afterEach(function(){
    $('body').empty();
});

it('should do something when clicked', function(){
    element = $compile('<div my-directive></div>')($scope);
    $('body').append(element);

    // fire all the watches, so the scope expressions will be evaluated
    $rootScope.$digest();

    $(element).find('.my-input').click();
});
于 2016-01-14T23:10:24.820 回答
0

您可以使用angular-test-runner库，测试将如下所示：

const testRunner = require('angular-test-runner');

describe('directive', () => {
    let app;
    const {expectElement, click} = testRunner.actions;

    beforeEach(() => {
        app = testRunner.app(['mod']);
    });

    it("should add class when clicked", function () {
        const html = app.runHtml('<span class="foo" ui-copy-link-dialog="url"></span>');

        html.perform(
            click.in('.foo')
        );

        html.verify(
            expectElement('.foo').toHaveClass('test')
        );
    });

});
于 2017-08-14T09:06:29.113 回答
-1

如何包含angular-scenario然后使用browserTrigger(element, 'click')？

于 2014-04-21T18:00:55.780 回答