为使用mat-autocomplete的组件编写单元测试
我是Angular的新手，我正在尝试使用Angular 5构建一个具有自动完成功能的文本域。
我在Angular Material docs中找到了这个示例：
https://stackblitz.com/angular/kopqvokeddbq?file=app%2Fautocomplete-overview-example.ts
我想知道如何编写单元测试来测试自动完成功能。我为input元素设置了一个值，并触发了一个'input‘事件，并尝试选择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()，这与使用angular材质的mat输入有关。是否需要执行某些操作才能触发打开mat-options窗格？
我如何让这个测试工作？
回答 2
Stack Overflow用户
发布于 2018-05-29 09:05:08
您需要添加更多事件。我或多或少遇到了和你一样的问题，只有当我触发了focusin事件时，它才能工作。
我在代码中使用了这些事件。不确定是否全部都需要。
inputElement.dispatchEvent(new Event('focus'));
inputElement.dispatchEvent(new Event('focusin'));
inputElement.dispatchEvent(new Event('input'));
inputElement.dispatchEvent(new Event('keydown'));您需要将此代码添加到sendInput函数中...
Stack Overflow用户
发布于 2019-09-09 20:43:36
我在@David answer的基础上做进一步的工作。
提供正在测试的组件具有@Output() selectedTimezone = new EventEmitter<string>();，并且在组件模板<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selectTimezone($event.option.value)">中，捕获具有正确值的适当类型的事件的单元测试如下
it('should emit selectedTimezone event on optionSelected', async() => {
// Note: 'selectedTimezone' is @Output event type as specified in component's signature
spyOn(component.selectedTimezone, 'emit');
const inputElement = fixture.debugElement.query(By.css('input'));
inputElement.nativeElement.dispatchEvent(new Event('focusin'));
/**
* Note, mat-options in this case set up to have array of ['Africa/Accra (UTC
* +01:00)', 'Africa/Addis_Ababa (UTC +01:00)', 'Africa/Algiers (UTC +01:00)',
* 'Africa/Asmara (UTC +01:00)']. I am setting it up in 'beforeEach'
*/
inputElement.nativeElement.value = 'Africa';
inputElement.nativeElement.dispatchEvent(new Event('input'));
await fixture.whenStable();
const matOptions = document.querySelectorAll('mat-option');
expect(matOptions.length).toBe(4);
const optionToClick = matOptions[0] as HTMLElement;
optionToClick.click();
// With this expect statement we verify both, proper type of event and value in it being emitted
expect(component.selectedTimezone.emit).toHaveBeenCalledWith('Africa/Accra');
});https://stackoverflow.com/questions/50431894
复制相似问题