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.
One thought on “Setting input values in AngularJS 1.6 Unit tests”