components: [md-menu][bug] Tests crash in MdMenu.ngOnDestroy

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The test should work

What is the current behavior?

Tests on a component that uses MdMenu crash in MdMenu.ngOnDestroy, with error “Cannot read property ‘unsubscribe’ of undefined”

        TypeError: Cannot read property 'unsubscribe' of undefined
            at MdMenu.ngOnDestroy (webpack:///C:/Users/User/git/training/material2-menu-test/~/@angular/material/menu/menu-directive.js:44:0 <- src/test.ts:41822:30)
            at Wrapper_MdMenu.ngOnDestroy (/MdMenuModule/MdMenu/wrapper.ngfactory.js:14:16)
            at CompiledTemplate.proxyViewClass.View_AppComponent0.destroyInternal (/DynamicTestModule/AppComponent/component.ngfactory.js:265:21)
            at CompiledTemplate.proxyViewClass.AppView.destroy (webpack:///C:/Users/User/git/training/material2-menu-test/~/@angular/core/src/linker/view.js:143:0 <- src/test.ts:55639:14)
            at CompiledTemplate.proxyViewClass.DebugAppView.destroy (webpack:///C:/Users/User/git/training/material2-menu-test/~/@angular/core/src/linker/view.js:368:0 <- src/test.ts:55864:38)
            at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.destroyInternal (/DynamicTestModule/AppComponent/host.ngfactory.js:33:19)
            at CompiledTemplate.proxyViewClass.AppView.destroy (webpack:///C:/Users/User/git/training/material2-menu-test/~/@angular/core/src/linker/view.js:143:0 <- src/test.ts:55639:14)
            at CompiledTemplate.proxyViewClass.DebugAppView.destroy (webpack:///C:/Users/User/git/training/material2-menu-test/~/@angular/core/src/linker/view.js:368:0 <- src/test.ts:55864:38)
            at CompiledTemplate.proxyViewClass.AppView.detachAndDestroy (webpack:///C:/Users/User/git/training/material2-menu-test/~/@angular/core/src/linker/view.js:130:0 <- src/test.ts:55626:14)
            at ComponentRef_.destroy (webpack:///C:/Users/User/git/training/material2-menu-test/~/@angular/core/src/linker/component_factory.js:121:51 <- src/test.ts:25170:70)

What are the steps to reproduce?

From this github repo: https://github.com/pchiquet/material2-menu-test

git clone https://github.com/pchiquet/material2-menu-test
npm install
ng test

or manually:

ng new test-project
Setup Material2
Add a md-menu in src/app/app.component.html
launch test: ng test

What is the use-case or motivation for changing an existing behavior?

Testing apps with md-menu

Which versions of Angular, Material, OS, browsers are affected?

angular-cli 1.0.0-beta.20 (angular 2.1)
angular/material 2.0.0-alpha.10

Is there anything else we should know?

github repo to reproduce the issue : https://github.com/pchiquet/material2-menu-test

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 9
Comments: 20 (3 by maintainers)

Commits related to this issue

upgrade angular2 and some dependencies. Also added test workaround, see https://github.com/angular/material2/issues/1913 for more information — committed to NextCenturyCorporation/neon-gtd by kdrumm 7 years ago

Most upvoted comments

Found another workaround to fix this issue. Added fixture.detectChanges(); to my tests and all the tests passed! Not sure if this is the permanent fix for this or not.

Headcult on Jan 13, 2017

Adding fixture.detectChanges() didn’t work for me, but @shaxxx solutions to the compiled js did.

tydanielson on Jan 27, 2017

@Headcult 's solution works for me too. It took me a while to fix my problem though. I had about 60 failing tests because I was using a material component (md-select in my case) in my AppComponent. It took only one fixture.detectChanges (in app.component.spec.ts, where I call TestBed.createComponent(AppComponent);) to fix all failing tests.

Almar on Feb 8, 2017

Should have been fixed in 998a583c0a1a3c2882752d9af596c3ef8e8e4fba and 84b5c3b06130dadc04477e78d1a6befeae6cd8ab (will be in the next release).

jelbourn on Mar 27, 2017

Same issue encountered but stacktrace pointed to a mdTooltip inside a mdMenu Used @Headcult 's guidance but had to tweak it- moving fixture.detectChanges() to a afterEach block rather than beforeEach afterEach(() => { fixture.detectChanges(); });

librasean on Feb 26, 2017