使用mat-autocomplete的组件的编写单元测试 [英] Writing unit test for component which uses mat-autocomplete

问题描述

我是Angular的新手，我正在尝试使用Angular 5建立具有自动完成功能的文本字段.

I am new to Angular, I am trying to build a text field with autocomplete using Angular 5.

我在 Angular Material文档中找到了这个示例:

I found this example in Angular Material docs:

https://stackblitz.com/angular/kopqvokeddbq? file = app％2Fautocomplete-overview-example.ts

我想知道如何编写用于测试自动完成功能的单元测试.我正在为input元素设置一个值并触发一个'input'事件，并尝试选择mat-option元素，但看到没有一个被创建:

I was wondering how to write a unit test for testing the autocomplete functionality. I am setting a value to the input element and triggering an 'input' event and tried selecting the mat-option elements, but see that none of them got created:

我的组件html的相关部分:

Relevant part of my component html:

<form>
  <mat-form-field class="input-with-icon">
    <div>
      <i ngClass="jf jf-search jf-lg md-primary icon"></i>
      <input #nameInput matInput class="input-field-with-icon" placeholder="Type name here"
             type="search" [matAutocomplete]="auto" [formControl]="userFormControl" [value]="inputField">
    </div>
  </mat-form-field>
</form>

<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let option of filteredOptions | async" [value]="option.name"
              (onSelectionChange)="onNameSelect(option)">
    {{ option.name }}
  </mat-option>
</mat-autocomplete>

规范文件:

it('should filter users based on input', fakeAsync(() => {
    const hostElement = fixture.nativeElement;

    sendInput('john').then(() => {
        fixture.detectChanges();
        expect(fixture.nativeElement.querySelectorAll('mat-option').length).toBe(1);

        expect(hostElement.textContent).toContain('John Rambo');
    });
}));
function sendInput(text: string) {
    let inputElement: HTMLInputElement;

    inputElement = fixture.nativeElement.querySelector('input');
    inputElement.focus();
    inputElement.value = text;
    inputElement.dispatchEvent(new Event('input'));
    fixture.detectChanges();
    return fixture.whenStable();
}

组件html:

userFormControl: FormControl = new FormControl();

ngOnInit() {
    this.filteredOptions = this.userFormControl.valueChanges
        .pipe(
            startWith(''),
            map(val => this.filter(val))
        );
}

filter(val: string): User[] {
    if (val.length >= 3) {
        console.log(' in filter');
        return this.users.filter(user =>
            user.name.toLowerCase().includes(val.toLowerCase()));
    }
}

在此之前，我意识到要使FormControl对象设置值，我必须首先执行一个inputElement.focus()，这与使用有角材料的垫输入有关.我需要做些什么来触发打开mat-options窗格吗?

Before this, I realised that for making the FormControl object set the value, I have to do a inputElement.focus() first, this is something to do with using mat input of angular material. Is there something I have to do to trigger opening the mat-options pane?

如何使此测试有效?

推荐答案

您需要添加更多事件.我或多或少遇到了与您相同的问题，并且只有在触发focusin事件时该问题才起作用.

You need to add more events. I had more or less the same problem as you and it only worked when I triggered the focusin event.

我在代码中使用了这些事件.不确定是否全部需要.

I am using these events in my code. Not sure if all are needed.

inputElement.dispatchEvent(new Event('focus'));
inputElement.dispatchEvent(new Event('focusin'));
inputElement.dispatchEvent(new Event('input'));
inputElement.dispatchEvent(new Event('keydown'));

您需要将此添加到sendInput函数中...

You need to add this to your sendInput function...

这篇关于使用mat-autocomplete的组件的编写单元测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！