当在Angular中使用Jasmine使用* ngIf指令时，如何单元测试元素是否可见

Question

我有一个Angular 6应用程序并编写一些单元测试，试图确定一个元素是否可见，仅仅基于*ngIf指令的布尔结果。

标记：

<div class="header" *ngIf="show">
    <div>...</div>
</div>

规范文件：

it('should hide contents if show is false', () => {
    const button = debugElement.query(By.css('button')).nativeElement;
    button.click();   // this will change show to false
    fixture.detectChanges();
    expect(debugElement.query(By.css('.header')).nativeElement.style.hidden).toBe(true);
});

我似乎无法从div获得hidden属性。 angular是否使用另一种方法使用*ngIf指令从DOM中隐藏元素？我需要从nativeElement获得另一处房产吗？

谢谢！

Answer 1

如果元素被隐藏，那么它将不会在dom中呈现。

你可以检查一下

expect(fixture.debugElement.query(By.css('.header'))).toBeUndefined();

编辑：toBeNull()在上述情况下效果更好

expect(fixture.debugElement.query(By.css('.header'))).toBeNull();

并且在获取按钮元素时也会出现语法错误。 nativeElement不是一个功能。

这样改变：

const button = fixture.debugElement.query(By.css('button')).nativeElement;

Answer 2

当测试是否使用ngIf显示组件时，我尝试获取元素（在这种情况下，你使用，即debugElement.query(By.css('.header')).nativeElement），如果它应该显示我希望它是真实的，否则是假的。

像这样的东西：

it('should hide contents if show is false', () => {
    // should be rendered initially
    expect(debugElement.query(By.css('.header')).nativeElement).toBeTruthy();
    //trigger change
    const button = debugElement.query(By.css('button')).nativeElement;
    button.click();   // this will change show to false
    fixture.detectChanges();
    // should not be rendered
    expect(debugElement.query(By.css('.header')).nativeElement).toBeFalsy();
});

另外，请记住，有时您需要使用ComponentFixture#whenStable来检测灯具何时稳定，如下所示：

  it('should hide contents if show is false', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.whenStable().then(() => {
      // same test code here
    });
  });

看到这个working test的component resembles this scenario。

见[GitHub repository]