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

非常感谢您的帮助。

- Knight

---

这可能不是很有帮助，但当我更改了 mat-select 输入的值时，直到调用 fixture.detectChanges(); await fixture.whenStable(); fixture.detectChanges(); 我才能看到 DOM 的变化 -- 如果删除其中任何一个调用，则会在下一行中看到旧值。 - Coderer

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

- Günay Gültekin

---

你打错字了：detechChanges -> detectChanges - Zozo

我该如何在端到端测试中进行相同的测试？ - Sunil Garg

你可能会得到一个错误的结果，因为在你的whenStable函数中没有调用done()，所以你可以期望('fred').toBe('wilma')，但你的测试仍然会通过。(我知道，因为我试过了。) 否则，这个答案对我也起作用。 - jdawg73

Answer 2

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

- Jayamal Kulathunge

---

直到我添加了 await matSelect[0].open();，const options 才被填充。 - Stephen

在这之前我不知道组件线束。谢谢！https://github.com/angular/components/blob/master/guides/using-component-harnesses.md 上有更多信息，他们鼓励使用它。 - AlignedDev

Answer 3

经过一些测试，我找到了一个答案（至少对于我的代码来说是这样），希望这对您也有所帮助：当应用程序运行时，当我查看 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，如果这有关系的话。

- Nexonus

Answer 4

用于页面对象的辅助方法，可以通过文本设置选项：

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

- Ievgen Martynov

Answer 5

const select = await loader.getAllHarnesses(MatSelectHarness);

//test to check there are how many mat selects
expect(select.length).toBe(1);

//open the mat select
await select[0].open();

//Get the options
const options = await select[0].getOptions();

//test to check option length
expect(options.length).toBe(1);

//test to check mat options
expect(await options[0].getText()).toBe('option 1');

expect(await options[1].getText()).toBe('option 2');

- Mithilesh Shah

---

目前你的回答不够清晰。请编辑并添加更多细节，以帮助其他人理解它如何回答所提出的问题。你可以在帮助中心找到有关如何撰写好答案的更多信息。 - Community