如何在角茉莉花的 ngOnChanges 中调用测试函数？

Question

我在 Angular 应用中有一个子组件，它调用 ngOnChanges 生命周期钩子中的函数。

export class GameComponent implements OnInit, OnChanges { 

   ngOnChanges(changes: SimpleChanges) {
     this.generateRandomIcon();
   }

   generateRandomIcon(): void {
     //some code goes here...
   }
}

现在我正在尝试开发单元测试来检查是否调用了generateRandomIcon() 函数。

这里是测试：

describe('GameComponent', () => {
  let component: GameComponent;
  let fixture: ComponentFixture<GameComponent>;
  let setGameItemImageSpy: any;
  let el: DebugElement;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [CommonModule],
      declarations: [GameComponent],
    })
      .compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(GameComponent);
        component = fixture.componentInstance;
        el = fixture.debugElement;
      });
  });

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

  it('should check if generateRandomIcon was called in ngOnChanges lifecycle hook', () => {
    setGameItemImageSpy = jasmine.createSpyObj(GameComponent, [
      'generateRandomIcon',
    ]);
    spyOn(component, 'ngOnChanges');

    setGameItemImageSpy.generateRandomIcon();
    expect(setGameItemImageSpy.generateRandomIcon).toHaveBeenCalled();
    expect(setGameItemImageSpy.generateRandomIcon).toHaveBeenCalledTimes(1);
  });
});

当单元测试运行时，一切正常，但无论如何，当我测量测试的覆盖率时，这部分没有被覆盖。

那么，我做错了什么？

Answer 1

您应该明确调用更改检测。如果你这样做了 - Angular 会调用你的组件钩子。

  it('should check if generateRandomIcon was called in ngOnChanges lifecycle hook', () => {
    const generateRandomIconSpy = spyOn(component, 'generateRandomIcon');
    fixture.detectChanges();

    expect(generateRandomIconSpy ).toHaveBeenCalledTimes(1);
  });