title: Angular Testing for Angular-Material on Mat-Menu
body: <p>I'm trying to write a test for my <code>mat-menu</code> in my application's toolbar. When I call <code>button.click()</code> in my test, I get a <code>Cannot read property 'templateRef' of undefined</code> error in the console.</p>
  
  <p>As all works find in the browser, I believe this is to do with how I am running the test? </p>
  
  <p><code>app.component.spec.ts</code></p>
  
  <pre class="lang-js prettyprint-override"><code>import { TestBed, async, ComponentFixture } from '@angular/core/testing';
  import { AppComponent } from './app.component';
  import { RouterTestingModule } from '@angular/router/testing';
  
  import { AppRoutes } from './app.routes';
  import {
    MatToolbarModule,
    MatIconModule,
    MatMenuModule,
    MatButtonModule
  } from '@angular/material';
  
  import { HomeComponent } from './home/home.component';
  import { UserService } from './user/user.service';
  
  class MockUserService {
    signIn() {}
  }
  
  describe('AppComponent', () =&gt; {
    let app: AppComponent;
    let fixture: ComponentFixture&lt;AppComponent&gt;;
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [AppComponent, HomeComponent],
        providers: [{ provide: UserService, useClass: MockUserService }],
        imports: [
          MatIconModule,
          MatToolbarModule,
          MatMenuModule,
          MatButtonModule,
          RouterTestingModule.withRoutes(AppRoutes)
        ]
      }).compileComponents();
    }));
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(AppComponent);
      app = fixture.debugElement.componentInstance;
    });
    it('should create the app', async(() =&gt; {
      expect(app).toBeTruthy();
    }));
    it('open the menu when clicking on the account button', async () =&gt; {
      const dom = fixture.debugElement.nativeElement;
      const button = dom.querySelector('#userMenu');
      button.click();  //Error occurs on this line, before the console.log()
      console.log(button);
      fixture.detectChanges();
    });
  });
  </code></pre>
  
  <p><code>app.component.html</code></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-menu #menu="matMenu" [overlapTrigger]="false" yPosition="below"&gt; //appears to not be able to find this element?
    &lt;button mat-menu-item&gt;
      &lt;span&gt;Settings&lt;/span&gt;
    &lt;/button&gt;
    &lt;button id="userSignIn" (click)="user.signIn()" mat-menu-item&gt;
      &lt;span&gt;Log In&lt;/span&gt;
    &lt;/button&gt;
  &lt;/mat-menu&gt;
  &lt;mat-toolbar color="primary"&gt;
    &lt;span&gt;Report Receiver&lt;/span&gt;
    &lt;span class="fill-remaining-space"&gt;&lt;/span&gt;
    &lt;button *ngIf="user.signedIn$ | async" routerLink="/emails/mapping" mat-icon-button&gt;
      &lt;mat-icon&gt;check_box&lt;/mat-icon&gt;
    &lt;/button&gt;
    &lt;button *ngIf="user.signedIn$ | async" routerLink="/emails/received" mat-icon-button&gt;
      &lt;mat-icon&gt;list&lt;/mat-icon&gt;
    &lt;/button&gt;
    &lt;button routerLink="/home" mat-icon-button&gt;
      &lt;mat-icon&gt;home&lt;/mat-icon&gt;
    &lt;/button&gt;
    &lt;button id="userMenu" [matMenuTriggerFor]="menu" mat-icon-button&gt;
      &lt;mat-icon&gt;account_circle&lt;/mat-icon&gt;
    &lt;/button&gt;
  &lt;/mat-toolbar&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>