remoting/webapp/crd/js/menu_button_unittest.js

   1 // Copyright 2014 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 (function() {
   6
   7 'use strict';
   8
   9 /** @type {(sinon.Spy|function():void)} */
  10 var onShow = null;
  11 /** @type {(sinon.Spy|function():void)} */
  12 var onHide = null;
  13 /** @type {remoting.MenuButton} */
  14 var menuButton = null;
  15
  16 QUnit.module('MenuButton', {
  17   beforeEach: function() {
  18     var fixture = document.getElementById('qunit-fixture');
  19     fixture.innerHTML =
  20         '<span class="menu-button" id="menu-button-container">' +
  21           '<button class="menu-button-activator">Click me</button>' +
  22           '<ul>' +
  23             '<li id="menu-option-1">Option 1</li>' +
  24           '</ul>' +
  25         '</span>';
  26     onShow = /** @type {(sinon.Spy|function():void)} */ (sinon.spy());
  27     onHide = /** @type {(sinon.Spy|function():void)} */ (sinon.spy());
  28     menuButton = new remoting.MenuButton(
  29         document.getElementById('menu-button-container'),
  30         /** @type {function():void} */ (onShow),
  31         /** @type {function():void} */ (onHide));
  32   },
  33   afterEach: function() {
  34     onShow = null;
  35     onHide = null;
  36     menuButton = null;
  37   }
  38 });
  39
  40 QUnit.test('should display on click', function(assert) {
  41   var menu = menuButton.menu();
  42   assert.ok(menu.offsetWidth == 0 && menu.offsetHeight == 0);
  43   menuButton.button().click();
  44   assert.ok(menu.offsetWidth != 0 && menu.offsetHeight != 0);
  45 });
  46
  47 QUnit.test('should dismiss when the menu is clicked', function(assert) {
  48   var menu = menuButton.menu();
  49   menuButton.button().click();
  50   menu.click();
  51   assert.ok(menu.offsetWidth == 0 && menu.offsetHeight == 0);
  52 });
  53
  54 QUnit.test('should dismiss when anything outside the menu is clicked',
  55     function(assert) {
  56   var menu = menuButton.menu();
  57   menuButton.button().click();
  58   var x = menu.offsetRight + 1;
  59   var y = menu.offsetBottom + 1;
  60   var notMenu = document.elementFromPoint(x, y);
  61   console.assert(notMenu != menu, 'Unable to click outside menu.');
  62   notMenu.click();
  63   assert.ok(menu.offsetWidth == 0 && menu.offsetHeight == 0);
  64 });
  65
  66 QUnit.test('should dismiss when menu item is clicked', function(assert) {
  67   var menu = menuButton.menu();
  68   menuButton.button().click();
  69   var element = document.getElementById('menu-option-1');
  70   element.click();
  71   assert.ok(menu.offsetWidth == 0 && menu.offsetHeight == 0);
  72 });
  73
  74 QUnit.test('should invoke callbacks', function(assert) {
  75   assert.ok(!onShow.called);
  76   menuButton.button().click();
  77   assert.ok(onShow.called);
  78   assert.ok(!onHide.called);
  79   menuButton.menu().click();
  80   assert.ok(onHide.called);
  81 });
  82
  83 QUnit.test('select method should set/unset background image', function(assert) {
  84   var element = document.getElementById('menu-option-1');
  85   var style = window.getComputedStyle(element);
  86   assert.ok(style.backgroundImage == 'none');
  87   remoting.MenuButton.select(element, true);
  88   style = window.getComputedStyle(element);
  89   assert.ok(style.backgroundImage != 'none');
  90   remoting.MenuButton.select(element, false);
  91   style = window.getComputedStyle(element);
  92   assert.ok(style.backgroundImage == 'none');
  93 });
  94
  95 }());