sku-pg
Version:
Skulpt is a Javascript implementation of Python 2.x. Python that runs in your browser!
403 lines (343 loc) • 13.8 kB
HTML
<html>
<!--
Copyright 2008 The Closure Library Authors. All Rights Reserved.
Use of this source code is governed by an Apache 2.0 License.
See the COPYING file for details.
-->
<!--
@author nicksantos@google.com (Nick Santos)
-->
<head>
<title>Closure Unit Tests - goog.ui.MenuButton</title>
<style type='text/css'>
.goog-menu {
position: absolute;
color: #aaa;
}
</style>
<script src="../base.js"></script>
<script>
goog.require('goog.Timer');
goog.require('goog.dom');
goog.require('goog.events');
goog.require('goog.events.Event');
goog.require('goog.events.KeyCodes');
goog.require('goog.positioning');
goog.require('goog.positioning.Overflow');
goog.require('goog.style');
goog.require('goog.testing.PropertyReplacer');
goog.require('goog.testing.events');
goog.require('goog.testing.jsunit');
goog.require('goog.testing.recordFunction');
goog.require('goog.ui.Menu');
goog.require('goog.ui.MenuButton');
</script>
</head>
<body>
<iframe id="iframe1" src="menubutton_test_frame.html" width="400" height="400">
</iframe>
<script>
var menuButton;
var clonedMenuButtonDom;
// Mock out goog.positioning.positionAtCoordinate to always ignore failure when
// the window is too small, since we don't care about the viewport size on
// the selenium farm.
// TODO(nicksantos): Move this into a common location if we ever have enough
// code for a general goog.testing.ui library.
var originalPositionAtCoordinate = goog.positioning.positionAtCoordinate;
goog.positioning.positionAtCoordinate = function(absolutePos, movableElement,
movableElementCorner, opt_margin, opt_viewport, opt_overflow,
opt_preferredSize) {
return originalPositionAtCoordinate.call(this, absolutePos, movableElement,
movableElementCorner, opt_margin, opt_viewport,
goog.positioning.Overflow.IGNORE, opt_preferredSize);
};
function MyFakeEvent(keyCode) {
this.type = goog.events.KeyHandler.EventType.KEY;
this.keyCode = keyCode;
this.preventDefault = goog.nullFunction;
this.stopPropagation = goog.nullFunction;
}
function setUp() {
clonedMenuButtonDom = goog.dom.getElement('demoMenuButton').cloneNode(true);
menuButton = new goog.ui.MenuButton();
}
function tearDown() {
menuButton.dispose();
var element = goog.dom.getElement('demoMenuButton');
element.parentNode.replaceChild(clonedMenuButtonDom, element);
}
/**
* Open the menu and click on the menu item inside.
*/
function testBasicButtonBehavior() {
var node = goog.dom.getElement('demoMenuButton');
menuButton.decorate(node);
goog.testing.events.fireClickSequence(node);
assertTrue('Menu must open after click', menuButton.isOpen());
var menuItemClicked = 0;
var lastMenuItemClicked = null;
goog.events.listen(menuButton.getMenu(),
goog.ui.Component.EventType.ACTION,
function(e) {
menuItemClicked++;
lastMenuItemClicked = e.target
});
var menuItem2 = goog.dom.getElement('menuItem2');
goog.testing.events.fireClickSequence(menuItem2);
assertFalse('Menu must close on clicking when open', menuButton.isOpen());
assertEquals('Number of menu items clicked should be 1', 1, menuItemClicked);
assertEquals('menuItem2 should be the last menuitem clicked', menuItem2,
lastMenuItemClicked.getElement());
}
/**
* Open the menu, highlight first menuitem and then the second.
* Check if the aria-activedescendant property is set correctly.
*/
function testHighlightItemBehavior() {
if (goog.userAgent.GECKO) {
var node = goog.dom.getElement('demoMenuButton');
menuButton.decorate(node);
goog.testing.events.fireClickSequence(node);
assertTrue('Menu must open after click', menuButton.isOpen());
menuButton.handleKeyEvent(new MyFakeEvent(goog.events.KeyCodes.DOWN));
assertEquals('First menuitem must be the aria-activedescendant',
'menuItem1', goog.dom.a11y.getState(menuButton.getElement(),
goog.dom.a11y.State.ACTIVEDESCENDANT));
menuButton.handleKeyEvent(new MyFakeEvent(goog.events.KeyCodes.DOWN));
assertEquals('Second menuitem must be the aria-activedescendant',
'menuItem2', goog.dom.a11y.getState(menuButton.getElement(),
goog.dom.a11y.State.ACTIVEDESCENDANT));
}
}
/**
* Open the menu and click on the menu item inside after exiting and entering
* the document once, to test proper setup/teardown behavior of MenuButton.
*/
function testButtonAfterEnterDocument() {
var node = goog.dom.getElement('demoMenuButton');
menuButton.decorate(node);
menuButton.exitDocument();
menuButton.enterDocument();
goog.testing.events.fireClickSequence(node);
assertTrue('Menu must open after click', menuButton.isOpen());
var menuItem2 = goog.dom.getElement('menuItem2');
goog.testing.events.fireClickSequence(menuItem2);
assertFalse('Menu must close on clicking when open', menuButton.isOpen());
}
/**
* Renders the menu button, moves its menu and then repositions to make sure the
* position is more or less ok.
*/
function testPositionMenu() {
var node = goog.dom.getElement('demoMenuButton');
menuButton.decorate(node);
var menu = menuButton.getMenu();
menu.setVisible(true, true);
// Move to 500, 500
menu.setPosition(500, 500);
// Now reposition and make sure position is more or less ok.
menuButton.positionMenu();
var menuNode = goog.dom.getElement('demoMenu');
assertRoughlyEquals(menuNode.offsetTop, node.offsetTop + node.offsetHeight,
20);
assertRoughlyEquals(menuNode.offsetLeft, node.offsetLeft, 20);
}
/**
* Tests that calling positionMenu when the menu is not in the document does not
* throw an exception.
*/
function testPositionMenuNotInDocument() {
var menu = new goog.ui.Menu();
menu.createDom();
menuButton.setMenu(menu);
menuButton.positionMenu();
}
/**
* Shows the menu and moves the menu button, a timer correct the menu position.
*/
function testOpenedMenuPositionCorrection() {
var iframe = goog.dom.getElement('iframe1');
var iframeDoc = goog.dom.getFrameContentDocument(iframe);
var iframeDom = goog.dom.getDomHelper(iframeDoc);
var iframeWindow = goog.dom.getWindow(iframeDoc);
var button = new goog.ui.MenuButton();
iframeWindow.scrollTo(0, 0);
var node = iframeDom.getElement('demoMenuButton');
button.decorate(node);
var mockTimer = new goog.Timer();
// Don't start the timer. We manually dispatch the Tick event.
mockTimer.start = goog.nullFunction;
button.timer_ = mockTimer;
var replacer = new goog.testing.PropertyReplacer();
var positionMenuCalled;
var origPositionMenu = goog.bind(button.positionMenu, button);
replacer.set(button, 'positionMenu', function() {
positionMenuCalled = true;
origPositionMenu();
});
// Show the menu.
button.setOpen(true);
// Confirm the menu position
var menuNode = iframeDom.getElement('demoMenu');
assertRoughlyEquals(menuNode.offsetTop, node.offsetTop + node.offsetHeight,
20);
assertRoughlyEquals(menuNode.offsetLeft, node.offsetLeft, 20);
positionMenuCalled = false;
// A Tick event is dispatched.
mockTimer.dispatchEvent(goog.Timer.TICK);
assertFalse('positionMenu() shouldn\'t be called.', positionMenuCalled);
// Move the menu button by DOM structure change
var p1 = iframeDom.createDom('p', null, iframeDom.createTextNode('foo'));
var p2 = iframeDom.createDom('p', null, iframeDom.createTextNode('foo'));
var p3 = iframeDom.createDom('p', null, iframeDom.createTextNode('foo'));
iframeDom.insertSiblingBefore(p1, node);
iframeDom.insertSiblingBefore(p2, node);
iframeDom.insertSiblingBefore(p3, node);
// Confirm the menu is detached from the button.
assertTrue(Math.abs(node.offsetTop + node.offsetHeight -
menuNode.offsetTop) > 20);
positionMenuCalled = false;
// A Tick event is dispatched.
mockTimer.dispatchEvent(goog.Timer.TICK);
assertTrue('positionMenu() should be called.', positionMenuCalled);
// The menu is moved to appropriate position again.
assertRoughlyEquals(menuNode.offsetTop, node.offsetTop + node.offsetHeight,
20);
// Make the frame page scrollable.
var viewportHeight = iframeDom.getViewportSize().height;
var footer = iframeDom.getElement('footer');
goog.style.setSize(footer, 1, viewportHeight * 2);
// Change the viewport offset.
iframeWindow.scrollTo(0, viewportHeight);
// A Tick event is dispatched and positionMenu() should be called.
positionMenuCalled = false;
mockTimer.dispatchEvent(goog.Timer.TICK);
assertTrue('positionMenu() should be called.', positionMenuCalled);
goog.style.setSize(footer, 1, 1);
// Tear down.
iframeDom.removeNode(p1);
iframeDom.removeNode(p2);
iframeDom.removeNode(p3);
replacer.reset();
button.dispose();
}
/**
* Tests that space, and only space, fire on key up.
*/
function testSpaceFireOnKeyUp() {
var node = goog.dom.getElement('demoMenuButton');
menuButton.decorate(node);
e = new goog.events.Event(goog.events.KeyHandler.EventType.KEY, menuButton);
e.preventDefault = goog.testing.recordFunction();
e.keyCode = goog.events.KeyCodes.SPACE;
menuButton.handleKeyEvent(e);
assertFalse('Menu must not have been triggered by Space keypress',
menuButton.isOpen());
assertNotNull('Page scrolling is prevented', e.preventDefault.getLastCall());
e = new goog.events.Event(goog.events.EventType.KEYUP, menuButton);
e.keyCode = goog.events.KeyCodes.SPACE;
menuButton.handleKeyEvent(e);
assertTrue('Menu must have been triggered by Space keyup',
menuButton.isOpen());
menuButton.getMenu().setHighlightedIndex(0);
e = new goog.events.Event(goog.events.KeyHandler.EventType.KEY, menuButton);
e.keyCode = goog.events.KeyCodes.DOWN;
menuButton.handleKeyEvent(e);
assertEquals('Highlighted menu item must have hanged by Down keypress',
1,
menuButton.getMenu().getHighlightedIndex());
menuButton.getMenu().setHighlightedIndex(0);
e = new goog.events.Event(goog.events.EventType.KEYUP, menuButton);
e.keyCode = goog.events.KeyCodes.DOWN;
menuButton.handleKeyEvent(e);
assertEquals('Highlighted menu item must not have changed by Down keyup',
0,
menuButton.getMenu().getHighlightedIndex());
}
/**
* Tests that preventing the button from closing also prevents the menu from
* being hidden.
*/
function testPreventHide() {
var node = goog.dom.getElement('demoMenuButton');
menuButton.decorate(node);
menuButton.setDispatchTransitionEvents(goog.ui.Component.State.OPENED, true);
// Show the menu.
menuButton.setOpen(true);
assertTrue('Menu button should be open.', menuButton.isOpen());
assertTrue('Menu should be visible.', menuButton.getMenu().isVisible());
var key = goog.events.listen(menuButton,
goog.ui.Component.EventType.CLOSE,
function(event) { event.preventDefault(); });
// Try to hide the menu.
menuButton.setOpen(false);
assertTrue('Menu button should still be open.', menuButton.isOpen());
assertTrue('Menu should still be visible.', menuButton.getMenu().isVisible());
// Remove listener and try again.
goog.events.unlistenByKey(key);
menuButton.setOpen(false);
assertFalse('Menu button should not be open.', menuButton.isOpen());
assertFalse('Menu should not be visible.', menuButton.getMenu().isVisible());
}
/**
* Tests that opening and closing the menu does not affect how adding or
* removing menu items changes the size of the menu.
*/
function testResizeOnItemAddOrRemove() {
var node = goog.dom.getElement('demoMenuButton');
menuButton.decorate(node);
var menu = menuButton.getMenu();
// Show the menu.
menuButton.setOpen(true);
var originalSize = goog.style.getSize(menu.getElement());
// Check that removing an item while the menu is left open correctly changes
// the size of the menu.
// Remove an item using a method on Menu.
var item = menu.removeChildAt(0, true);
// Confirm size of menu changed.
var afterRemoveSize = goog.style.getSize(menu.getElement());
assertTrue('Height of menu must decrease after removing a menu item.',
afterRemoveSize.height < originalSize.height);
// Check that removing an item while the menu is closed, then opened
// (so that reposition is called) correctly changes the size of the menu.
// Hide menu.
menuButton.setOpen(false);
var item2 = menu.removeChildAt(0, true);
menuButton.setOpen(true);
// Confirm size of menu changed.
var afterRemoveAgainSize = goog.style.getSize(menu.getElement());
assertTrue('Height of menu must decrease after removing a second menu item.',
afterRemoveAgainSize.height < afterRemoveSize.height);
// Check that adding an item while the menu is opened, then closed, then
// opened, correctly changes the size of the menu.
// Add an item, this time using a MenuButton method.
menuButton.setOpen(true);
menuButton.addItem(item2);
menuButton.setOpen(false);
menuButton.setOpen(true);
// Confirm size of menu changed.
var afterAddSize = goog.style.getSize(menu.getElement());
assertTrue('Height of menu must increase after adding a menu item.',
afterRemoveAgainSize.height < afterAddSize.height);
assertEquals(
'Removing and adding back items must not change the height of a menu.',
afterRemoveSize.height, afterAddSize.height);
// Add back the last item to keep state consistent.
menuButton.addItem(item);
}
</script>
<p>
Here's a menubutton defined in markup:
</p>
<div id="demoMenuButton" class="goog-menu-button">
<div id="demoMenu" class="goog-menu">
<div id='menuItem1' class="goog-menuitem">Annual Report.pdf</div>
<div id='menuItem2' class="goog-menuitem">Quarterly Update.pdf</div>
<div id='menuItem3' class="goog-menuitem">Enemies List.txt</div>
</div>
</div>
<div id="footer"></div>
</body>
</html>