TypeError karma test : subscribe is not a function

Question

I have a karma unit test and the test fails with below error.

this.gridApi.getScaleWidth().subscribe is not a function

GridApi.ts

export class GridApi {

    private scaleWidthSubject = new BehaviorSubject<{value: number}>({value: 0});

    public getScaleWidth(): Observable<{value:number}> {
        return this.scaleWidthSubject;
    }
}

GridComponent.ts

export class GridComponent implements OnInit, OnDestroy, AfterViewInit {

    private subscribeToValueChanges() {        
        this.scaleWidth$ = this.gridApi.getScaleWidth().subscribe( width => {
        this.scaleWidth = width.value;
    });

 }
}

Component.spec.ts

describe('GridComponent', () => {

beforeEach(async () => {
    const mockGridApiService = jasmine.createSpyObj("GridApi", {
        getScaleWidth () : Observable<{value: number}> {
            let scaleWidthSubject = new BehaviorSubject<{value: number}>({value: 0});
            return scaleWidthSubject.asObservable();
        }
    });
}

await TestBed.configureTestingModule({
    providers: [ { provide: GridApi, useValue: mockGridApiService} ],
    imports: [
        HttpClientModule
    ],
    declarations: [ GridComponent ]

})
}

What should the mock getScaleWidth() return to pass the test. Not sure what I'm missing here.

Answer 1

describe('GridComponent', () => {
  const mockGridService = jasmine.createSpyObj<GridApi>('GridApi', ['getScaleWidth'])

  beforeEach(() => {
    mockGridService.getScaleWidth.and.returnValue(of({ value: 0 }));
  });

  await TestBed.configureTestingModule({
    providers: [ { provide: GridApi, useValue: mockGridService} ],
    imports: [HttpClientModule],
    declarations: [ GridComponent ]
  })

  it('should call getScaleWidth from service', () => {
    // the component function that triggers the service call is private 
    // make the call from component
  
    expect(mockGridService.getScaleWidth).toHaveBeenCalled(); 
    mockGridService.getScaleWidth().subscribe(response => {
       expect(response.value === 0)
    }) 
  })
}