Jasmine/Angular.js $scope is undefined on loading controller

Question

I'm trying to start a Unit Test on my code. I follow much guides on internet but I can't reach to start building my UT.

I would like to test that code:

"use strict";
var app = angular.module('address', []);

app.controller("AddressBookController", ["$rootScope", "$scope", "viewState",
    function($rootScope, $scope, viewState)
{   
    // PAGE DATA
    $scope.pageLimit = 7;
    $scope.pages = (viewState.state.pages) ? viewState.state.pages : [];
    $scope.currentPage = (viewState.state.currentPage) ? viewState.state.currentPage : 0;

    /* Other Code */
}

My factory code is this one:

app.factory("viewState", [function(){
    return {
       state : {},
       data : {}
    };
 }])

So following some guides I write my test code:

describe('Address Book Controller Testing', function() {
    var $scope;
    var controller;
    var viewStateMock;

    beforeEach(function() {

        module('address');
        //mocking factories for test
        module(function($provide){
             $provide.factory('viewState', function() {
                    return {
                        prova: function() {
                            return {
                                state : {},
                                data : {}
                            };
                        }
                    };
                });
             });
          });

        beforeEach(inject(function ($rootScope, $controller, viewState) {
            $scope = $rootScope.$new();
            viewStateMock = viewState;
            spyOn(viewStateMock, 'prova').and.callThrough();
            controller = $controller('AddressBookController', { 
                $scope: $scope,
                viewState: viewStateMock
            });
        }));

        describe('All initialized', function (){

            it('$scope should be defined', function() {
                expect($scope).toBeDefined();
            });

        });

    });
});

But if I launch my test every time give me this error:

TypeError: Cannot read property 'pages' of undefined

I notice that the error is throw when is executing that part of the code:

controller = $controller('AddressBookController', { 
    $scope: $scope,
    viewState: viewStateMock
});

And more if I print on console $scope before that part of code I can find the "pageLimit" proprety.

How can I go on with my test?

Thank you all for yours answer.

ronapelbaum · Accepted Answer · 2016-03-22 18:58:52Z

1

The problem is not with your $scope injection, but with providing the viewState.

when you use $provide.factory() you are in fact building a factory (and providing it). so the syntax should be the same as your factory:

module(function($provide) {
   $provide.factory('viewState', function() {
       return {
           state: {},
           data: {}
       };
   });
});

see jsFiddle.

answered Mar 22, 2016 at 18:58

ronapelbaum

1,83716 silver badges19 bronze badges

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

1 Comment

Roberto Over a year ago

Thank you very much! I imagine I had a similar problem.

Collectives™ on Stack Overflow

Jasmine/Angular.js $scope is undefined on loading controller

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related