angular 2 with material jasmine component test fails when using md-menu in component template

Question

I get the following error when i run my jasmine component test:

Error: Error in ./AppComponent class AppComponent - inline template:10:2 caused by: Cannot read property 'unsubscribe' of undefined
TypeError: Cannot read property 'unsubscribe' of undefined
    at MdMenu.ngOnDestroy (webpack:///Users/joost/Documents/Angular2Workspace/Miaxello/~/@angular/material/menu/menu-directive.js:44:0 <- src/test.ts:25370:30)
    at _View_AppComponent0.destroyInternal (/DynamicTestModule/AppComponent/component.ngfactory.js:296:29)
    at _View_AppComponent0.AppView.destroyLocal (webpack:///Users/joost/Documents/Angular2Workspace/Miaxello/~/@angular/core/src/linker/view.js:153:0 <- src/test.ts:34349:14)
    at _View_AppComponent0.DebugAppView.destroyLocal (webpack:///Users/joost/Documents/Angular2Workspace/Miaxello/~/@angular/core/src/linker/view.js:314:0 <- src/test.ts:34510:43)
    at _View_AppComponent0.AppView._destroyRecurse (webpack:///Users/joost/Documents/Angular2Workspace/Miaxello/~/@angular/core/src/linker/view.js:141:0 <- src/test.ts:34337:14)
    at _View_AppComponent_Host0.AppView._destroyRecurse (webpack:///Users/joost/Documents/Angular2Workspace/Miaxello/~/@angular/core/src/linker/view.js:139:0 <- src/test.ts:34335:25)
    at _View_AppComponent_Host0.AppView.destroy (webpack:///Users/joost/Documents/Angular2Workspace/Miaxello/~/@angular/core/src/linker/view.js:127:0 <- src/test.ts:34323:14)
    at ComponentRef_.destroy (webpack:///Users/joost/Documents/Angular2Workspace/Miaxello/~/@angular/core/src/linker/component_factory.js:118:51 <- src/test.ts:20668:82)
    at ComponentFixture.destroy (webpack:///Users/joost/Documents/Angular2Workspace/Miaxello/~/@angular/core/bundles/core-testing.umd.js:261:0 <- src/test.ts:4275:35)
    at webpack:///Users/joost/Documents/Angular2Workspace/Miaxello/~/@angular/core/bundles/core-testing.umd.js:719:61 <- src/test.ts:4733:78

When I remove the <md-menu>...</md-menu> element that the jasmine test is successful.

my component template app.component.html:

     <div [class.dark-theme]="isDarkTheme">
      <md-toolbar color="primary">
        <span>
          <md-icon class="icon-20">apps</md-icon>
          Miaxello
        </span>
        <button md-icon-button [md-menu-trigger-for]="menu">
          <md-icon>more_vert</md-icon>
        </button>
      </md-toolbar>
      <md-menu #menu="mdMenu">
        <button md-menu-item>Settings</button>
      </md-menu>

    </div>
    <h1>
      {{title}}
    </h1>

my spec file app.component.spec.ts:

  import { TestBed, async } from '@angular/core/testing';
  import { AppComponent } from './app.component';
  import {MaterialModule} from "@angular/material";

  describe('App: miaxello', () => {
    beforeEach(() => {
      TestBed.configureTestingModule({
        declarations: [
          AppComponent
        ],
        imports: [
          MaterialModule.forRoot()
        ]
      });
    });

    it('should create the app', async(() => {
      let fixture = TestBed.createComponent(AppComponent);
      let app = fixture.debugElement.componentInstance;
      expect(app).toBeTruthy();
    }));
  });

my package.json file:

{
    "name": "miaxello",
    "version": "0.0.0",
    "license": "MIT",
    "angular-cli": {},
    "scripts": {
      "start": "ng serve",
      "lint": "tslint \"src/**/*.ts\"",
      "test": "ng test",
      "pree2e": "webdriver-manager update",
      "e2e": "protractor"
    },
    "private": true,
    "dependencies": {
      "@angular/common": "~2.1.0",
      "@angular/compiler": "~2.1.0",
      "@angular/core": "~2.1.0",
      "@angular/forms": "~2.1.0",
      "@angular/http": "~2.1.0",
      "@angular/platform-browser": "~2.1.0",
      "@angular/platform-browser-dynamic": "~2.1.0",
      "@angular/router": "~3.1.0",
      "@angular/material": "2.0.0-alpha.10",
      "core-js": "^2.4.1",
      "rxjs": "5.0.0-beta.12",
      "ts-helpers": "^1.1.1",
      "zone.js": "^0.6.23"
    },
    "devDependencies": {
      "@types/jasmine": "^2.2.30",
      "@types/node": "^6.0.42",
      "angular-cli": "1.0.0-beta.19-3",
      "codelyzer": "1.0.0-beta.1",
      "jasmine-core": "2.4.1",
      "jasmine-spec-reporter": "2.5.0",
      "karma": "1.2.0",
      "karma-chrome-launcher": "^2.0.0",
      "karma-cli": "^1.0.1",
      "karma-jasmine": "^1.0.2",
      "karma-remap-istanbul": "^0.2.1",
      "protractor": "4.0.9",
      "ts-node": "1.2.1",
      "tslint": "3.13.0",
      "typescript": "~2.0.3",
      "webdriver-manager": "10.2.5"
    }
  }

Thanks in advance for any help.

Regards,

Joost

Answer 1

Please change:

let fixture = TestBed.createComponent(AppComponent);

To be:

let fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();

Worked like a charm for me.