title: Angular.js: testing click on directive
body: <p>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:</p>
  
  <pre><code>describe('Checkbox field', function() {
  var elm, scope;
  
      beforeEach(module('MyApp'));
      beforeEach(module('app/partials/checkboxfield.html'));
  
      beforeEach(inject(function($rootScope, $compile) {
          elm = angular.element(
            '&lt;checkboxfield data="data" model="value"&gt;&lt;/checkboxfield&gt;');
          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);
      }));
  });
  </code></pre>
  
  <p>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.</p>
  
  <p>Just to clarify, I am using <a href="https://github.com/karma-runner/karma-ng-html2js-preprocessor" rel="nofollow">karma-ng-html2js-preprocessor</a> as seen <a href="http://newtriks.com/2013/04/26/how-to-test-an-angularjs-directive/" rel="nofollow">here</a>.</p>