test(material-experimental/mdc-table): add missing test coverage

Adds tests that were missing from the `mdc-table` module.

Author: crisbeto

src/material-experimental/mdc-table/table.spec.ts

@@ -23,6 +23,7 @@ describe('MDC-based MatTable', () => {
         MatTableApp,
         MatTableWithWhenRowApp,
         ArrayDataSourceMatTableApp,
+        NativeHtmlTableApp,
         MatTableWithSortApp,
         MatTableWithPaginatorApp,
         StickyTableApp,
@@ -81,6 +82,21 @@ describe('MDC-based MatTable', () => {
       ]);
     });
 
+    it('should be able to render a table correctly with native elements', () => {
+      let fixture = TestBed.createComponent(NativeHtmlTableApp);
+      fixture.detectChanges();
+
+      const tableElement = fixture.nativeElement.querySelector('table');
+      const data = fixture.componentInstance.dataSource!.data;
+      expectTableToMatchContent(tableElement, [
+        ['Column A', 'Column B', 'Column C'],
+        [data[0].a, data[0].b, data[0].c],
+        [data[1].a, data[1].b, data[1].c],
+        [data[2].a, data[2].b, data[2].c],
+        [data[3].a, data[3].b, data[3].c],
+      ]);
+    });
+
     it('should be able to nest tables', () => {
       const fixture = TestBed.createComponent(NestedTableApp);
       fixture.detectChanges();
@@ -96,6 +112,28 @@ describe('MDC-based MatTable', () => {
       expect(innerRows.map(row => row.cells.length)).toEqual([3, 3, 3, 3]);
     });
 
+    it('should be able to show a message when no data is being displayed in a native table', () => {
+      const fixture = TestBed.createComponent(NativeHtmlTableApp);
+      fixture.detectChanges();
+
+      // Assert that the data is inside the tbody specifically.
+      const tbody = fixture.nativeElement.querySelector('tbody')!;
+      const dataSource = fixture.componentInstance.dataSource!;
+      const initialData = dataSource.data;
+
+      expect(tbody.textContent.trim()).not.toContain('No data');
+
+      dataSource.data = [];
+      fixture.detectChanges();
+
+      expect(tbody.textContent.trim()).toContain('No data');
+
+      dataSource.data = initialData;
+      fixture.detectChanges();
+
+      expect(tbody.textContent.trim()).not.toContain('No data');
+    });
+
     it('should be able to show a message when no data is being displayed', () => {
       const fixture = TestBed.createComponent(MatTableApp);
       fixture.detectChanges();
@@ -601,6 +639,39 @@ class MatTableApp {
   @ViewChild(MatTable) table: MatTable<TestData>;
 }
 
+@Component({
+  template: `
+    <table mat-table [dataSource]="dataSource">
+      <ng-container matColumnDef="column_a">
+        <th mat-header-cell *matHeaderCellDef> Column A</th>
+        <td mat-cell *matCellDef="let row"> {{row.a}}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="column_b">
+        <th mat-header-cell *matHeaderCellDef> Column B</th>
+        <td mat-cell *matCellDef="let row"> {{row.b}}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="column_c">
+        <th mat-header-cell *matHeaderCellDef> Column C</th>
+        <td mat-cell *matCellDef="let row"> {{row.c}}</td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="columnsToRender"></tr>
+      <tr mat-row *matRowDef="let row; columns: columnsToRender"></tr>
+      <tr *matNoDataRow>
+        <td>No data</td>
+      </tr>
+    </table>
+  `
+})
+class NativeHtmlTableApp {
+  dataSource: FakeDataSource | null = new FakeDataSource();
+  columnsToRender = ['column_a', 'column_b', 'column_c'];
+
+  @ViewChild(MatTable) table: MatTable<TestData>;
+}
+
 @Component({
   template: `
     <table mat-table [dataSource]="dataSource">