Sharing Top Content from the Angular-sphere.

Setting input values in AngularJS 1.6 Unit tests

  • Having spent hours yesterday wondering why my unit test would not work, I can confirm that the correct way to enter data into an input field in an AngularJS 1.6 unit test is as follows:

    I can further confirm that this will not be enough if you have set a debounce value in the ngModelOptions for the field.

  • The debounce value defines a delay between input changes and triggering a $digest cycle.
  • However for the purposes of unit testing it also means that the model will not be updated immediately after running the code above.
  • I found the answer in this stackoverflow post: How to test an AngularJS watch using debounce function with Jasmine.
  • Adding the following after setting the field value causes the model updates to be processed immediately:

    I’ve added a working example of this unit test to my angular-testing repository on github.

Having spent hours yesterday wondering why my unit test would not work, I can confirm that the correct way to enter data into an input field in an AngularJS 1.6 unit test is as follows:

@anorakgirl: The answer to my #angular unit testing/debounce problem

Having spent hours yesterday wondering why my unit test would not work, I can confirm that the correct way to enter data into an input field in an AngularJS 1.6 unit test is as follows:

var field = element.find(‘input’); var wrappedField = angular.element(field); wrappedField.val(‘Some text’); wrappedField.triggerHandler(‘change’);

I can further confirm that this will not be enough if you have set a debounce value in the ngModelOptions for the field. The debounce value defines a delay between input changes and triggering a $digest cycle. This can improve performance, as it saves thrashing all the code linked to the two way binding every time a key is pressed. However for the purposes of unit testing it also means that the model will not be updated immediately after running the code above.

I found the answer in this stackoverflow post: How to test an AngularJS watch using debounce function with Jasmine.

Adding the following after setting the field value causes the model updates to be processed immediately:

$timeout.flush();

I’ve added a working example of this unit test to my angular-testing repository on github.

Setting input values in AngularJS 1.6 Unit tests