预期间谍 "service method" 已被调用。 - Angular 10

Question

我正在 Angular 中编写组件单元测试用例，但我不确定我哪里做错了。之前，我也写过类似的测试用例，但是这个让我头疼。

请检查这里的代码：

组件代码：

ngOnInit(): void {
    this.callFavoriteProjects();
  }

  /**
   * @description To fetch all the favorites projects
   */
  public callFavoriteProjects() {
    this.loadingService.show('loading-favorites');
    this.subscriptions[this.subscriptions.length] = this.projectsFavoriteService.getAllUserFavoriteProjects()
      .subscribe((data) => {
        this.favoriteProjectsList = data;
        this.filteredProjectList = data;
        this.loadingService.hide('loading-favorites');
      },
        (error) => {
          this.toastrService.error('', 'There is an error while processing the favorite projects!', {
            timeOut: 3000,
            progressBar: true,
            progressAnimation: 'increasing',
          });
          this.loadingService.hide('loading-favorites');
        }
      );
  }

Jasmine 测试用例代码：

describe('FavoriteProjectsComponent', () => {
  let component: FavoriteProjectsComponent;
  let fixture: ComponentFixture<FavoriteProjectsComponent>;
  let projectsFavoriteService: ProjectsFavoriteService;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule,
        RouterTestingModule,
        MaterialModule,
        ToastrModule.forRoot()
      ],
      declarations: [ FavoriteProjectsComponent ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      providers: [
        { provide: NgxSpinnerService, useClass: NgxSpinnerServiceStub },
        { provide: ToastrService, useClass: ToastrServiceStub },
        { provide: ProjectsHelperService, useClass: ProjectsHelperServiceStub },
        { provide: ProjectsFavoriteService, useClass: ProjectsFavoriteServiceStub }
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    projectsFavoriteService = TestBed.inject(ProjectsFavoriteService);
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(FavoriteProjectsComponent);
    component = fixture.componentInstance;
    // fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });


  describe('method: ngOnInit should ', () => {
    it('call callFavoriteProjects, projectsFavoriteService.getAllUserFavoriteProjects() and return an Observable<any>', () => {
      spyOn(projectsFavoriteService, 'getAllUserFavoriteProjects').and.returnValue(observableOf([]));
      spyOn(component, 'callFavoriteProjects');
      component.ngOnInit();
      expect(component.callFavoriteProjects).toHaveBeenCalled();
      expect(projectsFavoriteService.getAllUserFavoriteProjects).toHaveBeenCalled();
    });

    it('call callFavoriteProjects, projectsFavoriteService.getAllUserFavoriteProjects() but throw Observable error', () => {
      spyOn(projectsFavoriteService, 'getAllUserFavoriteProjects').and.returnValue(throwError({ message: 'Error Message' }));
      spyOn(component, 'callFavoriteProjects');
      component.ngOnInit();
      expect(component.callFavoriteProjects).toHaveBeenCalled();
      expect(projectsFavoriteService.getAllUserFavoriteProjects).toHaveBeenCalled();
    });

  });

});

项目收藏存根文件

import { of as observableOf } from 'rxjs';

export class ProjectsFavoriteServiceStub {

  getAllUserFavoriteProjects() {
    return observableOf([]);
  }
    
}

因此，如果 ngOnInit 失败，则两个测试用例。我也尝试过 fixture.detectChanges() ，方法是在调用 ngOnInit() 之后将它放在 beforeEach plus 中的每个测试用例中。

我没有弄错方向。请帮忙。提前致谢。

Answer 1

问题是spyOn(component, 'callFavoriteProjects')。当你这样做时，我们会丢失关于 callFavoriteProjects 的实现细节，其中这个 method/function 将 return 未定义，我们只知道它是否被调用。我们必须编写 .and.callTrough 来实际调用此函数，而不仅仅是监视它是否被调用。

我已经评论了需要更改的行。

describe('method: ngOnInit should ', () => {
    it('call callFavoriteProjects, projectsFavoriteService.getAllUserFavoriteProjects() and return an Observable<any>', () => {
      spyOn(projectsFavoriteService, 'getAllUserFavoriteProjects').and.returnValue(observableOf([]));
      spyOn(component, 'callFavoriteProjects').and.callThrough(); // change this line
      component.ngOnInit();
      expect(component.callFavoriteProjects).toHaveBeenCalled();
      expect(projectsFavoriteService.getAllUserFavoriteProjects).toHaveBeenCalled();
    });

    it('call callFavoriteProjects, projectsFavoriteService.getAllUserFavoriteProjects() but throw Observable error', () => {
      spyOn(projectsFavoriteService, 'getAllUserFavoriteProjects').and.returnValue(throwError({ message: 'Error Message' }));
      spyOn(component, 'callFavoriteProjects').and.callThrough(); // change this line
      component.ngOnInit();
      expect(component.callFavoriteProjects).toHaveBeenCalled();
      expect(projectsFavoriteService.getAllUserFavoriteProjects).toHaveBeenCalled();
    });

  });

预期间谍 "service method" 已被调用。 - Angular 10

Expected spy "service method" to have been called. - Angular 10

angular

jasmine

karma-jasmine

karma-runner

karma-coverage