How to return a file content from angular's $httpBackend?

Question

I'm trying to setup an e2e test suite in angular, and need to return canned responses using $httpBackend. It would be nice if I could just return a file content, e.g.

  $httpBackend.whenPOST('/phones').respond(function(method, url, data) {
    return getContentOf("/somefile");
  });

I tried to use $http, something along the lines of

  $httpBackend.whenPOST('/phones').respond(function(method, url, data) {
    return $http.get("/responses/phones.js");
  });

but it didn't work, guess angular doesn't support returning promises from $httpBackend ?

One way I could do it is to reference js files with responses on app load, and assign file's content to variables, but it would be much nicer to be able to load data on demand.

This helped me: http://stackoverflow.com/a/18523642/2539811 – Vincil Bishop Jan 13 '16 at 22:45 — Vincil Bishop, Jan 13 '16 at 22:45

score 32 · Answer 1 · answered Jun 18 '14 at 13:58

32

Since $httpBackend doesn't work with returned promises, one way you can do this is to get your data synchronously. $http doesn't have a synchronous option out of the box, so you would have to make the call to your file without it, like so:

$httpBackend.whenPOST('/phones').respond(function(method, url, data) {
  var request = new XMLHttpRequest();

  request.open('GET', '/responses/phones.js', false);
  request.send(null);

  return [request.status, request.response, {}];
});

answered Jun 18 '14 at 13:58

dc-

1,878
1
15
15

Incredible! I spent a whole day trying to figure this out using $http to retrieve my data file, and probably would've given up if not for this. Thanks @dc-. – Khai Dinh Oct 23 '14 at 18:13
this is the best solution so far. be mindful of the fact that karma uses 'base' as prefix or use proxy config to avoid. as a suggestion use full path like 'http://localhost:9876/base/src/app/modules/mock-data.json' first to verify that file is being correctly hosted by testing seesion. Also make sure to add json files in karma config for hosting ' serveFiles: [ 'src/jspm_packages/**/*.*', 'src/app/**/*.ts', 'src/app/**/*.html', 'src/typings/**/*.ts', 'src/app/**/*.json'' – Rishabh Jain Apr 01 '16 at 11:26
Depends where you have this code. If XMLHttpRequest is on the main thread you will get a warning about detrimental effects to end users experience – Tom Stickel Sep 05 '16 at 07:45

score 6 · Answer 2 · answered Oct 08 '14 at 21:47

6

I had the same issue that I solved with:

$httpBackend.whenPOST("some/url").respond(function(method, url, data) { 
    return $resource("path/to/your/json/file.json").get(); 
});

This obviously needs angular-resource module to work.

answered Oct 08 '14 at 21:47

Sofian Djamaa

179
1
4

1

any idea why this works? `$httpBackend` is not handling `asynchronous` calls right? – Aakash Nov 29 '15 at 09:43

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

0

$httpBackend.whenPost returns a requestHandler object.

According to the official docs:

requestHandler (is) an object with respond method that controls how a matched request is handled.

respond –
{function([status,] data[, headers, statusText]) | function(function(method, url, data, headers)}
– The respond method takes a set of static data to be returned or a function that can return an array containing response status (number), response data (string), response headers (Object), and the text for the status (string).

^{source: Angular Documentations}

The respond method takes a set of static data to be returned or a function that can return an array containing response status (number), response data (string) and response headers (Object).

So, you'll have to do something like this:

var response = 'content of somefile.js';
// OR var response = { foo : "bar" };
// OR var response = (actually consume content of somefile.js and set to response)

$httpBackend.whenPost('/phones').respond(response);

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 11 '14 at 02:02

awei

1,154
10
26

3

Duh.. Yeah, I get it. My question was how to retrieve that file content. – Evgeni Jan 11 '14 at 02:08
I don't think you can do it on demand. Why do you need to get the content of the file? Can't you just mock it with a fake object? If you really must have the contents of somefile.js, I would use a karma preprocessor and consume the file contents. – awei Jan 11 '14 at 02:18
1

I can, but some responses are quite large, so I'd rather include it only when I need to. – Evgeni Jan 11 '14 at 02:30
is the actual response really necessary for testing? just mock up some response like { foo : "bar" } and then assert that you get an object that equals { foo : "bar" }. I still don't see the point in actually getting the contents of your somefile.js. perhaps you can clarify what is so important about its contents in your test. – awei Jan 11 '14 at 02:33
4

Some applications need more data than {foo:"bar"} to work.. a lot more. – Evgeni Jan 11 '14 at 02:44
totally agree. Still looking for nice solution. – Stepan Suvorov Jan 29 '14 at 16:17
4

@STEVER I ended up using interceptors, the http backend didn't work for me. Wrote a blog post @ http://www.etcoding.com/blog/2014/01/20/data-mocking-in-angular-e2e-testing/ – Evgeni Jan 29 '14 at 17:21

How to return a file content from angular's $httpBackend?

3 Answers3

Linked