Geek Answers Handbook

How to mock an AJAX request?

What is the easiest way to modify scenarios.js to mock an AJAX request during an end-to-end test?

<!doctype html> <html lang="en" ng-app="myApp"> <head> <meta charset="utf-8"> <title>My Test AngularJS App</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular-resource.min.js"></script> <script language="javascript" type="text/javascript"> angular.module('myApp', ['ngResource']); function PlayerController($scope,$resource){ $scope.player = $resource('player.json').get(); } </script> </head> <body ng-controller="PlayerController"> <p>Hello {{player.name}}</p> </body> </html>

The player gets the correct selection from a file called player.json on the server and the following test passes. How to pass another json to this test and prevent it from returning back to the server?

 /* How do I pass in player.json -> {"name":"Chris"} */ describe('my app', function() { beforeEach(function() { browser().navigateTo('../../app/index.html'); }); it('should load player from player.json', function() { expect(element('p:first').text()). toMatch("Hello Chris"); pause(); }); });
+6
source share
3 answers

You must use $ httpBackend from the ngMockE2E module to mock HTTP requests. Take a look at the docs.

+4
source

As a start, add angular -mocks.js and a file (e.g. app.js) where you will create a module on the index.html page containing the ng-app declaration.

 <html lang="en" ng-app="myApp"> <head> <script src="js/app.js"></script> <script src="../test/lib/angular/angular-mocks.js"></script> ...

Then, in the app.js file, define a module and add mock answers.

 var myAppDev = angular.module('myApp', ['ngResource','ngMockE2E']); myAppDev.run(function($httpBackend) { var user = {name: 'Sandra'}; $httpBackend.whenGET('/api/user').respond(user); });
0
source

It looks like at the moment you cannot ONLY modify .js scripts to include $ httpBackend in a mockery. You will need to add another code to support it.

For me, the best way is the following

Add myAppTest.js to the test folder, which includes "ngMockE2E", so you do not need to foul the existing app.js

 'use strict'; angular.module('myAppTest', ['myApp', 'ngMockE2E']) .run(function($httpBackend) { var user = {name: 'Sandra'}; $httpBackend.whenGET('/api/user').respond(user); });

Then add a separate test-index.html that uses the new myAppTest.js. Note that you need to enable angular -mocks.js. (This leaves your html production file intact and does not contain ridicule)

 <!doctype html> <html lang="en" ng-app="myAppTest"> <head> <script src="lib/angular/angular.js"></script> <script src="lib/angular/angular-resource.js"></script> <script src="../test/lib/angular/angular-mocks.js"></script> <script src="js/app.js"></script> <script src="js/controllers.js"></script> <script src="../test/e2e/myAppTest.js"></script> </head> <body> <div ng-view></div> </body> </html>

Then in your .js script, just reference your new test-index.html before running other tests.

 beforeEach(function() { browser().navigateTo('../../app/test-index.html#/'); });

I adapted this example:

https://github.com/stephennancekivell/angular_e2e_http/tree/ngMockE2E

0
source

More articles:


All Articles