sku-pg
Version:
Skulpt is a Javascript implementation of Python 2.x. Python that runs in your browser!
238 lines (193 loc) • 7.64 kB
HTML
<html>
<!--
Copyright 2009 The Closure Library Authors. All Rights Reserved.
Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<!--
@author zhyder@google.com (Zohair Hyder)
-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Closure Unit Tests - goog.ui.SelectionMenuButton</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.ui.SelectionMenuButton');
</script>
</head>
<body>
<script>
var selectionMenuButton;
var clonedSelectionMenuButtonDom;
function setUp() {
clonedSelectionMenuButtonDom =
goog.dom.getElement('demoSelectionMenuButton').cloneNode(true);
selectionMenuButton = new goog.ui.SelectionMenuButton();
}
function tearDown() {
selectionMenuButton.dispose();
var element = goog.dom.getElement('demoSelectionMenuButton');
element.parentNode.replaceChild(clonedSelectionMenuButtonDom, element);
}
/**
* Open the menu and click on the menu item inside.
*/
function testBasicButtonBehavior() {
var node = goog.dom.getElement('demoSelectionMenuButton');
selectionMenuButton.decorate(node);
goog.testing.events.fireClickSequence(node);
assertTrue('Menu must open after click', selectionMenuButton.isOpen());
var menuItemClicked = 0;
var lastMenuItemClicked = null;
goog.events.listen(selectionMenuButton.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',
selectionMenuButton.isOpen());
assertEquals('Number of menu items clicked should be 1', 1, menuItemClicked);
assertEquals('menuItem2 should be the last menuitem clicked', menuItem2,
lastMenuItemClicked.getElement());
}
/**
* Tests that the checkbox fires the same events as the first 2 items.
*/
function testCheckboxFireEvents() {
var node = goog.dom.getElement('demoSelectionMenuButton');
selectionMenuButton.decorate(node);
var menuItemClicked = 0;
var lastMenuItemClicked = null;
goog.events.listen(selectionMenuButton.getMenu(),
goog.ui.Component.EventType.ACTION,
function(e) {
menuItemClicked++;
lastMenuItemClicked = e.target;
});
var checkbox = goog.dom.getElement('demoCheckbox');
assertFalse('Checkbox must be unchecked (i.e. unselected)', checkbox.checked);
checkbox.checked = true;
goog.testing.events.fireClickSequence(checkbox);
assertFalse('Menu must be closed when clicking checkbox',
selectionMenuButton.isOpen());
assertEquals('Number of menu items clicked should be 1', 1, menuItemClicked);
assertEquals('menuItem1 should be the last menuitem clicked',
goog.dom.getElement('menuItem1'),
lastMenuItemClicked.getElement());
checkbox.checked = false;
goog.testing.events.fireClickSequence(checkbox);
assertFalse('Menu must be closed when clicking checkbox',
selectionMenuButton.isOpen());
assertEquals('Number of menu items clicked should be 2', 2, menuItemClicked);
assertEquals('menuItem2 should be the last menuitem clicked',
goog.dom.getElement('menuItem2'), lastMenuItemClicked.getElement());
}
/**
* Tests that the checkbox state gets updated when the first 2 events fire
*/
function testCheckboxReceiveEvents() {
var node = goog.dom.getElement('demoSelectionMenuButton');
selectionMenuButton.decorate(node);
var checkbox = goog.dom.getElement('demoCheckbox');
assertFalse('Checkbox must be unchecked (i.e. unselected)', checkbox.checked);
goog.testing.events.fireClickSequence(goog.dom.getElement('menuItem1'));
assertTrue('Checkbox must be checked (i.e. selected)', checkbox.checked);
goog.testing.events.fireClickSequence(goog.dom.getElement('menuItem2'));
assertFalse('Checkbox must be unchecked (i.e. unselected)', checkbox.checked);
}
/**
* Tests that set/getSelectionState correctly changes the state
*/
function testSelectionState() {
var node = goog.dom.getElement('demoSelectionMenuButton');
selectionMenuButton.decorate(node);
var checkbox = goog.dom.getElement('demoCheckbox');
assertFalse('Checkbox must be unchecked (i.e. unselected)', checkbox.checked);
selectionMenuButton.setSelectionState(
goog.ui.SelectionMenuButton.SelectionState.ALL);
assertTrue('Checkbox should be checked when selecting all', checkbox.checked);
assertEquals('selectionState should be ALL',
selectionMenuButton.getSelectionState(),
goog.ui.SelectionMenuButton.SelectionState.ALL);
selectionMenuButton.setSelectionState(
goog.ui.SelectionMenuButton.SelectionState.NONE);
assertFalse('Checkbox should be checked when selecting all',
checkbox.checked);
assertEquals('selectionState should be NONE',
selectionMenuButton.getSelectionState(),
goog.ui.SelectionMenuButton.SelectionState.NONE);
selectionMenuButton.setSelectionState(
goog.ui.SelectionMenuButton.SelectionState.SOME);
assertTrue('Checkbox should be checked when selecting all', checkbox.checked);
assertEquals('selectionState should be SOME',
selectionMenuButton.getSelectionState(),
goog.ui.SelectionMenuButton.SelectionState.SOME);
}
/**
* Tests that the checkbox gets disabled when the button is disabled
*/
function testCheckboxDisabled() {
var node = goog.dom.getElement('demoSelectionMenuButton');
selectionMenuButton.decorate(node);
var checkbox = goog.dom.getElement('demoCheckbox');
assertFalse('Checkbox must be enabled', checkbox.disabled);
selectionMenuButton.setEnabled(false);
assertTrue('Checkbox must be disabled', checkbox.disabled);
selectionMenuButton.setEnabled(true);
assertFalse('Checkbox must be enabled', checkbox.disabled);
}
/**
* Tests that clicking the checkbox does not open the menu
*/
function testCheckboxClickMenuClosed() {
var node = goog.dom.getElement('demoSelectionMenuButton');
selectionMenuButton.decorate(node);
var checkbox = goog.dom.getElement('demoCheckbox');
goog.testing.events.fireMouseDownEvent(checkbox);
assertFalse('Menu must be closed when mousedown checkbox',
selectionMenuButton.isOpen());
goog.testing.events.fireMouseUpEvent(checkbox);
assertFalse('Menu must remain closed when mouseup checkbox',
selectionMenuButton.isOpen());
selectionMenuButton.setOpen(true);
goog.testing.events.fireClickSequence(checkbox);
assertFalse('Menu must close when clickin checkbox',
selectionMenuButton.isOpen());
}
</script>
<p>
Here's a selectionmenu defined in markup:
</p>
<div id="demoSelectionMenuButton" class="goog-selectionmenubutton-button">
<input id="demoCheckbox" class="goog-selectionmenubutton-checkbox" type="checkbox"></input>
<div id="demoMenu" class="goog-menu">
<div id='menuItem1' class="goog-menuitem">All</div>
<div id='menuItem2' class="goog-menuitem">None</div>
<div id='menuItem3' class="goog-menuitem">Read</div>
<div id='menuItem4' class="goog-menuitem">Unread</div>
</div>
</div>
<div id="footer"></div>
</body>
</html>