blocks|key|294648|text|因此，事实证明这是PhantomJS的一个问题:当元素实际上不在文档中，而只是在内存中时，一些作用于元素的事件似乎不会触发(无论如何，这是我的理论)。为了解决这个问题，我不得不使用这个函数来触发元素上的click事件：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|294649|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);
++++++++}
++++};
});|code-block|syntax|javascript|294650|这很有效，尽管其他事情比较困难:我还想编写一个测试，以确保给定的表单input具有焦点，但是使用PhantomJS几乎不可能获得这个值，因为我猜如果没有屏幕表示，浏览器就无法获得焦点。任何需要它的人都可以看看CasperJS，它为其中的一些需求提供了一个简单的应用程序接口。|294651|entityMap^0|2T|5|0|0|Y|5|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

So this turned out to be a problem with PhantomJS: some events that act on elements don't seem to fire when the elements aren't actually on a document anywhere, but just in memory (that's my theory, anyway). To work around this I had to use this function to trigger <code>click</code> events on elements:

<pre><code>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);
 }
 };
});
</code></pre>

This worked, although other things were harder: I also wanted to write a test that ensures a given form <code>input</code> has focus, but getting this value was almost impossible using PhantomJS since I guess the browser can't make something focused if it has no onscreen representation. Anyone needing this could have a look at CasperJS which offers a simple API for some of these requirements.

blocks|key|77581|text|先包含angular-scenario，然后再使用browserTrigger(element,+'click')怎么样？|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|77582|entityMap^0|3|G|P|W|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

How about including <code>angular-scenario</code> and then using <code>browserTrigger(element, 'click')</code>?

blocks|key|294722|text|您可以使用JQLite的一部分triggerHandler。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|294723|我用它在一个指令上触发了一个单击事件...|294724|element+=+angular.element("<div+myDirective-on='click'></div>");
compiled+=+$compile(element)($rootScope);
compiled.triggerHandler('click');|code-block|syntax|javascript|294725|在这篇博客文章中提供了完整的例子：http://sravi-kiran.blogspot.co.nz/2013/12/TriggeringEventsInAngularJsDirectiveTests.html|offset|length|294726|entityMap|0|LINK|mutability|MUTABLE|url|http://sravi-kiran.blogspot.co.nz/2013/12/TriggeringEventsInAngularJsDirectiveTests.html^0|0|0|0|H|2G|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

You can use triggerHandler, part of JQLite.

I used this to trigger a click event on a directive...

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

Full example available on this blog post:
<a href="http://sravi-kiran.blogspot.co.nz/2013/12/TriggeringEventsInAngularJsDirectiveTests.html">http://sravi-kiran.blogspot.co.nz/2013/12/TriggeringEventsInAngularJsDirectiveTests.html</a>

blocks|key|77673|text|我在这方面也遇到了麻烦。对于我编译的任何元素，对于PhantomJS，click()似乎根本不起作用。它总是返回未定义的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|77674|虽然不像实际的click那样好，但您可以在ng-click中访问该指令的函数，以通过其isolate作用域模拟单击：|77675|var+element+=+$compile('<a+ng-click="myfunc()">Click+me</a>')(scope);
var+isolateScope+=+element.isolateScope();
isolateScope.myfunc();
scope.$digest();

/*+check+that+things+changed+...+*/|code-block|syntax|javascript|77676|entityMap^0|Z|7|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

I've had trouble with this also. It seems as though <code>click()</code> doesn't seem to work at all for me with PhantomJS for any element I compile. It always returns undefined.

Though not really as good as an actual click, you could access the directive's function in ng-click to simulate a click through it's isolate scope:

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

/* check that things changed ... */
</code></pre>

blocks|key|77713|text|因此，我的解决方案是将元素实际附加到主体中。由于根本问题是phantomJs不会为内存中的元素触发事件，因此添加每个元素似乎更简单，这样事件才能真正工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|77714|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();
});|code-block|syntax|javascript|77715|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

So my solution to this was to actually append the element to the body. Since the root problem is that phantomJs doesn't fire events for elements in memory, it seemed simpler to append each element so that the events work for real.

<pre><code>afterEach(function(){
 $('body').empty();
});

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

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

 $(element).find('.my-input').click();
});
</code></pre>

blocks|key|294855|text|您可以使用angular-test-runner库，测试将如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|294856|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">');

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

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

});|code-block|syntax|javascript|294857|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/Pragmatists/angular-test-runner^0|5|J|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

You can use <a href="https://github.com/Pragmatists/angular-test-runner" rel="nofollow noreferrer">angular-test-runner</a> library and test will look like:

<pre><code>const testRunner = require('angular-test-runner');

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

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

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

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

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

});
</code></pre>

I've tried following the format of the <a href="https://github.com/vojtajina/ng-directive-testing/blob/master/test/tabsSpec.js">ng-directive-testing</a> repo for a directive I've written. The directive basically renders an overlay when the user clicks on an element. Here's the directive (simplified):

<pre class="lang-js prettyprint-override"><code>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');
 });
 }
 };
});
</code></pre>

The test I'm writing looks like this:

<pre class="lang-js prettyprint-override"><code>describe('pre-compiled link', function () {

 beforeEach(mocks.inject(function($compile, $rootScope) {
 scope = $rootScope;
 element = angular.element('&lt;span class="foo" ui-copy-link-dialog="url"&gt;&lt;/span&gt;');
 $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
 });

});
</code></pre>

You can see in the test that I try several ways to trigger the <code>click()</code> event on the link, with most of them giving an <code>undefined</code> error. 

Can anyone tell me what I'm doing wrong here? Reading the examples this sounds like it's the correct syntax but my test runner (Karma via Grunt) doesn't want to play ball.

How can I simulate a click event in my AngularJS directive test?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

对于我编写的指令，我尝试遵循代码库的格式。该指令基本上是在用户单击某个元素时呈现一个覆盖。以下是指令(简化)：mod.directive('uiCopyLinkDialog', function(){    return {        restrict: 'A',        link: function(sco...

问如何在AngularJS指令测试中模拟单击事件？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在AngularJS指令测试中模拟单击事件？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在AngularJS指令测试中模拟单击事件？
EN