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

【问题标题】：Angular Testing With Jasmine "Expected spy to have been called."使用 Jasmine 进行 Angular 测试“预期的间谍已被调用。”
【发布时间】：2020-10-29 22:17:14
【问题描述】：

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

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

这个测试应该检查一个服务方法是否已经被触发，但是它一直在记录“Expected spy getTopRatedMedia to have been called。”

media-list-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
    };
  }

感谢您的帮助:)

【问题讨论】：

标签： angular typescript testing jasmine karma-runner

【解决方案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() 可能是可选的/不需要，只用一个试试。

【讨论】：