diff --git a/src/lib/core/ripple/ripple.spec.ts b/src/lib/core/ripple/ripple.spec.ts index 422f908a0ba2..3f38c63e31cd 100644 --- a/src/lib/core/ripple/ripple.spec.ts +++ b/src/lib/core/ripple/ripple.spec.ts @@ -64,7 +64,11 @@ describe('MdRipple', () => { beforeEach(() => { TestBed.configureTestingModule({ imports: [MdRippleModule.forRoot()], - declarations: [BasicRippleContainer, RippleContainerWithInputBindings], + declarations: [ + BasicRippleContainer, + RippleContainerWithInputBindings, + RippleContainerWithNgIf, + ], }); }); @@ -180,6 +184,20 @@ describe('MdRipple', () => { expect(pxStringToFloat(ripple.style.width)).toBeCloseTo(2 * expectedRadius, 1); expect(pxStringToFloat(ripple.style.height)).toBeCloseTo(2 * expectedRadius, 1); }); + + it('cleans up the event handlers when the container gets destroyed', () => { + fixture = TestBed.createComponent(RippleContainerWithNgIf); + fixture.detectChanges(); + + rippleElement = fixture.debugElement.nativeElement.querySelector('[md-ripple]'); + rippleBackground = rippleElement.querySelector('.md-ripple-background'); + + fixture.componentInstance.isDestroyed = true; + fixture.detectChanges(); + + rippleElement.dispatchEvent(createMouseEvent('mousedown')); + expect(rippleBackground.classList).not.toContain('md-ripple-active'); + }); }); describe('configuring behavior', () => { @@ -328,3 +346,9 @@ class RippleContainerWithInputBindings { backgroundColor = ''; @ViewChild(MdRipple) ripple: MdRipple; } + +@Component({ template: `
` }) +class RippleContainerWithNgIf { + @ViewChild(MdRipple) ripple: MdRipple; + isDestroyed = false; +} diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts index a2074c18fdf5..9cd316a89ab3 100644 --- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts +++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts @@ -10,7 +10,8 @@ describe('MdTabNavBar', () => { TestBed.configureTestingModule({ imports: [MdTabsModule.forRoot()], declarations: [ - SimpleTabNavBarTestApp + SimpleTabNavBarTestApp, + TabLinkWithNgIf, ], }); @@ -38,6 +39,25 @@ describe('MdTabNavBar', () => { expect(component.activeIndex).toBe(2); }); }); + + it('should clean up the ripple event handlers on destroy', () => { + let fixture: ComponentFixture