blocks|key|183535|text|从你的解释性评论中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|183536|在指令的测试中，我想做的就是检查当用户更改输入时是否调用了|183537|。|blockquote|183538|183539|183540|ng-change指示的表达式是否正确求值实际上是ngModel指令的责任，所以我不确定是否会以这种方式测试它；相反，我相信ngModel和ngChange指令已经正确地实现和测试，可以调用指定的函数，而只是测试调用函数本身是否会以正确的方式影响指令。可以使用端到端或集成测试来处理完全使用的场景。|offset|length|style|CODE|183541|也就是说，您可以获取驱动ngModel更改回调的ngModelController实例，并自己设置视图的值：|183542|it('trigger+doIt',+function()+{
++var+ngModelController+=+el.find('input').controller('ngModel');
++ngModelController.$setViewValue('test');
++expect($scope.youDidIt).toBe(true);
});|code-block|syntax|javascript|183543|然而，正如我所说的，我觉得这对ngModel的职责来说太过深入了，打破了你用自然可组合的指令得到的黑盒。|183544|示例：http://plnkr.co/edit/BaWpxLuMh3HvivPUbrsd?p=preview|183545|183546|更新|BOLD|183547|在查看了AngularJS源代码后，我发现以下代码也适用：|183548|it('trigger+doIt',+function()+{
++el.find('input').trigger('input');
++expect($scope.youDidIt).toBe(true);
});|183549|在某些浏览器中，这一事件看起来是不同的；input似乎适用于Chrome。|183550|示例：http://plnkr.co/edit/rbZ5OnBtKMzdpmPkmn2B?p=preview|183551|下面是relevant+AngularJS+code，它使用$sniffer服务来确定要触发的事件：|183552|changeInputValueTo+=+function(value)+{
++inputElm.val(value);
++browserTrigger(inputElm,+$sniffer.hasEvent('input')+?+'input'+:+'change');
};|183553|即使这样，我也不确定我是否会以这种方式测试一个指令。|183554|entityMap|0|LINK|mutability|MUTABLE|url|http://plnkr.co/edit/BaWpxLuMh3HvivPUbrsd?p=preview|1|http://plnkr.co/edit/rbZ5OnBtKMzdpmPkmn2B?p=preview|2|https://github.com/angular/angular.js/blob/724819e3cfd8aeda1f724fb527db2b57494be9b7/test/ng/directive/inputSpec.js#L327-330^0|0|0|0|0|0|0|9|P|7|1Q|7|1Y|8|0|C|7|O|H|0|0|F|7|0|3|1F|0|0|0|0|2|0|0|0|K|5|0|3|1F|1|0|U|8|3|N|2|0|0|0^^$0|@$1|2|3|4|5|6|7|1T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1U|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1V|8|@]|9|@]|A|$]]|$1|G|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|1X|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|1Y|8|@$K|1Z|L|20|M|N]|$K|21|L|22|M|N]|$K|23|L|24|M|N]|$K|25|L|26|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|27|8|@$K|28|L|29|M|N]|$K|2A|L|2B|M|N]]|9|@]|A|$]]|$1|Q|3|R|5|S|7|2C|8|@]|9|@]|A|$T|U]]|$1|V|3|W|5|6|7|2D|8|@$K|2E|L|2F|M|N]]|9|@]|A|$]]|$1|X|3|Y|5|6|7|2G|8|@]|9|@$K|2H|L|2I|1|2J]]|A|$]]|$1|Z|3|-4|5|6|7|2K|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|2L|8|@$K|2M|L|2N|M|12]]|9|@]|A|$]]|$1|13|3|14|5|6|7|2O|8|@]|9|@]|A|$]]|$1|15|3|16|5|S|7|2P|8|@]|9|@]|A|$T|U]]|$1|17|3|18|5|6|7|2Q|8|@$K|2R|L|2S|M|N]]|9|@]|A|$]]|$1|19|3|1A|5|6|7|2T|8|@]|9|@$K|2U|L|2V|1|2W]]|A|$]]|$1|1B|3|1C|5|6|7|2X|8|@$K|2Y|L|2Z|M|N]]|9|@$K|30|L|31|1|32]]|A|$]]|$1|1D|3|1E|5|S|7|33|8|@]|9|@]|A|$T|U]]|$1|1F|3|1G|5|6|7|34|8|@]|9|@]|A|$]]|$1|1H|3|-4|5|6|7|35|8|@]|9|@]|A|$]]]|1I|$1J|$5|1K|1L|1M|A|$1N|1O]]|1P|$5|1K|1L|1M|A|$1N|1Q]]|1R|$5|1K|1L|1M|A|$1N|1S]]]]

From your explanatory comment:

<blockquote>
 All I want to do in directive's test is to check that <code>doIt</code> is called when user changes the input.
</blockquote>

Whether or not the expression indicated by <code>ng-change</code> is correctly evaluated or not is really the responsibility of the <code>ngModel</code> directive, so I'm not sure I'd test it in this way; instead, I'd trust that the <code>ngModel</code> and <code>ngChange</code> directives have been correctly implemented and tested to call the function specified, and just test that calling the function itself affects the directive in the correct manner. An end-to-end or integration test could be used to handle the full-use scenario.

That said, you can get hold of the <code>ngModelController</code> instance that drives the <code>ngModel</code> change callback and set the view value yourself:



<pre class="lang-javascript prettyprint-override"><code>it('trigger doIt', function() {
 var ngModelController = el.find('input').controller('ngModel');
 ngModelController.$setViewValue('test');
 expect($scope.youDidIt).toBe(true);
});
</code></pre>

As I said, though, I feel like this is reaching too far into <code>ngModel</code>'s responsibilities, breaking the black-boxing you get with naturally composable directives.

Example: <a href="http://plnkr.co/edit/BaWpxLuMh3HvivPUbrsd?p=preview" rel="noreferrer">http://plnkr.co/edit/BaWpxLuMh3HvivPUbrsd?p=preview</a>

<hr>

[Update]

After looking around at the AngularJS source, I found that the following also works:

<pre class="lang-javascript prettyprint-override"><code>it('trigger doIt', function() {
 el.find('input').trigger('input');
 expect($scope.youDidIt).toBe(true);
});
</code></pre>

It looks like the event is different in some browsers; <code>input</code> seems to work for Chrome.

Example: <a href="http://plnkr.co/edit/rbZ5OnBtKMzdpmPkmn2B?p=preview" rel="noreferrer">http://plnkr.co/edit/rbZ5OnBtKMzdpmPkmn2B?p=preview</a>

Here is the <a href="https://github.com/angular/angular.js/blob/724819e3cfd8aeda1f724fb527db2b57494be9b7/test/ng/directive/inputSpec.js#L327-330" rel="noreferrer">relevant AngularJS code</a>, which uses the <code>$sniffer</code> service to figure out which event to trigger:

<pre class="lang-javascript prettyprint-override"><code>changeInputValueTo = function(value) {
 inputElm.val(value);
 browserTrigger(inputElm, $sniffer.hasEvent('input') ? 'input' : 'change');
};
</code></pre>

Even having this, I'm not sure I'd test a directive in this way.

blocks|key|3009517|text|我花了很长时间才找到这条简单的线。只是为了把它保存在这里。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3009518|如何使用Karma从html-select中选择值，从而使ng-change函数正常工作？|3009519|HTML：|3009520|控制器或指令JS：|3009521|++$scope.itemTypes+=+[{name:+'Some+name+1',+value:+'value_1'},+{name:+'Some+name+2',+value:+'value_2'}]

++$scope.itemTypeSelected+=+function+()+{
++++console.log("Yesssa+!!!!");
++};|code-block|syntax|javascript|3009522|Karma测试片段：|3009523|++angular.element(element.find("#selectedItemType")[0]).val('value_1').change();
++console.log("selected+model.selectedItemType",+element.isolateScope().model.selectedItemType);|3009524|控制台：|3009525|'Yesssa+!!!!'
'selected+model.selectedItemType',+'value_1'|3009526|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|13|8|@]|9|@]|A|$]]|$1|S|3|T|5|J|7|14|8|@]|9|@]|A|$K|L]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

I was looking for this simple line for long hours.
Just to save that in here.

How to select value from html-select, using Karma, and so get ng-change function working?

HTML:
 
 

Controller or directive JS:

<pre><code> $scope.itemTypes = [{name: 'Some name 1', value: 'value_1'}, {name: 'Some name 2', value: 'value_2'}]

 $scope.itemTypeSelected = function () {
 console.log("Yesssa !!!!");
 };
</code></pre>

Karma test fragment:

<pre><code> angular.element(element.find("#selectedItemType")[0]).val('value_1').change();
 console.log("selected model.selectedItemType", element.isolateScope().model.selectedItemType);
</code></pre>

Console:

<pre><code>'Yesssa !!!!'
'selected model.selectedItemType', 'value_1'
</code></pre>

blocks|key|185455|text|我在谷歌上搜索了"angular+directive+trigger+ng-change“，这个StackOverflow问题是我最接近有用的问题，所以我会回答”如何在指令中触发ng-change“，因为其他人肯定会出现在这个页面上，而我不知道如何提供这些信息。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|185456|在指令的link函数中，这将在您的元素上触发ng-change函数：|185457|element.controller('ngModel').$viewChangeListeners[0]();|code-block|syntax|javascript|185458|element.trigger("change")和element.trigger("input")对我不起作用，我在网上能找到的其他东西也不起作用。|offset|length|style|CODE|185459|例如，在模糊上触发ng-change：|185460|wpModule.directive('triggerChangeOnBlur',+function+()+{
++++return+{
++++++++restrict:+'A',
++++++++link:+function+(scope,+element,+attrs)+{
++++++++++++element.on('blur',+function+()+{
++++++++++++++++element.controller('ngModel').$viewChangeListeners[0]();
++++++++++++});
++++++++}
++++};
}]);|185461|很抱歉，这没有直接回答OP的问题。我将非常乐意接受一些关于在哪里以及如何分享这些信息的合理建议。|185462|entityMap^0|0|0|0|0|P|Q|O|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@$K|10|L|11|M|N]|$K|12|L|13|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|14|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|15|8|@]|9|@]|A|$G|H]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|V|$]]

I googled "angular directive trigger ng-change" and this StackOverflow question was the closest I got to anything useful, so I'll answer "How to trigger ng-change in a directive", since others are bound to land on this page, and I don't know how else to provide this information.

Inside the link function on the directive, this will trigger the ng-change function on your element:

<pre><code>element.controller('ngModel').$viewChangeListeners[0]();
</code></pre>

<code>element.trigger("change")</code> and <code>element.trigger("input")</code> did not work for me, neither did anything else I could find online.

As an example, triggering the ng-change on blur:

<pre><code>wpModule.directive('triggerChangeOnBlur', function () {
 return {
 restrict: 'A',
 link: function (scope, element, attrs) {
 element.on('blur', function () {
 element.controller('ngModel').$viewChangeListeners[0]();
 });
 }
 };
}]);
</code></pre>

I'm sorry that this is not directly answering OP's question. I will be more than happy to take some sound advice on where and how to share this information.

blocks|key|3009564|text|很简单，它可以在你的单元测试环境中工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3009565|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();|code-block|syntax|javascript|3009566|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|$]]

simple and it works
in your unit test env:

<pre><code>spyOn(self, 'updateTransactionPrice');


var el = compile('&lt;form name="form" latest novalidate json-schema="main.schema_discount" json-schema-model="main._data"&gt;&lt;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"&gt;&lt;/form&gt;')(scope);
el.find('input').triggerHandler('change');

expect(self.updateTransactionPrice).toHaveBeenCalled();
</code></pre>

blocks|key|3009568|text|一直在尝试让它工作，但每次尝试都失败了。最后得出的结论是，我的ng-model-options在onUpdate上设置了去抖动，这是问题所在。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3009569|如果你有一个去抖动，确保你用$timeout服务刷新。在angular+mock中，此超时服务已扩展为具有刷新操作，该操作处理所有未完成的请求/操作。|3009570|++++var+tobetriggered+=+angular.element(element[0].querySelector('.js-triggervalue'));
++++tobetriggered.val('value');
++++tobetriggered.trigger('change');
++++$timeout.flush();|code-block|syntax|javascript|3009571|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Have been trying to get this to work, but failed on every attempt. Finally concluded that my ng-model-options with a debounce setting on the onUpdate, was the problem. 

If you have a debounce, make sure that you flush with the $timeout service. In angular mock, this timeout service has been extended with a flush operation, which handles all unfulfilled requests/actions.

<pre><code> var tobetriggered = angular.element(element[0].querySelector('.js-triggervalue'));
 tobetriggered.val('value');
 tobetriggered.trigger('change');
 $timeout.flush();
</code></pre>

I have the following AngularJS directive that creates an <code>input</code> element. Input has <code>ng-change</code> attribute that runs <code>doIt()</code> function. In my directive's unit test I want to check if <code>doIt</code> function is called when users changes the input. But the test does not pass. Though it works in the browser when testing manually.

Directive:

<pre><code>...
template: "&lt;input ng-model='myModel' ng-change='doIt()' type='text'&gt;" 
</code></pre>

Test:

<pre><code>el.find('input').trigger('change') // Dos not trigger ng-change
</code></pre>

Live demo (ng-change): <a href="http://plnkr.co/edit/0yaUP6IQk7EIneRmphbW?p=preview" rel="noreferrer">http://plnkr.co/edit/0yaUP6IQk7EIneRmphbW?p=preview</a>

<hr>

Now, the test passes if I manually bind <code>change</code> event instead of using <code>ng-change</code> attribute.

<pre><code>template: "&lt;input ng-model='myModel' type='text'&gt;",
link: function(scope, element, attrs) {
 element.bind('change', function(event) {
 scope.doIt();
 });
}
</code></pre>

Live demo (manual binding): <a href="http://plnkr.co/edit/dizuRaTFn4Ay1t41jL1K?p=preview" rel="noreferrer">http://plnkr.co/edit/dizuRaTFn4Ay1t41jL1K?p=preview</a>

<hr>

Is there a way to use <code>ng-change</code> and make it testable? Thank you.

How to trigger ng-change in directive test in AngularJS

单元测试

集成测试

我有以下创建input元素的AngularJS指令。输入具有运行doIt()函数的ng-change属性。在我的指令的单元测试中，我想检查当用户更改输入时是否调用了doIt函数。但是测试没有通过。尽管它在浏览器中手动测试时可以正常工作。指令：...template: "<input ng-model='myModel'...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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