调用函数时以 ionic 和 angular 形式伪造 http 响应答案

【问题标题】：fake http response in ionic and angular when function is called调用函数时以 ionic 和 angular 形式伪造 http 响应
【发布时间】：2023-01-10 23:46:05
【问题描述】：

我是茉莉花业力测试的初学者。我正在尝试测试发出 http 请求的函数。使用我当前在运行测试时拥有的脚本，只能看到加载程序，并且它永远不会离开屏幕。我想知道如何在调用函数时伪造响应以便隐藏加载程序

功能

  login() {
    this.loaderService.showLoader('Logging in...');
    const payload = {
      username: 'username',
      password: 'test'
    };
    this.userService.login(payload).subscribe((response) => {
      this.loaderService.hideLoader();
      if (response) {
    
        this.router.navigate(['/user-home']);
      }
    }, err => {
      this.loaderService.hideLoader();
      this.alertS.show(err, 'OK');
    });
  }

测试用例

  it('should login', () => {
    component.login();
    expect(component.login).toHaveBeenCalled();
  });

【问题讨论】：

控制台中是否显示任何错误？

标签： angular ionic-framework jasmine karma-jasmine

【解决方案1】：

您需要模拟该服务以及您的组件可能具有的任何依赖项。您可以使用 jasmine 中的 createSpyObj，如下所示：

const mockService = jasmine.createSpyObj<UserService>('UserService', ['login']);

// provide a mocking/fake value to be returned by this dependency
beforeEach(() => mockService.login.and.returnValue(of('My value')));

beforeEach(async () => {
 await TestBed.configureTestingModule({
    declarations: [...],
    // configure the dependency within providers
    providers: [{ provide: UserService, useValue: mockService }]
  })
})


it('calls login', () => {
  component.login();

  expect(mockService.login).toHaveBeenCalled();
});

【讨论】：