英文:
TypeError: .subscribe is not a function Jasmine Angular
问题
以下是您要翻译的内容：
I am trying to write unit test for my angular component.
I am able to mock 2 methods successfully using spyOn.
But one method (_paymentStateService.getMakePaymentState$) is giving an error even after I mock and use callFake.
It is giving error (**this._payStateService.getMakePaymentState$.subscribe is not a function**) in these line:
spyOn(mockMakePaymentState, 'getMakePaymentState$')
fdescribe('DetailsComponent', () => {
let component: DetailsComponent;
let fixture: ComponentFixture<DetailsComponent>;
let httpMock: HttpTestingController;
let formModule: FormsModule;
let form = new FormGroup({
username: new FormControl('', Validators.required),
dob: new FormControl('')
});
let mockbillingService = {
getDetails: () => {},
getBankDetails: () => {}
}
let mockMakePaymentState = {
getPaymentDetails$: () => of({} as IPaymentDetails),
getDetails: () => {},
getUserInfo: () => {}
};
class MatDialogMock {
// When the component calls this.dialog.open(...) we'll return an object
// with an afterClosed method that allows to subscribe to the dialog result observable.
open() {
return {
afterClosed: () => of({action: true})
};
}
}
let paymentInfoDetails = <PaymentInfoDetails>{};
let paymentBankDetails = <PaymentBankDetails>{};
let makePaymentState = <IPaymentDetails> {}
paymentInfoDetails.banks = [paymentBankDetails];
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ],
imports: [ FormsModule, ReactiveFormsModule],
providers: [
{ provide: BillingService, useValue: mockbillingService },
{provide: PayState, useValue: mockMakePaymentState},
{ provide: MatDialog, useClass: MatDialogMock }
]
})
.compileComponents();
fixture = TestBed.createComponent(DetailsComponent);
component = fixture.componentInstance;
httpMock = TestBed.inject(HttpTestingController);
formModule = TestBed.inject(FormsModule);
// fixture.detectChanges();
});
it('should call ngOnInit', () => {
spyOn(mockMakePaymentState, 'getDetails').and.callFake(() => {
return of(
paymentInfoDetails
);
});
spyOn(mockMakePaymentState, 'getBankPayments').and.callFake(() => {
return of(
paymentBankDetails
);
});
spyOn(mockMakePaymentState, 'getMakePaymentState$').and.callFake(() => {
return of(makePaymentState);
})
fixture.detectChanges();
});
});
希望这有所帮助！如果您需要任何其他翻译或帮助，请随时告诉我。
英文:
I am trying to write unit test for my angular component.
I am able to mock 2 methods successfully using spyon.
But one method (_paymentStateService.getMakePaymentState$) is giving an error even after I mock and use callFake.
It is giving error (this._payStateService.getMakePaymentState$.subscribe is not a function) in these line:
spyOn(mockMakePaymentState, 'getMakePaymentState$')
fdescribe('DetailsComponent', () => {
let component: DetailsComponent;
let fixture: ComponentFixture<DetailsComponent>;
let httpMock: HttpTestingController;
let formModule: FormsModule;
let form = new FormGroup({
username: new FormControl('', Validators.required),
dob: new FormControl('')
});
let mockbillingService = {
getDetails: () => {},
getBankDetails: () => {}
}
let mockMakePaymentState = {
getPaymentDetails$: () => of({} as IPaymentDetails),
getDetails: () => {},
getUserInfo: () => {}
};
class MatDialogMock {
// When the component calls this.dialog.open(...) we'll return an object
// with an afterClosed method that allows to subscribe to the dialog result observable.
open() {
return {
afterClosed: () => of({action: true})
};
}
}
let paymentInfoDetails = <PaymentInfoDetails>{};
let paymentBankDetails = <PaymentBankDetails>{};
let makePaymentState = <IPaymentDetails> {}
paymentInfoDetails.banks = [paymentBankDetails];
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ],
imports: [ FormsModule, ReactiveFormsModule],
providers: [
{ provide: BillingService, useValue: mockbillingService },
{provide: PayState, useValue: mockMakePaymentState},
{ provide: MatDialog, useClass: MatDialogMock }
]
})
.compileComponents();
fixture = TestBed.createComponent(DetailsComponent);
component = fixture.componentInstance;
httpMock = TestBed.inject(HttpTestingController);
formModule = TestBed.inject(FormsModule);
// fixture.detectChanges();
});
it('should call ngOnInit', () => {
spyOn(mockMakePaymentState, 'getDetails').and.callFake(() => {
return of(
paymentInfoDetails
);
});
spyOn(mockMakePaymentState, 'getBankPayments').and.callFake(() => {
return of(
paymentBankDetails
);
});
spyOn(mockMakePaymentState, 'getMakePaymentState$').and.callFake(() => {
return of(makePaymentState);
})
fixture.detectChanges();
});
});
答案1
得分: 1
不能spyOn实例变量，只能spyOn公共方法。
所以，因此，这行代码是不起作用的：
spyOn(mockMakePaymentState, 'getMakePaymentState$').and.callFake(() => {
return of(makePaymentState);
})
要修复它，你可以这样做：
let mockMakePaymentState = {
getPaymentDetails$: () => of({} as IPaymentDetails),
getDetails: () => {},
getUserInfo: () => {},
// !! 添加这一行，以便将`getMakePaymentState$`模拟为实例变量
getMakePaymentState$: of(makePaymentState),
};
英文:
You can't spyOn instance variables, only public methods.
So therefore, this line won't work:
spyOn(mockMakePaymentState, 'getMakePaymentState$').and.callFake(() => {
return of(makePaymentState);
})
To fix it, you can do this:
let mockMakePaymentState = {
getPaymentDetails$: () => of({} as IPaymentDetails),
getDetails: () => {},
getUserInfo: () => {},
// !! Add this line so `getMakePaymentState$` is mocked as an instance variable
getMakePaymentState$: of(makePaymentState),
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论