fix(draggable): dispose of observables when the component is destroyed

Author: Matt Lewis

src/draggable.directive.ts

@@ -1,4 +1,4 @@
-import {Directive, HostListener, OnInit, ElementRef, Renderer, Output, EventEmitter, Input} from '@angular/core';
+import {Directive, HostListener, OnInit, ElementRef, Renderer, Output, EventEmitter, Input, OnDestroy} from '@angular/core';
 import {Subject} from 'rxjs/Subject';
 import {Observable} from 'rxjs/Observable';
 import 'rxjs/add/observable/merge';
@@ -13,7 +13,7 @@ type Coordinates = {x: number, y: number};
 @Directive({
   selector: '[mwlDraggable]'
 })
-export class Draggable implements OnInit {
+export class Draggable implements OnInit, OnDestroy {
 
   @Input() dropData: any;
 
@@ -61,7 +61,6 @@ export class Draggable implements OnInit {
 
     });
 
-    // TODO - unsubscribe from this on destroy
     mouseDrag.subscribe(({x, y, currentDrag}) => {
       this.dragging.next({x, y});
       this.setCssTransform(`translate(${x}px, ${y}px)`);
@@ -70,6 +69,12 @@ export class Draggable implements OnInit {
 
   }
 
+  ngOnDestroy(): void {
+    this.mouseDown.complete();
+    this.mouseMove.complete();
+    this.mouseUp.complete();
+  }
+
   /**
    * @private
    */

test/draggable.directive.spec.ts

@@ -59,4 +59,25 @@ describe('draggable directive', () => {
     expect(draggableElement.style.transform).to.equal('');
   });
 
+  it('should end the mouseUp observable when the component is destroyed', () => {
+    const complete: sinon.SinonSpy = sinon.spy();
+    fixture.componentInstance.draggable.mouseUp.subscribe({complete});
+    fixture.destroy();
+    expect(complete).to.have.been.calledOnce;
+  });
+
+  it('should end the mouseDown observable when the component is destroyed', () => {
+    const complete: sinon.SinonSpy = sinon.spy();
+    fixture.componentInstance.draggable.mouseDown.subscribe({complete});
+    fixture.destroy();
+    expect(complete).to.have.been.calledOnce;
+  });
+
+  it('should end the mouseMove observable when the component is destroyed', () => {
+    const complete: sinon.SinonSpy = sinon.spy();
+    fixture.componentInstance.draggable.mouseMove.subscribe({complete});
+    fixture.destroy();
+    expect(complete).to.have.been.calledOnce;
+  });
+
 });