How do I mock HTTP calls in Angular?-CodePudding

My objective is not to write unit or integration tests but to build a demo app that show cases components that calls different endpoint URLs that uses HttpClient module. I want to mock those endpoint URLs without building a backend server such as node Express as we want this to run purely on NGINX and independent.

Is HttpClientTestingModule the right module to use? It seems meant for writing test cases or perhaps I just don't know how to use it for building demo apps.

CodePudding user response：

For creating fake backends, you can certainly make use of HttpInterceptor.

This link will help you: https://jasonwatmore.com/post/2020/07/18/angular-10-fake-backend-example-for-backendless-development

CodePudding user response：

You could use In-memory Web API to simulate a backend. Check the tutorial: https://angular.io/tutorial/toh-pt6#simulate-a-data-server where you can install angular-in-memory-web-api. Just remember to remove it when you actually start using a backend, as this will interfere with that.

I would though prefer to mimic backend calls with observables (or the HttpInterceptor like mentioned in other answer).

When you would move to actually using an API all methods would exist, you would just change to use HttpClient instead.

So getting for example a list of items, you could just use of rxjs operator, so something like this:

Service:

myData = [{id: 1, name: 'one'}] as MyType[];

getData() {
  return of(this.myData);
}

in component you would subscribe to this, I prefer async pipe in template.