密码匹配指令

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

这就是我正在尝试进行的测试。因此，它给我一个错误，读取TypeError：'undefined'不是一个对象（评估'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);
    });
});

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