使用Angular 2注入依賴項的單元測試服務

Question

我正在為具有依賴項的服務創建一個簡單的單元測試。 我將開始提供這項簡單服務，以幫助您更好地了解最佳流程和結構。

我創建的單元測試有效，但TypeScript引發錯誤。

Argument of type '{ order_id: string; user: string; }' is not assignable to parameter of type 'Expected<Observable<any>>'.
Object literal may only specify known properties, and 'order_id' does not exist in type 'Expected<Observable<any>>'.

該服務在發出HTTP發布請求的注入服務上執行sendBody方法。 我知道應在此處返回一個Observable，但我會認為模擬服務應該已經解決了此TypeScript類型錯誤。

僅在測試服務時，有沒有更好的方法來注入和模擬依賴項？

服務

export class ReturnOrderService {

    constructor(private _ReturnOrderResource: ReturnOrderResource) { }

    updateOrderStatus(orderId: string, user: string) {
        let body = {};

        if (orderId !== undefined && user !== undefined) {
            body["order_id"] = orderId;
            body["user"] = user;
        }

        return this._ReturnOrderResource.sendBody(body);
    }

}

規格

const MockReturnOrderResource = {
sendBody: function(body) {
    return body;
  }
}

describe('ReturnsComponent', () => {

  beforeEach(() => {
    TestBed.configureTestingModule({ providers: [
       ReturnOrderService,
       { provide: ReturnOrderResource, useValue: MockReturnOrderResource }
      ] });
  });

  it('#updateOrderStatus should create an object literal from arguments',
    async(inject([ReturnOrderService], (service: ReturnOrderService) => {
      expect(service.updateOrderStatus("10006886","Mr Bungle")).toEqual({ order_id: '10006886', user: 'Mr Bungle' });
  })));

});

Answer 1

如果必須返回一個Observable，則返回一個Observable！

嘗試這個 ：

const MockReturnOrderResource = {
    sendBody: (any: any) => Observable.of(any);
}

Answer 2

我已經使用不同的方法解決了這個問題。 雖然它可能無法解決我遇到的類型錯誤，但它使我可以窺探注入的服務，而這正是我所追求的。

注入服務后，我使用TestBed.get（）獲得服務並將其分配給變量。

然后，我可以監視注入的服務並針對調用該方法的參數進行測試。

以下是更新的規格。

const MockReturnOrderResource = {
  sendBody: function(body) {
    return body;
  }
}

describe('ReturnsComponent', () => {
  let _ReturnOrderResource;

  beforeEach(() => {
    TestBed.configureTestingModule({ providers: [
       ReturnOrderService,
       { provide: ReturnOrderResource, useValue: MockReturnOrderResource }
      ] });
    _ReturnOrderResource = TestBed.get(ReturnOrderResource);
  });

  it('#updateOrderStatus should pass an object literal as an argument',
    async(inject([ReturnOrderService], (service: ReturnOrderService) => {
    spyOn(service, "updateOrderStatus").and.callThrough();
    spyOn(_ReturnOrderResource, "sendBody").and.callThrough();
    service.updateOrderStatus("10006886","Mr Bungle");
    expect(_ReturnOrderResource.sendBody).toHaveBeenCalledWith({ order_id: '10006886', user: 'Mr Bungle' })
  })));

});

有關此解決方案的更多信息，請訪問： https : //angular.io/guide/testing#testbedget