代码之家 › 专栏 › 技术社区 › user944513

如何使用*ng if隐藏角度4中的元素?

angular

0

user944513 · 技术社区 · 8 年前

我想测试一下 @Input 角度2。 @输入 隐藏或显示我的 p 我想用茉莉花测试这个功能。

这是我的组件

import { Component,Input } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 4';
  @Input() enable:boolean
  constructor() { }
}

测试代码。

describe('@Input property ', () => {
    it('will not show p tag', () => {
      component.enable = false;
      fixture.detectChanges();
      PEl = fixture.debugElement.query(By.css('p'));
      console.log(PEl.nativeElement);
      expect(PEl.nativeElement.length).toEqual(0);
    })
  })

https://stackblitz.com/edit/angular-testing-wzxrin?file=app%2Fapp.component.spec.ts

2 回复 | 直到 8 年前

1

Maryannah 8 年前

测试它是否为空,而不是是否有长度。

component.enable = false;
fixture.detectChanges();
PEl = fixture.debugElement.query(By.css('p'));
console.log(PEl.nativeElement);
expect(PEl).toBeUndefined();

2

0

Padmapriya Vishnuvardhan 8 年前

测试空值而不是长度

component.enable = false;
fixture.detectChanges();
PEl = fixture.debugElement.query(By.css('p'));
expect(PEl).tobeNull();