Example of testing directive

validate-date-directive-spec.js

define(['angular-mocks', 'app/directives/validate-date-directive', 'app/directives/passengers'], function () {
    describe('validate-date directive', function () {
        var scope, compile, compileAndDigest, elm,
            inputHtml = '<input name="date" validate-date="date" ng-model="date">';

        beforeEach(function () {
            module('hubskip.directives');

            inject(function ($rootScope, $compile) {
                scope = $rootScope;
                compile = $compile;
                compileAndDigest = function (inputHtml, scope) {
                    var inputElm = angular.element(inputHtml);
                    var formElm = angular.element('<form name="form"></form>');
                    formElm.append(inputElm);
                    $compile(formElm)(scope);
                    scope.$digest();

                    return inputElm;
                };
                elm = compileAndDigest(inputHtml, scope);
            });
        });

        it('should treat field as invalid on load', function () {
            expect(scope.form.date.$valid).toBeFalsy();
            expect(elm.attr('class')).toMatch('ng-invalid');
        });

        it('should set validity to invalid when wrong date assigned to model', function () {
            scope.$apply(function () {
                scope.date = 'wrong date';
            });
            scope.$digest();

            expect(scope.form.date.$valid).toBeFalsy();
            expect(elm.attr('class')).toMatch('ng-invalid');
        });

        it('should set validity to valid when existing date assigned to model', function () {
            scope.$apply(function () {
                scope.date = new Date();
            });
            scope.$digest();

            expect(scope.form.date.$valid).toBeTruthy();
            expect(elm.attr('class')).toMatch('ng-valid');
        });
    });
});