Question

我在为使用ionic4-组件的组件编写测试时遇到了麻烦的问题。

我有一个非常简单的组件，像这样：

export class SelectedBadgetComponent implements OnInit, OnChanges {

  @Input() public all: number = 0;
  @Input() public selected: number = 0;

  public color: string = "light"

  constructor() {

  }

  update() {
    if(this.selected > 0) {
      this.color = 'secondary'
      return
    }
    this.color = 'light'
    return;
  }

  ngOnInit(){
    this.update();
  }

  ngOnChanges(){
    this.update();
  }
}

模板：

<div>
    <ion-badge [color]="color" item-end>
      {{ selected }} / {{ all }}
    </ion-badge>
</div>

此组件用于显示选定项目的标志。像这样[2/10]（选择了十个项目中的两个）。如果选定的计数大于1，它也会更改类。

我对该组件的测试在ionic3中效果很好

beforeEach(() => {
  fixture = TestBed.createComponent(SelectedBadgetComponent);

  component = fixture.componentInstance;

  component.all = 5
  component.selected = 1

  fixture.detectChanges();
});

it('should have the class "ion-color-secondary"', () => {
  const badge = fixture.nativeElement.querySelector('ion-badge');
  expect(badge.classList.contains('ion-color-secondary')).toBe(true);
});

该问题按预期发生。从未设置给定的类。当我调试该测试时，我可以看到，在检查期望值时，实际上并未设置该类，但是稍后设置了该类。我想这是因为测试不会等到呈现Web组件“ ion-badge”。

如何设置测试以等待模板中的所有子级完全呈现？

我尝试了不起作用的Fixture.whenStable（）。另外，我在测试中添加了CustomElement架构（schemas: [CUSTOM_ELEMENTS_SCHEMA]），这也不是很有帮助。

编辑：

有了这个hack，测试就可以了-但是，我认为这不是一个合适的解决方案：

it('should have the class "ion-color-secondary"', async(() => {
  setTimeout(x => {
    const badge = fixture.nativeElement.querySelector('ion-badge');
    expect(badge.classList.contains('ion-color-secondary')).toBe(true);
  }, 2000)
}));

如何在Angular中测试离子Web组件

0 个答案: