chrome/test/data/chromeos/virtual_keyboard/layout_test.js

   1 /*
   2  * Copyright 2014 The Chromium Authors. All rights reserved.
   3  * Use of this source code is governed by a BSD-style license that can be
   4  * found in the LICENSE file.
   5  */
   6
   7 /**
   8  * Verifies that the layout matches with expectations.
   9  * @param {Array<string>} rows List of strings where each string indicates the
  10  *     expected sequence of characters on the corresponding row.
  11  */
  12 function verifyLayout(rows) {
  13   var rowIndex = 1;
  14   rows.forEach(function(sequence) {
  15     var rowId = 'row' + rowIndex++;
  16     var first = sequence[0];
  17     var key = findKey(first, rowId);
  18     assertTrue(!!key, 'Unable to find "' + first + '" in "' + rowId + '"');
  19     key = getSoftKeyView(key);
  20     for (var i = 1; i < sequence.length; i++) {
  21       var next = key.nextSibling;
  22       assertTrue(!!next,
  23                  'Unable to find key to right of "' + sequence[i - 1] + '"');
  24       assertTrue(hasLabel(next, sequence[i]),
  25                  'Unexpected label: expected: "' + sequence[i] +
  26                  '" to follow "' + sequence[i - 1] + '"');
  27       key = next;
  28     }
  29   });
  30 }
  31
  32 /**
  33  * Validates full layout for a US QWERTY keyboard.
  34  */
  35 function testFullQwertyLayoutAsync(testDoneCallback) {
  36   var testCallback = function() {
  37     var lowercase = [
  38       '`1234567890-=',
  39       'qwertyuiop[]\\',
  40       'asdfghjkl;\'',
  41       'zxcvbnm,./'
  42     ];
  43     var uppercase = [
  44       '~!@#$%^&*()_+',
  45       'QWERTYUIOP{}',
  46       'ASDFGHJKL:"',
  47       'ZXCVBNM<>?'
  48     ];
  49     var view = getActiveView();
  50     assertTrue(!!view, 'Unable to find active view');
  51     assertEquals('us', view.id, 'Expecting full layout');
  52     verifyLayout(lowercase);
  53     mockTap(findKeyById('ShiftLeft'));
  54     verifyLayout(uppercase);
  55     mockTap(findKeyById('ShiftRight'));
  56     verifyLayout(lowercase);
  57     testDoneCallback();
  58   };
  59   var config = {
  60     keyset: 'us',
  61     languageCode: 'en',
  62     passwordLayout: 'us',
  63     name: 'English'
  64   };
  65   onKeyboardReady(testCallback, config);
  66 }
  67
  68 /**
  69  * Validates compact layout for a US QWERTY keyboard.
  70  */
  71 function testCompactQwertyLayoutAsync(testDoneCallback) {
  72   var testCallback = function() {
  73     var lowercase = [
  74       'qwertyuiop',
  75       'asdfghjkl',
  76       'zxcvbnm!?'
  77     ];
  78     var uppercase = [
  79       'QWERTYUIOP',
  80       'ASDFGHJKL',
  81       'ZXCVBNM!?'
  82     ];
  83     var symbol = [
  84       '1234567890',
  85       '@#$%&-+()',
  86       '\\=*"\':;!?'
  87     ];
  88     var more = [
  89       '~`|',
  90       '\u00a3\u00a2\u20ac\u00a5^\u00b0={}',
  91       '\\\u00a9\u00ae\u2122\u2105[]\u00a1\u00bf'
  92     ];
  93     var view = getActiveView();
  94     assertTrue(!!view, 'Unable to find active view');
  95     assertEquals('us-compact-qwerty', view.id, 'Expecting compact layout');
  96     verifyLayout(lowercase);
  97     mockTap(findKeyById('ShiftLeft'));
  98     verifyLayout(uppercase);
  99     // Keyset views for symbol and more on the compact layout are lazy
 100     // initialized. Wait for view creation to complete before continuing the
 101     // test.
 102     onKeysetsReady(['us.compact.symbol', 'us.compact.more'], function() {
 103       onSwitchToKeyset('us.compact.symbol', function() {
 104         assertEquals('us-compact-symbol', getActiveView().id,
 105                      'Expecting symbol layout');
 106         verifyLayout(symbol);
 107         onSwitchToKeyset('us.compact.more', function() {
 108           assertEquals('us-compact-more', getActiveView().id,
 109                        'Expecting more symbols layout');
 110           verifyLayout(more);
 111           onSwitchToKeyset('us.compact.qwerty', function() {
 112             assertEquals('us-compact-qwerty', getActiveView().id,
 113                          'Expecting compact text layout');
 114             verifyLayout(lowercase);
 115             testDoneCallback();
 116           });
 117           mockTap(findKey('abc'));
 118         });
 119         mockTap(findKey('~[<'));
 120       });
 121       mockTap(findKey('?123'));
 122     });
 123   };
 124   var config = {
 125     keyset: 'us.compact.qwerty',
 126     languageCode: 'en',
 127     passwordLayout: 'us',
 128     name: 'English'
 129   };
 130   onKeyboardReady(testCallback, config);
 131 }
 132
 133 /**
 134  * Tests that handwriting support is disabled by default.
 135  */
 136 function testHandwritingSupportAsync(testDoneCallback) {
 137   onKeyboardReady(function() {
 138     var menu = document.querySelector('.inputview-menu-view');
 139     assertTrue(!!menu, 'Unable to access keyboard menu');
 140     assertEquals('none', getComputedStyle(menu)['display'],
 141                  'Menu should not be visible until activated');
 142     mockTap(findKeyById('Menu'));
 143     assertEquals('block', getComputedStyle(menu)['display'],
 144                  'Menu should be visible once activated');
 145     var hwt = menu.querySelector('#handwriting');
 146     assertFalse(!!hwt, 'Handwriting should be disabled by default');
 147     testDoneCallback();
 148   });
 149 }
 150
 151 /**
 152  * Validates Handwriting layout. Though handwriting is disabled for the system
 153  * VK, the layout is still available and useful for testing expected behavior of
 154  * the IME-VKs since the codebase is shared.
 155  */
 156 function testHandwritingLayoutAsync(testDoneCallback) {
 157   var compactKeysets = [
 158     'us.compact.qwerty',
 159     'us.compact.symbol',
 160     'us.compact.more',
 161     'us.compact.numberpad'
 162   ];
 163   var testCallback = function () {
 164     // Non-active keysets are lazy loaded in order to reduce latency before
 165     // the virtual keyboard is shown. Wait until the load is complete to
 166     // continue testing.
 167     onKeysetsReady(compactKeysets, function() {
 168       var menu = document.querySelector('.inputview-menu-view');
 169       assertEquals('none', getComputedStyle(menu).display,
 170                    'Menu should be hidden initially');
 171       mockTap(findKeyById('Menu'));
 172       assertFalse(menu.hidden,
 173                   'Menu should be visible after tapping menu toggle button');
 174       var menuBounds = menu.getBoundingClientRect();
 175       assertTrue(menuBounds.width > 0 && menuBounds.height > 0,
 176                  'Expect non-zero menu bounds.');
 177       var hwtSelect = menu.querySelector('#handwriting');
 178       assertTrue(!!hwtSelect, 'Handwriting should be available for testing');
 179       var hwtSelectBounds = hwtSelect.getBoundingClientRect();
 180       assertTrue(hwtSelectBounds.width > 0 && hwtSelectBounds.height > 0,
 181                  'Expect non-zero size for hwt select button.');
 182       onSwitchToKeyset('hwt', function() {
 183         // The tests below for handwriting part is for material design.
 184         var view = getActiveView();
 185         assertEquals('hwt', view.id, 'Handwriting layout is not active.');
 186         var hwtCanvasView = view.querySelector('#canvasView');
 187         assertTrue(!!hwtCanvasView, 'Unable to find canvas view');
 188         var panelView = document.getElementById('panelView');
 189         assertTrue(!!panelView, 'Unable to find panel view');
 190         var backButton = panelView.querySelector('#backToKeyboard');
 191         assertTrue(!!backButton, 'Unable to find back button.');
 192         onSwitchToKeyset('us.compact.qwerty', function() {
 193           assertEquals('us-compact-qwerty', getActiveView().id,
 194               'compact layout is not active.');
 195           testDoneCallback();
 196         });
 197         mockTap(backButton);
 198       });
 199       mockTap(hwtSelect);
 200     });
 201   };
 202   var config = {
 203     keyset: 'us.compact.qwerty',
 204     languageCode: 'en',
 205     passwordLayout: 'us',
 206     name: 'English',
 207     options: {enableHwtForTesting: true}
 208   };
 209   onKeyboardReady(testCallback, config);
 210 }
 211
 212 /**
 213  * Test that IME switching from the InputView menu works.
 214  */
 215 function testKeyboardSwitchIMEAsync(testDoneCallback) {
 216   var testCallback = function () {
 217     // Ensure that the menu key is present and displays the menu when pressed.
 218     var menu = document.querySelector('.inputview-menu-view');
 219     assertEquals('none', getComputedStyle(menu).display,
 220                  'Menu should be hidden initially');
 221     mockTap(findKeyById('Menu'));
 222     assertFalse(menu.hidden,
 223                 'Menu should be visible after tapping menu toggle button');
 224     var menuBounds = menu.getBoundingClientRect();
 225     assertTrue(menuBounds.width > 0 && menuBounds.height > 0,
 226                'Expect non-zero menu bounds.');
 227
 228     var imes = menu.querySelectorAll('.inputview-menu-list-indicator-name');
 229     assertEquals(3, imes.length, 'Unexpected number of IMEs in menu view.');
 230     assertEquals('US', imes[0].innerText, 'Unexpected IMEs in menu view');
 231     assertEquals('Fr', imes[1].innerText, 'Unexpected IMEs in menu view');
 232     assertEquals('De', imes[2].innerText, 'Unexpected IMEs in menu view');
 233
 234     // Expect a call to change to the German IME.
 235     chrome.inputMethodPrivate.setCurrentInputMethod.addExpectation('de');
 236
 237     // Select the German IME and ensure that the menu is dismissed.
 238     mockTap(imes[2]);
 239     assertEquals('none', menu.style.display, "Menu didn't hide on switch.");
 240
 241     testDoneCallback();
 242   };
 243   var config = {
 244     keyset: 'us.compact.qwerty',
 245     languageCode: 'en',
 246     passwordLayout: 'us',
 247     name: 'English'
 248   };
 249   // Explicitly set up the available input methods.
 250   chrome.inputMethodPrivate.getInputMethods.setCallbackData([
 251     {id: 'us', name: 'US Keyboard', indicator: 'US'},
 252     {id: 'fr', name: 'French Keyboard', indicator: 'Fr'},
 253     {id: 'de', name: 'German Keyboard', indicator: 'De'}
 254   ]);
 255   onKeyboardReady(testCallback, config);
 256 }