模拟服务不禁用按钮在角测试?

Question

我使用角材质步进在我的组件中导航，有下面的按钮:

下面是我的step .component.html代码& lt;按钮(残疾人)="myService.disableNextButton (stepper.selectedIndex)"比;下一个然后我有一个使用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-mockit来模拟我的服务，如下所示:

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();

问题是当我使用原始服务时，按钮在启动时被禁用，但当我模拟服务时，它不会禁用它。你知道哪里出错了吗?

Answer 1

我不完全确定when/thenReturn语法是否正确。我通常把它写成myServiceMock.disableNextButton.mockReturnValue(true)或myServiceMock.disableNextButton.mockReturnValueOnce(true)。

也，在disableNextButton函数中，只需立即返回this.productDetails.value.productId == 0(无用的if-子句)。