Javascript 在 Angular 中使用 Jasmine 使用 *ngIf 指令时，如何对元素是否可见进行单元测试
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51291672/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I unit test if an element is visible when the *ngIf directive is used using Jasmine in Angular
提问by J-man
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 *ngIfdirective.
我有一个 Angular 6 应用程序，正在编写一些单元测试，试图仅根据*ngIf指令的布尔结果来确定元素是否可见。
Markup:
标记：
<div class="header" *ngIf="show">
<div>...</div>
</div>
spec file:
规范文件：
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);
});
I can't seem to get the hiddenattribute from the div. Does angular use another approach to hiding the element from the DOM using the *ngIfdirective? Do I need to get another property from the nativeElement?
我似乎无法hidden从 div 中获取属性。angular 是否使用另一种方法来使用*ngIf指令从 DOM 中隐藏元素？我需要从 获得另一个财产nativeElement吗？
Thanks!
谢谢！
回答by Amit Chigadani
If the element is hidden, then it wont be rendered inside the dom.
如果元素是隐藏的，则它不会在 dom 内呈现。
You can check
你可以检查
expect(fixture.debugElement.query(By.css('.header'))).toBeUndefined();
EDIT: toBeNull()works better in the above case
编辑：toBeNull()在上述情况下效果更好
expect(fixture.debugElement.query(By.css('.header'))).toBeNull();
And also you have a syntax error while fetching the button element. nativeElementis not a function.
并且在获取按钮元素时出现语法错误。nativeElement不是函数。
Change it this way :
以这种方式改变它：
const button = fixture.debugElement.query(By.css('button')).nativeElement;
回答by lealceldeiro
When testing if a component is being shown or not using ngIfI try to get the element (in this case you use, i.e., debugElement.query(By.css('.header')).nativeElement) and if it should be shown I expect it to be truthy, otherwise falsy.
在测试组件是否正在显示或未使用时，ngIf我尝试获取元素（在这种情况下您使用，即 debugElement.query(By.css('.header')).nativeElement），如果应该显示，我希望它是真实的，否则为假。
Something like this:
像这样的东西：
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();
});
Also, bear in mind that sometimes you need to use ComponentFixture#whenStableto detect when the fixture is stable like this:
另外，请记住，有时您需要使用ComponentFixture#whenStable来检测夹具何时稳定，如下所示：
it('should hide contents if show is false', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.whenStable().then(() => {
// same test code here
});
});
See this working testfor a componentwhich resembles this scenario.
See [GitHub repository]
请参阅 [ GitHub 存储库]
回答by Dharma Raju
Writing test case for *ngIfcondition use toBeNullcondition.
为*ngIf条件使用toBeNull条件编写测试用例。
Try with below code, it works for me.
尝试使用以下代码，它对我有用。
expect(fixture.debugElement.query(By.css('.header'))).toBeNull();
回答by Drag13
When using ngIf, angular completely removes the node from markup. So you need to check that this element not exists.
使用 ngIf 时，angular 会从标记中完全删除节点。所以你需要检查这个元素不存在。
ngIf evaluates the expression and then renders the then or else template in its place when expression is truthy or falsy respectively.
ngIf 计算表达式，然后在表达式分别为真或假时在其位置呈现 then 或 else 模板。
To be more precise, it's just not rendered
更准确地说，它只是没有渲染
