编写单元测试的密码匹配指令

Question

我在这里有一个指令我试图编写一个单元测试 - 第一次做这种类型的事情。我不知道如何去做。这里的指令代码和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>

这里就是我努力了测试。因此，对，这是给我一个错误的阅读类型错误：“未定义”不是一个对象（评估“scope.signup.password =‘123’”）

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

有些帮助将是非常感谢

编辑：我只是注意到当注释掉scope.signup.password = '123'等，调试语句不会返回任何东西 - 只是DEBUG: 'element html - '，所以element.html（）没有做任何事情？

Answer 1

我还没有做过一段时间的测试，但是您是否尝试过先定义scope.signup对象，或许在beforeEach块中。所以，像，

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

编辑

我认为你需要有一个表单中输入的。试试这个...

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

您可以直接从范围上的这些属性访问的FormController的属性也和作出断言，而不是使用element.html()。使其更具可读性。

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