CODEWITHSUNDEEP
angulartypescript
user3719857
user3719857

Reputation: 1123

Implement HTTP service mock for Angular 2?

I'm trying to write a mockup HTTP service in Angular that gets its data from a JSON file and returns that data.

import { Request, RequestOptionsArgs, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';    

export const HttpServiceMockup = {

  json = // get data from json file

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    // based on the passed url return some data from the json
    // and wrap that data in a Observable of Response.
    return null;
  }

};

How can I do the wrapping of the data so that I return Observable<Response>?

Upvotes: 1

Views: 625

Answers (3)

Andrea Gherardi
Andrea Gherardi

Reputation: 826

Generally speaking, to wrap mock data inside an Observable you simply need to do

const mockData = {
  id: 123
};

return Observable.of(mockData);

inside a method of your service.

Of course, remember to import { Observable } from 'rxjs/Observable';

Upvotes: 0

Gerard Sans
Gerard Sans

Reputation: 2279

Closer to your current code

import { Request, RequestOptionsArgs, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';    

export const HttpServiceMockup = {

  let data = [{id:1, name:"John"}];

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    // based on the passed url return some data from the json
    // and wrap that data in a Observable of Response.
    let response = null;
    if (url.indexOf("YOUR_URL_MATCH")>=0) 
      response = new Response({body: JSON.stringify(data)});

    return Observable.of(response);
  }
};

What you should be using instead

import { MockBackend } from '@angular/http/testing';
import { Http, BaseRequestOptions } from '@angular/http';

@NgModule({
  providers: [
     BaseRequestOptions,
     MockBackend,
     {
       provide: Http,
       deps: [MockBackend, BaseRequestOptions],
       useFactory: (backend, options) => { return new Http(backend, options); }
     }
  ],
  imports: [BrowserModule],
  declarations: [App],
  bootstrap: [App]
})
export class AppModule { }

export class App { 
  constructor(private mockbackend: MockBackend) { 
    let data = [{id:1, name:"John"}];  

    mockbackend.connections.subscribe(connection => {
      if (connection.request.url.indexOf("YOUR_URL_MATCH")>=0) 
        connection.mockRespond(new Response({
          body: JSON.stringify(data)
        }));
    });
  }
}

Upvotes: 1

Milad
Milad

Reputation: 28592

import { Request, RequestOptionsArgs, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';    

export const HttpServiceMockup = {

  json = // get data from json file

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    // based on the passed url return some data from the json
    // and wrap that data in a Observable of Response.

     if (url.url.indexOf('someUrl')>-1){
        return Observable.of(data);
     }
    return null;
  }

};

Upvotes: 1

Related Questions