Как проверить ионный веб-компонент в Angular - PullRequest
Новая
       6

Как проверить ионный веб-компонент в Angular

0 голосов
/ 14 января 2019

Я сталкиваюсь с проблемой птицы во время написания тестов для одного из моих компонентов, который использует компоненты 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);
});

Проблема возникает в ожидании. Данный класс никогда не устанавливается. Когда я отлаживаю этот тест, я вижу, что во время проверки ожидания класс фактически не был установлен, но через некоторое время он был установлен. Я предполагаю, что это потому, что тест не ждет, пока веб-компонент "ion-badge" будет представлен.

Как мне настроить тест на ожидание, пока все дочерние элементы в шаблоне не будут полностью обработаны?

Я пробовал fixture.whenStable (), который не имеет никакого эффекта. Кроме того, я добавил схему CustomElement (schemas: [CUSTOM_ELEMENTS_SCHEMA]) в свой тест, что тоже не очень полезно.

EDIT:

С этим взломом тест работает, однако, на мой взгляд, это не подходящее решение: 

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