当在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);
});

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

谢谢!

Answer 1

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

你可以检查一下

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

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

这样改变:

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

Answer 2

将 'show' 的值更改为 true 后，需要添加fixture.detectChanges()

component.show = true;
fixture.detectChanges()

Answer 3

在测试是否显示某个组件时，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
    });
  });

看到这个工作测试的组件，其类似于这种情况。

见[ GitHub存储库 ]