I have the following Angular service and mock/test setup. I cannot get the mock http request to work properly. I'm returning a promise from my factory and have the HTTP request mocked but the data in the controller's scope is not the data returned from the http service that the factory calls.
As you can see, I have called $digest() on $rootScope and $httpBackend. I'm at a loss.
You can see from the fiddle that the code works properly and displays the text from the service, but the mock is not working.
Why?
The fiddle is here: https://jsfiddle.net/mbaranski/gnxxbgy3/
Here is the code:
var myApp = angular.module('myApp', []);
var ep = '/echo/json/';
myApp.factory('dataFactory', function($http) {
var getData = function() {
var data = $.param({
json: JSON.stringify({
name: "Name from Echo Service"
})
});
return $http.post(ep, data);
}
return {
getData: getData
}
});
myApp.controller('MyCtrl', function($scope, dataFactory) {
$scope.name = 'Original Name';
dataFactory.getData().then(function(data) {
$scope.name = data.data.name;
});
});
describe('Test For Site', function() {
beforeEach(angular.mock.module('myApp'));
var $controller;
var $httpBackend;
var $q;
var $rootScope;
beforeEach(angular.mock.inject(function(_$controller_, _$httpBackend_, _$q_, _$rootScope_) {
$controller = _$controller_;
$httpBackend = _$httpBackend_;
$q = _$q_;
$rootScope = _$rootScope_;
}));
describe('test pageController', function() {
it('Should pass', function() {
var scope = {};
$httpBackend.expect('POST', ep);
$httpBackend.whenPOST(ep, function(str) {
return true;
}).respond(
function() {
return {
name: "Name from Echo Service"
};
});
var controller = $controller('MyCtrl', {
$scope: scope,
});
$httpBackend.flush();
$rootScope.$digest();
$rootScope.$flush();
expect(scope.name).toBe('Name from Echo Service');
});
});
});
Here's the HTML
<div ng-controller="MyCtrl">
Hello, {{name}}!
</div>
<br/>
I was really minute problem, which took a lot to find it. .whenPOST of $httpBackend should only return object/string & your were returning a function which was returning by from .respond of ..whenPOST method.
Just by returning plain JSON, rather than returning function solved the issue.
Code
$httpBackend.whenPOST(ep, function(str) {
return true;
}).respond({
name: "Name from Echo Service"
});
Also remove $rootScope.$flush(); this line. $rootScope doesn't have $flush method in it.
Forked JSFiddle
Related
I have a following piece of code (simplified):
angular
.module('myApp')
.controller('MyController', MyController);
function MyController(wordService) {
getWord();
function getWord() {
return wordService.getNextWord()
.then(doSomethingWithWord)
.catch(doSomethingFailure);
function doSomethingWithWord(response) {
// ... something
}
function doSomethingFailure() {
// ... failing
}
}
}
And I have to test it.
I'm struggling with this over a day now and I can't get it working :(
How to test this code?
For the future, I figured it out:
I have to use $q service and request Angular digest cycle.
describe('MyController', function () {
var $controller, myController, wordService, $q, deferredResponse, scope;
beforeEach(function() {
module('myApp');
inject(function(_$controller_, _wordService_, _$q_, $rootScope) {
$controller = _$controller_;
wordService = _wordService_;
scope = $rootScope.new();
$q = _$q_;
});
myController = $controller('MyController', {wordService:wordService});
deferredResponse = $q.defer(); //deferring asynchronous response
spyOn(wordService, 'getNextWord').and.returnValue(deferredResponse.promise);
});
describe('Testing WordService', function() {
it('Should get next word', function () {
deferredResponse.resolve({status: 200, data: {word: 123}});
scope.$apply();
expect(wordService.getNextWord).toHaveBeenCalled();
})
})
});
i try to test an angular controller but he returns a promise and i cant really resolve it...what's wrong with my code?
the Angular Controller:
kpi.AboutController = function ($scope, Version) {
function loadVersion() {
//$scope.version = Version.getVersion();
$scope.version = '1.1.0';
}
loadVersion();
};
and the jasmine test:
describe('dashboard: AboutController', function() {
beforeEach(module('dashboard'));
var $controller;
beforeEach(inject(function(_$controller_){
// The injector unwraps the underscores (_) from around the parameter names when matching
$controller = _$controller_;
}));
it('testing the version number', function() {
var $scope = {};
var controller = $controller('AboutController', { $scope: $scope });
var version = 0;
console.log($scope.version);
expect($scope.version).toContain("1.");
});
});
this is working, but when i change the line $scope.version = '1.1.0'; to $scope.version = Version.getVersion(); i receive a promise and i can not rly check it....i tried to resolve it with "then()" function via $scope.version.then(...)but that did not work...what to do?
edit:
the following error occures:
Expected e({ $promise: Object({ $$state: Object({ status: 0 }) }), $resolved: false }) to contain '1.'.
at Object.<anonymous>
and the Service:
kpi.VersionFactory = function ($resource, appConfig) {
var Version = $resource(thePath, {}, {
"getVersion": {
method: "GET",
url: thePath,
isArray: false
}
});
return Version;
};
you need to pass a callback into your test case .
kpi.AboutKPIController = function ($scope, Version) {
$scope.loadVersion= function () {
Version.getVersion().then(function(res){
$scope.version = res.data;
})
}
$scope.loadVersion();
};
describe('dashboard: AboutKPIController', function() {
beforeEach(module('dashboard'));
var $controller;
beforeEach(inject(function(_$controller_){
// The injector unwraps the underscores (_) from around the parameter names when matching
$controller = _$controller_;
}));
it('testing the version number', function(done) {
var $scope = {};
var controller = $controller('AboutKPIController', { $scope: $scope });
var version = 0;
console.log($scope.version);
$scope.loadVersion().then(function(res)){
//can test here
expect($scope.version).toContain("1.");
done();
});
});
});
I expect Version.getVersion(); returns a promise. Your controller implemnentation should look like
function loadVersion() {
Version.getVersion().then(function(version) {
$scope.version = version;
});
}
In your test code use $scope.$apply to resolve promises before you perform except.
beforeEach(inject(function(_$controller_, _$rootScope_){
$controller = _$controller_;
$rootScope = _$rootScope_;
}));
it('testing the version number', function() {
var $scope = $rootScope.$new();
var controller = $controller('AboutKPIController', { $scope: $scope });
controller.loadVersion();
$scope.$apply();
expect($scope.version).toContain("1.");
});
I need help, about added jasmine tast to my factory.
My code is...
---dataService.js---
angular.module('angularAppApp')
.factory('dataService', function($resource){
return $resource(`http://...:3100/posts/:id`, null,
{
'update': { method:'PUT' }
});
})
---onePostCtrl.js ---
angular.module('angularAppApp')
.controller('onePostCtrl', ['$scope', '$http', '$routeParams', 'dataService',
function ($scope, $http, $routeParams, dataService) {
dataService.get ({id: $routeParams.postId}).$promise.then(function(data){
$scope.postInfo = data;
});
}]);
-- main container ---
angular.module('angularAppApp').controller('postCtrl', ['$scope','$http', 'ngDialog', 'dataService','trimService', function ($scope, $http, ngDialog, dataService, trimService) {
//save data to remote server from loaded pop-up
$scope.savePost = function(){
$scope.addFormData.date = $scope.formated_date;
dataService.save($scope.addFormData, function() {
laodData();
});
ngDialog.closeAll();
};
//delete post from remote server
$scope.deletePost = function(article) {
dataService.delete({ id: article._id }, function() {
laodData();
});
};
//edit post from remote server
$scope.updatePost = function (article) {
dataService.update({ id: article._id},article).$promise.then(function() {
laodData();
});
ngDialog.closeAll();
}
}]);
--- mock data ---
angular.module('mock', []).value('items', [{ ... }]
---At index.html I am have loaded mocks scripts---
src="bower_components/angular-mocks/angular-mocks.js"
src="mosk_data/mocks.module.js"
--Jasmine tests is ...
describe("factory of dataService", function (){
var $httpBackend, $http, $q, factory;
beforeEach(module("angularAppApp"));
beforeEach(module('mock'));
beforeEach(function(){
inject(function($injector, _$httpBackend_,_$http_,_$q_){
$q = _$q_;
$http = _$http_;
$httpBackend = _$httpBackend_;
$httpBackend.when('GET', '/items').respond(items);
factory = $injector.get('dataService');
});
afterEach(function () {
$httpBackend.verifyNoOutstandingExpectation();
$httpBackend.verifyNoOutstandingRequest();
});
it("Data service", function(){
});
});
Now, I have error "ReferenceError: items is not defined" and cannot ideas how I can test my dataService.
You forgot to inject your value and assign it to a variable in the tests. Try this:
var $httpBackend, $http, $q, factory, items; //declare variable items here (or you can do it inside beforeEach)
beforeEach(module("angularAppApp"));
beforeEach(module('mock'));
beforeEach(function(){
inject(function($injector, _$httpBackend_,_$http_,_$q_, _items_){
$q = _$q_;
$http = _$http_;
//inject the value and assign to your variable
items = _items_
$httpBackend = _$httpBackend_;
$httpBackend.when('GET', '/items').respond(items);
factory = $injector.get('dataService');
});
The Reference error you got was because there was no variable called items. You defined an angular value with name items, but it's not the same as a variable - think of it as it lives "somewhere inside angular guts" and to use it you have to inject it and then use as normal variable.
I am trying to write a unit test to test that tests a factory that performs a http.get and then tests the scope bindings.
The factory is called within my controller.
Here's a plunker showing my http.get: http://plnkr.co/edit/VqUSeTiEj3MP37tAXKad?p=preview
Ctrl:
app.controller('MainCtrl', function($scope, $http, factoryGetJSONFile) {
$scope.name = 'World';
factoryGetJSONFile.getMyData(function(data) {
$scope.Addresses = data.Addresses.AddressList;
$scope.People = data.Names.People;
$scope.Country = data.Country;
});
});
Test:
describe('with httpBackend', function () {
var app;
beforeEach(function () {
app = angular.mock.module('plunker')
});
describe('MyCtrl', function () {
var scope, ctrl, theService, httpMock;
beforeEach(inject(function ($controller, $rootScope, factoryGetJSONFile, $httpBackend) {
httpMock = $httpBackend;
scope = $rootScope.$new();
ctrl = $controller('MyCtrl', {
$scope: scope,
factoryGetJSONFile: factoryGetJSONFile,
$httpBackend: httpMock
});
}));
it("should make a GET call to data.json", function () {
console.log("********** SERVICE ***********");
httpMock.expectGET("data.json?").respond(data);
console.log(data.Addresses);
console.log(data.Names);
console.log(data.Country);
//expect(factoryGetJSONFile.getMyData()).toBeDefined();
httpMock.flush();
});
})
});
The test for the http.get seems ok, but when i try logging the reponse (data), an error occurs.
UPDATE:
When i try to log the call via:
console.log(httpMock.expectGET("data.json?").respond(data));
Undefined is displayed.
I have a service that retrieves data with a cache and a fallback to $http, and I'm trying to mock out calls to the service in a controller spec using jasmine spies. However, when I call scope.$digest, the actual service is being called and HTTP call is being made.
I have tried using all combinations of [$rootScope|scope].[$apply|$digest]() and my HTTP calls are still being made. However if I return something other than a promise from my spy, such as a string, I will get an error that then is undefined as a function, so it appears the spy is stubbing the function successfully?
Jasmine Test
beforeEach(inject(function ($controller, $rootScope) {
scope = $rootScope.$new();
// Should be called by each test after mocks and spies have been setup
startContoller = function() {
$controller('SearchCtrl', {
$scope: scope,
$stateParams: { q: 'test' }
});
};
}));
it('sets error message when no results', inject(function(QuestionService, $q) {
var deferred;
spyOn(QuestionService, 'search').and.callFake(function() {
deferred = $q.defer();
deferred.reject();
return deferred.promise;
});
startContoller();
scope.$digest();
expect(scope.error).toBe(true);
}));
Controller
.controller('SearchCtrl', ['$scope', '$stateParams', 'QuestionService',
function($scope, $stateParams, QuestionService) {
var query = $stateParams.q;
$scope.page = 1;
QuestionService.search(query, $scope.page).then(function(questions) {
if (questions.length === 0) {
$scope.error = true;
$scope.errorMessage = 'No Results';
} else {
$scope.questions = questions;
}
}, function() {
$scope.error = true;
});
}]);
dmahapatro's comment is the way to go.
As you are retreiving the controller using $controller('SearchCtrl'...), your service is already instanciated by the time your "it" block is executed, so spying on it has no effect.
You should be injecting the mocked service in your $controller call.
Also, no need for your startController() function, as invoking $controller will execute the controller's logic.
var QuestionServiceMock, deferred;
beforeEach(inject(function ($controller, $rootScope) {
scope = $rootScope.$new();
QuestionServiceMock = jasmine.createSpyObj('QuestionService', ['search']);
QuestionServiceMock.search.andCallFake(function () {
deferred = $q.defer();
deferred.reject();
return deferred.promise;
});
$controller('SearchCtrl', {
$scope: scope,
$stateParams: { q: 'test' },
QuestionService: QuestionServiceMock
});
}));
it('sets error message when no results', inject(function(QuestionService, $q) {
scope.$apply();
expect(scope.error).toBe(true);
}));