Unit test a component containing a ngbTypeahead

Question

I have a component that contains a form with 3 input texts. Two inputs are pure text boxes, and one is a text box with the ngbTypeahead diretive of ng-bootstrap. My form is built using FormBuilder (reactive form).

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

My template looks like :

<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"/>

The component contains functions for ngbTypeahead

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

So the this.form.department.value is not a string but a object like this :

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

All work fine.

Now I want to unit test my component and for that I need to set a value for each of the three inputs. For the two pure inputs, no problem :

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

But for the input with the ngbTypeahead directive, I do not know how to set the value (that need to be a Department object and not a string) : I tried that, but it does not work :

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

I believe you are trying to simulate the selection of one of the filtered items for the Typeahead.

The way I would go about this is to still set key string that you are searching for:

departmentHtmlEl.value = 'Foo';

assuming you are searching on name.

then, I would simulate the selection. This you could do by

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

where getWindowLinks is:

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

Also, you will have to use fakeAsync to make this work. Sample test will look something like this:

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

Hope this helps.