如何根据角度组件生命周期进行测试

Question

我需要按照 Angular 组件 lifecycle 进行测试。我找不到制作这个的方法或工具。基本上想在给定的生命周期后调用测试。

以下示例：

my-component.ts：

@Component(...)
export class MyComponent implements OnInit, AfterViewChecked {
  constructor(private element: ElementRef) {}

  ngOnInit() {
    this.element.innerHTML = 'Init';
  }

  ngAfterViewChecked() {
    this.element.innerHTML = 'AfterViewChecked';
  }
}

my-component.spec.ts

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [MyComponent]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
  });

  // SHOULD BE CALLED AFTER ON INIT
  it('should initiate', () => {
    expect(compiled.textContent).toEqual('Init');
  });

  // SHOULD BE CALLED AFTER THE LIFECYCLE AfterViewChecked
  it('should render view', () => {
    expect(compiled.textContent).toEqual('ViewChecked');
  });
});

Answer 1

对于 ngOnInit 你可以这样调用它，对于其他生命周期钩子也是如此

component.ngOnInit();

例子

it('inner test should be Init', () => {
 expect(inner text).toEqual('Init'); // false
 component.ngOnInit();
 fixture.detectChanges();
 expect(inner text).toEqual('Init'); // pass
});