I have start to learning how to test properly on controller and encounter this following script.
http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-karma.html
it('should have a properly working VideosCtrl controller', inject(function($rootScope, $controller, $httpBackend) {
var searchTestAtr = 'cars';
var response = $httpBackend.expectJSONP(
'https://gdata.youtube.com/feeds/api/videos?q=' + searchTestAtr + '&v=2&alt=json&callback=JSON_CALLBACK');
response.respond(null);
var $scope = $rootScope.$new();
var ctrl = $controller('VideosCtrl', {
$scope : $scope,
$routeParams : {
q : searchTestAtr
}
});
}));
I am a bit confused... expectedJSON is in the following API page:
https://docs.angularjs.org/api/ngMock/service/$httpBackend
I am confused Just wondering what's testing in here, i can see the describe there but still lost... what's expected here?
This test has no explicit assertions, but it will fail if constructing the controller instance throws an exception for any reason.
Remember that if an assertion is failed, it throws an exception. Test runners just run your test function like so:
try {
runTest();
} catch (e) {
markTestFailed(e);
}
So if your test code throws an exception for any reason, the test will fail.
As with any unit test, you arrange act and then assert.
For the above test, the parts of arrange and act are self evident but the assert part may not be obvious. The test is just verifying that the search request was send when controller was created.
If you look at the controller code for video controller
$youtube.query($scope.q, true, function(q, videos) {
$scope.videos = videos;
$scope.onReady();
});
this can be confirmed.
The assertion part is done by the $httpBackend.expectJSONP. This setup tells karma to verify that a GET request is made to a specific url. The url here is the google search api with the search term cars.
The test basically sets up a mock backend and asserts that it was called.
Related
I'm having troubling testing a controller's value that's set within a promise returned by a service. I'm using Sinon to stub the service (Karma to run the tests, Mocha as the framework, Chai for assertions).
I'm less interested in a quick fix than I am in understanding the problem. I've read around quite a bit, and I have some of my notes below the code and the test.
Here's the code.
.controller('NavCtrl', function (NavService) {
var vm = this;
NavService.getNav()
.then(function(response){
vm.nav = response.data;
});
})
.service('NavService', ['$http', function ($http) {
this.getNav = function () {
return $http.get('_routes');
};
}]);
Here's the test:
describe('NavCtrl', function () {
var scope;
var controller;
var NavService;
var $q;
beforeEach(module('nav'));
beforeEach(inject(function($rootScope, $controller, _$q_, _NavService_){
NavService = _NavService_;
scope = $rootScope.$new();
controller = $controller;
}));
it('should have some data', function () {
var stub = sinon.stub(NavService, 'getNav').returns($q.when({
response: {
data: 'data'
}
}));
var vm = controller("NavCtrl", {
$scope: scope,
NavService: NavService
});
scope.$apply();
stub.callCount.should.equal(1);
vm.should.be.defined;
vm.nav.should.be.defined;
});
});
The stub is being called, i.e. that test passes, and vm is defined, but vm.nav never gets data and the test fails. How I'm handling the stubbed promise is, I think, the culprit. Some notes:
Based on reading elsewhere, I'm calling scope.$apply to set the value, but since scope isn't injected into the original controller, I'm not positive that will do the trick. This article points to the angular docs on $q.
Another article recommends using $timeout as what would "actually complete the promise". The article also recommends using "sinon-as-promised," something I'm not doing above. I tried, but didn't see a difference.
This Stack Overflow answer use scope.$root.$digest() because "If your scope object's value comes from the promise result, you will need to call scope.$root.$digest()". But again, same test failure. And again, this might be because I'm not using scope.
As for stubbing the promise, I also tried the sinon sandbox way, but results were the same.
I've tried rewriting the test using $scope, to make sure it's not a problem with the vm style, but the test still fails.
In the end, I could be wrong: the stub and the promise might not be the problem and it's something different and/or obvious that I've missed.
Any help is much appreciated and if I can clarify any of the above, let me know.
Sorry but a quick fix was all that you needed:
var stub = sinon.stub(NavService, 'getNav').returns($q.when({
response: {
data: 'data'
}
}));
Your promise is resolved to object containing response.data not just data
Checkout this plunk created from your code: https://plnkr.co/edit/GL1Xuf?p=preview
The extended answer
I have often fallen to the same trap. So I started to define the result returned from a method separately. Then if the method is async I wrap this result in a promise like $q.when(stubbedResult) this allow me to, easily run expectations on the actual result, because I keep the stubbed result in a variable e.g.
it('Controller should have some data', function () {
var result = {data: 'data'};
var stub = sinon.stub(NavService, 'getNav').returns($q.when(result));
var vm = controller(/* initController */);
scope.$apply();
stub.callCount.should.equal(1);
vm.nav.should.equal(result.data)
})
Also some tests debugging skill will come in handy. The easiest thing is to dump some data on the console just to check what's returned somewhere. Working with an actual debugger is preferable of course.
How to quickly catch mistakes like these:
Put a breakpoint at the $rootScope.apply() line (just before it is executed)
Put a breakpoint in the controller's NavService.getNav().then handler to see whether it is called and what it was called with
Continue with the debugger to execute the $rootScope.$apply() line. Now the debugger should hit the breakpoint set at the previous step - that's it.
I think you should use chai-as-promised
and then assert from promises like
doSomethingAsync().should.eventually.equal("foo");
or else use async await
it('should have some data', async function () {
await scope.$apply();
});
you might need to move then getNav() call in init kinda function and then test against that init function
I am trying to test my controller using jasmine. Basically, when the controller is created it will call a service to make http request. I am using httpBackend to get the fake data. When I try to run the test I always get the error "No pending request to flush". If I remove the httpBackend.flush() then the test fails because controller.data.name is undefined. Can anyone know why it happens like that? Thanks.
The code for the module is here:
var myModule = angular.module('myModule', ['ngMockE2E']);
myModule.run(function($httpBackend){
$httpBackend.whenGET('/Person?content=Manager').respond(function (){
var response = {'name':'Bob','age':'43'}
return [200,response];
})
});
The code for the service:
myModule.factory('myService',function($http){
return {
getData: function(position){
return $http.get('/Person?content='+position);
}
}
});
The code for controller is:
myModule.controller('myController',function(xrefService){
var _this = this;
_this.data ={};
_this.getData = function(position){
myService.getData(position).then(function(response){
_this.data = response.data
});
}
_this.getData("Manager");
})
The code to test the controller is:
describe("Test Controller",function(){
var controller,httpBackend,createController;
beforeEach(module('myModule'));
beforeEach(inject(function($controller,$httpBackend){
createController = function(){
return $controller('myController');
}
httpBackend = $httpBackend;
}));
it("should return data",function(){
controller = createController();
httpBackend.flush();
expect(controller.data.name).toEqual("Bob");
});
})
The angular documentation says the following about $httpbackend for ngMockE2E:
Additionally, we don't want to manually have to flush mocked out
requests like we do during unit testing. For this reason the e2e
$httpBackend flushes mocked out requests automatically, closely
simulating the behavior of the XMLHttpRequest object.
So, short answer: it doesn't exist and you don't need it.
you are using $httpBackend.whenGET inside "The code for the module"
you should be using $httpBackend inside the test code as follows ...
it("should return data",function(){
$httpBackend.expectGET('/Person?content=Manager').respond(function (){
var response = {'name':'Bob','age':'43'}
return [200,response];
})
controller = createController();
httpBackend.flush();
expect(controller.data.name).toEqual("Bob");
});
also i would advise using expectGET instead of whenGET.
With whenGET you are saying if the request is made then response like so.
With expectGET you are saying ... a request will be made, when it is made respond like so, if the request is not made then fail the test.
PS if you put some console.log statements inside your controller code then you should see these log statements when you run your test suite. If not then you know your controller code is not even being hit.
also use ..
afterEach(function () {
httpBackend.verifyNoOutstandingExpectation();
httpBackend.verifyNoOutstandingRequest();
});
which will force test failure if expectations were not met.
I am trying to unit test my AngularJS application using Karma and Jasmine. I want to mock the $http service. For that, I am using the $httpBackend method. Below is my service that I want to test:
angular.module('MyModule').factory('MyService', function($http, $log, $parse, $q, $timeout, $filter, MyOtherService1, MyOtherService2){
var service = {};
service.getSomething = function(id){
return $http.get('/somePath/subpath/' + id);
}
});
My unit test for this service is:
describe("myTest", function(){
var myService, $httpBackend, scope, mockMyOtherService1, mockMyOtherService2;
var myResponse =
{
foo:'bar'
};
beforeEach(module("MyModule"));
beforeEach(inject(function(_MyService_, $injector){
$httpBackend = $injector.get('$httpBackend');
myService = _MyService_;
scope = $injector.get('$rootScope').$new();
mockMyOtherService1 = $injector.get('MyOtherService1');
mockMyOtherService2 = $injector.get('MyOtherService2');
}));
beforeEach(function(){
//To bypass dependent requests
$httpBackend.whenGET(/\.html$/).respond(200,'');
});
//If I uncomment the below afterEach block, the same error is shown at next line.
/*afterEach(function() {
$httpBackend.verifyNoOutstandingExpectation();
$httpBackend.verifyNoOutstandingRequest();
});*/
//This test passes successfully
it("should check if service is instantiated", function () {
expect(myService).toBeDefined();
});
//This test passes successfully
it("should expect dependencies to be instantiated", function(){
expect($httpBackend).toBeDefined();
});
//The problem is in this test
it("should get the getSomething with the provided ID", function() {
$httpBackend.whenGET('/somePath/subpath/my_123').respond(200,myResponse);
var deferredResponse = myService.getSomething('my_123');
//The error is shown in next line.
$httpBackend.flush();
//If I comment the $httpBackend.flush(), in the next line, the $$state in deferredResponse shows that the Object that I responded with is not set i.e. it does not matches the 'myResponse'.
expect(deferredResponse).toEqual(myResponse);
});
});
This is an emergency problem and I need help regarding the same as soon as possible. I will be very grateful for your answer.
The problem was I needed to inject $location in my spec files even though they are not injected in the services. After injection, all worked well! Hope this helps someone who gets stuck in the same situation.
You will get a promise from your service. So change your test code to:
//The problem is in this test
it("should get the getSomething with the provided ID", function (done) {
$httpBackend.expectGET('/somePath/subpath/my_123').respond(200,myResponse);
var deferredResponse = myService.getSomething('my_123');
deferredResponse.then(function (value) {
expect(value.data).toEqual(myResponse);
}).finally(done);
$httpBackend.flush();
});
I've recently had this problem when updating a project from Angular 1.2 to 1.4. The test code looked something like:
it('should call /something', function(){
httpBackend.expectGET('/something').respond(200);
scope.doSomething();
httpBackend.flush();
});
The error was the infdig past 10 iterations. It was caused by invoking the .flush() method. I figured out this is seemingly because there were no pending promises created within doSomething().
Once I added a promise somewhere within doSomething() or inner methods, the infdig problem went away.
I suspect - and this is 100% speculation so don't let it influence your development - this is because httpBackend does some trickery to wait for promises, which maybe involves digesting repeatedly until there's a change. Since there's no promises, there's no changes - infinite digest.
I am writing unit tests for a controller. This controller has a $resource service injected :
function controller($scope, Service) {
Service.get(function(result){
// do stuff with the result, not relevant here
}
}
The service is defined like this :
angular.module('so').factory('Service', ['$resource', service]);
function service($resource) {
return $resource('/url', null, {
get: { method: 'POST', params: {}, isArray: false}
});
}
My Jasmine unit test is the following :
describe("Controller", function(){
var $httpBackend;
beforeEach(function() {
module('so');
inject(function( _$httpBackend_) {
$httpBackend = _$httpBackend_;
});
});
it('should have done stuff irrelevant to the question', function() {
var $injector = angular.injector('so'),
$scope = $injector.get('$rootScope'),
$httpBackend
.whenPOST('/url')
.respond ([]);
// controller needs to be defined here and not in the beforeEach as there
// are more parameters passed to it, depending on the test
var controller = $injector.get('$controller')('controller', { "$scope": $scope });
$httpBackend.flush();
// then here the actual test resolution, also irrelevant
});
});
I get an error when running the test :
Error: No pending request to flush ! in file:///path/to/angular-mock.js (line 1453)
I added a console.log() in the callback from Service.get() and indeed, it is not called (everything outside of the callback is of course called). Also tried to add a scope digest if not phased after controller creation in the unit test, as I saw suggested in an other question, with no luck.
I know that I can mock that in some other ways, but using $httpBackend seems the perfect solution for the test : mocking the webserver and the data received.
I'm using AngularJS 1.2.16 (can't upgrade to 1.3.*, IE 8 compatibility required). I first used 1.2.13 and updated to check if it would solve the issue, without any luck.
That was an injection issue that was solved by changing the test from
it('should have done stuff irrelevant to the question', function() {
var $injector = angular.injector('so'),
$scope = $injector.get('$rootScope'),
$httpBackend
.whenPOST('/url')
.respond ([]);
// controller needs to be defined here and not in the beforeEach as there
// are more parameters passed to it, depending on the test
var controller = $injector.get('$controller')('controller', { "$scope": $scope });
$httpBackend.flush();
// then here the actual test resolution, also irrelevant
});
To:
it('should have done stuff irrelevant to the question', inject(function(Service) {
// edited lines because they did not change
var controller = $injector.get('$controller')('controller', { "$scope": $scope, "Service": Service });
// edited lines because they did not change
}));
So basicaly, adding the inject() in the test function and passing the service to the controller "manually".
I found the issue, that's great, but I don't really understand why it doesn't work. Also, I tried this right after finding the solution :
it('should have done stuff irrelevant to the question', inject(function() {
// edited lines because they did not change
var Service = $injector.get('Service'),
var controller = $injector.get('$controller')('controller', { "$scope": $scope, "Service": Service });
// edited lines because they did not change
}));
but this fail again, with the same "no pending request" error. I'm guessing that's some sort of racing issue, where my service can't get the proper $httpBackend to be injected when it's created afterwards, but I don't really understand why this occurs. If anybody can enlighten me... I'll be grateful.
Does anyone have an idea how to mock $httpBackend in angular e2e tests?
The idea is stubbing XHR requests while running tests on travis-ci.
I'm using karma to proxy assets and partials from my rails app running on travis.
I want to do acceptance testing without real DB queries.
Here is part of my karma config file:
...
files = [
MOCHA,
MOCHA_ADAPTER,
'spec/javascripts/support/angular-scenario.js',
ANGULAR_SCENARIO_ADAPTER,
'spec/javascripts/support/angular-mocks.js',
'spec/javascripts/e2e/**/*_spec.*'
];
...
proxies = {
'/app': 'http://localhost:3000/',
'/assets': 'http://localhost:3000/assets/'
};
...
Here is part of my spec file:
beforeEach(inject(function($injector){
browser().navigateTo('/app');
}));
it('should do smth', inject(function($rootScope, $injector){
input('<model name>').enter('smth');
//this is the point where I want to stub real http query
pause();
}));
I have tried to receive $httpBackend service through $injector:
$injector.get('$httpBackend')
But this is not the one that is used inside iframe where my tests run.
The next try I made was using angular.scenario.dsl, here is code samle:
angular.scenario.dsl('mockHttpGet', function(){
return function(path, fakeResponse){
return this.addFutureAction("Mocking response", function($window, $document, done) {
// I have access to window and document instances
// from iframe where my tests run here
var $httpBackend = $document.injector().get(['$httpBackend']);
$httpBackend.expectGET(path).respond(fakeResponse)
done(null);
});
};
});
Usage example:
it('should do smth', inject(function($rootScope, $injector){
mockHttpGet('<path>', { /* fake data */ });
input('search.name').enter('mow');
pause();
}));
This leads to following error:
<$httpBackend listing> has no method 'expectGET'
So, at this point I have no idea of next step. Have anyone tried doing something like this, is this type of stubbing really possible?
If you are really trying to mock out the backend in a E2E test (these tests are called Scenarios, while Specs are used for unit testing) then this is what I did in a project I was working on earlier.
The application I was testing was called studentsApp. It was an application to search for students by querying a REST api. I wanted to test the application without actually querying that api.
I created a E2E application called studentsAppDev that I inject studentsApp and ngMockE2E into. There I define what calls the mockBackend should expect and what data to return. The following is an example of my studentsAppDev file:
"use strict";
// This application is to mock out the backend.
var studentsAppDev = angular.module('studentsAppDev', ['studentsApp', 'ngMockE2E']);
studentsAppDev.run(function ($httpBackend) {
// Allow all calls not to the API to pass through normally
$httpBackend.whenGET('students/index.html').passThrough();
var baseApiUrl = 'http://localhost:19357/api/v1/';
var axelStudent = {
Education: [{...}],
Person: {...}
};
var femaleStudent = {
Education: [{...}],
Person: {...}
};
$httpBackend.whenGET(baseApiUrl + 'students/?searchString=axe&')
.respond([axelStudent, femaleStudent]);
$httpBackend.whenGET(baseApiUrl + 'students/?searchString=axel&')
.respond([axelStudent, femaleStudent]);
$httpBackend.whenGET(baseApiUrl + 'students/?searchString=axe&department=1&')
.respond([axelStudent]);
$httpBackend.whenGET(baseApiUrl + 'students/?searchString=axe&department=2&')
.respond([femaleStudent]);
$httpBackend.whenGET(baseApiUrl + 'students/?searchString=axe&department=3&')
.respond([]);
...
$httpBackend.whenGET(baseApiUrl + 'departments/?teachingOnly=true')
.respond([...]);
$httpBackend.whenGET(baseApiUrl + 'majors?organization=RU').respond([...]);
});
Then, I have a first step in my Jenkins CI server to replace the studentsApp with studentsAppDev and add a reference to angular-mocks.js in the main index.html file.
Mocking out your backend is an important step in building a complex Angular application. It allows testing to be done without access to the backend, you don't test things twice and there are less dependencies to worry about.
Angular Multimocks is a simple way to test how your app behaves with different responses from an API.
It allows you to define sets of mock API responses for different scenarios as JSON files.
It also allows you to change scenarios easily. It does this by allowing
you to compose “scenarios” out of different mock files.
How to add it to your app
After adding the required files into your page, simply add scenario as a dependency to your application:
angular
.module('yourAppNameHere', ['scenario'])
// Your existing code here...
Once you have added this to your app you can start to create mocks for API calls.
Lets say your app makes the following API call:
$http.get('/games').then(function (response) {
$scope.games = response.data.games;
});
You can create a default mock file:
Example of someGames.json
{
"httpMethod": "GET",
"statusCode": 200,
"uri": "/games",
"response": {
"games": [{"name": "Legend of Zelda"}]
}
}
When you load your application, calls to /games will return 200 and {"games": [{"name": "Legend of Zelda"}]}
Now lets say you want to return a different response for the same API call, you can place the application in a different scenario by changing the URL e.g. ?scenario=no-games
The no-games scenario can use a different mock file, lets say one like this:
Example of noGames.json
{
"httpMethod": "GET",
"statusCode": 200,
"uri": "/games",
"response": {
"games": []
}
}
Now when you load your application, calls to /games will return 200 and {"games": []}
Scenarios are composed of various JSON mocks in a manifest like this:
{
"_default": [
"games/someGames.json"
],
"no-games": [
"games/noGames.json"
]
}
You can then exclude the mock files and strip the scenario dependency in your production app.
This feels more like unit/spec testing. Generally speaking you should use mocks within unit/spec tests rather than e2e/integration tests. Basically, think of e2e tests as asserting expectations on a mostly integrated app...mocking out things kind of defeats the purpose of e2e testing. In fact, I'm not sure how karam would insert angular-mocks.js into the running app.
The spec test could look something like...
describe('Controller: MainCtrl', function () {
'use strict';
beforeEach(module('App.main-ctrl'));
var MainCtrl,
scope,
$httpBackend;
beforeEach(inject(function ($controller, $rootScope, $injector) {
$httpBackend = $injector.get('$httpBackend');
$httpBackend.when('GET', '/search/mow').respond([
{}
]);
scope = $rootScope.$new();
MainCtrl = $controller('MainCtrl', {
$scope: scope
});
}));
afterEach(function () {
$httpBackend.verifyNoOutstandingExpectation();
$httpBackend.verifyNoOutstandingRequest();
});
it('should search for mow', function () {
scope.search = 'mow';
$httpBackend.flush();
expect(scope.accounts.length).toBe(1);
});
});