I am trying to test a controller which uses angular's $resource.
function PermissionsCtrl($scope, $resource, $cookies) {
var Object = $resource('/v1/objects/:id');
loadObjects();
function loadObjects() {
$scope.myAppObjects = new Array();
var data = AppObject.get({find: '{"app_id": '+wtm.app_id+'}'},
function(){
if (data.results) {
for(var i = 0; i< data.results.length; i++) {
if(!data.results[i].is_deleted) {
(function(i){
$scope.objects(data.results[i]);
}(i));
}
}
}
},
function(error){console.log(error);});
}
And here is the test code.
var apiServer = "...";
var app_id = 999
var mock_object_data = {...};
describe('apps permissionsCtrl', function(){
var scope, ctrl, $httpBackend;
// Create a matcher for comparing data
beforeEach( function() {
this.addMatchers({
toEqualData: function(expected) {
return angular.equals(this.actual, expected);
}
});
});
// Create the controller with injected data/services
beforeEach(inject(function(_$httpBackend_, $rootScope, $controller, $resource) {
$httpBackend = _$httpBackend_;
// cookie data to inject
var cookies = new Array();
cookies['id'] = '...'; // just needs to be declared
$httpBackend.expectGET(apiServer+'/v1/app_objects? find=%7B%22app_id%22:'+app_id+'+%7D&access_token=' + cookies['id'])
.respond( mock_object_data );
var $injector = angular.injector(['ng', 'ngResource']);
var $resource = $injector.get('$resource');
scope = $rootScope.$new();
ctrl = $controller(PermissionsCtrl, {$scope: scope, $cookies: cookies, $resource: $resource});
}));
it('should put object data into $scope', function() {
$httpBackend.flush();
expect(scope.objects).toEqualData( mock_object_data );
});
});
When I run this I get
Error: Unknown provider: $resourceProvider <- $resource
at the line where I try to create my controller. I don't understand how to inject this into my controller and no matter what I try I get the same error. A couple things I've tried are
Declaring a an empty mock object and passing it through similar to my cookies variable. I figure this is probably a bad solution anyway since I actually want to use the service.
Mimicking the scope mock and passing it into my inject function and passing $resource.$new() to my controller.
Doing nothing and hoping that httpBackend would cover it since that's what ultimately gets called anyway. Vojta Jína made it sound like that would work but no dice.
Mild epithets. Satisfying but not very effective.
After more reading and more experimenting it seems the right way to do this is to abstract the use of $resource out of the controller. In my case I wrote a service that relies on $resource and then inject that service into my controller. Meanwhile I test that service separately from my controller. Better practice all around.
My service declaration:
angular.module('apiModule', ['localResource', 'ngCookies'])
.factory('apiService', function($resource, $cookies) {
and in my unit tests I pass it through in a beforeEach setup function
beforeEach(module('apiModule'));
Try to instantiate $resource with the following code:
var $injector = angular.injector(['ng', 'ngResource']);
var $resource = $injector.get('$resource');
Similar for other services, except when they are in other modules still. Then add that module to the array.
More info
Related
I would like to stub the save method available to Mongoose models. Here's a sample model:
/* model.js */
var mongoose = require('mongoose');
var userSchema = mongoose.Schema({
username: {
type: String,
required: true
}
});
var User = mongoose.model('User', userSchema);
module.exports = User;
I have some helper function that will call the save method.
/* utils.js */
var User = require('./model');
module.exports = function(req, res) {
var username = req.body.username;
var user = new User({ username: username });
user.save(function(err) {
if (err) return res.end();
return res.sendStatus(201);
});
};
I would like to check that user.save is called inside my helper function using a unit test.
/* test.js */
var mongoose = require('mongoose');
var createUser = require('./utils');
var userModel = require('./model');
it('should do what...', function(done) {
var req = { username: 'Andrew' };
var res = { sendStatus: sinon.stub() };
var saveStub = sinon.stub(mongoose.Model.prototype, 'save');
saveStub.yields(null);
createUser(req, res);
// because `save` is asynchronous, it has proven necessary to place the
// expectations inside a setTimeout to run in the next turn of the event loop
setTimeout(function() {
expect(saveStub.called).to.equal(true);
expect(res.sendStatus.called).to.equal(true);
done();
}, 0)
});
I discovered var saveStub = sinon.stub(mongoose.Model.prototype, 'save') from here.
All is fine unless I try to add something to my saveStub, e.g. with saveStub.yields(null). If I wanted to simulate an error being passed to the save callback with saveStub.yields('mock error'), I get this error:
TypeError: Attempted to wrap undefined property undefined as function
The stack trace is totally unhelpful.
The research I've done
I attempted to refactor my model to gain access to the underlying user model, as recommended here. That yielded the same error for me. Here was my code for that attempt:
/* in model.js... */
var UserSchema = mongoose.model('User');
User._model = new UserSchema();
/* in test.js... */
var saveStub = sinon.stub(userModel._model, 'save');
I found that this solution didn't work for me at all. Maybe this is because I'm setting up my user model in a different way?
I've also tried Mockery following this guide and this one, but that was way more setup than I thought should be necessary, and made me question the value of spending the time to isolate the db.
My impression is that it all has to do with the mysterious way mongoose implements save. I've read something about it using npm hooks, which makes the save method a slippery thing to stub.
I've also heard of mockgoose, though I haven't attempted that solution yet. Anyone had success with that strategy? [EDIT: turns out mockgoose provides an in-memory database for ease of setup/teardown, but it does not solve the issue of stubbing.]
Any insight on how to resolve this issue would be very appreciated.
Here's the final configuration I developed, which uses a combination of sinon and mockery:
// Dependencies
var expect = require('chai').expect;
var sinon = require('sinon');
var mockery = require('mockery');
var reloadStub = require('../../../spec/utils/reloadStub');
describe('UNIT: userController.js', function() {
var reportErrorStub;
var controller;
var userModel;
before(function() {
// mock the error reporter
mockery.enable({
warnOnReplace: false,
warnOnUnregistered: false,
useCleanCache: true
});
// load controller and model
controller = require('./userController');
userModel = require('./userModel');
});
after(function() {
// disable mock after tests complete
mockery.disable();
});
describe('#createUser', function() {
var req;
var res;
var status;
var end;
var json;
// Stub `#save` for all these tests
before(function() {
sinon.stub(userModel.prototype, 'save');
});
// Stub out req and res
beforeEach(function() {
req = {
body: {
username: 'Andrew',
userID: 1
}
};
status = sinon.stub();
end = sinon.stub();
json = sinon.stub();
res = { status: status.returns({ end: end, json: json }) };
});
// Reset call count after each test
afterEach(function() {
userModel.prototype.save.reset();
});
// Restore after all tests finish
after(function() {
userModel.prototype.save.restore();
});
it('should call `User.save`', function(done) {
controller.createUser(req, res);
/**
* Since Mongoose's `new` is asynchronous, run our expectations on the
* next cycle of the event loop.
*/
setTimeout(function() {
expect(userModel.prototype.save.callCount).to.equal(1);
done();
}, 0);
});
}
}
Have you tried:
sinon.stub(userModel.prototype, 'save')
Also, where is the helper function getting called in the test? It looks like you define the function as the utils module, but call it as a method of a controller object. I'm assuming this has nothing to do with that error message, but it did make it harder to figure out when and where the stub was getting called.
I am attempting to perform a unit test on this controller.
angular.module('app.dashboard', [])
.controller('DashboardController', ['$scope', 'myAppService'], function($scope, myAppService) {
var _data = myAppService.requests.get(function() {
$scope.requests = _data.requests;
});
});
myAppService is a service based on ngResource.
I want to test for the number of requests. I spent all day figuring out how to get $httpBackend injected, now I'm hung up on properly measuring the data.
beforeEach(inject(function ($controller, $rootScope, $injector) {
$httpBackend = $injector.get('$httpBackend');
$httpBackend.when('GET', '/api/requests').respond(
{requests: [{sender: 'joe', message: 'help'}, {sender: 'larry', message: 'SOS'}]}
);
});
it('should have a properly working Dashboard controller', inject(function($rootScope, $controller, $httpBackend) {
var $scope = $rootScope.$new();
var ctrl = $controller('DashboardController', {
$scope : $scope
});
expect($scope.requests.length).toBe(2);
}));
Any assistance would be greatly, massively appreciated.
For the most part, everything looks ok. There are two things that I think might be missing from your code though.
First, this method doesn't look quite right:
var _data = myAppService.requests.get(function() {
$scope.requests = _data.requests;
});
If you are providing a callback function, shouldn't that be passing in the data:
myAppService.requests.get(function(_data) {
$scope.requests = _data.requests;
});
It is hard to tell without seeing your myAppService code (that is using $resource).
Second, in order to flush through the ajax response you need to call $httpBackend.flush(); before you make your assertion with expect:
var $scope = $rootScope.$new();
var ctrl = $controller('DashboardController', {
$scope : $scope
});
httpBackend.flush();
expect($scope.requests.length).toBe(2);
From the $httpBackend docs:
flush(count):
Flushes all pending requests using the trained responses.
Hope this helps.
I started to write unit tests for my angular app.
However it seems to me that I use a lot of boilerplate code to init and test the controller.
In this Unit Test I want to test if a model from the scope is sent to the Api when I execute a function.
I needed 20 lines of code for this. This makes it inconvenient to write unit tests that do only one thing.
Do you have any tips on getting the code size to a smaller chunk?
This is my current unit test:
'use strict';
describe('controllers', function(){
beforeEach(module('kronos'));
describe('CustomerSignupCtrl', function() {
it('should send customer to Api on submit', inject(function($controller) {
var scope = {};
var $location = {};
var Api = {
signupCustomer: function(customer) {
expect(customer).toEqual({attrs: "customerdata"});
return {
success: function() { return this; },
error: function() { return this; }
};
}
};
var ctrl = $controller('CustomerSignupCtrl', {
$scope: scope,
$location: location,
Api: Api});
scope.customer = {attrs: "customerdata"};
scope.signup();
}));
});
});
What I don't like in particular are the following points
I need to init the all dependencies and it doesn't matter if I use them or not
The Api returns a promise that I only need because the controller is expecting the promise
I need to init the controller.
How can I make this code shorter and more explicit?
Edit: I just noticed I can ignore the $location Service for this unit test. Great
Edit2: I found out about angular-app, which serves as a good practice example app. There you can find specs with jasmine, which are really nice written.
Use another beforeEach method in your describe scope to set up scope, $location, controller etc, then just change them in your test as you need to. Js is dynamic so all should be fine.
You can also extract each object that you set up into a function so that you can reinitialise them in a test if you need to.
describe('controllers', function(){
beforeEach(module('kronos'));
describe('CustomerSignupCtrl', function() {
var controller, scope, $location, Api;
beforeEach(function(){
scope = {};
$location = {};
Api = {
signupCustomer: function(customer) {
expect(customer).toEqual({attrs: "customerdata"});
return {
success: function() { return this; },
error: function() { return this; }
};
}
};
controller = makeController();
})
function makeController(){
inject(function($controller){
controller = $controller('CustomerSignupCtrl', {
$scope: scope,
$location: location,
Api: Api});
});
}
it('should send customer to Api on submit', function() {
scope.customer = {attrs: "customerdata"};
scope.signup();
});
});
});
You can not shorten your code much. Things like initialization, mocking and assertion have to be done at some place. But you can improve the readability of your code by decoupling initialization and test code. Something like this:
describe('CustomerSignupCtrl', function(){
var controller, scope, location, api;
beforeEach(module('kronos'));
// initialization
beforeEach(inject(function($controller, $rootScope, $location, Api){
scope = $rootScope.$new();
location = $location;
api = Api;
controller = $controller('CustomerSignupCtrl', {
$scope: scope, $location: location, Api: api});
}));
// test
it('should send customer to Api on submit', function() {
scope.customer = {attrs: "customerdata"};
spyOn(api,'signupCustomer').andCallFake(function(customer) {
return {
success: function() { return this; },
error: function() { return this; }
};
});
scope.signup();
expect(api.signupCustomer).toHaveBeenCalledWith(scope.customer);
});
});
I have the following angular controller
function IndexCtrl($scope, $http, $cookies) {
//get list of resources
$http.get(wtm.apiServer + '/v1/developers/me?access_token=' + $cookies['wtmdevsid']).
success(function(data, status, headers, config) {
// snip
}).
error(function(data, status, headers, config) {
// snip
});
$scope.modal = function() {
// snip
}
return;
}
What I am trying to do is mock the get method on the $http service. Here's my unit test code:
describe('A first test suite', function(){
it("A trivial test", function() {
expect(true).toBe(true);
});
});
describe('Apps', function(){
describe('IndexCtrl', function(){
var scope, ctrl, $httpBackend;
var scope, http, cookies = {wtmdevsid:0};
beforeEach(inject(function($injector, $rootScope, $controller, $http) {
scope = $rootScope.$new();
ctrl = new $controller('IndexCtrl', {$scope: scope, $http: $http, $cookies: cookies});
spyOn($http, 'get');
spyOn(scope, 'modal');
}));
it('should create IndexCtrl', function() {
var quux = scope.modal();
expect(scope.modal).toHaveBeenCalled();
expect($http.get).toHaveBeenCalled();
});
});
});
When I run this I get
ReferenceError: wtm is not defined.
wtm is a global object and of course it wouldn't be defined when I run my test because the code that it is declared in is not run when I run my test. What I want to know is why the real $http.get function is being called and how do I set up a spy or a stub so that I don't actually call the real function?
(inb4 hating on globals: one of my coworkers has been tasked with factoring those out of our code :) )
You need to wire up the whenGET method of your $httpBackend in advance of your test. Try setting it up in the beforeEach() function of your test... There is a good example here under "Unit Testing with Mock Backend".
I suggest all globals used the way you described here should be used through the $window service.
All global variables that are available, such as as window.wtm, will also be available on $window.atm.
Then you can stub out your wtm reference completely and spy on it the same way you already described:
var element, $window, $rootScope, $compile;
beforeEach(function() {
module('fooApp', function($provide) {
$provide.decorator('$window', function($delegate) {
$delegate.wtm = jasmine.createSpy();
return $delegate;
});
});
inject(function(_$rootScope_, _$compile_, _$window_) {
$window = _$window_;
$rootScope = _$rootScope_;
$compile = _$compile_;
});
});
Maybe you could create a custom wrapper mock around $httpBackend that handles your special needs.
In detail, Angular overwrites components of the same name with a last-come first-served strategy, this means that the order you load your modules is important in your tests.
When you define another service with the same name and load it after the first one, the last one will be injected instead of the first one. E.g.:
apptasticMock.service("socket", function($rootScope){
this.events = {};
// Receive Events
this.on = function(eventName, callback){
if(!this.events[eventName]) this.events[eventName] = [];
this.events[eventName].push(callback);
}
// Send Events
this.emit = function(eventName, data, emitCallback){
if(this.events[eventName]){
angular.forEach(this.events[eventName], function(callback){
$rootScope.$apply(function() {
callback(data);
});
});
};
if(emitCallback) emitCallback();
}
});
This service offers the exact same interface and behaves exactly like the original one except it never communicates via any socket. This is the service we want to use for testing.
With the load sequence of angular in mind, the tests then look like this:
describe("Socket Service", function(){
var socket;
beforeEach(function(){
module('apptastic');
module('apptasticMock');
inject(function($injector) {
socket = $injector.get('socket');
});
});
it("emits and receives messages", function(){
var testReceived = false;
socket.on("test", function(data){
testReceived = true;
});
socket.emit("test", { info: "test" });
expect(testReceived).toBe(true);
});
});
The important thing here is that module('apptasticMock') gets executed after module('apptastic'). This overwrites the original socket implementation with the mocked one. The rest is just the normal dependency injection procedure.
This article I wrote could be interesting for you, as it goes into further details.
I am fairly new to jasmine and wanted to create a test for the following below, I created the code in the test section but I get "TypeError: Cannot set property 'username' of undefined"..
I created a global namespace 'cp' in apps.js and used that in the service and controller.
//controller
cp.controller = {};
cp.controller.LoginController = function($scope, $location, $cookies){
$scope.signIn = function(){
$cookies.user = $scope.form.username;
user.set($scope.form.username);
$location.hash( "home" );
}
};
//service
cp.serviceFactory = {};
cp.serviceFactory.user = function user( $cookies){
var userName = $cookies.user;
return{
set: function(name){
userName = name;
},
get: function(){
return userName;
}
}
};
//test script
describe('Cameo Controllers', function() {
describe('LoginController', function(){
var scope, cookies, ctrl, $httpBackend;
beforeEach(module('CameoPaaS'));
beforeEach(inject(function(_$httpBackend_, $rootScope, $controller, $cookies) {
$httpBackend = _$httpBackend_;
// cookies = $cookies.username;
scope = $rootScope.$new();
cookies = scope.$cookies;
ctrl = $controller(cp.controller.LoginController, {$scope: scope, $cookies: cookies});
}));
it('should log the user into the system', function() {
expect(scope.username).toBeUndefined();
scope.form.username = 'me';
scope.signIn();
//expect(user).toBe(undefined);
});
});
});
Question: how do I define and set the value for the $cookies.username in the test script to get around the error.
First off make sure you are including angular-cookies.js these were separated from main distro in 1.0.0rc3
If it were me, I would wrap the cookies handling into a service and then use jasmine to mock/spy on the your cookie-wrapper service implementation. You might find this post helpful. Also, I found this testing cookies in unit and e2e. IMHO the problem with this is that it is too close to the metal, having to work with the browser cookies directly.
I also run through the same problem, here is the workaround -
beforeEach(inject(function($cookies){
$cookies.username = 'AngularJs';
}));
Please suggest if there is any better way.