Angular.js: testing click on directive

Question

I have an Angular.js directive which I am trying to write a test for. Basically, it is a wrapper for a checkbox, such as that when the wrapper is clicked, the checkbox's state is changed. The problem is that I don't know how to replicate this behaviour inside a unit test. What I have for a test is this:

describe('Checkbox field', function() { var elm, scope; beforeEach(module('MyApp')); beforeEach(module('app/partials/checkboxfield.html')); beforeEach(inject(function($rootScope, $compile) { elm = angular.element( '<checkboxfield data="data" model="value"></checkboxfield>'); scope = $rootScope; scope.value = false; $compile(elm)(scope); scope.$digest(); })); it('should change checkbox value on wrapper click', inject(function($compile, $rootScope) { var wrapper = elm.find('div').eq(0); //var wrapper = $('div.checkbox'); wrapper.click(); expect(checkbox.prop('checked')).toBe(true); expect(scope.value).toBe(true); wrapper.click(); expect(checkbox.prop('checked')).toBe(false); expect(scope.value).toBe(false); })); }); 

Angular.js comes with jqLite, so when I run "elm.find('div').eq(0)", I don't get the click() method. I would simply use jQuery instead but every time I use one of its selectors, no items are returned; I always get $(whatever).length === 0.

Just to clarify, I am using karma-ng-html2js-preprocessor as seen here.

Answer 1

You should test the value of your scope variable instead of the element attribute value. Because if everything went well then the value of the scope variable should have changed.

For example, the following test passes:

describe('Checkbox field', function () { var $scope, elm; beforeEach(module('myApp')) beforeEach(inject(function ($rootScope, $compile) { $scope = $rootScope.$new(); $scope.value = true; $scope.data = "Click on me"; elm = $compile('<checkboxfield data="data" model="value"></checkboxfield>')($scope); })) it('should change checkbox value on wrapper click', function () { expect($scope.value).toBe(true); elm.click(); expect($scope.value).toBe(false); elm.click(); expect($scope.value).toBe(true); }) })