CODEWITHSUNDEEP
angularunit-testingjasminekarma-jasmine
justTrustMe
justTrustMe

Reputation: 63

Unit Test Angular Using Subscribe for Success Condition shows error

Hi I need to write unit test angular for this function, like this:

  resendOTP() {
      this.authProvider.resendOTP(this.tempId, this.tempToken).subscribe((result) => {
      this.tempId = result.data.resendOtp.id;
      this.tempToken = result.data.resendOtp.access_token;
      this.showResendInfo = true;
      this.showResend = false;
      this.messageBoxService.showSuccess('SMS has been sent', 2000);
      this.startTimer();
    }, (error) => {
      if (error.graphQLErrors[0].message.includes('Maximum limit exceeded')) {
        this.validError = true;
        this.loginState = 'login';
        this.propertyAlert.message = `You\'ve requested OTP Code after the 5th attempt and your account has been
        suspended. Please contact the administrator to recover it.`;
        // setTimeout(() => {
        //   this.reloadCaptcha();
        // }, 100);
      }
    });
  }

I succesfully create for error condition

it('show account suspended after make 5 otp attemps', () => { spyOn(providerService, 'resendOTP').and.returnValue(throwError({ graphQLErrors: [{ message: 'Maximum limit exceeded' }] })); component.resendOTP(); fixture.detectChanges(); const errorElem = fixture.debugElement.query(By.css('.alert-container')).nativeElement; expect(component.validError).toBeTruthy(); expect((component.propertyAlert.message).includes('suspended')).toBeTruthy(); });

but when I create for success condition

it('show account success after make 5 otp attemps', () => {
  let response = [];
  spyOn(providerService, 'resendOTP').and.returnValue(of(response));
  component.resendOTP();
  expect(component.showResend).toBeFalsy()
  expect(component.showResendInfo).toBeTruthy()    
});

It show if Argument of type 'Observable<any[]>' is not assignable to parameter of type 'Observable<FetchResult<ResendOTPResponse, Record<string, any>, Record<string, any>>>'. Type 'any[]' has no properties in common with type 'FetchResult<ResendOTPResponse, Record<string, any>, Record<string, any>>'. Anyone know what's wrong with this? I already import { of } from rxjs. Thanks

Upvotes: 0

Views: 391

Answers (1)

michal.materowski
michal.materowski

Reputation: 447

It says that the response object has a wrong type. Change the value of response to FetchResult<ResendOTPResponse, Record<string, any>, Record<string, any>>

Consider handling subscription in Your resendOTP() method, because now You might introduce memory leak. eg.

ngOnInit() {
  this.subscription = this.yourObservable.subscribe(() => {
   //some code
   });
}

ngOnDestroy() {
  this.subscription.unsubscribe();
}

It's also a good practice to explicitly state return type like

 resendOTP(): void {
    //your code
  }

Upvotes: 0

Related Questions