使用Jasmine编写AngularJS指令的单元测试?

时间:2014-07-29 09:23:46

标签: angularjs unit-testing angularjs-directive jasmine karma-runner

我是JavaScript和Angular的新手,我使用Karma和Jasmine来测试代码。我很难搞清楚如何测试角度指令。

该指令验证出生日期以验证用户年龄是否超过55岁。以下是代码的简化版本:

这是(相关的)html:

<div ng-controller="datepickerCtrl">
<input type="text" dobpicker-popup="{{format}}" name="dob" ng-model="dob" 
is-open="opened" dobpicker-options="dateOptions" min-date="minDate" 
required="true" dobcheck/>
</div>

Javascript代码(使用的日期格式为dd / MM / yyyy)

Module.directive('dobcheck', function($log) {
    return {
        require: 'ngModel',
        scope : true,
        link : function(scope, element, attrs, ctrl)
        {
            ctrl.$parsers.unshift(function(value) {

                if(evaluateAge(value) > 55)
                {
                    ctrl.$setValidity('dobcheck', true);
                    return value;
                }
                else
                {
                    ctrl.$setValidity('dobcheck', false);
                    return value;
                }
            });
        }
    }
});

此块用于生成当前年龄

function evaluateAge(dob)
{
    var today = new Date();
    var bDate = new Date(dob);
    var age = today.getFullYear() - bDate.getFullYear();
    var months = today.getMonth() - bDate.getMonth();

    if (months < 0 || (months === 0 && today.getDate() < bDate.getDate()))
    {
        age--;
    }

    return age;
}

用于测试场景的单元测试

'use strict';

describe('Age Validation directive', function() {
  var $scope, form;

  beforeEach(module('Regux'));

  beforeEach(inject(function($compile, $rootScope) {
  $scope = $rootScope;

    var element = angular.element(
      '<form name="form">' +
      '<div>' +
        '<input ng-model="model.dob" name="dob" 
       required="true" dobcheck="model.dob"/>' +
      '</div>'+
      '</form>');

    $scope.model = { dob: null }  
    $compile(element)($scope);
    form = $scope.form;
  }));

  describe('validate Date of Birth ', function() {

  it('Age over 55', function() {
    form.dob.$setViewValue('04/05/1955');
    $scope.$digest();
    expect($scope.model.dob).toEqual('04/05/1955');
    expect($scope.model.dob).toBe('04/05/1955');
    expect(form.dob.$valid).toBe(true);
    });
  });
});

显示错误

Age over 55 FAILED -TypeError: Cannot read property '$valid' of undefined at  null.<anonymous>`

关于如何修复此错误以及如何测试AngularJS指令的任何建议?

谢谢

1 个答案:

答案 0 :(得分:2)

最后一个断言语句应为

expect(form.dob.$valid).toBe(true);

因为您的输入名称为dob而不是dobcheck