Writing unit test for AngularJS directive with Jasmine?

Question

I am new to the world of JavaScript and Angular, and I am using Karma and Jasmine to test code. I am having a difficult time figuring out how to test angular directive.

The directive validates the date of birth to validate users age is above 55. Here's a simplified version of the code:

Here is the (relevant) 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 code (The date format used is 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;
                }
            });
        }
    }
});

This block is used to generate the current age

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

Unit test used to test scenario

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

Error displayed

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

Any suggestion on how how I can fix this error and any best practices on to test a AngularJS directive like this?

Thanks

@runTarm Added the unit test case and the error message details. — Gehan
– Gehan, Commented Jul 31, 2014 at 7:40
What is the dobcheck attribute? Is it a typo or it is defined elsewhere? — runTarm
– runTarm, Commented Jul 31, 2014 at 7:53
The assert statement should be expect(form.dob.$valid).toBe(true) since your input's name is dob not dobcheck. — runTarm
– runTarm, Commented Jul 31, 2014 at 7:54
@runTarm I renamed the directive as dobcheck.I tried out the last suggestion you gave and it worked - Thanks. — Gehan
– Gehan, Commented Jul 31, 2014 at 9:11
Glad I could help :) I've re-post my comment as an answer below. Please accept it if it helps to prevent confusion. — runTarm
– runTarm, Commented Jul 31, 2014 at 9:39

runTarm · Accepted Answer · 2014-07-31 09:37:33Z

2

The last assert statement should be

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

since your input's name is dob not dobcheck.

answered Jul 31, 2014 at 9:37

runTarm

11.6k1 gold badge39 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Writing unit test for AngularJS directive with Jasmine?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related