模拟服务不会在角度测试中禁用按钮？

问题描述

我正在使用角度材质步进器在我的组件中导航，有以下按钮：

下面是我的 stepper.component.html 代码 下一步

然后我有一个使用 behaviorSubject 来存储 productId 的服务：

export class MyService {

 product : any {
 productId: 0,ProductName: ''
}

private productDetails = new BehaviorSubject<ProductData>(this.product);

disableNextButton(step: number) : boolean{
  if(this.productDetails.value.productId==0){
return true;
}
return false;
}

}

我正在使用 JEST 测试和 ts-mockito 来模拟我的服务，如下所示：

product : any {
productId: 0,ProductName: ''
}

private productDetails = new BehaviorSubject<ProductData>(this.product);

  const myServiceMock = mock(MyService);
  
  beforeEach(async () => {
    when(MyService.disableNextButton(anything())).thenReturn(
      true
    );
    await render(StepperComponent,{
      imports: [ReactiveFormsModule,MatStepperModule,MatButtonModule],providers: [
        {
          provide: MyService,useFactory: () => instance(myServiceMock),}
      ]
    });
  });

在我的测试中，我有以下内容：

const nextButton = screen.getByRole('button',{ name: 'next' });
expect(nextButton).toBedisabled();

问题是当我使用原始服务时，该按钮在启动时被禁用，但是当我模拟该服务时，它并没有禁用它。知道有什么问题吗？

解决方法

我不确定 when/thenReturn 语法是否正确。我通常会将其写为 myServiceMock.disableNextButton.mockReturnValue(true) 或 myServiceMock.disableNextButton.mockReturnValueOnce(true)。

此外，在您的 disableNextButton 函数中，只需立即返回 this.productDetails.value.productId == 0（无用的 if 子句）。