CODEWITHSUNDEEP
javascriptangularjsjasmine
Michal Takáč
Michal Takáč

Reputation: 1055

Angular and Jasmine - $scope function is undefined

I have a controller

var videoApp = angular.module('videoApp', ['videoAppFilters', 'ui.unique', 'angularUtils.directives.dirPagination']);
videoApp.controller('VideoCtrl', function ($scope, $http, $filter, cacheLoader, $rootScope) {

    $scope.setPageSize = function (pageSize) {
        $scope.pageSize = pageSize;
        return $scope.pageSize;
    };

    $scope.addFavorite = function (data, key) {
        localStorage.setItem(key, data);
        $scope.videos = $filter('articleFilter')(data, $scope.allData);
        return alert(key + " "+ data + " was added to your favorite list.");
    };

    $scope.addSelectedClass = function (event) {
        if($(event.target).hasClass("selected") == true)
        {
            $(event.target).removeClass("selected");
        } else {
            $(".selected").removeClass("selected");
            $(event.target).addClass("selected");
        }
    };

    $scope.filterArticles = function (category) {
        $scope.videos = $filter('articleFilter')(category, $scope.allData);
    };

    $scope.pageSize = 12;

    cacheLoader.load('http://academy.tutoky.com/api/json.php', true, function () {
        $scope.allData = $rootScope.allData;
        $scope.videos = $rootScope.videos;

        if(localStorage.getItem('category')) {
            $scope.videos = $filter('articleFilter')(localStorage.getItem('category'), $scope.allData);
        } else {
            $scope.videos = data;
        }
    });

});

and a test

describe('Check if VideoListCtrl', function() {
    beforeEach(module('videoApp'));

    beforeEach(inject(function (_$controller_) {
        $controller = _$controller_;
    }));

    beforeEach(inject(function ($rootScope) {
        $scope = {};
        controller = $controller('VideoCtrl', { $scope: $scope });
    }));

    it('exists', function() {
        expect(controller).not.toBeNull();
    });

    it('set page size', function () {
        expect($scope.setPageSize(12)).toEqual(12);
    });


});

I want to test if the controller methods works as it should, but jasmine will repond on the second test with error:

TypeError: undefined is not a function

Thing that cause the problem is $scope.setPageSize(12). I was following the tutorial on angular docs, they are using methods of the scope just like that, but its not working in my case. Does anyone have an idea why?

Upvotes: 1

Views: 4090

Answers (1)

Tyler.z.yang
Tyler.z.yang

Reputation: 2450

I think you should notice in jasmine, 'it' 'describe' are functions.

So when you need to test something inside $scope. You should make sure in any of your 'it' functions, it should access to your variable.

Simply change your test case into this:

describe('Check if VideoListCtrl', function() {
    //Add an initialize here:
    var $scope = null;
    beforeEach(module('videoApp'));

    beforeEach(inject(function (_$controller_) {
        $controller = _$controller_;
    }));

    beforeEach(inject(function ($rootScope) {
        //new a $scope
        $scope = $rootScope.$new();
        controller = $controller('VideoCtrl', { $scope: $scope });
    }));

    it('exists', function() {
        expect(controller).not.toBeNull();
    });

    it('set page size', function () {
        expect($scope.setPageSize(12)).toEqual(12);
    });
});

Or you can check this in angular document.

Hope this will work. : )

Upvotes: 5

Related Questions