与Jasmine进行的角度测试“预计将召唤间谍”

问题描述

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

我正在编写一些与编写的组件一起进行的单元测试，而无论我做什么，我都无法将这个Expected spy getTopRatedMedia称为一直出现的问题。

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

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

感谢您的帮助：）

解决方法

您确定第一个条件是真实的吗？意味着它进入了put吗？

如果是的话，我认为您必须先等待诺言完成，然后再进行断言。

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(); }); 是可选的/不是必需的，仅尝试一个。