如何为服务的订阅回调编写单元测试答案

【问题标题】：How to write unit test for subscribe callback of a service如何为服务的订阅回调编写单元测试
【发布时间】：2019-09-25 17:51:00
【问题描述】：

我正在学习如何在 Angular 中编写单元测试。我创建了一个具有 sendToServer 方法的 httpService。每个组件都使用它向服务器发送请求：

sendToServer(method, url, body, header, onSuccessCallback, onErrorCallback?);

这是我的组件

export class LoginComponent implements OnInit {

  constructor(private http: HttpService) {
   }
   data ;

  ngOnInit() {
    this.getToken();
  }

  getToken(){
    this.http.sendToServer("GET", "/api/tokent",{}, null, data=>{
      this.data = data;
    });
  }

}

这是我的单元测试代码：

it("should call getTokent and return data", fakeAsync(() => {
    const response = "abc";
    component.getToken();
    spyOn(service, 'sendToServer').and.returnValue(of(response));
    tick(); 

    fixture.detectChanges();

    expect(component.data).toEqual(response);
  }));

如何测试http.senntoServer的回调函数

【问题讨论】：

通过监视 sendToServer 调用，实际的函数并没有被执行，而是返回一个 observable，它立即发出你的响应字符串。所以你的回调永远不会被执行。您可能可以使用spyOn(service, 'sendToServer').and.callFake(...) 来实际触发您的回调函数。
spyOn(http, 'sendToServer').and.callFake(()=>{ return of("data"); }); guard1.getData(); console.log("Data",guard1.permissions); 不能调用回调函数。 getData(){ this.http.sendToServer("GET", API.ACCESS_PERMISSION, {}, null, data => { this.permissions = data; this.aa(); }) }

标签： javascript angular unit-testing

【解决方案1】：

您需要在模拟的 DataService 中触发回调函数，而不是返回固定值。顾名思义，使用returnValue，如果方法被调用，则返回值并且不执行任何其他操作。

在您的情况下，您想要使用的是callFake，然后您可以在该假函数中触发您的回调。

component.spec.ts

it('test callback', () => {
  spyOn(TestBed.get(DataService), 'sendToServer').and.callFake((parm1: string, param2: string, param3: any, param4: any, callback: (data) => {}) => {
        callback('DATA_RESULT');
  })
  fixture.detectChanges();
  expect(component.data).toEqual('DATA_RESULT');
});

这是stackblitz。

【讨论】：