Unit test for nested controllers - unit-testing

Question

I'm trying to write a unit test for a controller that's nested, but can't figure out how to mock the same behaviour in my test.
I have 2 controllers:
function FirstController ($scope) {
$scope.childs = [{
title : 'Hello, earth!'
}];
};
function SecondController ($scope) {
$scope.child.title = $scope.child.title + $scope.$index;
};
And in my HTML:
<div data-ng-controller="FirstController">
<div data-ng-repeat="child in childs" data-ng-controller="SecondController">
{{ child.title }}
</div>
</div>
And this works as expected (http://jsfiddle.net/tcayp/1/)
The unittests:
// FirstController
it('Should have childs', function () {
scope = {};
ctrl = new FirstController(scope);
expect(scope.childs.length).toBeGreaterThan(0);
});
// SecondController
it('Should have inherited a child', function () {
scope = {};
ctrl = new SecondController(scope);
expect(scope.child.title).toEqual('Hello, earth!0');
});
In the SecondController-test I can't figure out how to mock the inherit chain from ng-repeat.

Answer 1

Ideally, with unit tests we would like to tests classes (units) in isolation. Testing 2 controller in one test might be too much: a test would become more complex and more brittle.
Taking a closer look at the provided example one might notice that it is really not about testing 2 controllers but rather making sure that data are available in a parent scope. So, focusing on one controller only (SecondController) and the inherited data one would write a test like this:
describe('Testing the SecondController controller', function() {
var $parentScope, $scope, ctrl;
it('should prepare title', inject(function($rootScope, $controller) {
//setup hierarchy of scopes with data
$rootScope.childs = [{
title : 'Hello, earth!'
}];
$scope = $rootScope.$new();
$scope.$index = 1;
ctrl = $controller('SecondController', {
$scope: $scope
});
expect($scope.childs[0].title).toEqual('Hello, earth!1');
}));
});
Here is the full jsFiddle: http://jsfiddle.net/pkozlowski_opensource/h8xry/13/
I would really advise against testing 2 controllers together but just for the sake of answering the question, it is possible as well:
describe('Testing the SecondController controller', function() {
it('should prepare title', inject(function($rootScope, $controller) {
$controller('FirstController', {
$scope: $rootScope
});
var $scope = $rootScope.$new();
$scope.$index = 1;
ctrl = $controller('SecondController', {
$scope: $scope
});
expect($scope.childs[0].title).toEqual('Hello, earth!1');
}));
});
And the jsFiddle: http://jsfiddle.net/pkozlowski_opensource/4Qy6b/1/

Answer 2

AngularJS documentation suggests testing nested controllers by instantiating each of them and establishing the same scope hierarchy between them as in your app. This makes sense because (up to a point) you want to test your controller in a realistic context.

Answer 3

In your test instantiate the parent controller with a new scope:
mainScope = $rootScope.$new();
$controller('ParentController', {$scope: mainScope});
and in your child controller, instantiate a new scope using the previously instantiated scope:
childScope = mainScope.$new();
$controller('ChildController', {$scope: childScope});
Example from the AngularJS documentation:
describe('state', function() {
var mainScope, childScope, grandChildScope;
beforeEach(module('myApp'));
beforeEach(inject(function($rootScope, $controller) {
mainScope = $rootScope.$new();
$controller('MainController', {$scope: mainScope});
childScope = mainScope.$new();
$controller('ChildController', {$scope: childScope});
grandChildScope = childScope.$new();
$controller('GrandChildController', {$scope: grandChildScope});
}));
it('should have over and selected', function() {
expect(mainScope.timeOfDay).toBe('morning');
expect(mainScope.name).toBe('Nikki');
expect(childScope.timeOfDay).toBe('morning');
expect(childScope.name).toBe('Mattie');
expect(grandChildScope.timeOfDay).toBe('evening');
expect(grandChildScope.name).toBe('Gingerbread Baby');
});
});