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

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

• javascript
• angularjs
• checkbox
• jasmine
• karma-runner

• 1 Asked a different way - what is the correct way to test a checkbox (that lives in a directive) who's ng-model is linked to a variable in its parent controller? – Kevin Friedheim Commented Apr 2, 2014 at 19:51

4 Answers 4

So the complete answer would be: You need to change 'checked' property, and then trigger click event.

var input = element.find('input');
input.prop('checked',!input.prop('checked'));
// input.triggerHandler('click');
input.triggerHandler('change');

Thanks Kevin, that helped me a lot!

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.

try

expect($scope.$parent.foo).toBe(true);

updating answer:

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

},0);

you want to keep all updates on the scope level and let angular manage the cycles by itself. if updated the property you're off angular's radar.

@egoproxy answer helped me in the end, but I had issues with using a raw dom element. To get around this I used angular.element(domElement) which: wraps a raw DOM element or HTML string as a jQuery element.

var checkbox = angular.element(checkboxElement));

// Click to check it, then Change to propate to ngModel 
checkbox.trigger('click');
checkbox.trigger('change');