Şifre Eşleştirme yönergesi için Yazma Birimi testi

Question

Burada bir direktif var, bu tür bir şeyi ilk kez yapmak için bir birim testi yazmaya çalışıyorum. Bunun hakkında nasıl gideceğimi bilmiyorum. Bir test için çalışıyorum

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>

Ve burada: Burada direktif kodu ve HTML bulunuyor.

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); 
 
    }); 
 
});

Bazı yardımı olurdu ('scope.signup.password = '123'' değerlendirirken) Bir nesneyi 'tanımsız' değildir: Yani için, bana bir okuma hatası TypeError veriyor

DÜZENLEME: Sadece scope.signup.password = '123' yorumunu yaparken ve hata ayıklama ifadesinin hiçbir şey döndürmediğini fark ettim - sadece DEBUG: 'element html - ', yani element.html() hiçbir şey yapmıyor mu?

Answer 1

Bir süredir test yapamıyorum, ancak öncelikle beforeEach bloğunuzdaki scope.signup nesnesini tanımlamayı denediniz. Yani, bir şey

DÜZENLEME

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... 
}); 

, gibi bir form içinde senin girişleri olması gerekir düşünüyorum. 2

Sen yerine element.html() kullanmaktan daha bu özelliklerin üzerinde iddialarda da kapsam doğrudan FormController özelliklerine erişip yapabilirsiniz

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); 
    }); 
}); 

DÜZENLEME ... Bu deneyin. Biraz daha okunabilir hale getirir.

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); 
    });