ユニットテストngbTypeaheadを含むコンポーネント

Question

3つの入力テキストを持つフォームを含むコンポーネントがあります。 2つの入力は純粋なテキストボックスで、1つはngbTypeaheadのng-bootstrapディレクティブを持つテキストボックスです。 私のフォームは、FormBuilder（リアクティブフォーム）を使用して構築されています。

this.form = fb.group({ 
    department: [''], 
    name: ['', Validators.required], 
    location: ['', Validators.required] 
}); 

マイテンプレートは以下のようになります。コンポーネントはngbTypeahead

autocompleteDepartments(text$: Observable<string>): Observable<Department> { 
    .... 
} 
formatDepartment(department: Department) { 
    return department.name; 
} 

するための機能が含まれてい

<input type="text" class="form-control" formControlName="name"/> 
... 
<input type="text" class="form-control" formControlName="location"/> 
... 
<input 
    type="text" 
    class="form-control" 
    formControlName="department" 
    [ngbTypeahead]="autocompleteDepartments" 
    [resultFormatter]="formatDepartment" 
    [inputFormatter]="formatDepartment"/> 

のでthis.form.department.valueは文字列ではなく、このようなオブジェクトではありません：

interface Department { 
    id: number; 
    name: string; 
    foo: boolean; 
    bar: number; 
    ... 
} 

すべて正常に動作します。

ここで私のコンポーネントを単体テストしたいので、3つの入力のそれぞれに値を設定する必要があります。 2つの純粋な入力の場合 、全く問題ありません：

const nameHtmlEl = <HTMLInputElement>fixture.debugElement.query(By.css('[formControlName="name"]')).nativeElement; 
nameHtmlEl.value = "Toto"; 
nameHtmlEl.dispatchEvent(new Event('input')); 

しかしngbTypeaheadディレクティブで入力するために、私は（部門オブジェクトではなく文字列であるために、その必要性を）値を設定する方法がわからない： 私はそれを試してみましたが、それは動作しません：

const departmentHtmlEl = /*<HTMLInputElement>*/ fixture.debugElement.query(By.css('[formControlName="department"]')).nativeElement; 
departmentHtmlEl.value = <Department>{id: 10, name: "Foo", ...}; 
departmentHtmlEl.dispatchEvent(new Event('input')); 

Answer 1

私はあなたが先行入力のためのフィルタリング項目の1つの選択をシミュレートしようとしていると信じています。

departmentHtmlEl.value = 'Foo'; 

名前で検索していると仮定すると：私はこれについて行くだろう

方法はまだキー、あなたが探している文字列を設定することです。

次に、選択をシミュレートします。これは、あなたが

getWindowLinks(fixture.debugElement)[0].triggerEventHandler('click', {}); 

getWindowLinksによって行うことができますすることである。また、

function getWindowLinks(element: DebugElement): DebugElement[] { 
    return Array.from(element.queryAll(By.css('button.dropdown-item'))); 
} 

、あなたがこの作品を作るためにfakeAsyncを使用する必要があります。サンプルテストは次のようになります。

it('sample test', fakeAsync(() => { 
    const departmentHtmlEl = /*<HTMLInputElement>*/ fixture.debugElement.query(By.css('[formControlName="department"]')).nativeElement; 
    departmentHtmlEl.value = 'Foo'; 
    fixture.detectChanges(); 

    tick(300); 
    // this should be more than the number on debounceTime you are using for the search 

    getWindowLinks(fixture.debugElement)[0].triggerEventHandler('click', {}); 
    fixture.detectChanges(); 

    tick(300); 

    // your expectation code here. 
    }));