CODEWITHSUNDEEP
angularjsunit-testingangularjs-directivejasmineangular-mock
yammerade
yammerade

Reputation: 629

Unit Testing $routeParams in directive

I have a directive that accesses the $routeParams of the page as such:

myApp.directive("myList", function ($routeParams) {
    return {
        restrict: 'E',
        templateUrl: 'tabs/my-list.html',
        link: function (scope) {
            scope.year = $routeParams.year;
       }
    };
});

The directive works as expected and correctly accesses the $routeParams

I am trying to test using angular-mock/jasmine. I can't figure out how to pass mock $routeParams to the directive. This is what I have:

describe('myList', function () {
    var scope, compile, element, compiledDirective;
    var mockParams = { 'year': 1996 };

    beforeEach(function () {
        module('templates', 'MyApp');

        inject(function ($compile, $rootScope, $routeParams) {
            compile = $compile;
            scope = $rootScope.$new();
        });
        element = angular.element('<my-list></my-list>');
        compiledDirective = compile(element)(scope);
        scope.$digest();
    });
    it('should fill in the year', function () {
        expect(scope.year).toEqual(mockParams.year);
    });
});

Which obviously doesn't work because I never passed passed mockParams to the directive. Is there a way to do this?

Upvotes: 3

Views: 775

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

Mock the $routeParams object mockParams using angular.extend OR do assign mockParams object directly to $routeParams. In that way $routeParams will be available before directive gets compiled.

inject(function ($compile, $rootScope, $routeParams) {
    compile = $compile;
    scope = $rootScope.$new();
    angular.extend($routeParams, mockParams);
});

Upvotes: 4

Related Questions