AngularJs：在单元测试指令时触发事件以模拟用户操作

I have seen that in order to simulate user action on the DOM generated by a directive, there are two approaches, both trigering an event:

我已经看到,为了模拟用户对由指令生成的DOM的操作,有两种方法,它们都会触发一个事件:

How to trigger ng-change in directive test in AngularJS

如何在AngularJS中的指令测试中触发ng-change

The first approach uses jquery and the second one a function called browserTrigger defined in angular-scenario.js. The second one is supposed to be better as jquery would have a bug on event triggering (which I believe, I am not arguing :) ).

第一种方法使用jquery,第二种方法使用angular-scenario.js中定义的名为browserTrigger的函数。第二个应该是更好的,因为jquery会有一个关于事件触发的错误(我相信,我不是在争论:))。

Using the angular-scenario means e2e testing for me. but I have seen egghead video and he seems to do unit testing. How is this possible ?

使用角度场景意味着对我进行e2e测试。但我看过egghead视频,他似乎在进行单元测试。这怎么可能 ?

I guess he just copied the function ?

我猜他只是复制了这个功能?

I think I am going to test directives as e2e tests, it makes more sense as unit test is more fore pure functions.

我想我将测试指令作为e2e测试,它更有意义,因为单元测试是更纯粹的功能。

Well, I just found that browserTrigger is something internal not supposed to be used directly : https://github.com/angular/angular.js/issues/5178

好吧,我刚发现browserTrigger是内部不应该直接使用的东西:https://github.com/angular/angular.js/issues/5178

Thanks!

2 个解决方案

#1

As of 1.3.15 you can use triggerHandler to trigger a event as shown below,

从1.3.15开始,您可以使用triggerHandler触发事件,如下所示,

it('should click the element',function(){
    element.triggerHandler('click') ;
    expect($scope.clicked).toBe(true);
});

#2

simple and it works, example, in unit test env:

简单,它的工作原理,例如,在单元测试环境中:

spyOn(self, 'updateTransactionPrice');


var el = compile('<form name="form" latest novalidate json-schema="main.schema_discount" json-schema-model="main._data"><input type="text" ng-model="main._data.reverse_discount" ng-class="{ \'form-invalid\': form.reverse_discount.$invalid }" ng-change="main.transactionPrice(form);" name="reverse_discount" class="form-control-basic" placeholder="" ng-disabled="!main.selectedProduct.total_price"></form>')(scope);
el.find('input').triggerHandler('change');

expect(self.updateTransactionPrice).toHaveBeenCalled();

#1