title: Writing unit test for mat-autocomplete that filters customers
body: <p>I am writing unit test for angular app, precisely angular6. I have mat-autocomplete in the code, all I want to test is the user filtered based on the input I type in the input box. I was inspired by the post <a href="https://stackoverflow.com/questions/50431894/writing-unit-test-for-component-which-uses-mat-autocomplete">enter link description here</a>.</p>
  
  <p>Here is the code snippet of spec file </p>
  
  <pre><code>  it('should filter customer',async () =&gt; {
      fixture.detectChanges();
      let toggleButton = fixture.debugElement.query(By.css('input'));
      console.log(toggleButton.nativeElement);
  
      toggleButton.nativeElement.dispatchEvent(new Event('focusin'));
      toggleButton.nativeElement.value = "xyz";
      toggleButton.nativeElement.dispatchEvent(new Event('input'));
      fixture.detectChanges();
      await fixture.whenStable();
      fixture.detectChanges();
  
      const matOptions = document.querySelectorAll('mat-option');
      expect(matOptions.length).toBe(1); //test fails
  
    })
  
  </code></pre>
  
  <pre><code>
    &lt;mat-form-field &gt;
       &lt;input id="inputCustomer" matInput [matAutocomplete]="auto"  [formControl]="customerFilterControl"&gt;
       &lt;mat-autocomplete panelWidth ="450px" #auto="matAutocomplete" [displayWith] = "displayFn" style="width:750px;"&gt;
           &lt;mat-option  *ngFor="let customer of filteredOptions | async" [value] ="customer.AccountID + '('+ customer.AccountName + ')'" (onSelectionChange)="onCustomerChange(customer)"&gt;
           {{customer.AccountID}} ({{customer.AccountName}})
          &lt;/mat-option&gt;
       &lt;/mat-autocomplete&gt;
    &lt;/mat-form-field&gt;
  
  </code></pre>
  
  <pre><code>**typescript.ts**
      this.filteredOptions = this.customerFilterControl.valueChanges.pipe(
        startWith(''),
        map(value =&gt; this._filter(value))
      );  
  
  
    _filter(value:any):any[] {
      const filterValue = value.toLowerCase();
      return this.customers.filter(function (option) {
        if(option.AccountID.includes(filterValue) || option.AccountName.includes(filterValue)) {
          return option;
         }
      });
    }
  
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/VQ4r9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VQ4r9.png" alt="enter image description here"></a></p>