Writing unit test for component which uses mat-autocomplete : <p>I am new to Angular, I am trying to build a text field with autocomplete using Angular 5. </p>

<p>I found this example in <a href="https://material.angular.io/components/autocomplete/examples" rel="noreferrer">Angular Material docs</a>: </p>

<p><a href="https://stackblitz.com/angular/kopqvokeddbq?file=app%2Fautocomplete-overview-example.ts" rel="noreferrer">https://stackblitz.com/angular/kopqvokeddbq?file=app%2Fautocomplete-overview-example.ts</a></p>

<p>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:</p>

<p>Relevant part of my component html:</p>

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

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

<p>Spec file:</p>

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

    sendInput('john').then(() =&gt; {
        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();
}
</code></pre>

<p>Component html:</p>

<pre><code>userFormControl: FormControl = new FormControl();

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

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

<p>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?</p>

<p>How do I make this test work?</p>
