为使用mat-autocomplete的组件编写单元测试?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (146)

我正尝试使用Angular 5构建一个带有自动完成功能的文本字段。

我找到了这个例子:

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

我想知道如何编写一个单元测试来测试自动完成功能。我正在为输入元素设置一个值,并触发一个“输入”事件,并尝试选择mat-option元素,但看到它们中没有一个被创建:

我的组件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输入有关。是否有必要做些什么来触发打开mat-options窗格?

我如何使这个测试工作?

提问于
用户回答回答于

你需要添加更多活动。我的问题和你一样或多或少,只有在我触发focusin事件时才起作用。

我在我的代码中使用。不确定是否全部需要。

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

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

扫码关注云+社区

领取腾讯云代金券