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();
});

测试 observables

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);
      })