Как издеваться над сервисом, который содержит http-запрос и возвращает наблюдаемое?

Ниже приведен мой класс обслуживания, который принимает URL-адрес с данными в формате json.

service.ts

    import { Injectable } from "@angular/core";
    import {  Http } from '@angular/http';
    import { Observable } from "rxjs/Observable";

    @Injectable()

    export class Service {

    public http: string;
    constructor(private http: Http) { }

    getGoogle():Observable<any> {
        console.log("Inside service");


      return this.http.get('https://jsonplaceholder.typicode.com/posts/1');
    }
}

Ниже приведен мой файл page1.ts, который использует службу и получает данные от службы.

страница1.ts

import { Component } from '@angular/core';
import { Service } from "../../services/service";


@Component({
  selector: 'page-page1',
  templateUrl: 'page1.html',
})
export class Page1 {

  constructor(private service: Service) {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad Page1');
  }

  get() {
    console.log("inside get method");
    this.service.getGoogle().subscribe(
      (response:Response)=>{
       console.log('The resonse is', response);
          });
}

Пожалуйста, игнорируйте любую опечатку.

Ниже приведен мой файл спецификации для этой страницы, где я хочу протестировать этот асинхронный метод http get.

page1.spec.ts

import { TestBed, async, ComponentFixture, inject } from '@angular/core/testing';
import { Page1 } from './page1';
import { IonicModule, NavController } from "ionic-angular";
import { DebugElement } from "@angular/core";
import { Service } from "../../services/service";
import { By } from "@angular/platform-browser";


describe('Page1 to be tested', () => {

    let fixture: ComponentFixture<Page1>;
    let comp: Page1;
    let de: DebugElement;
    let el: HTMLElement;



    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [Page1],
            imports: [
                IonicModule.forRoot(Page1),

            ],
            providers: [NavController,
         //need to provide service I have already imported it.

            ],
        }).compileComponents();

    }

    ));
    beforeEach(() => {
        fixture = TestBed.createComponent(Page1);
        comp = fixture.componentInstance;
        de = fixture.debugElement; 

    });

    afterEach(()=>{
        fixture.destroy();
    })

    it('is created', () => {
        expect(comp).toBeTruthy();
        expect(fixture).toBeDefined();
    });

    it('Testing the service', ()=>{
        //testing service.
  })


});

Примечание. Мне нужно создать макет для этой службы на основе реального сервиса, который я использовал. Я не уверен, что этот макет верен. Пожалуйста, взгляните на этот макет. Данные, представленные в URL-адресе get в этом макете находится в другой папке с именем data.mock.ts.

service.mock.ts

import { Observable } from 'rxjs/Observable';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

export class ServiceMock {
    public http: Http;
    url: string;
    getGoogle(): Observable<any> {
        return this.http.get('./data.mock').map((res) => {
            res.json();
        });
    }
}

data.mock.ts

export class Data {
    name: string = 'Aditya';
    profession: string = 'Developer';
}

angular ionic2 angular2-testing
person user8348978    schedule 22.07.2017    source источник
comment
Я только что ответил на аналогичный вопрос: stackoverflow.com/questions/45253631/ Удачи   -  person Eden    schedule 22.07.2017

Ответы (1)


arrow_upward
0
arrow_downward

Простым способом сделать это было бы вернуть Observable с вашими фиктивными данными в ServiceMock без использования Http.

data.mock.ts

export class Data {
  public static data = {
    name: string = 'Aditya',
    profession: string = 'Developer'
  };
}

service.mock.ts

import { Data } from './data.mock';
import 'rxjs/Rx'; 

export class ServiceMock {

  getGoogle(): Observable<any> {
    return Observable.of(Data.data);
  }
}

И тогда вы можете проверить это так.

it('tests that it gets something and prints the response', fakeAsync(() => {
  spyOn(comb.service, 'getGoogle');
  spyOn(console, 'log');
  comb.get();
  tick();
  expect(comb.service.getGoogle).toHaveBeenCalled();
  expect(console.log).toHaveBeenCalledWith('The resonse is', Data.data);
}));

Вы должны использовать fakeAsync, потому что функция подписывается на асинхронный оператор. tick() имитирует время возврата данных из наблюдаемого.

person emroussel    schedule 22.07.2017
comment
но как написать это как спецификацию? - person Aditya; 24.07.2017
comment
Я отредактировал свой ответ с кодом для теста внутри page1.spec.ts - person emroussel; 28.07.2017