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();

在获取按钮元素时，还会出现语法错误。 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 ]

Answer 3

使用ngIf时，角度将节点从标记中完全删除。因此，您需要检查该元素是否不存在。

Documentation says:

ngIf对表达式进行求值，然后在表达式分别为真或假时分别渲染then或else模板。

更准确地说，它只是不呈现

Answer 4

使用*ngIf条件编写toBeNull条件的测试用例。

尝试以下代码，它对我有用。

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

Answer 5

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

component.show = true;
fixture.detectChanges()

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

5 个答案: