使用 Jasmine 进行 Angular 测试“预期的间谍已被调用。”

Question

希望你能帮助我解决这个困扰我一段时间的事情。

我正在编写一些伴随我编写的组件的单元测试，无论我做什么，我都无法修复这个预期的间谍 getTopRatedMedia 被称为不断出现的问题。

此测试应检查服务方法是否已被触发，但它会不断记录“预期的间谍 getTopRatedMedia 已被调用”。

媒体列表page.component.ts

async onMediaChange(media: string): Promise<void> {
    this.typeOfMedia = media;
    if (!this.searchParam || this.searchParam.length <= 2) {
      this.typeOfMedia = media;

      try {
        this.loader.show();   
        if (!this.configurationString) {
          await this.stateService.getConfiguration();
        }

        let response = await this.api.getTopRatedMedia(media);

        this.mapMedia(response);
        this.loader.hide();
      } catch (err) {
        this.loader.hide();
        console.log(err);
      }
    } else {
      this.onSearchChange(this.searchParam);
    }
  }

media-list-page.component.spec.ts

fdescribe('MediaListPageComponent', () => {
  let component: MediaListPageComponent;
  let fixture: ComponentFixture<MediaListPageComponent>;
  let api: MockedApiService;
  let stateService: MockedStateService;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [RouterModule.forRoot([]), HttpClientTestingModule],
      declarations: [MediaListPageComponent, LoaderComponent],
      providers: [
        { provide: ApiService, useClass: MockedApiService },
        { provide: StateService, useClass: MockedStateService },
      ],
    }).compileComponents();
  });

  beforeEach(async () => {
    fixture = TestBed.createComponent(MediaListPageComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    await component.ngOnInit();
    api = new MockedApiService();
    stateService = new MockedStateService();
    await fixture.whenStable();
  });

  //// FAILING TEST ////
  it('should call the api method getTopRatedMedia()', () => {
    const fixture = TestBed.createComponent(MediaListPageComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement;
    spyOn(api, 'getTopRatedMedia').and.callThrough();
    component.onMediaChange('shows');
    fixture.detectChanges();
    expect(api.getTopRatedMedia).toHaveBeenCalled();
  });

mocks.ts

@Injectable({
  providedIn: 'root',
})
export class MockedApiService {
  getTopRatedMedia() {
    return {
     // returns a mocked object
    };
  }

谢谢你的帮助 ：）

Answer 1

你确定第一个 if 是真的吗？ 意思是它在if(!this.searchParam || this.searchParam.length <= 2) ？

如果是，我认为您必须等待承诺完成才能进行断言。

//// FAILING TEST ////
  it('should call the api method getTopRatedMedia()', async() => { // add async here
    const fixture = TestBed.createComponent(MediaListPageComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement;
    spyOn(api, 'getTopRatedMedia').and.callThrough();
    component.searchParams = ''; // maybe not needed, but make sure it goes inside of first if
    component.onMediaChange('shows');
    fixture.detectChanges();
    await fixture.whenStable(); // wait for await this.stateService.getConfiguration(); to finish
    await fixture.whenStable(); // wait for await this.api.getTopRatedMedia(media); to finish
    expect(api.getTopRatedMedia).toHaveBeenCalled();
  });

第二个await fixture.whenStable()可能是可选的/不需要的，只用一个试试。