title: Angular material table filter testing
body: <p>I'm trying to DOM test filtering of <code>MatTable</code> in Angular Material. I have a component named <code>xxx-table</code>, with an @Input() named <code>filter</code>.</p>
  
  <p>This filter is copied into <code>dataSource.filter</code> using onNgChanges, like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>export class XXXTableComponent implements OnInit, OnChanges {
      @Input()
      loadedDatas: Item[];
  
      @Input()
      filter: string = '';
  
    dataSource: MatTableDataSource&lt;Suppressed&gt;;
  
    @ViewChild(MatSort) sort: MatSort;
  
    ngOnInit(): void {
      this.dataSource = new MatTableDataSource(this.suppressedDevices);
      this.dataSource.sort = this.sort;
    }
  
      ngOnChanges(): void {
          if(this.dataSource) this.dataSource.filter = this.filter;
      }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/prbHd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/prbHd.png" alt="My filtered table"></a>
  It is working fine in the UI, so I'm trying to DOM test it using <code>fixture</code>. 
  It seems like it's not updating the DOM in real time. I tried like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>  it('should filter the dataSource', () =&gt; {
      expect.hasAssertions();
      component.filter = 'New York';
      fixture.detectChanges();
      component.ngOnChanges();
  
      expect(component.dataSource.filter).toBe('New York');
      expect(component.dataSource.filteredData.length).toBe(1);
  
      expect(component.dataSource.filteredData[0].address).toBe(
        '43, Highway Road, 23413'
      );
  
      // Why isn't that passing?
      return fixture.whenStable().then(() =&gt; {
        const rows = fixture.nativeElement.querySelectorAll('tbody tr');
  
        expect(rows.length).toBe(1); // Fails here
        const cell = fixture.nativeElement
          .querySelector('tbody td:nth-child(3)')
              expect(cell.textContent)
          .toBe('43, Highway Road, 23413');
      });
    });
  
  </code></pre>