Angular 6-ユニットテストマット選択

Question

1：mat-selectには、1、2、3、4の4つの値があります。

以下のコードは、選択に適しています。読者の参考になればと思います。

it('check the length of drop down', async () => {

    const trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
    trigger.click();
    fixture.detectChanges();
    await fixture.whenStable().then(() => {
        const inquiryOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
        expect(inquiryOptions.length).toEqual(4);
    });
});

2：同じマット選択のデフォルト値が3かどうかを確認する別のテストが必要です。ページが読み込まれると、ドロップダウンのデフォルト値は3に設定されます。

it('should validate the drop down value if it is set by default', async () => {

    const trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
    trigger.click();
    fixture.detectChanges();
    await fixture.whenStable().then(() => {
        const inquiryOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
        const value = trigger.options[0].value;
        expect(value).toContain(3);
    });
});

どんな助けでもありがたいです。

Answer 1

テキストでオプションを設定するページオブジェクトのヘルパーメソッド：

public setMatSelectValue(element: HTMLElement, value: string): Promise<void> {
  // click on <mat-select>
  element.click();
  this.fixture.detectChanges();

  // options will be rendered inside OverlayContainer
  const overlay = TestBed.get(OverlayContainer).getContainerElement();

  // find an option by text value and click it
  const matOption = Array.from(overlay.querySelectorAll<HTMLElement>('.mat-option span.mat-option-text'))
    .find(opt => opt.textContent.includes(value));
  matOption.click();

  this.fixture.detectChanges();
  return this.fixture.whenStable();
}