Comment puis-je simuler le flou lors de l'essai de directives angularjs?

Le problème

Je suis en train de tester certaines directives (code pour les deux ci-dessous). L'un d'eux est un "e-mail" (appelé "postel" dans le code(norvégien) directive. La solution qui devrait fonctionner pour tous, donc je suis maintenant à cela pour le moment.

Technologies: Angularjs, de Jasmin, de Requirejs, (grunt & karma cours d'exécution dans google Chrome)

La directive valide les adresses e-mail de deux façons, soit sur des vitesses et sur le flou. Je peux tester le monter sans problèmes comme vous pouvez le voir dans le test ci-dessous, mais je ne peux pas comprendre comment simuler un effet de flou de sorte que le bind('blur') dans la directive sur les pistes.

Ce que j'ai fait

J'ai essayé d'attraper le compilé élément comme ceci:

elem    = angular.element(html);
element = $compile(elem)($scope);

Et puis dans le test, j'ai essayé plusieurs combinaisons pour déclencher l'effet de flou avec un journal de la console juste à l'intérieur de la fonction de liaison dans la directive. Aucun des ci-dessous fonctionne. Il ne déclenche pas.

elem.trigger('blur');           
element.trigger('blur');
elem.triggerHandler('blur');
element.triggerHandler('blur');
element.blur();
elem.blur();

J'en fonction de l'injection et de l'installation sur ce: Un test de validation personnalisée angularjs directive

L'e-mail de la directive dans angularjs enveloppé dans requirejs

define(function() {

var Directive = function() {

return {
  require: 'ngModel',
  link: function(scope, elem, attrs, ctrl) {
    var pattern = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/;

    elem.bind('blur', function() {
      scope.$apply(function () {
        if (!elem.val() || pattern.test(elem.val())) {
          ctrl.$setValidity('epost', true);
        } else {
          ctrl.$setValidity('epost', false);
        }
      });
    });

    ctrl.$parsers.unshift(function(viewValue) {
      if (pattern.test(viewValue)) {
        ctrl.$setValidity('epost', true);
        return viewValue;
      } else {
        return undefined;
      }
      });
    }
  };
};

return Directive;

});

Le test (à l'aide de jasmin et de requirejs)

define([
'Angular', 
'AngularMocks',
], function () {

describe('Directives', function () {

    var $scope;
    var form;

    beforeEach(module('common'));
    beforeEach(function () {

        var html = '<form name="form">';
        html += '<input type="text" id="epost" name="epost" epost="" ng-model="model.epost"/>';
        html += '</form>';

        inject(function ($compile, $rootScope) {
            $scope = $rootScope.$new();

            $scope.model = { 
                epost: null
            };

            //Compile the element, run digest cycle
            var elem = angular.element(html);
            $compile(elem)($scope);
            $scope.$digest();

            form = $scope.form;

        });
    }); 

    describe('(epost) Given an input field hooked up with the email directive', function () {

        var validEmail = '[email protected]';
        var invalidEmail = 'asdf@asdf';

        it('should bind data to model and be valid when email is valid on upshift', function () {
            form.epost.$setViewValue(validEmail);
            expect($scope.model.epost).toBe(validEmail);
            expect(form.epost.$valid).toBe(true);
        });
        });
    });
});

OriginalL'auteur lizter | 2013-07-15