Question

1：Mat-select具有4个值1,2,3,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：我需要再次测试以验证默认值是否相同 mat-select是否为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

您的页面对象的Helper方法可通过文本设置选项：

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

Answer 2

经过一些测试，我找到了答案（至少对于我的代码而言），并希望这对您也有帮助：

当我查看DOM时，当应用程序运行时，我注意到mat-select的默认值在此DOM结构内部：

<mat-select>
    <div class="mat-select-trigger">
        <div class="mat-select-value">
            <span class="something">
                <span class="something">
                The value is here!

但就我而言，我的.ts文件中有一个表单生成器，并且在ngOnInit()中使用了它。看来普通的TestBed.createComponent(MyComponent)不会调用ngOnInit()。因此，我必须这样做才能获得价值。否则，只有一个占位符span。

所以，我的最终代码如下：

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

    const matSelectValueObject: HTMLElement = fixture.debugElement.query(By.css('.mat-select-value')).nativeElement;
    component.ngOnInit();
    fixture.detectChanges();

    const innerSpan = matSelectValueObject.children[0].children[0]; // for getting the inner span

    expect(innerSpan.innerHTML).toEqual(3); // or '3', I did not test that
});

以这种方式使用Angular 7，以防万一。

Answer 3

这个在Angular 7中为我工作

const debugElement = fixture.debugElement;
const matSelect = debugElement.query(By.css('.mat-select-trigger')).nativeElement;
matSelect.click();
fixture.detechChanges();
const matOption = debugElement.query(By.css('.mat-option'))[0].nativeElement;
matOption.click();
fixture.detechChanges();
fixture.whenStable().then( () => {
   const inputElement: HTMLElement = debugElement.query(By.css('.ask-input')).nativeElement;
   expect(inputElement.innerHTML.length).toBeGreaterThan(0);
});

Answer 4

let loader = TestbedHarnessEnvironment.loader(fixture);

const matSelect = await loader.getAllHarnesses(MatSelectHarness);
await matSelect[0].clickOptions();
const options = await matSelect[0].getOptions();
expect(await options[0].getText()).toMatch("");
expect(await options[1].getText()).toMatch('option1');
expect(await options[2].getText()).toMatch('option2');

Angular 6-单元测试垫选择

4 个答案: