Develop Reference

Karma/Jasmine test failing on undefined scope

I'm trying to create first unit testing for one of my controllers.
My Karma/Jasmine simple test for a controller looks like
describe('RegistrationController', function() {
beforeEach(module('myApp'));
var $controller, $rootScope;
beforeEach(inject(function(_$controller_, _$rootScope_){
// The injector unwraps the underscores (_) from around the parameter names when matching
$controller = _$controller_;
$rootScope = _$rootScope_;
}));
describe('Registration $scope.submit', function() {
it('submits registration and sets step to 1', function() {
var $scope = $rootScope.$new();
var controller = $controller('RegistrationController', { $scope: $scope });
$scope.submit();
expect($scope.step).toEqual(1);
});
});
});
which tests that part of the controller
$scope.submit = function () {
$scope.step = 1; //wizard started
var userName = $scope.user.name;
var userNick = $scope.user.nick;
$location.path('localization');
}
but when I run that unit test it fails on user.name and user.nick with an error
TypeError: Cannot read property 'name' of undefined
or
TypeError: Cannot read property 'nick' of undefined
when both values are captured by the form and works fine on the controller side.

Testing javascript functions - that are not visible to controller (angular)

I am using the controller as syntax from angular and i want to test my code using jasmine and sinon.
Let's say i want the following controller code :
angular
.module('Test')
.controller('TestController', TestController);
TestController.$inject = [];
function TestController() {
var viewModel = this;
viewModel.myFunction = myFunction;
function myFunction(){
//do something
//now call a helper function
helperFunction()
}
function helperFunction(){
// ....
}
}
My question is how i can test the helperFunction() or even put a spy on it ? My helper is not visible in my test.
Here is my test :
(function () {
'use strict';
var myController;
describe('Test', function () {
beforeEach(module('Test'));
beforeEach(inject(function ($controller, $injector) {
myController = $controller('TestController');
}));
it('Tests helperFunction', function (){
var sinonSpy = sinon.spy(myController, 'helperFunction');
//perform the action
myController.myFunction();
//expect the function was called - once
expect(sinonSpy .callCount).toEqual(1);
}
})
})

You cannot have access to those functions. When you define a named JS function it's the same as saying:
var helperFunction = function(){};
In which case it would be pretty clear to see that the var is only in the scope within the block and there is no external reference to it from the wrapping controller.
To make a function testable, you need to add it to the $scope of the controller.
viewModel.helperFunction = helperFunction;
But be aware that is not a good idea to be exposing everything just to make it testable. You really need to consider if testing it will actually add some value to your project

try to do so :
var vm = controller("helperFunction", { $scope: scope });
and then:
vm.myFunction();

Add the following code into your controller:
angular.extend($scope, {
helperFunction:helperFunction
});

AngularJS Controller Inheritance: "this" not pointing to the child controller

I am using the controllerAs syntax.
I used $controller to inherit from a parent (more like a base or abstract) controller. I found this question not long ago which I based on.
I noticed that when I use a function which uses a controller property (this.propName), it does not use the current controller this, but the parent's. Here's a demo (plunkr).
Here's a gist to both my parent controller and child controller.

Update sayMyName method to following:
function sayMyName() {
alert(this.me);
}
As you are trying to pick me property on the base controller the alert should pick me value from the corresponding instance and not the instance when it was created which is vm
Updated plunker link

var app = angular.module('myApp', [])
app.controller('BaseController',function() {
this.me = 'Base';
this.sayMe= function() {
alert(this.me);
}
});
app.controller('ChildController', function($scope, $controller) {
var controller = $controller('BaseController as base', {$scope: $scope});
angular.extend(this, controller);
this.me = 'Child';
});

Mock action invoked on controller initialization in AngularJS in test

I'm having angularjs controller that basically looks like below
app.controller('MyCtrl', function($scope, service) {
$scope.positions = service.loadPositions(); // this calls $http internally
$scope.save = function() {
...
};
// other $scope functions here
});
Now every time I write test for any of the methods in $scope I need to stub service.loadPositions() like below:
it(should 'save modified position', function($controller, service, $rootScope) {
spyOn(service, 'loadPositions').andReturn(fakeData);
var scope = $rootScope.$new();
$controller('MyCtrl', {$scope: scope});
// test stuff here
})
Is there any way to avoid this first stubbing in every test? I mean If I already tested that this action is invoked on controller start, I don't really need stubbing this in every next test. This introduces a lot of repetition in each test.
EDIT
I stubmbled upon ngInit and I thought I could use it but it seems not to be recommended way do to such things, but I'm not sure why?

Use a beforeEach inside your describe function:
describe('My test', function() {
var $controller,
$rootScope,
serviceMock;
beforeEach(function() {
serviceMock = { loadPositions: function() {} };
spyOn(serviceMock, 'loadPositions').andReturn(fakeData);
inject(_$controller_, _$rootScope_) {
$rootScope = _$rootScope_.$new();
$controller = _$controller_('MyCtrl',
{$scope: $rootScope, service: serviceMock});
};
});
it('should save modified position', function() {
// test stuff here
});
});
Notice that I have moved the controller initialization to beforeEach as well so you don't have to do it again in every test.
Just in case you're wondering what the underscores in the inject arguments are for, they enable the test to declare a local $controller variable and a local $rootScope variable. Angular just ignores them when it's resolving the function dependencies.
Update: There was a little bug in the example code. Just fixed it.

You can move this into beforeEach() and use $provide to always return your fake service.
Not knowing all of your test code something like this should work.
var scope, controller;
beforeEach(module("app", function($provide){
var mockedService = {
loadPositions: function(){return fakeData;}//or use sinon
};
$provide.value('service', mockedService);
});
beforeEach(inject(function($rootScope, $controller) {
scope = $rootScope.$new();
controller = $controller;
}));
it(should 'save modified position', function() {
controller('MyCtrl', {$scope: scope});
// test stuff here
});

Testing Angular Controllers defined like angular.module('myApp').controller(

I am playing around with https://github.com/angular/angular-seed
A controller is defined in app/controllers.js like this
'use strict';
function MyCtrl1() {}
MyCtrl1.$inject = [];
this doesn't pass jshint as MyCtrl1 is referenced in app/app.js and not in my globals list.
According to Brian Ford and others I have read the preferred style is
angular.module('myApp').controller('MyCtrl1', [], function () {});
I like this better as it's not in the global scope, but now my testacular specs fail because this doesn't work anymore:
var myCtrl1;
beforeEach(function(){
myCtrl1 = new MyCtrl1();
});
How do I get a reference to this controller which is defined in the "preferred" style for testing purposes?

credit due to both Javito and Xesued:
beforeEach(module('myApp'));
var scope, ctrl;
beforeEach(inject(function($controller, $rootScope) {
scope = $rootScope.$new();
ctrl = $controller('MyCtrl1', {$scope: scope});
}));

Try,
beforeEach(inject(function($controller) {
scope = {};
MyCtrl1 = $controller('MyCtrl1', {
$scope: scope
});
}));