title: Writing unit test for AngularJS directive with Jasmine?
body: <p>I am new to the world of JavaScript and Angular, and I am using Karma and Jasmine to test code. I am having a difficult time figuring out how to test angular directive.</p>
  
  <p>The directive validates the date of birth to validate users age is above 55. Here's a simplified version of the code:</p>
  
  <p>Here is the (relevant) html:</p>
  
  <pre><code>&lt;div ng-controller="datepickerCtrl"&gt;
  &lt;input type="text" dobpicker-popup="{{format}}" name="dob" ng-model="dob" 
  is-open="opened" dobpicker-options="dateOptions" min-date="minDate" 
  required="true" dobcheck/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript code (The date format used is dd/MM/yyyy)</p>
  
  <pre><code>Module.directive('dobcheck', function($log) {
      return {
          require: 'ngModel',
          scope : true,
          link : function(scope, element, attrs, ctrl)
          {
              ctrl.$parsers.unshift(function(value) {
  
                  if(evaluateAge(value) &gt; 55)
                  {
                      ctrl.$setValidity('dobcheck', true);
                      return value;
                  }
                  else
                  {
                      ctrl.$setValidity('dobcheck', false);
                      return value;
                  }
              });
          }
      }
  });
  </code></pre>
  
  <p>This block is used to generate the current age</p>
  
  <pre><code>function evaluateAge(dob)
  {
      var today = new Date();
      var bDate = new Date(dob);
      var age = today.getFullYear() - bDate.getFullYear();
      var months = today.getMonth() - bDate.getMonth();
  
      if (months &lt; 0 || (months === 0 &amp;&amp; today.getDate() &lt; bDate.getDate()))
      {
          age--;
      }
  
      return age;
  }
  </code></pre>
  
  <p>Unit test used to test scenario</p>
  
  <pre><code>'use strict';
  
  describe('Age Validation directive', function() {
    var $scope, form;
  
    beforeEach(module('Regux'));
  
    beforeEach(inject(function($compile, $rootScope) {
    $scope = $rootScope;
  
      var element = angular.element(
        '&lt;form name="form"&gt;' +
        '&lt;div&gt;' +
          '&lt;input ng-model="model.dob" name="dob" 
         required="true" dobcheck="model.dob"/&gt;' +
        '&lt;/div&gt;'+
        '&lt;/form&gt;');
  
      $scope.model = { dob: null }  
      $compile(element)($scope);
      form = $scope.form;
    }));
  
    describe('validate Date of Birth ', function() {
  
    it('Age over 55', function() {
      form.dob.$setViewValue('04/05/1955');
      $scope.$digest();
      expect($scope.model.dob).toEqual('04/05/1955');
      expect($scope.model.dob).toBe('04/05/1955');
      expect(form.dob.$valid).toBe(true);
      });
    });
  });
  </code></pre>
  
  <p>Error displayed </p>
  
  <pre><code>Age over 55 FAILED -TypeError: Cannot read property '$valid' of undefined at  null.&lt;anonymous&gt;`
  </code></pre>
  
  <p>Any suggestion on how how I can fix this error and any best practices on to test a AngularJS directive like this?</p>
  
  <p>Thanks </p>