Schreibgerät Test für Password Matching Direktive

Question

Ich habe eine Direktive hier Ich versuche, einen Komponententest zu schreiben - zum ersten Mal diese Art von Sache zu tun. Ich bin mir nicht sicher, wie ich das anstellen soll. Hier ist die Richtlinie Code und HTML:

app.directive('passwordMatch', [function() { 
 
    return { 
 
     restrict: 'A', 
 
     scope:true, 
 
     require: 'ngModel', 
 
     link: function (scope, elem, attrs, control) { 
 
      var checker = function() { 
 
       var e1 = scope.$eval(attrs.ngModel); 
 
       var e2 = scope.$eval(attrs.passwordMatch); 
 
       if(e2!=null) 
 
       return e1 == e2; 
 
      }; 
 
      scope.$watch(checker, function (n) { 
 
       control.$setValidity("passwordNoMatch", n); 
 
      }); 
 
     } 
 
    }; 
 
}]);

<form name="signupForm"> 
 
<div class="form-group"> 
 
\t \t 
 
\t  <div class="col-sm-7"> 
 
\t   <span class="block input-icon input-icon-right"> 
 
\t  <input type="password" class="register" name="password" placeholder="Password" ng-model="signup.password" required/> 
 
\t \t \t </span> 
 
\t  </div> 
 
\t </div> 
 
\t <div class="form-group"> \t 
 
\t  <div class="col-sm-7"> 
 
\t   <span class="block input-icon input-icon-right"> 
 
\t \t \t <input type="password" class="register" name="password2" placeholder="Confirm Password" ng-model="signup.password2" password-match="signup.password" required/>         
 
\t \t \t <small class="errorMessage" data-ng-show="signupForm.password2.$dirty && signupForm.password2.$error.passwordNoMatch && !signupForm.password2.$error.required"> Password do not match.</small> 
 
\t \t \t </span> 
 
\t  </div> 
 
\t </div> 
 
</form>

Und hier ist, was ich für einen Test bin versucht. Also für, ist es mir ein Fehler Lesen Typeerror geben: 'undefined' ist kein Objekt

describe('passwordMatch Directive - ', function() { 
 
    
 
    var scope, $compile, $window, element; 
 
     
 
    beforeEach(function() { 
 
     module('myApp'); 
 
     inject(function(_$compile_, _$rootScope_, _$window_) { 
 
     $compile = _$compile_; 
 
     scope = _$rootScope_.$new(); 
 
     $window = _$window_; 
 
     }) 
 
     
 
    }) 
 

 
    it('should indicate invalid when the passwords do not match.', function() { 
 
     scope.signup.password = '123'; 
 
     scope.signup.password2 = '1234'; 
 
     element = $compile(angular.element('<input type="password" class="register" name="password" placeholder="Password" ng-model="signup.password" required/> <input type="password" class="register" name="password2" placeholder="Confirm Password" ng-model="signup.password2" password-match="signup.password" required/>'))(scope); 
 
     scope.$apply(); 
 
     console.debug('element html - ' + element.html()); 
 
     expect(element.html().indexOf('ng-invalid')).toBeGreaterThan(0); 
 
    }); 
 

 
    it('should indicate valid when the passwords do not match.', function() { 
 
     scope.signup.password = '123'; 
 
     scope.signup.password2 = '123'; 
 
     element = $compile(angular.element('<input type="password" class="register" name="password" placeholder="Password" ng-model="signup.password" required/> <input type="password" class="register" name="password2" placeholder="Confirm Password" ng-model="signup.password2" password-match="signup.password" required/>'))(scope); 
 
     scope.$apply(); 
 
     console.debug('element html - ' + element.html()); 
 
     expect(element.html().indexOf('ng-valid')).toBeGreaterThan(0); 
 
    }); 
 
});

Einige Hilfe wäre ('scope.signup.password = '123'' Auswertung) sehr geschätzt

EDIT: Ich habe gerade bemerkt, wenn scope.signup.password = '123' und so kommen, die Debug-Anweisung gibt nichts zurück - nur DEBUG: 'element html - ', so Element.html() tut nichts?

Answer 1

Ich habe noch nicht eine Weile getestet, aber Sie haben versucht, das scope.signup-Objekt zuerst zu definieren, vielleicht in Ihrem beforeEach-Block. Also, so etwas wie,

describe('passwordMatch Directive - ', function() { 

    var scope, $compile, $window, element, elm; 

    beforeEach(function() { 
     module('myApp'); 
     inject(function(_$compile_, _$rootScope_, _$window_) { 
     $compile = _$compile_; 
     scope = _$rootScope_.$new(); 
     $window = _$window_; 
     }); 


     // define scope.signup as an empty object literal to which 
     // you can add properties later 
     scope.signup = {}; 

     // don't think you meant to have this so commenting it out 
     //elm 
    }) 

    it('should indicate invalid when the passwords do not match.', function() { 
     scope.signup.password = '123'; 
     scope.signup.password2 = '1234'; 
     element = $compile(angular.element('<input type="password" class="register" name="password" placeholder="Password" ng-model="signup.password" required/> <input type="password" class="register" name="password2" placeholder="Confirm Password" ng-model="signup.password2" password-match="signup.password" required/>'))(scope); 
     scope.$apply(); 
     console.debug('element html - ' + element.html()); 
     expect(element.html().indexOf('ng-invalid')).toBeGreaterThan(0); 
    }); 

    // etc... 
}); 

EDIT

Ich glaube, Sie müssen Ihre Eingaben in einem Formular haben. Versuchen Sie, diese ...

describe('passwordMatch Directive - ', function() { 

    var scope, $compile, $window, element, html; 

    beforeEach(function() { 

     module('myApp'); 

     inject(function(_$compile_, _$rootScope_, _$window_) { 
     $compile = _$compile_; 
     scope = _$rootScope_.$new(); 
     $window = _$window_; 
     }); 

     scope.signup = {}; 

     // inputs need to be within a form for you directive to work 
     html = '<form name="signupForm">' + 
       '<input type="password" class="register" name="password" placeholder="Password" ng-model="signup.password" required/>' + 
       '<input type="password" class="register" name="password2" placeholder="Confirm Password" ng-model="signup.password2" password-match="signup.password" required/>' + 
       '</form>'; 

    }); 

    it('should indicate invalid when the passwords do not match.', function() { 
     scope.signup.password = '123'; 
     scope.signup.password2 = '1234'; 
     element = $compile(angular.element(html))(scope); 
     scope.$apply(); 
     console.debug('element html - ' + element.html()); 
     expect(element.html().indexOf('ng-invalid')).toBeGreaterThan(0); 
    }); 

    it('should indicate valid when the passwords do not match.', function() { 

     scope.signup.password = '123'; 
     scope.signup.password2 = '123'; 

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

     scope.$apply(); 
     console.debug('element html - ' + element.html()); 
     expect(element.html().indexOf('ng-valid')).toBeGreaterThan(0); 
    }); 
}); 

EDIT 2

Sie können die FormController Eigenschaften direkt Zugang vom Umfang zu und stellen Behauptungen auf diese Eigenschaften eher als element.html() verwenden. Macht es ein bisschen lesbarer.

it('should indicate invalid when the passwords do not match.', function() { 


     scope.signup.password = '123'; 
     scope.signup.password2 = '1234'; 

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

     // expect(element.html().indexOf('ng-invalid')).toBeGreaterThan(0); 

     expect(scope.signupForm.$valid).toBe(false); 
     expect(scope.signupForm.$invalid).toBe(true); 

    }); 

    it('should indicate valid when the passwords do not match.', function() { 

     scope.signup.password = '123'; 
     scope.signup.password2 = '123'; 

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

     scope.$apply(); 

     //expect(element.html().indexOf('ng-valid')).toBeGreaterThan(0); 

     expect(scope.signupForm.$valid).toBe(true); 
     expect(scope.signupForm.$invalid).toBe(false); 
    });