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

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