src/third_party/closure_library/closure/goog/ui/popupmenu_test.js

// Copyright 2008 The Closure Library Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS-IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

goog.provide('goog.ui.PopupMenuTest');
goog.setTestOnly('goog.ui.PopupMenuTest');

goog.require('goog.dom');
goog.require('goog.events.EventHandler');
goog.require('goog.events.EventType');
goog.require('goog.math.Box');
goog.require('goog.math.Coordinate');
goog.require('goog.positioning.Corner');
goog.require('goog.style');
goog.require('goog.testing.jsunit');
goog.require('goog.ui.Menu');
goog.require('goog.ui.MenuItem');
goog.require('goog.ui.PopupMenu');

var anchor;

// Event handler
var handler;
var showPopup;
var beforeShowPopupCalled;
var popup;

function setUp() {
  anchor = goog.dom.getElement('popup-anchor');
  handler = new goog.events.EventHandler();
  popup = new goog.ui.PopupMenu();
  popup.render();
}

function tearDown() {
  handler.dispose();
  popup.dispose();
}


/**
 * Asserts properties of {@code target} matches the expected value.
 *
 * @param {Object} target The target specifying how the popup menu should be
 *     attached to an anchor.
 * @param {Element} expectedElement The expected anchoring element.
 * @param {goog.positioning.Corner} expectedTargetCorner The expected value of
 *     the {@code target.targetCorner_} property.
 * @param {goog.positioning.Corner} expectedMenuCorner The expected value of
 *     the {@code target.menuCorner_} property.
 * @param {goog.events.EventType} expectedEventType The expected value of the
 *     {@code target.eventType_} property.
 * @param {goog.math.Box} expectedMargin The expected value of the
 *     {@code target.margin_} property.
 */
function assertTarget(target, expectedElement, expectedTargetCorner,
    expectedMenuCorner, expectedEventType, expectedMargin) {
  var expectedTarget = {
    element_: expectedElement,
    targetCorner_: expectedTargetCorner,
    menuCorner_: expectedMenuCorner,
    eventType_: expectedEventType,
    margin_: expectedMargin
  };

  assertObjectEquals('Target does not match.', expectedTarget, target);
}


/**
 * Test menu receives BEFORE_SHOW event before it's displayed.
 */
function testBeforeShowEvent() {
  var target = popup.createAttachTarget(anchor);
  popup.attach(anchor);

  function beforeShowPopup(e) {
    // Ensure that the element is not yet visible.
    assertFalse('The element should not be shown when BEFORE_SHOW event is ' +
        'being handled',
        goog.style.isElementShown(popup.getElement()));
    // Verify that current anchor is set before dispatching BEFORE_SHOW.
    assertNotNullNorUndefined(popup.getAttachedElement());
    assertEquals('The attached anchor element is incorrect',
        target.element_, popup.getAttachedElement());
    beforeShowPopupCalled = true;
    return showPopup;

  };
  function onShowPopup(e) {
    assertEquals('The attached anchor element is incorrect',
        target.element_, popup.getAttachedElement());
  };

  handler.listen(popup,
                 goog.ui.Menu.EventType.BEFORE_SHOW,
                 beforeShowPopup);
  handler.listen(popup,
                 goog.ui.Menu.EventType.SHOW,
                 onShowPopup);

  beforeShowPopupCalled = false;
  showPopup = false;
  popup.showMenu(target, 0, 0);
  assertTrue('BEFORE_SHOW event handler should be called on #showMenu',
      beforeShowPopupCalled);
  assertFalse('The element should not be shown when BEFORE_SHOW handler ' +
      'returned false',
      goog.style.isElementShown(popup.getElement()));

  beforeShowPopupCalled = false;
  showPopup = true;
  popup.showMenu(target, 0, 0);
  assertTrue('The element should be shown when BEFORE_SHOW handler ' +
      'returned true',
      goog.style.isElementShown(popup.getElement()));
}


/**
 * Test the behavior of {@link PopupMenu.isAttachTarget}.
 */
function testIsAttachTarget() {
  // Before 'attach' is called.
  assertFalse('Menu should not be attached to the element',
      popup.isAttachTarget(anchor));

  popup.attach(anchor);
  assertTrue('Menu should be attached to the anchor',
      popup.isAttachTarget(anchor));

  popup.detach(anchor);
  assertFalse('Menu is expected to be detached from the element',
      popup.isAttachTarget(anchor));
}


/**
 * Tests the behavior of {@link PopupMenu.createAttachTarget}.
 */
function testCreateAttachTarget() {
  // Randomly picking parameters.
  var targetCorner = goog.positioning.Corner.TOP_END;
  var menuCorner = goog.positioning.Corner.BOTTOM_LEFT;
  var contextMenu = false;   // Show menu on mouse down event.
  var margin = new goog.math.Box(0, 10, 5, 25);

  // Simply setting the required parameters.
  var target = popup.createAttachTarget(anchor);
  assertTrue(popup.isAttachTarget(anchor));
  assertTarget(target, anchor, undefined, undefined,
      goog.events.EventType.MOUSEDOWN, undefined);

  // Creating another target with all the parameters.
  target = popup.createAttachTarget(anchor, targetCorner, menuCorner,
      contextMenu, margin);
  assertTrue(popup.isAttachTarget(anchor));
  assertTarget(target, anchor, targetCorner, menuCorner,
      goog.events.EventType.MOUSEDOWN, margin);

  // Finally, switch up the 'contextMenu'
  target = popup.createAttachTarget(anchor, undefined, undefined,
      true /*opt_contextMenu*/, undefined);
  assertTarget(target, anchor, undefined, undefined,
      goog.events.EventType.CONTEXTMENU, undefined);
}


/**
 * Tests the behavior of {@link PopupMenu.getAttachTarget}.
 */
function testGetAttachTarget() {
  // Before the menu is attached to the anchor.
  var target = popup.getAttachTarget(anchor);
  assertTrue('Not expecting a target before the element is attach to the menu',
      target == null);

  // Randomly picking parameters.
  var targetCorner = goog.positioning.Corner.TOP_END;
  var menuCorner = goog.positioning.Corner.BOTTOM_LEFT;
  var contextMenu = false;   // Show menu on mouse down event.
  var margin = new goog.math.Box(0, 10, 5, 25);

  popup.attach(anchor, targetCorner, menuCorner, contextMenu, margin);
  target = popup.getAttachTarget(anchor);
  assertTrue('Failed to get target after attaching element to menu',
      target != null);

  // Make sure we got the right target back.
  assertTarget(target, anchor, targetCorner, menuCorner,
      goog.events.EventType.MOUSEDOWN, margin);
}

function testSmallViewportSliding() {
  popup.getElement().style.position = 'absolute';
  popup.getElement().style.outline = '1px solid blue';
  var item = new goog.ui.MenuItem('Test Item');
  popup.addChild(item, true);
  item.getElement().style.overflow = 'hidden';

  var viewport = goog.style.getClientViewportElement();
  var viewportRect = goog.style.getVisibleRectForElement(viewport);

  var middlePos = Math.floor((viewportRect.right - viewportRect.left) / 2);
  var leftwardPos = Math.floor((viewportRect.right - viewportRect.left) / 3);
  var rightwardPos =
      Math.floor((viewportRect.right - viewportRect.left) / 3 * 2);

  // Can interpret these positions as widths relative to the viewport as well.
  var smallWidth = leftwardPos;
  var mediumWidth = middlePos;
  var largeWidth = rightwardPos;

  // Test small menu first.  This should be small enough that it will display
  // its upper left corner where we tell it to in all three positions.
  popup.getElement().style.width = smallWidth + 'px';

  var target = popup.createAttachTarget(anchor);
  popup.attach(anchor);

  popup.showMenu(target, leftwardPos, 0);
  assertObjectEquals(
      'Popup in wrong position: small size, leftward pos',
      new goog.math.Coordinate(leftwardPos, 0),
      goog.style.getPosition(popup.getElement()));

  popup.showMenu(target, middlePos, 0);
  assertObjectEquals(
      'Popup in wrong position: small size, middle pos',
      new goog.math.Coordinate(middlePos, 0),
      goog.style.getPosition(popup.getElement()));

  popup.showMenu(target, rightwardPos, 0);
  assertObjectEquals(
      'Popup in wrong position: small size, rightward pos',
      new goog.math.Coordinate(rightwardPos, 0),
      goog.style.getPosition(popup.getElement()));

  // Test medium menu next.  This should display with its upper left corner
  // at the target when leftward and middle, but on the right it should
  // position its upper right corner at the target instead.
  popup.getElement().style.width = mediumWidth + 'px';

  popup.showMenu(target, leftwardPos, 0);
  assertObjectEquals(
      'Popup in wrong position: medium size, leftward pos',
      new goog.math.Coordinate(leftwardPos, 0),
      goog.style.getPosition(popup.getElement()));

  popup.showMenu(target, middlePos, 0);
  assertObjectEquals(
      'Popup in wrong position: medium size, middle pos',
      new goog.math.Coordinate(middlePos, 0),
      goog.style.getPosition(popup.getElement()));

  popup.showMenu(target, rightwardPos, 0);
  assertObjectEquals(
      'Popup in wrong position: medium size, rightward pos',
      new goog.math.Coordinate(rightwardPos - mediumWidth, 0),
      goog.style.getPosition(popup.getElement()));

  // Test large menu next.  This should display with its upper left corner at
  // the target when leftward, and its upper right corner at the target when
  // rightward, but right in the middle neither corner can be at the target and
  // keep the entire menu onscreen, so it should place its upper right corner
  // at the very right edge of the viewport.
  popup.getElement().style.width = largeWidth + 'px';
  popup.showMenu(target, leftwardPos, 0);
  assertObjectEquals(
      'Popup in wrong position: large size, leftward pos',
      new goog.math.Coordinate(leftwardPos, 0),
      goog.style.getPosition(popup.getElement()));

  popup.showMenu(target, middlePos, 0);
  assertObjectEquals(
      'Popup in wrong position: large size, middle pos',
      new goog.math.Coordinate(
          viewportRect.right - viewportRect.left - largeWidth, 0),
      goog.style.getPosition(popup.getElement()));

  popup.showMenu(target, rightwardPos, 0);
  assertObjectEquals(
      'Popup in wrong position: large size, rightward pos',
      new goog.math.Coordinate(rightwardPos - largeWidth, 0),
      goog.style.getPosition(popup.getElement()));

  // Make sure that the menu still displays correctly if we give the target
  // a target corner.  We can't set the overflow policy in that case, but it
  // should still display.
  popup.detach(anchor);
  anchor.style.position = 'absolute';
  anchor.style.left = '24px';
  anchor.style.top = '24px';
  var targetCorner = goog.positioning.Corner.TOP_END;
  target = popup.createAttachTarget(anchor, targetCorner);
  popup.attach(anchor, targetCorner);
  popup.getElement().style.width = smallWidth + 'px';
  popup.showMenu(target, leftwardPos, 0);
  assertObjectEquals(
      'Popup in wrong position: small size, leftward pos, with target corner',
      new goog.math.Coordinate(24, 24),
      goog.style.getPosition(popup.getElement()));
}