Angular 6 - 单元测试 Mat-Select

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

这个在 Angular 7 中对我有用

    const debugElement = fixture.debugElement;
    // open options dialog
    const matSelect = debugElement.query(By.css('.mat-select-trigger')).nativeElement;
    matSelect.click();
    fixture.detectChanges();
    // select the first option (use queryAll if you want to chose an option)
    const matOption = debugElement.query(By.css('.mat-option')).nativeElement;
    matOption.click();
    fixture.detectChanges();
    fixture.whenStable().then( () => {
       const inputElement: HTMLElement = debugElement.query(By.css('.ask-input')).nativeElement;
       expect(inputElement.innerHTML.length).toBeGreaterThan(0);
    });

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

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');