title: Unit test angular directive updating the ngModel
body: <p>I'm trying to test a directive that I've written to validate an input and I have some trouble.
  The input managed by the directive should contain a valid hex color value and if the user modifies it with an invalid value, I want to cancel this modification. My directive is the following and is working as expected:</p>
  
  <pre><code>module.directive('colorValidate', function() {
      return {
          restrict: 'A',
          scope: {
              color: '=ngModel'
          },
          link: function(scope, element) {
              var previousValue = '#ffffff';
              //pattern that accept #ff0000 or #f00
              var colorPattern = new RegExp('^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$');
              element.on('focus', function() {
                  previousValue = scope.color;
              });
              element.on('blur', function() {
                  if (!colorPattern.test(scope.color)) {
                      scope.$apply(function() {
                          scope.color = previousValue;
                      });
                  }
                  else {
                      scope.$apply(function() {
                          scope.color = scope.color.toLowerCase();
                      });
                  }
              });
          }
      };
  });
  </code></pre>
  
  <p>and here is a example of input using this directive:</p>
  
  <pre><code>&lt;input color-validate type="text" ng-model="color.color"/&gt;
  </code></pre>
  
  <p>First question: Is this way of accessing and modifying the ngModel of the element correct?</p>
  
  <p>Then my main problem is the testing part. Here are two simple tests that I wrote and that are not really working:</p>
  
  <pre><code>describe('colorValidate directive', function() {
      var scope,
          elem,
          compiled,
          html;
  
      beforeEach(function() {
          html = '&lt;input color-validate type="text" ng-model="color.color"/&gt;';
  
          inject(function($compile, $rootScope) {
              scope = $rootScope.$new();
              scope.color = {color: '#aaaaaa'};
              elem = angular.element(html);
              compiled = $compile(elem);
              compiled(scope);
              scope.$digest();
          });
      });
  
      it('should permit valid 6-chars color value', function() {
          elem.triggerHandler('focus');
          elem.val('#FF0000');
          elem.triggerHandler('blur');
          scope.$digest();
          expect(elem.val()).toBe('#FF0000');
      });
  
      it('should reject non valid color values', function() {
          elem.triggerHandler('focus');
          elem.val('#F00F');
          scope.$digest();
          elem.triggerHandler('blur');
          expect(elem.val()).toBe('#aaaaaa');
      });
  });
  </code></pre>
  
  <p>The first test succeed and the second failed because the tested value is '#F00F' instead of '#aaaaaa'. Basically, none of my tests are actually modifying the ngModel value handled by the directive...</p>