TypeError: .subscribe is not a function Jasmine Angular

huangapple
go评论94阅读模式
英文:

TypeError: .subscribe is not a function Jasmine Angular

问题

以下是您要翻译的内容：

  1. I am trying to write unit test for my angular component.
  2. I am able to mock 2 methods successfully using spyOn.
  3. But one method (_paymentStateService.getMakePaymentState$) is giving an error even after I mock and use callFake.
  4. It is giving error (**this._payStateService.getMakePaymentState$.subscribe is not a function**) in these line:
  5. spyOn(mockMakePaymentState, 'getMakePaymentState$')
  7. fdescribe('DetailsComponent', () => {
  8.   let component: DetailsComponent;
  9.   let fixture: ComponentFixture<DetailsComponent>;
  10.   let httpMock: HttpTestingController;  
  11.   let formModule: FormsModule;
  13.   let form = new FormGroup({
  14.     username: new FormControl('', Validators.required),
  15.     dob: new FormControl('')
  16.   });
  18.   let mockbillingService = {
  19.     getDetails: () => {},
  20.     getBankDetails: () => {}
  21.   }
  24.   let mockMakePaymentState = {
  25.     getPaymentDetails$: () => of({} as IPaymentDetails),    
  26.     getDetails: () => {},
  27.     getUserInfo: () => {}
  29.   };
  31.    class MatDialogMock {
  32.     // When the component calls this.dialog.open(...) we'll return an object
  33.     // with an afterClosed method that allows to subscribe to the dialog result observable.
  34.     open() {
  35.       return {
  36.         afterClosed: () => of({action: true})
  37.       };
  38.     }
  39.   }
  41.   let paymentInfoDetails = <PaymentInfoDetails>{};
  42.   let paymentBankDetails = <PaymentBankDetails>{};
  43.   let makePaymentState = <IPaymentDetails> {}
  45.   paymentInfoDetails.banks = [paymentBankDetails];
  47.   beforeEach(async () => {     
  49.     await TestBed.configureTestingModule({
  50.       declarations: [ ],
  51.       imports: [ FormsModule, ReactiveFormsModule],
  52.       providers: [
  53.         { provide: BillingService, useValue: mockbillingService },
  54.         {provide: PayState, useValue: mockMakePaymentState},
  55.         { provide: MatDialog, useClass: MatDialogMock } 
  56.       ]
  57.     })
  58.     .compileComponents();
  60.     fixture = TestBed.createComponent(DetailsComponent);
  61.     component = fixture.componentInstance;
  62.      httpMock = TestBed.inject(HttpTestingController);
  63.      formModule = TestBed.inject(FormsModule);
  64.     // fixture.detectChanges();
  68.   });
  71.   it('should call ngOnInit', () => {
  72.      spyOn(mockMakePaymentState, 'getDetails').and.callFake(() => {
  73.       return of(
  74.         paymentInfoDetails
  75.       );
  76.     });
  77.     spyOn(mockMakePaymentState, 'getBankPayments').and.callFake(() => {
  78.       return of(
  79.         paymentBankDetails
  80.       );
  81.     });
  85.    spyOn(mockMakePaymentState, 'getMakePaymentState$').and.callFake(() => {
  86.       return of(makePaymentState);
  87.   })
  89.    
  91.     fixture.detectChanges();
  92.   });
  96. });

希望这有所帮助！如果您需要任何其他翻译或帮助，请随时告诉我。

英文:

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$')

  1. fdescribe(&#39;DetailsComponent&#39;, () =&gt; {
  2. let component: DetailsComponent;
  3. let fixture: ComponentFixture&lt;DetailsComponent&gt;;
  4. let httpMock: HttpTestingController;  
  5. let formModule: FormsModule;
  6. let form = new FormGroup({
  7. username: new FormControl(&#39;&#39;, Validators.required),
  8. dob: new FormControl(&#39;&#39;)
  9. });
  10. let mockbillingService = {
  11. getDetails: () =&gt; {},
  12. getBankDetails: () =&gt; {}
  13. }
  14. let mockMakePaymentState = {
  15. getPaymentDetails$: () =&gt; of({} as IPaymentDetails),    
  16. getDetails: () =&gt; {},
  17. getUserInfo: () =&gt; {}
  18. };
  19. class MatDialogMock {
  20. // When the component calls this.dialog.open(...) we&#39;ll return an object
  21. // with an afterClosed method that allows to subscribe to the dialog result observable.
  22. open() {
  23. return {
  24. afterClosed: () =&gt; of({action: true})
  25. };
  26. }
  27. }
  28. let paymentInfoDetails = &lt;PaymentInfoDetails&gt;{};
  29. let paymentBankDetails = &lt;PaymentBankDetails&gt;{};
  30. let makePaymentState = &lt;IPaymentDetails&gt; {}
  31. paymentInfoDetails.banks = [paymentBankDetails];
  32. beforeEach(async () =&gt; {     
  33. await TestBed.configureTestingModule({
  34. declarations: [ ],
  35. imports: [ FormsModule, ReactiveFormsModule],
  36. providers: [
  37. { provide: BillingService, useValue: mockbillingService },
  38. {provide: PayState, useValue: mockMakePaymentState},
  39. { provide: MatDialog, useClass: MatDialogMock } 
  40. ]
  41. })
  42. .compileComponents();
  43. fixture = TestBed.createComponent(DetailsComponent);
  44. component = fixture.componentInstance;
  45. httpMock = TestBed.inject(HttpTestingController);
  46. formModule = TestBed.inject(FormsModule);
  47. // fixture.detectChanges();
  48. });
  49. it(&#39;should call ngOnInit&#39;, () =&gt; {
  50. spyOn(mockMakePaymentState, &#39;getDetails&#39;).and.callFake(() =&gt; {
  51. return of(
  52. paymentInfoDetails
  53. );
  54. });
  55. spyOn(mockMakePaymentState, &#39;getBankPayments&#39;).and.callFake(() =&gt; {
  56. return of(
  57. paymentBankDetails
  58. );
  59. });
  60. spyOn(mockMakePaymentState, &#39;getMakePaymentState$&#39;).and.callFake(() =&gt; {
  61. return of(makePaymentState);
  62. })
  63. fixture.detectChanges();
  64. });
  65. });

答案1

得分: 1

不能spyOn实例变量，只能spyOn公共方法。

所以，因此，这行代码是不起作用的：

  1. spyOn(mockMakePaymentState, 'getMakePaymentState$').and.callFake(() => {
  2.       return of(makePaymentState);
  3.   })

要修复它，你可以这样做：

  1. let mockMakePaymentState = {
  2.     getPaymentDetails$: () => of({} as IPaymentDetails),    
  3.     getDetails: () => {},
  4.     getUserInfo: () => {},
  5.     // !! 添加这一行，以便将`getMakePaymentState$`模拟为实例变量
  6.     getMakePaymentState$: of(makePaymentState),
  7. };
英文:

You can't spyOn instance variables, only public methods.

So therefore, this line won't work:

  1. spyOn(mockMakePaymentState, &#39;getMakePaymentState$&#39;).and.callFake(() =&gt; {
  2. return of(makePaymentState);
  3. })

To fix it, you can do this:

  1. let mockMakePaymentState = {
  2. getPaymentDetails$: () =&gt; of({} as IPaymentDetails),    
  3. getDetails: () =&gt; {},
  4. getUserInfo: () =&gt; {},
  5. // !! Add this line so `getMakePaymentState$` is mocked as an instance variable
  6. getMakePaymentState$: of(makePaymentState),
  7. };

huangapple
  • 本文由 发表于 2023年3月7日 03:58:12
  • 转载请务必保留本文链接：https://go.coder-hub.com/75655294.html
  • angular
  • jasmine
  • subscribe
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定