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

[pchiquet]

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

[Dunos]

Any updates on this issue? It's been almost a month...

[adrm]

Blocked on this. Is there some known workaround? That would be helpful until the issue gets fixed. Thanks.

[cladera]

Same problem here. Any workaround?

[shaxxx]

Can confirm. If you really need dirty workaround and don't mind fiddling with compiled javascript files in file node_modules/@angular/material`menu/menu-directive.js on line 43 find function ngOnDestroy and replace it with

    MdMenu.prototype.ngOnDestroy = function () {
        if (this._tabSubscription != null )
        {
            this._tabSubscription.unsubscribe();
        }
    };

[nickraphael]

I'm hitting this. Still not fixed? It kills all tests in my project, oddly.

[bdonald25]

I forked this repo and made the dirty fix shaxxx suggested above and put the compiled JS files in my own repository. If you want a temp fix you can change your package.json to point to my compiled js files "@angular/material": "git+https://github.com/bdonald25/angular-material-test-fix.git". It is the latest beta release (beta 1) at the time of this comment + that if statement mentioned above. https://github.com/angular/material2/compare/master...bdonald25:beta1+textfix?expand=1

[ochoaluis92]

Hi, i have the same error, the solution of shaxxx and bdonald25 works but it would be nice to have it fixed.

[JDillon522]

Please fix. Same issue here

[Headcult]

Even I'm facing the same issue with Angular 2 CLI + Material Design while running tests. The workaround is working fine locally but my CI builds are breaking because of this. Please fix this.

[Headcult]

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.

[JT-Bruch]

Any progress on this?

[theomathieubhvr]

I confirm @Headcult solution works. Thanks ! :)

[tydanielson]

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

[Almar]

@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.

[librasean]

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(); });

[vikramkute]

Same issue here as well but fixture.detectChanges() is not working for me. Though I am able to resolve this with shaxxx's workaround, still looking for a correct way to fix it.

[ghost]

Same issue here with 'md-menu', fixture.detectChanges() did not worked for me. @shaxxx workaround did the trick.

[JDillon522]

How is this still an issue? This breaks dozens of my tests and adding fixture.detectChanges() does not fix it.

[jelbourn]

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

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}