fix(igxScrollInertia): event listeners leak

Author: pmoleri

projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.spec.ts

@@ -4,7 +4,8 @@ import {
     NgZone,
     OnInit,
     ViewChild,
-    ElementRef
+    ElementRef,
+    OnDestroy,
 } from '@angular/core';
 import { TestBed, ComponentFixture, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
 import { IgxScrollInertiaDirective } from './scroll_inertia.directive';
@@ -15,21 +16,28 @@ import { wait } from '../../test-utils/ui-interactions.spec';
 describe('Scroll Inertia Directive - Rendering', () => {
     let fix: ComponentFixture<ScrollInertiaComponent>;
 
-    configureTestSuite();
+    configureTestSuite({ checkLeaks: true });
     beforeAll(waitForAsync(() => {
         TestBed.configureTestingModule({
             imports: [
                 IgxTestScrollInertiaDirective,
                 ScrollInertiaComponent
             ]
-        }).compileComponents().then(() => {
-            fix = TestBed.createComponent(ScrollInertiaComponent);
-            fix.detectChanges();
-        });
+        }).compileComponents();
     }));
 
-    it('should initialize directive on non-scrollable container.', () => {
+    beforeEach(() => {
+        fix = TestBed.createComponent(ScrollInertiaComponent);
+        fix.detectChanges();
+    });
+
+    afterEach(() => {
+        fix = null;
+    });
+
+    it('should initialize directive on non-scrollable container.', async () => {
         expect(fix.componentInstance.scrInertiaDir).toBeDefined('scroll inertia initializing through markup failed');
+        await fix.whenStable();
     });
 
     // Unit tests for inertia function.
@@ -89,6 +97,10 @@ describe('Scroll Inertia Directive - Scrolling', () => {
         scrollInertiaDir.smoothingDuration = 0;
     });
 
+    afterEach(() => {
+        scrollInertiaDir.ngOnDestroy();
+    });
+
     // Unit test for wheel - wheelDelataY/wheelDeltaX supported on Chrome, Safari, Opera.
     it('should change scroll top for related scrollbar if onWheel is executed with wheelDeltaY.', () => {
         scrollInertiaDir.IgxScrollInertiaDirection = 'vertical';
@@ -342,7 +354,7 @@ export class IgxTestScrollInertiaDirective extends IgxScrollInertiaDirective {
     `,
     imports: [IgxTestScrollInertiaDirective]
 })
-export class ScrollInertiaComponent implements OnInit {
+export class ScrollInertiaComponent implements OnInit, OnDestroy {
     @ViewChild('container', { static: true }) public container: ElementRef;
     @ViewChild('scrBar', { static: true }) public scrollContainer: ElementRef;
     @ViewChild('scrInertiaContainer', { read: IgxTestScrollInertiaDirective, static: true })
@@ -359,9 +371,8 @@ export class ScrollInertiaComponent implements OnInit {
    public ngOnInit() {
         this.scrInertiaDir.IgxScrollInertiaScrollContainer = this.scrollContainer.nativeElement;
 
-        this.scrollContainer.nativeElement.addEventListener('scroll', (evt) => {
-            this.onScroll(evt);
-        });
+        this.onScroll = this.onScroll.bind(this);
+        this.scrollContainer.nativeElement.addEventListener('scroll', this.onScroll);
     }
 
     public onScroll(evt) {
@@ -375,4 +386,8 @@ export class ScrollInertiaComponent implements OnInit {
         this.scrTopStepArray.push(calcScrollStep);
         this.scrLeftStepArray.push(calcScrollLeftStep);
     }
+
+    public ngOnDestroy(): void {
+        this.scrollContainer.nativeElement.removeEventListener('scroll', this.onScroll);
+    }
 }

projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.ts

@@ -69,10 +69,14 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy {
                 return;
             }
             const targetElem = this.parentElement;
-            targetElem.addEventListener('wheel', this.onWheel.bind(this), { passive: false });
-            targetElem.addEventListener('touchstart', this.onTouchStart.bind(this), { passive: false });
-            targetElem.addEventListener('touchmove', this.onTouchMove.bind(this), { passive: false });
-            targetElem.addEventListener('touchend', this.onTouchEnd.bind(this), { passive: false });
+            this.onWheel = this.onWheel.bind(this);
+            this.onTouchStart = this.onTouchStart.bind(this);
+            this.onTouchMove = this.onTouchMove.bind(this);
+            this.onTouchEnd = this.onTouchEnd.bind(this);
+            targetElem.addEventListener('wheel', this.onWheel, { passive: false });
+            targetElem.addEventListener('touchstart', this.onTouchStart, { passive: false });
+            targetElem.addEventListener('touchmove', this.onTouchMove, { passive: false });
+            targetElem.addEventListener('touchend', this.onTouchEnd, { passive: false });
         });
     }