Setting up a RESTful backend using Sinon.js for an Angular.js application

Question

I am developing an Angular.js application that has RESTful services that extend the $ resource service. This application will be connected to the Java Spring application in the future, but now I'm trying to configure an isolated layout that will serve all the necessary routes for my application from the client side . I used Sinon.js before to create a fake client server that serves my routes when I developed other applications using other MV * frameworks like Backbone.js.

It seems that unlike the “standard” ajax call to retrieve JSON data, since JQuery / Backbone does, Angular uses XHR in different ways, and it does not “trick” Sinon into trying to capture the request and response from the client side.

I tried using $ httpBackend to create fake routes with ready-made data, but it seems that this service is intended to be used only for unit testing, and not for the "intermediate environment" that I need to configure.

Here's what my Sinon installation looks like, which runs on jQuery.ajax but not on the Angular $ or $ http resource:

var server = sinon.fakeServer.create(); server.respondWith("GET", /mydata/gi, [200, { "Content-Type": "application/json" }, JSON.stringify({ data: "myData" }) ]); server.autoRespond = true; 

Any ideas on how this does not work with Angular? Or better yet, does anyone know how to install such mocks for Angular applications?

Answer 1

I believe that "e2e" (end to end) $ httpBackend mock is exactly what you are looking for.

Quoting documents: "For a fake HTTP backend implementation suitable for end-to-end testing or development without using a backend, see e2e $ httpBackend mock ."

". Unlike unit testing, in an end-to-end test script or in a script where an application is developed replacing the real api backend with a layout, it is often desirable that a certain category of requests bypass the layout and issue a real HTTP request (for example, to extract templates or static files from the web server).

I also found a good article that describes some nifty ways to use the fake end in Angular.

Answer 2

It really is a hassle to install a complete REST stub server using sinon.js or $httpBackend . I suggest you use FakeRest, a fake REST server built on top of the sinon.js file.

https://github.com/marmelab/FakeRest

Disclaimer: we wrote it.