在 Angular 中使用 Jasmine 使用 *ngIf 指令时,如何对元素是否可见进行单元测试

时间:2023-02-15
本文介绍了在 Angular 中使用 Jasmine 使用 *ngIf 指令时,如何对元素是否可见进行单元测试的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我有一个 Angular 6 应用程序并编写了一些单元测试,试图仅根据 *ngIf 指令的布尔结果来确定元素是否可见.

I have an Angular 6 app and writing some unit tests trying to determine if an element is visible or not based solely on the boolean result of an *ngIf directive.

标记:

<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 获取另一个属性吗?

I can't seem to get the hidden attribute from the div. Does angular use another approach to hiding the element from the DOM using the *ngIf directive? Do I need to get another property from the nativeElement?

谢谢!

推荐答案

如果元素被隐藏,则不会在dom中渲染.

If the element is hidden, then it wont be rendered inside the dom.

你可以检查

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

EDIT : toBeNull() 在上述情况下效果更好

EDIT : toBeNull() works better in the above case

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

您在获取按钮元素时也遇到了语法错误.nativeElement 不是函数.

And also you have a syntax error while fetching the button element. nativeElement is not a function.

这样改:

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

这篇关于在 Angular 中使用 Jasmine 使用 *ngIf 指令时,如何对元素是否可见进行单元测试的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

上一篇:Angularjs 承诺不会在单元测试中解决 下一篇:我们如何在 Jasmine 中以编程方式清除间谍?

相关文章

最新文章