Im pretty new to AngularJS and testing so im trying to test my service i made in AngularJS.
I have set up the service like this
var serviceModule = angular.module('App.services', []);
serviceModule.factory('subscribeService', function ($http) {
return {
getNumberOfSubscribers : function() {
return $http.get('/jsonFiles/subscribers.json')
.then(function(subscribers) {
return subscribers.length;
});
}
};
});
And the test goes like this.
describe('Subscribe service test', function() {
var httpBackend,
subscribeServiceMock,
subscribers;
subscribers = [{"email": "test1#mail.com", "subscriptions": "A,B,C"},
{"email": "test2#mail.com", "subscriptions": "A,C,D"},
{"email": "test3#mail.com", "subscriptions": "B,C,F"}];
beforeEach(module('App.services'));
beforeEach(inject(function(subscribeService){
subscribeServiceMock = subscribeService;
}));
it('Should return total numbers of subsribers', inject(function ($httpBackend) {
$httpBackend.whenGET('/jsonFiles/subscribers.json').respond(subscribers);
var numberOfSubscribers = subscribeServiceMock.getNumberOfSubscribers();
$httpBackend.flush();
expect(numberOfSubscribers).toEqual(3);
}));
The test seams to fail with this error:
"Subscribe service test Should return total numbers of subsribers FAILED"
" Expected { then : Function } to equal 3"
Im wondering where i have got this wrong?
Have you tried to inject your httpBackend? Try this on your "beforeEach" call:
beforeEach(inject(function(subscribeService, _$controller_, _$rootScope_, _$httpBackend_){
subscribeServiceMock = subscribeService;
$scope = _$rootScope_.$new();
$controller = _$controller_('MyCtrl', { $scope: $scope });
$httpBackend = _$httpBackend_;
}));
UPDATE
As I found out here: AngularJS Issues mocking httpGET request
It seems there's in fact a difference between these two "injection methods"
Related
I'm working on an AngularJS app and I'm facing some problems with Jasmine's SpyOn in a concrete directive.
The directive is quite simple, just call a service's method and when it resolves/rejects the promise acts in consequence, setting some values or another ones.
The problem: When I try to mock SignatureService.getSignatureData SpyOn does not work as I expect, and acts as if I was invoking jasmine's callThrough method over getSignatureData.
I've been using spyOn and mocks in other directives and services, and there was no problem with those.
I've been trying to solve this issue the last two days, comparing with other solutions and user's answers, but I can not find a valid solution.
Here's my code:
AngularJS directive code:
angular
.module('module_name')
.directive('signatureDirective', signatureDirective);
angular
.module('GenomcareApp_signature')
.controller('signatureDController', signatureDController);
function signatureDirective() {
return {
restrict: 'E',
templateUrl: 'components/signature/signature.directive.html',
controller: signatureDController,
controllerAs: 'ctrl',
bindToController: true
};
}
signatureDController.$inject = [
'$scope',
'$rootScope',
'$location',
'SignatureService'
];
function signatureDController($scope, $rootScope, $location, SignatureService) {
var controller = this;
$scope.$on('pdfFileLoadSuccessfully', function (data) {
console.log(data);
controller.loadPdfSucceed = true;
});
$scope.$on('pdfFileLoadFails', function (data) {
console.error(data);
controller.loadPdfError = true;
});
function loadDirectiveInitData() {
var queryParameters = atob($location.search().data);
controller.email = queryParameters.split(';')[0];
controller.phone = queryParameters.split(';')[1];
controller.docid = queryParameters.split(';')[2];
SignatureService.getSignatureData(controller.email, controller.phone, controller.docid)
.then(
function (data) {
console.log(data);
controller.stampTime = data.stamp_time;
controller.fileUrl = data.original_file.url;
},
function (error) {
console.error(error);
controller.error = true
})
.finally(
function () {
controller.endLoad = true;
})
}
loadDirectiveInitData();
}
Jasmine test code:
'use strict';
/* global loadJSONFixtures */
describe('Test :: Signature directive', function () {
beforeEach(angular.mock.module('app'));
beforeEach(module('translateNoop'));
var $q, $compile, $rootScope, controller, $scope, $httpBackend, $location, SignatureService;
beforeEach(angular.mock.inject(function (_$controller_, _$q_, _$rootScope_, _$location_, _$compile_, _$httpBackend_, _SignatureService_) {
$q = _$q_;
$compile = _$compile_;
$location = _$location_;
$scope = _$rootScope_.$new();
$httpBackend = _$httpBackend_;
SignatureService = _SignatureService_;
spyOn($location, 'search').and.returnValue({data: 'dGVzdEB0ZXN0LmNvbTsrMzQ2NjY2NjY2NjY7WG9TUFFnSkltTWF2'});
$httpBackend.whenGET('components/signature/signature.directive.html').respond(200, '');
controller = _$controller_('signatureDController', {$scope: $scope});
}));
describe('Testing directive', function () {
it('Init data should be set when promise resolves/rejects', function (done) {
// SpyOn DOES NOT MOCK THE SERVICE METHOD
spyOn(SignatureService, 'getSignatureData').and.callFake(function () {
return $q.resolve({...})
});
var element = angular.element('<signature-directive></signature-directive>');
element = $compile(element)($scope);
$scope.$digest();
done();
// ... some expect stuff
});
});
});
If any one can give me some advice or solution, I would be very thankful.
Thank you very much.
UPDATE1: I don't know why, but if I do not declare the controller variable in the global beforeEach, Jasmine's spyOn mocks the method as I expect.
Now the issue is how to get the controller to test that the controller values are set as expected.
Well... I realized that the problem was that the controller was being created before all, and somehow when the service was mocked the controller ignores it.
This idea came by accident, when I paste the service's spyOn in the global beforeEach.
So I decide to create a new instance of the controller and the corresponding spyOn with the desired result inside the beforeEach of each describe.
It works. Maybe it's not the best aproach, and I encourage to anyone who have the answer to post it. I'm going to be eternally greatful.
Here's my final test code:
describe('Test :: Signature directive', function () {
beforeEach(angular.mock.module('app'));
beforeEach(module('translateNoop'));
var $q, $compile, $rootScope, $scope, $httpBackend, $location, SignatureService, test_fixture;
beforeEach(angular.mock.inject(function (_$q_, _$rootScope_, _$location_, _$compile_, _$httpBackend_, _SignatureService_) {
$q = _$q_;
$compile = _$compile_;
$location = _$location_;
$scope = _$rootScope_.$new();
$httpBackend = _$httpBackend_;
SignatureService = _SignatureService_;
// controller = _$controller_;
spyOn($location, 'search').and.returnValue({data: 'dGVzdEB0ZXN0LmNvbTsrMzQ2NjY2NjY2NjY7WG9TUFFnSkltTWF2'});
$httpBackend.whenGET('components/signature/signature.directive.html').respond(200, '');
}));
describe('Testing directive when service resolve promise', function () {
var controller;
beforeEach(inject(function(_$controller_) {
spyOn(SignatureService, 'getSignatureData').and.callFake(function () {
return $q.resolve({...})
});
controller = _$controller_('signatureDController', {$scope: $scope})
}));
it('Init data should be set', function () {
// spyOn($location, 'search').and.callThrough();
var element = angular.element('<signature-directive></signature-directive>');
element = $compile(element)($scope);
$scope.$digest();
// ... some expect(...).toEqual(...) stuff and more
});
});
});
Thank you for your time.
Try to use $q.defer(), here's an example:
it('Init data should be set when promise resolves/rejects', function (done) {
// SpyOn DOES NOT MOCK THE SERVICE METHOD
spyOn(SignatureService, 'getSignatureData').and.callFake(function () {
let deferred = $q.defer();
deferred.resolve({...});
return deferred.promise;
});
var element = angular.element('<signature-directive></signature-directive>');
element = $compile(element)($scope);
$scope.$digest();
done();
// ... some expect stuff
});
The module definition
var module = angular.module('test', []);
module.provider('client', function() {
this.$get = function($http) {
return {
foo: function() {
return $http.get('foo');
}
}
}
});
module.factory('service', ['client', function(client) {
return {
bar: function() {
return client.foo();
}
}
}]);
Basically, client is a wrapper for http calls, and service is a wrapper around the client basic features.
I'm unit testing both the provider and the service with karma+jasmine. The provider tests run as expected, but i have a problem with the service tests:
describe('service test', function(){
var service = null;
beforeEach(function(){
module('test')
inject(function(_service_, $httpBackend, $injector) {
service = _service_;
$httpBackend = $injector.get('$httpBackend');
});
});
it('should invoke client.foo via service.bar', function() {
$httpBackend.expect("GET", "foo");
service.bar();
expect($httpBackend.flush).not.toThrow();
});
});
I get Expected function not to throw, but it threw Error: No pending request to flush !.. When testing the provider with the same way, this test passes. Why?
When you are testing your service, you need to mock the client and inject that mock instead of the real client. Your mock can be in the same file if you only expect to use it for testing this service or in a separate file if you'll use it again elsewhere. Doing it this way does not require the use of $httpBackend (because you are not actually making an http call) but does require using a scope to resolve the promise.
The mock client:
angular.module('mocks.clientMock', [])
.factory('client', ['$q', function($q) {
var mock = {
foo: function() {
var defOjb = $q.defer();
defOjb.resolve({'your data':'1a'});
return defOjb.promise;
}
};
return mock;
}]);
Using the mock:
describe('service test', function(){
var service, mock, scope;
beforeEach(function(){
module('test', 'mocks.clientMock');
inject(function(_service_, $rootScope) {
service = _service_;
scope = $rootScope.$new();
});
});
it('should invoke client.foo via service.bar', function() {
spyOn(client, 'foo').and.callThrough();
service.bar();
scope.$digest();
expect(client.foo).toHaveBeenCalled();
});
});
I testing my angular-application with jasmine(http://jasmine.github.io/2.0/) and getting next error:
Unknown provider: $scopeProvider <- $scope
I know, that it's incorrect to build dependency with scope in filters, services, factories, etc., but I use $scope in controller!
Why am i getting this error? controller looks like
testModule.controller('TestCont', ['$filter', '$scope', function($filter, $scope){
var doPrivateShit = function(){
console.log(10);
};
this.lol = function(){
doPrivateShit();
};
this.add = function(a, b){
return a+b;
};
this.upper = function(a){
return $filter('uppercase')(a);
}
$scope.a = this.add(1,2);
$scope.test = 10;
$scope.search = {
};
}]);
and my test's code:
'use strict';
describe('testModule module', function(){
beforeEach(function(){
module('testModule');
});
it('should uppercase correctly', inject(function($controller){
var testCont = $controller('TestCont');
expect(testCont.upper('lol')).toEqual('LOL');
expect(testCont.upper('jumpEr')).toEqual('JUMPER');
expect(testCont.upper('123azaza')).toEqual('123AZAZA');
expect(testCont.upper('111')).toEqual('111');
}));
});
You need to manually pass in a $scope to your controller:
describe('testModule module', function() {
beforeEach(module('testModule'));
describe('test controller', function() {
var scope, testCont;
beforeEach(inject(function($rootScope, $controller) {
scope = $rootScope.$new();
testCont = $controller('TestCont', {$scope: scope});
}));
it('should uppercase correctly', function() {
expect(testCont.upper('lol')).toEqual('LOL');
expect(testCont.upper('jumpEr')).toEqual('JUMPER');
...
});
});
});
Normally, a $scope will be available as an injectable param only when the controller is attached to the DOM.
You need to associate somehow the controller to the DOM (I'm mot familiar with jasmine at all).
I am following a video tutorial from egghead (link bellow) which suggest this approach:
describe("hello world", function () {
var appCtrl;
beforeEach(module("app"))
beforeEach(inject(function ($controller) {
appCtrl = $controller("AppCtrl");
}))
describe("AppCtrl", function () {
it("should have a message of hello", function () {
expect(appCtrl.message).toBe("Hello")
})
})
})
Controller:
var app = angular.module("app", []);
app.controller("AppCtrl", function () {
this.message = "Hello";
});
I am posting it because in the answer selected we are creating a new scope. This means we cannot test the controller's scope vars, no?
link to video tutorial (1min) :
https://egghead.io/lessons/angularjs-testing-a-controller
I've been trying to fix it for hours. Unfortunately with negative effect so please help me.
In my application I want to test my $http requests. I'm doing it by using $httpBackend.
Here is my controller code:
angular.module('app').controller('testController',function($scope,$http){
$http.get('/test/users').success(function(data){
console.log('wtf');
});
})
My unit test code:
describe('testController tests', function(){
var $httpBackend, $scope, createController;
beforeEach(module('app'));
beforeEach(inject(function($injector, ngTableParams, notifier,identity, $sessionStorage, $location){
$httpBackend = $injector.get('$httpBackend');
$httpBackend.whenGET('/test/users').respond({test: 'test'});
$rootScope = $injector.get('$rootScope');
$scope = $rootScope.$new();
var $controller = $injector.get('$controller');
createController = function(){
return $controller('testControler', { '$scope': $scope, '$http': $httpBackend });
};
}));
it('should fetch users ', function() {
$httpBackend.expectGET('/test/users');
var controller = createController();
$httpBackend.flush();
});
});
It's not working. I always have the following error:
TypeError: Object function $httpBackend(method, url, data, callback, headers, timeout, withCredentials) {
var xhr = new MockXhr(),
expectation = expectations[0],
wasExpected = false;
function prettyPrint(data) {
return (angula...<omitted>... } has no method 'get'
at new <anonymous> (http://localhost:9876/base/public/app/controllers/testController.js:256:11)
at invoke (http://localhost:9876/base/public/libraries/angular/angular.js:3805:17)
at Object.instantiate (http://localhost:9876/base/public/libraries/angular/angular.js:3816:23)
at $get (http://localhost:9876/base/public/libraries/angular/angular.js:6922:28)
at createController (http://localhost:9876/base/test/unit/testControllerSpec.js:70:18)
at null.<anonymous> (http://localhost:9876/base/test/unit/testControllerSpec.js:89:26)
at jasmine.Block.execute (http://localhost:9876/base/node_modules/karma-jasmine/lib/jasmine.js:1145:17)
at jasmine.Queue.next_ (http://localhost:9876/base/node_modules/karma-jasmine/lib/jasmine.js:2177:31)
at http://localhost:9876/base/node_modules/karma-jasmine/lib/jasmine.js:2167:18
Any ideas what does it mean and how to fix it?
I've found error in my code. $httpBackend shouldn't be injected into controller.
I think the problem is you need to add the dependencies to your module creation:
angular.module('app', []).controller ...
instead of
angular.module('app').controller ...
I've looked up and down and tried all kinds of things to make the E2E passThrough() actually work. Only examples are for templates. I don't think it actually can work but if someone has ever seen a working example I would love to see it. Basically I want real XHR calls in my Karma tests instead of mocks.
This is where I am at - i've tried a bunch of variations - right now I get an Unknown provider: cartServiceProvider error - sometimes I get that injected but then it's something else.
myAppDev = angular.module('myApp', ['ngMockE2E']);
myAppDev.run(function($httpBackend) {
$httpBackend.whenPOST(/^api\/cart\/save/).passThrough();
});
beforeEach(angular.module('myApp'));
beforeEach(inject(function(_$httpBackend_, _$rootScope_, _$http_e) {
$scope = _$rootScope_;
$http = _$http_;
$httpBackend = _$httpBackend_;
}));
describe('#createOrder()', function() {
it('should return an order ID', function(done) {
inject(function(cartService) {
$scope.$apply(function() {
cartService.createOrder(function(res) {
done();
});
});
})
});
});
Sample service:
angular.module('myApp').factory('cartService', function($http) {
Cart.prototype.createOrder = function(callback) {
var self = this;
var data = {}
$http.post('/api/cart/save', data ).success(function(res) {
self.order = res.id;
callback(res);
});
};