在 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 时，angular 从标记中完全删除节点。所以你需要检查这个元素不存在。

Documentation says:

ngIf evaluates the expression and then renders the then or else template in its place when expression is truthy or falsy respectively.

更准确地说，它只是没有渲染

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

看到这个working test for a component which resembles this scenario。

见[GitHub repository]

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 指令时如何对元素是否可见进行单元测试

How do I unit test if an element is visible when the *ngIf directive is used using Jasmine in Angular

javascript

angular

jasmine

karma-jasmine

angular-test