How to mock Angular service outside unit testing?

Question

I'm developing an Angular application, since the back-end is still very behind in the development I'm building alternative fake services which provides data from local JSON files allowing me to test the full front-end of the application on my local workstation without relying on any external resource.

The problem is that switching from fake services to real services every time I need to test the integration with the back-end is a waste of time so I wanted something which allows me to switch between fake and real services with a simple flag on the code or on the CLI.

arturvt · Accepted Answer · 2019-11-04 13:26:19Z

1

You can use the proxy for that. When running angular every request for localhost:4200 can be redirected to any place with the same route. Either a node-express with fake jsons running in parallel or another mock server that you might have.

https://angular.io/guide/build#proxying-to-a-backend-server

answered Nov 4, 2019 at 13:26

arturvt

8019 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohamed GAFSIA · Accepted Answer · 2019-11-04 13:28:03Z

Better to use an independent mockserver. So your app will be cleaner and easier to test

1- You can use a node mock server like this one https://www.npmjs.com/package/mockserver-node

the node mock server will simulate the back apis, you will only have to give it the json file to send for each http query. You can see at http://mock-server.com/ for more details.

2- On your angular app, at the package.json file, add a new script which will start the mockserver and your application. Example : "mock:profile": "npm-run-all --parallel mockserver appmock"

'appmock' script will use a proxy file like 'proxy.mock.conf.json' which will forward all api calls to mockserver.

'mockserver' script is to run the mock server it self. It will be like "node ./node/mock-server/mock.server.run.js"

To run you mock mode, you will have to only run you app with 'npm run mock:profile'

Nicolas · Accepted Answer · 2019-11-04 13:35:28Z

I'm not sure how your services are built but if you have an abstract "base" http service, you can check for a flag and change the function that do the GET request to fetch local JSON data.

something like:

export class baseHttpService {
    let isMock: boolean = true;

    get(url: string, params: object = {}): Observable<any> { 
        if(!isMock) {
            return /* normal get function */
        } else {
            return this.http.get("your local json file");
        }
    }
}

And in your Service, you call the get function of this "base" http service:

export class UserService {

    getUser() Observable<any>{
        this.baseHttp.get(/* Api endpoint to get user */).subscribe(...);
    }
}

This way, you only need to toggle one boolean to mock all of your service.

P.S. I really like the idea of "Proxying" your app to a mock server, i feel like it's might not be as easy but it's a better way to approach the problem if you wish to change your data from your JSON.

MoxxiManagarm · Accepted Answer · 2019-11-04 14:22:58Z

0

You can add a MockInterceptor to your application, which alters the request url to the json-Path of your fake data. You can add this interceptor dynamically using the production value from your environment.ts.

answered Nov 4, 2019 at 14:22

MoxxiManagarm

9,2214 gold badges20 silver badges51 bronze badges

Collectives™ on Stack Overflow

How to mock Angular service outside unit testing?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related