在Jasmine测试中AfterViewInit的生命周期钩子 [英] Lifecycle hook of AfterViewInit in Jasmine test

问题描述

我对生命周期钩子与Jasmine测试的关系感到困惑。 LifeCycle Angular doc没有提及测试 https://angular.io/guide/lifecycle-hooks。测试文档仅提及OnChange https://angular.io/guide/testing 。
我有一个示例组件如下：

I am confused on lifecycle hooks in relationship with Jasmine testing. The LifeCycle Angular doc does not mention testing https://angular.io/guide/lifecycle-hooks. The testing doc only mentions OnChange https://angular.io/guide/testing. I have a sample component as follows:

import { Component, OnInit, AfterViewInit, OnDestroy, ElementRef } from '@angular/core';
...
@Component({
  selector: 'app-prod-category-detail',
  templateUrl: './prod-category-detail.component.html',
  styleUrls: ['./prod-category-detail.component.css']
})
//
export class ProdCategoryDetailComponent implements OnInit, AfterViewInit, OnDestroy {
    ...
    nav: HTMLSelectElement;
    //
    constructor(
        ...
        private _elementRef: ElementRef ) { }
    ...
    ngAfterViewInit() {
        console.log( 'ProdCategoryDetailComponent: ngAfterViewInit' );
        this.nav = this._elementRef.nativeElement.querySelector('#nav');
    }
    ...
}

作为备注，这是一个具有最新下载的Angular CLI应用程序。在Karma中，我看不到控制台日志，因此从未设置 nav 。我目前在我的规范中调用它如下：

As a note, this is an Angular CLI app with the latest downloads. In Karma, I do not see the console log, therefore nav is never set. I am currently invoking it in my spec as follows:

beforeEach(() => {
  fixture = TestBed.createComponent(ProdCategoryDetailComponent);
  sut = fixture.componentInstance;
  sut.ngAfterViewInit( );
  fixture.detectChanges( );
});

这是处理此问题的正确方法吗？

<对于舒森而言，这是从前一段时间开始的，我有一段时间没有看过这个问题。希望它会有所帮助。注意，我使用的是Primeface primeng库：

Is this proper way of handling this?

For shusson this is from some time ago and I have not looked at this for some time. Hope it will help. Note, I am using Primeface primeng library:

describe('ProdCategoryDetailComponent', () => {
  let sut: ProdCategoryDetailComponent;
  let fixture: ComponentFixture< ProdCategoryDetailComponent >;
  let alertService: AlertsService;
  let prodCatService: ProdCategoryServiceMock;
  let confirmService: ConfirmationServiceMock;
  let elementRef: MockElementRef;
  //
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        FormsModule,
        ButtonModule,
        BrowserAnimationsModule
      ],
      declarations: [
        ProdCategoryDetailComponent,
        AlertsComponent,
        ConfirmDialog
      ],
      providers: [
        AlertsService,
        { provide: ProdCategoryService, useClass: ProdCategoryServiceMock },
        { provide: MockBackend, useClass: MockBackend },
        { provide: BaseRequestOptions, useClass: BaseRequestOptions },
        { provide: ConfirmationService, useClass: ConfirmationServiceMock },
        { provide: ElementRef, useClass: MockElementRef }
      ]
    })
    .compileComponents();
  }));
  //
  beforeEach(inject([AlertsService, ProdCategoryService,
      ConfirmationService, ElementRef],
        (srvc: AlertsService, pcsm: ProdCategoryServiceMock,
        cs: ConfirmationServiceMock, er: MockElementRef) => {
    alertService = srvc;
    prodCatService = pcsm;
    confirmService = cs;
    elementRef = er;
  }));
  //
  beforeEach(() => {
    fixture = TestBed.createComponent(ProdCategoryDetailComponent);
    sut = fixture.componentInstance;
    sut.ngAfterViewInit( );
    fixture.detectChanges( );
  });
  //

推荐答案

我经常直接打电话给生命周期在必要时从每个规范中挂钩。这很有效。
因为这可以在调用 ngAfterViewInit（）或 ngOnInit（）之前灵活地操作任何数据。

I often directly call the life cycle hooks from each spec whenever necessary. And this works. Because this gives the flexibility to manipulate any data before calling ngAfterViewInit() or ngOnInit().

我也看到过几个角度库测试规范以相同的方式使用它。例如，请查看此视频 spec文件。因此手动调用这些方法没有任何害处。

I have also seen few angular libraries test spec using it in the same way. For eg, check this videogular spec file. So there is no harm in calling those methods manually.

此处也复制相同的代码，以避免将来破坏链接。

Also copying the same code here, just to avoid the link to be broken in future.

it('Should hide controls after view init', () => {
        spyOn(controls, 'hide').and.callFake(() => {});

        controls.vgAutohide = true;

        controls.ngAfterViewInit();

        expect(controls.hide).toHaveBeenCalled();
});

这篇关于在Jasmine测试中AfterViewInit的生命周期钩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！