TypeError 业力测试：订阅不是函数

Question

我有一个业力单元测试，但测试失败并出现以下错误。

this.gridApi.getScaleWidth().subscribe 不是函数

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 ]

})
}

mock getScaleWidth() return 应该怎样才能通过测试。不确定我在这里遗漏了什么。

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)
    }) 
  })
}

TypeError 业力测试：订阅不是函数

TypeError karma test : subscribe is not a function

javascript

angular

typescript

karma-jasmine