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.

Guayule

This helped me: https://mcmap.net/q/239623/-loading-a-mock-json-file-within-karma-angularjs-test – Christabelle

Answer 1

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, {}];
});

Walkyrie

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-. – Selfregulated

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 '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'' – Deprecative

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 – Fleck

Answer 2

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.

Toth

any idea why this works? $httpBackend is not handling asynchronous calls right? – Siloa

Answer 3

$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); 

Trudeau

Duh.. Yeah, I get it. My question was how to retrieve that file content. – Guayule

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. – Trudeau

I can, but some responses are quite large, so I'd rather include it only when I need to. – Guayule

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. – Trudeau

Some applications need more data than {foo:"bar"} to work.. a lot more. – Guayule

totally agree. Still looking for nice solution. – Stanton

@STEVER I ended up using interceptors, the http backend didn't work for me. Wrote a blog post @ etcoding.com/blog/2014/01/20/… – Guayule