Wie kann ich simulieren Unschärfe beim testen von Direktiven in angularjs?

Das problem

Ich versuche zu testen, einige Richtlinien (code für beide unten). Einer von Ihnen ist eine "E-Mail" (genannt "epost" in den code(Norwegisch)) - Richtlinie. Die Lösung für diese Arbeit sollte für alle von Ihnen, so werde ich es halten, um diese für jetzt.

Technologien: Angularjs, Jasmine, Requirejs, (grunt & karma-Ausführung in Chrom)

Der Richtlinie überprüft E-Mail-Adressen in zwei Wege; auf Hochschalten und auf Unschärfe. Kann ich testen das Hochschalten ohne Probleme, wie Sie sehen können, in den test unten, aber ich kann nicht herausfinden, wie simulieren eine Unschärfe so bind('blur'), die in der Richtlinie ausgeführt wird.

, Was ich getan habe

Habe ich versucht zu fangen, die zusammengestellt element wie diesem:

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

Und dann in dem test, ich habe versucht, mehrere Permutationen auslösen, die die Unschärfe mit einer Konsole, nur innerhalb der bind-Funktion in der Richtlinie. Keine der unten arbeitet. Löst er nicht.

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

Ich die Injektion und setup auf dieser: Testen Sie eine benutzerdefinierte Validierung angularjs Richtlinie

Die E-Mail-Direktive in angularjs, eingewickelt in 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;

});

Die Prüfung (mit Jasmin und 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);
        });
        });
    });
});

InformationsquelleAutor lizter | 2013-07-15

  1. 7

    Ich in der Lage gewesen, um herauszufinden, wo ich schief ging, nach einigen Haltepunkt Debuggen.

    Den "element" - Element bekomme ich mit dem Ansatz beschrieben, der oben in der Frage ist eigentlich nicht in der Richtlinie selbst. Es ist ein Objekt, das umschließt die form und die Richtlinie.

    Wie diese

    { 0:   //The form
  { 0: //The directive (input element)
    {  
    }
  }
}

    Tatsächlich simulieren Sie einen Weichzeichner auf die Richtlinie selbst, ich hab sowas schon

    var directiveElement = $(element[0][0]);
directiveElement.blur();

    Nachdem das element, das ich wollte, und wickelte es in ein jQuery-Objekt (kann optional sein), es funktionierte wie ein Charme. Danach habe ich den Ansatz wie in der test-in die Frage mit $setViewValue und überprüft das Modell Wert wie diese.

    form.epost.$setViewValue('[email protected]');
directiveElement.blur();
expect($scope.model.epost).toBe('[email protected]');
expect($scope.form.epost.$valid).toBeTruthy();

    Hoffe das konnte helfen, anderen, die versuchen zu Abbildung die Richtlinie testen.

    Könntest du bitte deinen post-Richtlinie-test in seiner endgültigen form? Ein Turnschuh wäre toll, aber könnten Sie einfach aktualisieren Sie Ihre Antwort, wenn Sie es vorziehen... ich habe das gleiche prolem, aber Ihre Lösung funktioniert nicht für mich (es ist wie der blur () - Aufruf nicht-trigger-Richtlinie Ausführung...).
    Tut mir Leid, aber ich don ' T haben Zugang zu diesem code mehr, wie es war für einen Kunden. Viel Glück, herauszufinden, Ihr problem.

    InformationsquelleAutor lizter

  2. 0

    Auch ich lief in ein ähnliches problem und es verwirrt mich. Meine Lösung war der Einsatz von JQuery, um die Eingabe und verwenden Sie dann eckig.element(input).triggerHandler('blur'), damit es funktioniert. Das ist seltsam für mich, weil ich nicht zu tun haben, diese mit dem click-Ereignis. 

    spyOn(controller, 'setRevenueIsInvalid');
var sugarRow = $(element).find('tr#ve_id_5')[0];
var amount = $(sugarRow).find('input.amount')[0];
angular.element(amount).triggerHandler('blur');
expect(controller.setRevenueIsInvalid).toHaveBeenCalled();

    InformationsquelleAutor Maccurt

Schreibe einen Kommentar