Угловой крепеж debugElement NULL

Question

Во время выполнения debugElement.query я получаю Cannot read property 'nativeElement' of null.

Мой HTML-код:

    <mat-form-field appearance="standard" id="my-searchBox">
      <input matInput [formControl]="filterBox"              
            id="filterBox-input">
    </mat-form-field>

    <div class="mat-table-elevated-wrapper mat-elevation-z4">
        <table mat-table [dataSource]="dataSource">
            <ng-container matColumnDef="name">
                <th class="table-header" mat-header-cell *matHeaderCellDef>
                  <mat-form-field appearance="standard">
                    <input matInput [formControl]="nameFilter" id="name-input">
                  </mat-form-field>
                </th>
                <td mat-cell *matCellDef="let elem">
                  elem.name
                </td>
            </ng-container>
        </table>
    </div>

И я добавляю следующий код в модульном тесте:

  beforeEach(() => {
    fixture = TestBed.createComponent(CallLogComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();

    let myList = [];
    let entry = getDummyEntry();
    myList.push(entry);
    component.dataSource = new MatTableDataSource(myList);
    component.dataSource.data = myList;
    fixture.detectChanges();
  });

  it('verify filter changes', () => {

    let filterBoxInput = fixture.debugElement.query(By.css('#filterBox-input'));
    filterBoxInput.nativeElement.value = 'dummy';
    filterBoxInput.nativeElement.dispatchEvent(new Event('input'));
    fixture.detectChanges();
    expect(component.boxValue).toBe('dummy');

    // works till here, issue causes on below line

    let nameInput = fixture.debugElement.query(By.css('#name-input')); --> null
    nameInput.nativeElement.value = 'dummyName';
    nameInput.nativeElement.dispatchEvent(new Event('input'));
    fixture.detectChanges();
    expect(component.name).toBe('dummyName');
  });

Затем я получаю ошибку для nameInput:

TypeError: Невозможно прочитать свойство 'nativeElement' с нулевым значением

Я также добавляю некоторые фиктивные данныек матовой таблице источника данных. По-прежнему возникает проблема для nameInput.

Что может быть причиной проблемы?