Kevin Friedheim Kevin Friedheim - 5 months ago 35
AngularJS Question

testing an angular checkbox using in jasmin

My situation is as follows:

directive

scope: { foo:'=' },
template: '<input type="checkbox" ng-model="foo"/>'


parent controller

$scope.foo = false;


jasmine test

var cb = iElement.find('input');

$timeout(function() { // using $timeout to ensure $digest() isn't the issue.
cb.prop('checked',!cb.prop('checked'))
},0);

expect(cb.prop('checked')).toBe(true); // passes

expect($scope.foo).toBe(true); // doesn't pass


My question: why doesn't $scope.foo get updated when I issue the prop('checked') even though the DOM does (as I've verified after inspecting it).

Here is a jsbin that roughly demonstrates the problem http://jsbin.com/kapifezi/2/edit

Answer

After further investigation - it looks like angular will add a click listener when you add an ng-model to something like a checkbox.

So it would seem that the correct method of testing this would be to issue a click event on the DOM object from within the jasmine test.