From 8759b134d623d5b2da3bc6fe0816a885554770fa Mon Sep 17 00:00:00 2001
From: csnyders <craig.snyders@os.uk>
Date: Mon, 13 Jun 2016 10:11:59 +0100
Subject: [PATCH] fix(zoombar): support ngChange function

---
 .../zoombar/controllers/osZoombar.ts          | 34 +++++++++++++------
 src/components/zoombar/zoombar.ts             |  3 +-
 test/unit/components/zoombar/zoombar_test.js  | 22 +++++++++---
 3 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/src/components/zoombar/controllers/osZoombar.ts b/src/components/zoombar/controllers/osZoombar.ts
index 5e0d822..36f1031 100644
--- a/src/components/zoombar/controllers/osZoombar.ts
+++ b/src/components/zoombar/controllers/osZoombar.ts
@@ -2,21 +2,20 @@
 
 
   export interface IOsZoombar {
-    ngModel:number;
+    ngModel:any;
+    ngChange:Function;
     zoomMin:number;
     zoomMax:number;
     zoomIn(): void
     zoomOut(): void
   }
 
-  /**
-   * This is class OsZoombar description
-   */
-  export class OsZoombar implements IOsZoombar {
-    static $inject = ['$element'];
+export class OsZoombar implements IOsZoombar {
+  static $inject = ['$element'];
 
-    ngModel:number;
+    ngModel;
     zoomMin:number;
+    ngChange;
 
     /**
      * This is property description
@@ -35,13 +34,28 @@
      *
      */
     zoomIn() {
-      this.ngModel = Math.min(++this.ngModel, this.zoomMax);
+      let newZoomLevel = Math.min(this.ngModel + 1, this.zoomMax);
+
+      // fire the change function only if value changed
+      if (angular.isFunction(this.ngChange) && this.ngModel !== newZoomLevel) {
+        this.ngModel = newZoomLevel;
+        this.ngChange(this.ngModel);
+      } else {
+        this.ngModel = newZoomLevel;
+      }
     }
 
     zoomOut() {
-      this.ngModel = Math.max(--this.ngModel, this.zoomMin);
+      let newZoomLevel = Math.max(this.ngModel - 1, this.zoomMin);
+
+      // fire the change function only if value changed
+      if (angular.isFunction(this.ngChange) && this.ngModel !== newZoomLevel) {
+        this.ngModel = newZoomLevel;
+        this.ngChange(this.ngModel);
+      } else {
+        this.ngModel = newZoomLevel;
+      }
     }
 
   }
 
-
diff --git a/src/components/zoombar/zoombar.ts b/src/components/zoombar/zoombar.ts
index ba519e7..3f5e83c 100644
--- a/src/components/zoombar/zoombar.ts
+++ b/src/components/zoombar/zoombar.ts
@@ -14,7 +14,8 @@ angular
       scope: {
         ngModel: '=',
         zoomMin: '=osZoomMin',
-        zoomMax: '=osZoomMax'
+        zoomMax: '=osZoomMax',
+        ngChange: '&'
       },
       require: 'ngModel',
       controller: 'OsZoombarController',
diff --git a/test/unit/components/zoombar/zoombar_test.js b/test/unit/components/zoombar/zoombar_test.js
index fe0e6ba..54a92b1 100644
--- a/test/unit/components/zoombar/zoombar_test.js
+++ b/test/unit/components/zoombar/zoombar_test.js
@@ -1,12 +1,14 @@
 describe("osZoombar | ", function() {
-  var controller, elementMock;
+  var controller, elementMock, changeFn;
 
   beforeEach(angular.mock.module('osElements'));
 
   beforeEach(inject(function($controller){
     elementMock = { elementMock: true};
 
-    controller = $controller('OsZoombarController', { $element: elementMock}, {ngModel: 4, zoomMin: 0, zoomMax: 7});
+    changeFn = jasmine.createSpy('changeFn');
+
+    controller = $controller('OsZoombarController', { $element: elementMock}, {ngModel: 4, zoomMin: 0, zoomMax: 7, ngChange: changeFn});
   }));
 
   it("should execute constructor", function() {
@@ -24,36 +26,46 @@ describe("osZoombar | ", function() {
     expect(controller.zoomMax).toEqual(7);
   });
 
-  it("should zoom out", function() {
+  it("should zoom out and fire change function", function() {
     expect(controller.ngModel).toEqual(4);
+    expect(changeFn).not.toHaveBeenCalled();
     controller.zoomOut();
     expect(controller.ngModel).toEqual(3);
+    expect(changeFn).toHaveBeenCalledWith(3); // changefn should be called with new zoom level
+    expect(changeFn.calls.count()).toEqual(1); // only called once
   });
 
   it("should limit zoom out level", function() {
     expect(controller.ngModel).toEqual(4);
+    expect(changeFn).not.toHaveBeenCalled();
     controller.zoomOut();
     controller.zoomOut();
     controller.zoomOut();
     controller.zoomOut();
     controller.zoomOut();
     expect(controller.ngModel).toEqual(0);
+    expect(changeFn.calls.count()).toEqual(4); // should only have been called 4 times once min of 0 is reached
   });
 
-  it("should zoom in", function() {
+  it("should zoom in and fire change function", function() {
     expect(controller.ngModel).toEqual(4);
+    expect(changeFn).not.toHaveBeenCalled();
     controller.zoomIn();
     expect(controller.ngModel).toEqual(5);
+    expect(changeFn).toHaveBeenCalledWith(5); // changefn should be called with new zoom level
+    expect(changeFn.calls.count()).toEqual(1); // only called once
   });
 
-  it("should limit zoom out level", function() {
+  it("should limit zoom in level", function() {
     expect(controller.ngModel).toEqual(4);
+    expect(changeFn).not.toHaveBeenCalled();
     controller.zoomIn();
     controller.zoomIn();
     controller.zoomIn();
     controller.zoomIn();
     controller.zoomIn();
     expect(controller.ngModel).toEqual(7);
+    expect(changeFn.calls.count()).toEqual(3); // should only have been called 3 times once max of 7 is reached
   });
 
 });