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
Vous devez vous connecter pour publier un commentaire.
J'ai été en mesure de comprendre où je suis allé mal après un certain point d'arrêt de débogage.
La "élément" item, je sors à l'aide de l'approche décrite dans la partie supérieure de la question n'est pas réellement la directive elle-même. C'est un objet qui encapsule la forme et de la directive.
Comme ce
Réellement simuler un effet de flou sur la directive elle-même, j'ai fait quelque chose comme cela
Après l'obtention de l'élément que je voulais, et en l'enveloppant dans un objet jQuery (peut être facultatif), il a travaillé comme un charme. J'ai ensuite utilisé l'approche comme dans le test de la question avec $setViewValue et vérifié la valeur de modèle de ce genre.
Espère que cela peut aider d'autres personnes à essayer de comprendre la directive sur les essais.
Je suis désolé, mais je n'ai pas accès à ce code de plus comme c'était pour un client. Bonne chance à comprendre votre problème.
OriginalL'auteur lizter
J'ai trop couru dans un problème similaire et il me déconcertait. Ma solution a été d'utiliser JQuery pour obtenir l'entrée et ensuite utiliser angulaire.élément(entrée).triggerHandler('blur') pour le faire fonctionner. C'est bizarre pour moi parce que je n'ai pas à le faire avec l'événement click.
OriginalL'auteur Maccurt