Angular5-测试一个在内部调用http服务的函数

Question

我需要测试此功能。

当我单击此函数getallproductcomponent() ，执行此服务函数getallproductservice()并返回所有产品。 请问有什么想法，如何测试？

  getallproductcomponent() {
    this.ws.getallproductservice().subscribe(
      item=> {
        this.item= item;
      }
    );
  }

我测试的只有getallproductservice类似于此代码，但是如何测试组件。

it('testing',
    async(inject([ProductService], (service: ProductService) => {
        TestBed.get(MockBackend).connections.subscribe(
            (connection: MockConnection) => connection.mockRespond(new Response(
                new ResponseOptions({
                                    })
            ))
        );
        service.getallproductservice().subscribe(items => {
            expect(items[0].alarmdesc).toEqual('call');
        });
    })))

Answer 1

简单的方法

let ws: ServiceName;

//in beforeEach    
ws= TestBed.get(ServiceName);

it('save should work', () => {
     spyOn(ws, 'getallproductservice').and.returnValue(
        of({})
      );;
     component.getallproductcomponent();
     expect(ws.getallproductservice).toHaveBeenCalled();
});

测试可观察物

import { marbles } from 'rxjs-marbles';
import { of } from 'rxjs/observable/of';

it(
    'should return the search result',
     marbles(marble => {
         const expectedResult={ item: {//something to match the api}}
         spyOn(ws, 'getallproductservice').and.returnValue(
            of(expectedResult)
          );
        component.getallproductcomponent();
        expect(component.item).toEqual(expectedResult.item);
      })