Template Updates do not happen in test

I am working through testing Angular code and seem to have some misunderstanding about template updates. What I am trying to get to work: I implemented a component which is a simply searchInput that can be cleared by a button click. [Template below] This works fine in practise, but I want to write a test for it.

<mat-form-field>
  <mat-icon matPrefix>search</mat-icon>
  <input #searchInput matInput (input)="onSearch(searchInput.value)"
         [placeholder]="placeholder">
  <button class="clear-search-button" mat-button *ngIf="searchInput.value" matSuffix mat-icon-button 
          (click)="searchInput.value=''; onSearch('')">
    <mat-icon>close</mat-icon>
  </button>
</mat-form-field>

My test currently looks like this [de = fixture.debugElement]:

it('should reset Input on button input', () => {
    const input = de.query(By.css('input'));
    expect(input).not.toBeNull();
    input.value = 'someSearch';

    fixture.detectChanges(); // Update view since now the input.value allows 
                                the button to get added to DOM, since *ngIf-condition is now true.

    const resetBtn = de.querySelector('button');
    resetBtn.click();

    fixture.detectChanges(); // Update view since now the input.value should be updated.

    expect(input.value).toEqual('');
  });

My problem is, that however I try to get the button, it does not seem to be added to the DOM, since I always get 'TypeError: Cannot read property 'click' of null' on the resetBtn.click() line.

Is there a fundamental problem with my understanding of template testing or is there any silly typo?