jasmine can't access angularjs 1.5 controller property

Question

I'm trying to access the controller's properties in the jasmine tests but I'm having issues setting the test up.

Here's the controller:

  adminApp.controller('AdminClientController', [function() {
     var adminClient = this;
     adminClient.name = 'Client Name';
     adminClient.sites = [
     {
        id: "site1",
        domain: "myschool.com",
        pages: [
            {
                id: 1,
                name: "HOME"
            },
            {
                id: 2,
                name: "FORM"
            }
        ]
      }
    ]

  }]);

Here is the spec:

  describe('AdminClientController', function() {
     beforeEach(module('adminClientApp'));

     var $scope, $controller;

     beforeEach(inject(function(_$controller_, _$rootScope_){
        $rootScope = _$rootScope_;
        $controller = _$controller_;

        $scope = $rootScope.$new();
     }));

     describe('site pages', function() {

     beforeEach(function() {
        //$scope = {};
        controller = $controller('AdminClientController as adminClient', { 
            $scope: $scope });
    });

    it('should create a site model with 2 pages', function() {
        expect(controller.adminClient.sites[0].pages.length).toBe(2);
    });
  });

 });

The error:

  TypeError: Cannot read property 'sites' of undefined

Previously I tried initializing the $scope (even though I'm not explicitly using it in the controller) and didn't use the contoller as syntax.

  beforeEach(function() {
        $scope = {
            adminClient: {
                sites: [
                    {
                        id: "site1",
                        domain: "myschool.com",
                        pages: [
                            {
                                id: 1,
                                name: "HOME"
                            },
                            {
                                id: 2,
                                name: "FORM"
                            }
                        ]
                    }
                ]
            }
        };
        controller = $controller('AdminClientController', { 
            $scope: $scope });
    });

I'm just starting out with the testing and want to use it early on or else it won't happen later. The other SO questions I found didn't help me out.

Thanks!

You are not passing in scope to your controller so you don't need it. Try this: controller = $controller('AdminClientController', {}); and refer to it like this: controller.sites[0].pages.length — ScottL
– ScottL, Commented Jun 22, 2016 at 4:22

SiddAjmera · Accepted Answer · 2016-06-22 06:01:25Z

1

It's not the controller property you're not able to access in your test cases. It's the adminClient in controller that you're not able to access. And that's because it does not exist.

The place where you've specified

expect(controller.adminClient.sites[0].pages.length).toBe(2);

You should be specifying

expect(controller.sites[0].pages.length).toBe(2);

As your controller is what is acting as a ref to your AdminClientController in this case. While where you've defined AdminClientController, adminClient is acting as a ref to AdminClientController

Also as @ScottL mentioned, since you're not injecting $scope into your controller as a dependency, you don't need it in your test case either.

So this should be you new test case:

describe('AdminClientController', function() {
    beforeEach(module('adminClientApp'));
    var $controller, controller;

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

    describe('site pages', function() {
        it('should create a site model with 2 pages', function() {
            expect(controller.sites[0].pages.length).toBe(2);
        });
    });
});

edited Jun 22, 2016 at 6:01

answered Jun 22, 2016 at 5:55

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

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

1 Comment

Will Lopez Over a year ago

Great, thank you @Siddarth_Ajmera! I thought the js object would be returned as defined in the controller (.controller('AdminClientController', [function() { var adminClient = this;) Basic misunderstanding for me. Much appreciated!

Collectives™ on Stack Overflow

jasmine can't access angularjs 1.5 controller property

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