fix(zoombar): support ngChange function

OrdnanceSurvey · Jun 13, 2016 · 8759b13 · 8759b13
1 parent 04c8d20
commit 8759b13
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
   });
 
 });