fix(click-block): fix for the click block logic

fix for the click block logic

Author: danbucholtz

src/components/app/app.ts

@@ -53,22 +53,23 @@ export class App {
    * while views transition, a modal slides up, an action-sheet
    * slides up, etc. After the transition completes it is set back to `true`.
    * @param {boolean} isEnabled
-   * @param {boolean} fallback  When `isEnabled` is set to `false`, this argument
+   * @param {number} duration  When `isEnabled` is set to `false`, this argument
    * is used to set the maximum number of milliseconds that app will wait until
    * it will automatically enable the app again. It's basically a fallback incase
    * something goes wrong during a transition and the app wasn't re-enabled correctly.
    */
   setEnabled(isEnabled: boolean, duration: number = 700) {
     this._disTime = (isEnabled ? 0 : Date.now() + duration);
-
+    const CLICK_BLOCK_BUFFER_IN_MILLIS = 64;
     if (this._clickBlock) {
-      if (duration > 32) {
-        // only do a click block if the duration is longer than XXms
-        this._clickBlock.show(true, duration + 64);
-
-      } else {
+      if ( isEnabled || duration <= 32 ) {
+        // disable the click block if it's enabled, or the duration is tiny
         this._clickBlock.show(false, 0);
       }
+      else {
+        // show the click block for duration + some number
+        this._clickBlock.show(true, duration + CLICK_BLOCK_BUFFER_IN_MILLIS);
+      }
     }
   }
 

src/components/app/test/app.spec.ts

@@ -83,7 +83,77 @@ describe('IonicApp', () => {
       expect(app.getActiveNav()).toBeNull();
       expect(app.getRootNav()).toBeNull();
     });
+  });
+
+  describe('setEnabled', () => {
+    it('should disable click block when app is enabled', () => {
+      // arrange
+      let mockClickBlock = {
+        show: () => {}
+      };
+
+      spyOn(mockClickBlock, 'show');
+
+      app._clickBlock = mockClickBlock;
+
+      // act
+      app.setEnabled(true);
+
+      // assert
+      expect(mockClickBlock.show).toHaveBeenCalledWith(false, 0);
+    });
+
+    it('should disable click block when app is disabled but duration of less than 32 passed', () => {
+      // arrange
+      let mockClickBlock = {
+        show: () => {}
+      };
+
+      spyOn(mockClickBlock, 'show');
+
+      app._clickBlock = mockClickBlock;
+
+      // act
+      app.setEnabled(false, 20);
+
+      // assert
+      expect(mockClickBlock.show).toHaveBeenCalledWith(false, 0);
+    });
+
+    it('should enable click block when false is passed with duration', () => {
+      // arrange
+      let mockClickBlock = {
+        show: () => {}
+      };
+
+      spyOn(mockClickBlock, 'show');
+
+      app._clickBlock = mockClickBlock;
+
+      // act
+      app.setEnabled(false, 200);
+
+      // assert
+      expect(mockClickBlock.show).toHaveBeenCalledWith(true, 200 + 64);
+    });
+
+    it('should enable click block when false is passed w/o duration', () => {
+      // arrange
+      let mockClickBlock = {
+        show: () => {}
+      };
+
+      spyOn(mockClickBlock, 'show');
 
+      app._clickBlock = mockClickBlock;
+
+      // act
+      app.setEnabled(false);
+
+      // assert
+      // 700 is the default
+      expect(mockClickBlock.show).toHaveBeenCalledWith(true, 700 + 64);
+    });
   });
 
   var app: App;

src/config/bootstrap.ts

@@ -160,6 +160,10 @@ function setupDom(window: Window, document: Document, config: Config, platform:
     bodyEle.classList.add('enable-hover');
   }
 
+  if (config.get('clickBlock')) {
+    clickBlock.enable();
+  }
+
   // run feature detection tests
   featureDetect.run(window, document);
 }