title: How to write unit test for Angular Material Chips?
body: <p>I am using the chips with input <a href="https://material.angular.io/components/chips/overview#chip-input" rel="nofollow noreferrer">here</a></p>
  
  <p>How to write unit test for add and remove functions?</p>
  
  <p>In case of remove we can mock using a array and string, but how to test the remove function.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;mat-form-field class="example-chip-list"&gt;
    &lt;mat-chip-list #chipList aria-label="Fruit selection"&gt;
      &lt;mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
               [removable]="removable" (removed)="remove(fruit)"&gt;
        {{fruit.name}}
        &lt;mat-icon matChipRemove *ngIf="removable"&gt;cancel&lt;/mat-icon&gt;
      &lt;/mat-chip&gt;
      &lt;input placeholder="New fruit..."
             [matChipInputFor]="chipList"
             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
             [matChipInputAddOnBlur]="addOnBlur"
             (matChipInputTokenEnd)="add($event)"&gt;
    &lt;/mat-chip-list&gt;
  &lt;/mat-form-field&gt;
  
  </code></pre>
  
  <p>TS</p>
  
  <pre><code>  add(event: MatChipInputEvent): void {
      const input = event.input;
      const value = event.value;
  
      // Add our fruit
      if ((value || '').trim()) {
        this.fruits.push({name: value.trim()});
      }
  
      // Reset the input value
      if (input) {
        input.value = '';
      }
    }
  
    remove(fruit: Fruit): void {
      const index = this.fruits.indexOf(fruit);
  
      if (index &gt;= 0) {
        this.fruits.splice(index, 1);
      }
    }
  
  </code></pre>
  
  <p><a href="https://stackblitz.com/angular/endvyklbknj?file=src%2Fapp%2Fchips-input-example.ts" rel="nofollow noreferrer">Link to stackblitz</a></p>