Property binding matHeaderRowDef not used by any directive on an embedded template

Question

Here is the table html:

<mat-table matSort class="inbox__messages" #table [dataSource]="dataSource">

<!-- Building Column -->
<ng-container matColumnDef="building">
  <mat-header-cell *matHeaderCellDef>
  <div class="inbox__messages__header">
    <h3 class="inbox__messages__header-label">Bâtiments</h3>
    <mat-form-field class="inbox__messages__dropdown">
      <mat-select placeholder="Choisir un bâtiment">
        <mat-option *ngFor="let building of buildings" [value]="building.value">
          {{ building.viewValue }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  </mat-header-cell>
  <mat-cell *matCellDef="let element">
  <span class="inbox__messages__body-building">{{element.building}}</span>
</mat-cell>
</ng-container>

 <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" matRipple class="element-row" [class.expanded]="expandedElement == row"
(click)="expandedElement = row"></mat-row>

This error happens on ng test. What am I missing? I have imported MatHeaderRowDef into my component aswell as into the module.

Answer 1

We have had exactly the same issue concerning the property matHeaderRowDef and also matRowDefColumns. We solved it by simply importing the material table module, i.e. MatTableModule, in the unit test spec file.

Specifically, we imported it in the initial declarations and then within the beforeEach block.

To better clarify, here is the my-awesome.component.spec.ts file:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MyAwesomeComponent } from './my-awesome.component';
import { MatTableModule } from '@angular/material';

describe('MyAwesomeComponent', () => {
  let component: MyAwesomeComponent;
  let fixture: ComponentFixture<MyAwesomeComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ MyAwesomeComponent ],
      imports: [ MatTableModule ]
    })
    .compileComponents();
  }));

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

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Hope this helps :)

Answer 2

Importing MatTableModule makes the error stop but if you're not testing any of the MatTableModule functionality, you can address this error with the right mock.

@Directive({
  selector: '[matHeaderRowDef]',
  inputs: ['columns: matHeaderRowDef']
})
export class MatHeaderRowDef { }

And then just throw MatHeaderRowDef in your TestBed declarations. The important part is the inputs property.