Question

我正在学习如何在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的回调函数中进行测试

Answer 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。

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

1 个答案: