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
});
Related
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
});
I am trying to get started with angular.js but I can't figure out how to inject a simple variable into my controller before testing.
This is my controller:
angular.module("app").controller("SimpleController", SimpleController);
function SimpleController() {
var vm = this;
vm.myVar = 1;
vm.getMyVar = function() {
return vm.myVar;
};
}
My test looks like the following:
describe("SimpleController", function() {
var vm;
beforeEach(module('app'));
beforeEach(inject(function($controller, $rootScope) {
vm = $controller('SimpleController', {
$scope: $rootScope.$new(),
myVar: 2
});
}));
it('myVar should be 2 not 1', function() {
expect(vm.getMyVar()).toEqual(2);
});
});
I did a lot of google searching but this is really confusing because many people do use $scope in controller and not thisas I do. But I guess the injection of variables should work with this too?
You may want to try writing your controller this way. This will make $scope accessible.
(function () {
angular.module("app").controller("SimpleController", SimpleController);
SimpleController.$inject = ['$scope'];
function SimpleController($scope) {
$scope.somevar = "something";
}
})();
I'm sure you've probably came across the documentation, but here is a link to the docs which contains the basics and should at least get you going in the right direction.
Another alternative would be something like this:
app.controller('SimpleController', ['$scope', function($scope) {
$scope.somevar = "something";
....
}]);
When you use $scope, you're making that property publicly available in the view.
I am trying to create a unit test for the child controller
In my child controller, I called a function in the parent
child controller
$scope.clickMe = function(){
$scope.parentMethod();
})
Parent controller
$scope.parentMethod = function(item){
//do something with parent
})
Unit test
var childCtrl;
beforeEach(module('myApp'));
beforeEach(inject(function (_$controller_, _$rootScope_) {
scope = _$rootScope_.$new();
childCtrl = _$controller_('childCtrl', {
$scope: scope
});
}));
describe('test parent', function() {
it('should call parent', function() {
$scope.clickMe();
$httpBackend.flush();
});
});
});
I am getting
TypeError: 'undefined' is not a function (evaluating '$scope.parentMethod()')
I am not sure how to fix this. Can anyone help me about it? Thanks a lot!
You should mock the method in scope for sake of testing child controller
scope = _$rootScope_.$new();
scope.parentMethod = function noop(){};
childCtrl = _$controller_('childCtrl', {
$scope: scope
});
For testing noop should be replaced with a spy. Syntax will depend upon the engine you're using Jasmine or Sinon. This way in test it will be possible to verify that parentMethod was called.
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';
});
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
});
}));