Javascript 当使用*ngIf指令使用Jasmine时，如何对元素进行单元测试

我有一个Angular 6应用程序，正在编写一些单元测试，试图根据

*ngIf

指令的布尔结果确定元素是否可见

标记：

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

我似乎无法从div中获取

hidden

属性。angular是否使用另一种方法使用

*ngIf

指令从DOM中隐藏元素？是否需要从

nativeElement

获取另一个属性

---

谢谢

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

你可以查一下

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

EDIT：

toBeNull（）

在上述情况下效果更好

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

此外，在获取button元素时还出现语法错误<代码>nativeElement不是一个函数

更改为：

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

---

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

ngIf对表达式求值，然后在表达式分别为truthy或falsy时在其所在位置呈现then或else模板

---

更准确地说，当测试组件是否正在显示或未使用

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

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

此外，请记住，有时您需要使用来检测夹具是否稳定，如下所示：

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

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

请参见此，以了解其中的详细信息

---

请参见[]

编写测试用例以了解

*ngIf

条件使用

toBeNull

条件

尝试下面的代码，它为我工作

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

---

将“show”的值更改为true后，需要添加fixture.detectChanges（）

component.show = true;
fixture.detectChanges()

---

谢谢我还尝试测试nativeElement是否未定义，并且它一直未能通过测试，说

预期HTMLNode未定义

，因此它似乎在检查节点的值，而不是它是否存在于DOM@J-man check fixture.debugElement.query（By.css（'.header'））.NativeElement最终对我有效的方法是检查节点本身，就像您在回答的第一行中所做的那样。然而，有趣的是，我没有检查

undefined

，而是使用

toBeNull（）

函数检查节点是否为

null

。这似乎对我有用。请小心将

fixture.debugElement.query

与

expect（…）

的调用相结合。这可能会导致浏览器内存不足错误。发生在我身上。我也有同样的问题，这确实是正确的答案。但是，由于某些原因，我们没有默认的更改检测：

ChangeDetectionStrategy.OnPush.

。结果在浏览器中，元素被自动删除，但在单元测试中，我不得不调用'changedtectorref.detectChanges（）“为了让它工作，手动操作这里的代码对我来说似乎是通过的，即使ngIf的计算结果为false……第二个示例测试函数不应该被标记为

async

，因为我们在那里使用的是承诺吗？@Werek-因为我们不是在等待承诺，而是利用

then

，前往回调世界，函数签名不必标记为

async

。