What is a reasonable way to setup a unit testing environment in Angular with fake back-end?

Question

I have a pretty standard Angular application, which comes with the standard Jasmine + Karma frameworks for unit testing.

In my application I have several services which make use of the HttpClient class to query a back-end, and I obviously need to unit test all these services too.

I realized I need to mock the back-end with a local server, which answers to the HTTP queries with hard-coded JSON.

I found many different suggestions on-line, but they don't fit or are too complicated.

What I'd like to have:

• no additional code to be added to the original angular services
• no tricky solutions (like using HTTP Interceptors, etc.)
• no complicated proxy configuration, or definition of specific npm run scripts
• easy to write fake DB (e.g. hard-coded JSON file)
• since my real back-end exposes Restful APIs, with standard CRUD operations, I would like to avoid describing each single end-point in the fake back-end
• when I type ng test the fake back-end (with a different base URL) should be automatically used

Thanks,

Thomas

Answer 1

You can mock your backend by using the HttpTestingController This class allows you to test that certain endpoints are called (and how many times), but also allows you to fake responses through the flush method.

Here's a small snipet where I return a fake response for the localhost/data endpoint, where httpMock is an instance of HttpClientController, defined in beforeEach.

const someCall = httpMock.expectOne('http://localhost/data').flush('some fake response ');

We can then use someCall to also test what data was send to the backend like this if you would like to do that.

expect(someCall.request.body.someJSONProperty).toEqual('some value');

Answer 2

So, here is a possible solution I followed.

Install json-server

npm install json-server

In a dedicated folder (say fake-back-end) in the project root create the server file server.js

const jsonServer = require("json-server");
const server = jsonServer.create();

const middlewares = jsonServer.defaults();
server.use(middlewares);

const router = jsonServer.router('fake-back-end/db.json');
server.use(router);
server.listen(3000, () => {
   console.log('Fake-Backend Server is running');
});

and the data base db.json

{
    "models1": [
        {
            "id": 1,
            "field1": "",
            "field2": "",
        },
        {
            "id": 2,
            "field1": "",
            "field2": "",
        },
        {
            "id": 3,
            "field1": "",
            "field2": "",
        },
        ...
    ],
    "models2": [
        ...
    ],
    "models3": [
        ...
    ],
    ...
}

and the routes file routes.json

{
    "/api/v1/*": "/$1",
    "/api/v1/:resource/:id": "/:resource/:id"
}

Create a testing environment file src/environments/environment.testing.ts which sets the baseUrl of the fake back-end.

export const environment = {
    production: false,
    baseUrl: 'http://localhost:3000'
};

Now the problem is how can I have ng test automatically

• launch the json-server with json-server --watch .\fake-back-end\db.json --routes .\fake-back-end\routes.json
• set the testing environment