Testing Parent Controller Scope's Variable in Angular JS With Karma and Jasmine

Question

I have two controllers on a page. They are "wrapped" on a HTML mark-up with one being the "parent" and the other being the "child" like so:

<div id="parent" ng-controller="parentController">
    <div id="child" ng-controller=childController">
    </div>
</div>

In the JS files for my controllers, I reference an object from the "parent" controller in the "child" controller.

Parent controller:

angular.module('myApp').controller('parentController', function($scope){
    $scope.myReferencedObject = {};
    $scope.myReferencedObject.someProperty = "hello world";
});

Child controller:

angular.module('myApp').controller('childController', function($scope){
    $scope.childControllerVariable = $scope.myReferencedObject.someProperty;
});

Because the "child" controller is nested within the "parent" controller, the object from the parent controller is inherited in the child controller.

This doesn't work in a Karma test since all of the files are broken down into individual units and tested separately. The $scope.myReferencedObject.someProperty reference is undefined in my "child" controller when unit tested because there is no prototypal inheritance.

How do I solve this problem in Karma?

rob · Accepted Answer · 2014-05-01 15:13:20Z

9

You can initialize the $scope to be whatever you want when you test your inner controller so you can mock out what the parent controller would have set on it

var controllerInstance;
beforeEach(inject(function ($controller, $rootScope) {
    scope = $rootScope.$new();
    scope.myReferencedObject = {someProperty: 'hello world'}
    controllerInstance = $controller('childController', {
      $scope: scope
    });
}));

answered May 1, 2014 at 15:13

rob

18.7k13 gold badges73 silver badges95 bronze badges

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

1 Comment

Naveen Kumar V Over a year ago

What if I am having new scope object inside the child controller? Can I access both Parent and Child(with new scope object) controller?

Naveen Kumar V · Accepted Answer · 2018-02-19 11:50:19Z

This code works for accessing both Parent and Child(With new scope object) Controller.

...

var childCtrl;
var parentCtrl;
var scope;

beforeEach(inject(function($rootScope, $controller) {
  scope = $rootScope.$new();
  // First - Parent
  parentCtrl = $controller('ParentCtrl', {$scope: scope});
  // Second - Child (also with new scope object)
  ChildCtrl = $controller('ChildCtrl', {$scope: scope});
}));

... 

describe("Testing Parent and Child Controller's Scope", function() {

  it('parentObj', function(){
    expect(scope.parentObj).toBeDefined();
  });

  it('childObj', function(){
    expect(scope.childObj).toBeDefined();
  });

  it('parentObj.newPropCreatedInChild', function(){
    expect(scope.parentObj.newPropCreatedInChild).toBeDefined();
  });

});

Collectives™ on Stack Overflow

Testing Parent Controller Scope's Variable in Angular JS With Karma and Jasmine

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related