how to spyon a service in angular test case in Jasmine

Question

In my angular app, I am writing a test case for a method which call service and returns an object. I am using spyon and callFake and trying to return an Observable. Not sure what is wrong, it is giving an error.

Error is : Argument of type '(this: Observable, subscriber: Subscriber) => MonoTypeOperatorFunction' is not assignable to parameter of type ' (this: Observable, subscriber: Subscriber) => TeardownLogic'.ts(2345)

Any help in finding the solution for this.

myservice.ts 

export class Myservice {

  getDetails() {
    return this._http.get<Details>('http://localhost:myapp/getService/')
  }
}
  
 
export interface Details {
    detailsResponse: {
        balance: number,
    };

}

export class MyDetailsComponent {

  details : any
  err: any;
  constructor(
    private myservice: Myservice) {}
    
  getDetails() {
    return this.myservice.getDetails().subscribe({
      next: (res: Details) => {
        this.details = res;
      },
      error: (err) => {
        this.err = err;
      },
    });
  }
 }
 
 MyDetailsComponent.spec.ts
 
 fdescribe('MyDetailsComponent', () => {
  let component: MyDetailsComponent;
  let fixture: ComponentFixture<MyDetailsComponent>;
  let httpTestingController: HttpTestingController;
  let myservice: Myservice;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ MyDetailsComponent ],
      imports: [HttpClientModule, HttpClientTestingModule,
        RouterTestingModule],
    })
    .compileComponents();

    fixture = TestBed.createComponent(MyDetailsComponent);
    component = fixture.componentInstance;
    httpTestingController = TestBed.inject(HttpTestingController);
    myservice = TestBed.inject(Myservice);
    fixture.detectChanges();
  });

  it('should create', () => {

    var modal = <Details>{};    
    spyOn(myservice, 'getDetails').and.callFake(() => new Observable(
      (
        
        subscriber => subscribeOn(modal))
      ));
    })
    
    component.getDetails();



});

Answer 1

Instead of new Observable(, change it to of. callFake is also not needed in this case, we can just use returnValue.

import { of } from 'rxjs';
....
spyOn(myservice, 'getDetails').and.returnValue(of(modal));