ionic-framework/test/unit/utils/keyboard.unit.js

/*

Physical Device Testing Scenarios
---------------------------------
- focusing inputs below the keyboard should scroll them into the middle of the view
- focusing inputs that are above the keyboard should not scroll, but still resize the scrollable content area
- focusing inputs should resize the scroll view so the user can scroll to inputs at the bottom of the page
- clicking the label of an input should focus that input
- focusing an input that is mostly offscreen should scroll into view using js scrolling, not the browser scrolling it into view
- focusing an input while another input already has focus should not (visibly) close and re-open the keyboard
- focusing an input that is above the keyboard while another input already has focus should not do anything
- focusing an input that is below the keyboard while another input already has focus should scroll it into view
- the header should not move when an input is focused
- entering an input on a popup or modal should resize and un-resize that scrollview
- opening a popup or a modal while the keyboard is up should un-resize the scrollview before opening the modal or popup
- changing the orientation of the device should not break any of the above^
- quickly tap different text inputs then end up tapping an element that isn't a text input, the scroll resize should go away

- focusing inputs at the bottom of the page should scroll into view normally (broken on iOS 7.0 w/o height meta tag)
- on iOS in safari, shrinking the view should account for the button-bar at the bottom (currently not working)

Tentative:
- height=device-height not needed on iOS 6.1
- height=device-height needed on iOS 7.0 Cordova
  ** without it, fires 4 resize events when the keyboard comes up, and the scroll view resizes incorrectly, with it, does not fire resize events? **
- height=device-height not needed on iOS 7.1


Tested On
-----------------------
- iOS 7.1 Safari
- iOS 7.1 Cordova
- iOS 7.0 Safari
- iOS 7.0 Cordova
- iOS 6.1 Safari
- iOS 6.1 Cordova
- Android 4.4 Browser
- Android 4.4 Cordova
- Android 4.2 Browser
- Android 4.2 Cordova



Notes:
---------------------------------
iOS 7 keyboard is 216px tall without the accessory bar
iOS 7 keyboard is 260px tall with the accessory bar

*/


describe('Ionic Keyboard', function() {
  var window;

  beforeEach(inject(function($window) {
    window = $window;
    window._setTimeout = window.setTimeout;
    window.setTimeout = function(){};
    _activeElement = null; // the element which has focus
    window.cordova = undefined;
    window.device = undefined;
    ionic.Platform.ua = '';
    ionic.Platform.platforms = null;
    ionic.Platform.setPlatform('');
    ionic.Platform.setVersion('');
    ionic.keyboard.isOpen = false;
  }));

  afterEach(function(){
    window.setTimeout = window._setTimeout;
  });

  it('Should keyboardShow', function(){
    var element = document.createElement('textarea');
    var elementTop = 100;
    var elementBottom = 200;
    var keyboardHeight = 200;
    var deviceHeight = 500;
    var details = keyboardShow(element, elementTop, elementBottom, deviceHeight, keyboardHeight);

    expect( details.keyboardHeight ).toEqual(200);
  });

  it('Should keyboardIsOverWebView()=false if Android and not isWebView', function(){
    // Android browser places the keyboard on top of the content and doesn't resize the window
    ionic.Platform.setPlatform('Android');
    expect( ionic.Platform.isAndroid() ).toEqual(true);
    expect( ionic.Platform.isWebView() ).toEqual(false);

    expect( ionic.Platform.isIOS() ).toEqual(false);

    expect( keyboardIsOverWebView() ).toEqual(true);
  });

  it('Should keyboardIsOverWebView()=false if Android and isWebView', function(){
    // Android webview gets shrunk by cordova and the keyboard fills the gap
    ionic.Platform.setPlatform('Android');
    window.cordova = {};
    expect( ionic.Platform.isAndroid() ).toEqual(true);
    expect( ionic.Platform.isWebView() ).toEqual(true);

    expect( keyboardIsOverWebView() ).toEqual(false);
  });

  it('Should keyboardIsOverWebView()=true if iOS 7.0 or greater', function(){
    ionic.Platform.setPlatform('iOS');
    ionic.Platform.setVersion('7.0');
    expect( ionic.Platform.isAndroid() ).toEqual(false);
    expect( ionic.Platform.isIOS() ).toEqual(true);

    expect( keyboardIsOverWebView() ).toEqual(true);
  });

  it('Should keyboardIsOverWebView()=true if less than iOS 7.0', function(){
    ionic.Platform.setPlatform('iOS');
    ionic.Platform.setVersion('6.0');
    expect( ionic.Platform.isAndroid() ).toEqual(false);
    expect( ionic.Platform.isIOS() ).toEqual(true);

    expect( keyboardIsOverWebView() ).toEqual(true);
  });

  it('Should keyboardHasPlugin', function() {
    expect( keyboardHasPlugin() ).toEqual(false);

    window.cordova = {};
    expect( keyboardHasPlugin() ).toEqual(false);

    window.cordova.plugins = {};
    expect( keyboardHasPlugin() ).toEqual(false);

    window.cordova.plugins.Keyboard = {};
    expect( keyboardHasPlugin() ).toEqual(true);
  });

  it('keyboardGetHeight() should = DEFAULT_KEYBOARD_HEIGHT if no plugin or resized view', function(){
    expect( keyboardGetHeight() ).toEqual(275);
  });

  it('keyboardUpdateViewportHeight() should update when window.innerHeight > keyboardViewportHeight', function(){
    window.innerHeight = 460;
    keyboardViewportHeight = 320;
    keyboardUpdateViewportHeight();

    expect( keyboardViewportHeight ).toEqual(460);
  });

  it('keyboardUpdateViewportHeight() should not update when window.innerHeight < keyboardViewportHeight', function(){
    window.innerHeight = 100;
    keyboardViewportHeight = 320;
    keyboardUpdateViewportHeight();

    expect( keyboardViewportHeight ).toEqual(320);
  });

  it('Should scroll input into view if it is under the keyboard', function(){
    var element = document.createElement('textarea');
    var elementTop = 300;
    var elementBottom = 400;
    var keyboardHeight = 200;
    var deviceHeight = 260;
    var details = keyboardShow(element, elementTop, elementBottom, deviceHeight, keyboardHeight);

    expect( details.isElementUnderKeyboard ).toEqual(true);
  });

  it('Should not scroll input into view if it is not under the keyboard', function(){
    var element = document.createElement('textarea');
    var elementTop = 100;
    var elementBottom = 200;
    var keyboardHeight = 200;
    var deviceHeight = 500;
    var details = keyboardShow(element, elementTop, elementBottom, deviceHeight, keyboardHeight);

    expect( details.isElementUnderKeyboard ).toEqual(false);
  });

  it('Should not subtract the keyboard height from the contentHeight if not keyboardIsOverWebView()', function(){
    var element = document.createElement('textarea');
    var elementTop = 300;
    var elementBottom = 400;
    var keyboardHeight = 200;
    var deviceHeight = 260;
    var details = keyboardShow(element, elementTop, elementBottom, deviceHeight, keyboardHeight);

    expect( details.contentHeight ).toEqual(260);
  });

  it('Should subtract the keyboard height from the contentHeight if keyboardIsOverWebView()', function(){
    ionic.Platform.setPlatform('iOS');
    ionic.Platform.setVersion('7.1');

    var element = document.createElement('textarea');
    var elementTop = 300;
    var elementBottom = 400;
    var keyboardHeight = 200;
    var deviceHeight = 568;
    var details = keyboardShow(element, elementTop, elementBottom, deviceHeight, keyboardHeight);

    expect( details.contentHeight ).toEqual(368);
  });

});