sku-pg
Version:
Skulpt is a Javascript implementation of Python 2.x. Python that runs in your browser!
293 lines (254 loc) • 10.2 kB
HTML
<html>
<!--
Copyright 2008 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 gboyer@google.com (Garrett Boyer)
-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Closure Unit Tests - goog.ui.ComboBox</title>
<style type='text/css'>
.goog-menu {
position: absolute;
}
</style>
<script src="../base.js"></script>
<script>
goog.require('goog.dom');
goog.require('goog.dom.TagName');
goog.require('goog.dom.classlist');
goog.require('goog.events');
goog.require('goog.events.KeyCodes');
goog.require('goog.testing.MockClock');
goog.require('goog.testing.events');
goog.require('goog.testing.jsunit');
goog.require('goog.ui.ComboBox');
</script>
</head>
<body>
<h2 style="color:red">
This test is rudimentary.
The fact that it passes should not (yet) make you too confident.
</h2>
<div id="combo">
</div>
<div id="menu">
<div class="goog-combobox-item">Red</div>
<div class="goog-combobox-item">Green</div>
<div class="goog-combobox-item">Blue</div>
</div>
<script>
var comboBox;
var input;
function setUp() {
goog.dom.getElement('combo').innerHTML = '';
comboBox = new goog.ui.ComboBox();
comboBox.setDefaultText('Select a color...');
comboBox.addItem(new goog.ui.ComboBoxItem('Red'));
comboBox.addItem(new goog.ui.ComboBoxItem('Maroon'));
comboBox.addItem(new goog.ui.ComboBoxItem('Gre<en'));
comboBox.addItem(new goog.ui.ComboBoxItem('Blue'));
comboBox.addItem(new goog.ui.ComboBoxItem('Royal Blue'));
comboBox.addItem(new goog.ui.ComboBoxItem('Yellow'));
comboBox.addItem(new goog.ui.ComboBoxItem('Magenta'));
comboBox.addItem(new goog.ui.ComboBoxItem('Mouve'));
comboBox.addItem(new goog.ui.ComboBoxItem('Grey'));
comboBox.render(goog.dom.getElement('combo'));
input = comboBox.getInputElement();
}
function tearDown() {
comboBox.dispose();
goog.events.removeAllNativeListeners();
}
function testInputElementAttributes() {
var comboBox = new goog.ui.ComboBox();
comboBox.setFieldName('a_form_field');
comboBox.createDom();
var inputElement = comboBox.getInputElement();
assertEquals('text', inputElement.type);
assertEquals('a_form_field', inputElement.name);
assertEquals('off', inputElement.autocomplete);
comboBox.dispose();
}
function testSetDefaultText() {
assertEquals('Select a color...', comboBox.getDefaultText());
comboBox.setDefaultText('new default text...');
assertEquals('new default text...', comboBox.getDefaultText());
assertEquals('new default text...', comboBox.labelInput_.getLabel());
}
function testGetMenu() {
assertTrue('Menu should be instance of goog.ui.Menu',
comboBox.getMenu() instanceof goog.ui.Menu);
assertEquals('Menu should have correct number of children',
9, comboBox.getMenu().getChildCount());
}
function testMenuBeginsInvisible() {
assertFalse('Menu should begin invisible', comboBox.getMenu().isVisible());
}
function testClickCausesPopup() {
goog.testing.events.fireClickSequence(input);
assertTrue('Menu becomes visible after click',
comboBox.getMenu().isVisible());
}
function testUpKeyCausesPopup() {
goog.testing.events.fireKeySequence(input, goog.events.KeyCodes.UP);
assertTrue('Menu becomes visible after UP key',
comboBox.getMenu().isVisible());
}
function testActionSelectsItem() {
comboBox.getMenu().getItemAt(2).dispatchEvent(
goog.ui.Component.EventType.ACTION);
assertEquals('Gre<en', input.value);
}
function testActionSelectsItemWithModel() {
var itemWithModel = new goog.ui.MenuItem('one', 1);
comboBox.addItem(itemWithModel);
itemWithModel.dispatchEvent(goog.ui.Component.EventType.ACTION);
assertEquals('one', comboBox.getValue());
}
function testRedisplayMenuAfterBackspace() {
input.value = 'mx';
comboBox.onInputEvent_();
input.value = 'm';
comboBox.onInputEvent_();
assertEquals('Three items should be displayed',
3, comboBox.getNumberOfVisibleItems_());
}
function testExternallyCreatedMenu() {
var menu = new goog.ui.Menu();
menu.decorate(goog.dom.getElement('menu'));
assertTrue('Menu items should be instances of goog.ui.ComboBoxItem',
menu.getChildAt(0) instanceof goog.ui.ComboBoxItem);
comboBox = new goog.ui.ComboBox(null, menu);
comboBox.render(goog.dom.getElement('combo'));
input = comboBox.getElement().getElementsByTagName(
goog.dom.TagName.INPUT)[0];
menu.getItemAt(2).dispatchEvent(
goog.ui.Component.EventType.ACTION);
assertEquals('Blue', input.value);
}
function testRecomputeVisibleCountAfterChangingItems() {
input.value = 'Black';
comboBox.onInputEvent_();
assertEquals('No items should be displayed',
0, comboBox.getNumberOfVisibleItems_());
comboBox.addItem(new goog.ui.ComboBoxItem('Black'));
assertEquals('One item should be displayed',
1, comboBox.getNumberOfVisibleItems_());
input.value = 'Red';
comboBox.onInputEvent_();
assertEquals('One item should be displayed',
1, comboBox.getNumberOfVisibleItems_());
comboBox.removeItemAt(0); // Red
assertEquals('No items should be displayed',
0, comboBox.getNumberOfVisibleItems_());
}
function testSetEnabled() {
// By default, everything should be enabled.
assertFalse('Text input should initially not be disabled', input.disabled);
assertFalse('Text input should initially not look disabled',
goog.dom.classlist.contains(input,
goog.getCssName(goog.ui.LabelInput.prototype.LABEL_CLASS_NAME,
'disabled')));
assertFalse('Combo box should initially not look disabled',
goog.dom.classlist.contains(comboBox.getElement(),
goog.getCssName('goog-combobox-disabled')));
goog.testing.events.fireClickSequence(comboBox.getElement());
assertTrue('Menu initially becomes visible after click',
comboBox.getMenu().isVisible());
goog.testing.events.fireClickSequence(document);
assertFalse('Menu initially becomes invisible after document click',
comboBox.getMenu().isVisible());
comboBox.setEnabled(false);
assertTrue('Text input should be disabled after being disabled',
input.disabled);
assertTrue('Text input should appear disabled after being disabled',
goog.dom.classlist.contains(input,
goog.getCssName(goog.ui.LabelInput.prototype.LABEL_CLASS_NAME,
'disabled')));
assertTrue('Combo box should appear disabled after being disabled',
goog.dom.classlist.contains(comboBox.getElement(),
goog.getCssName('goog-combobox-disabled')));
goog.testing.events.fireClickSequence(comboBox.getElement());
assertFalse('Menu should not become visible after click if disabled',
comboBox.getMenu().isVisible());
comboBox.setEnabled(true);
assertFalse('Text input should not be disabled after being re-enabled',
input.disabled);
assertFalse('Text input should not appear disabled after being re-enabled',
goog.dom.classlist.contains(input,
goog.getCssName(goog.ui.LabelInput.prototype.LABEL_CLASS_NAME,
'disabled')));
assertFalse('Combo box should not appear disabled after being re-enabled',
goog.dom.classlist.contains(comboBox.getElement(),
goog.getCssName('goog-combobox-disabled')));
goog.testing.events.fireClickSequence(comboBox.getElement());
assertTrue('Menu becomes visible after click when re-enabled',
comboBox.getMenu().isVisible());
goog.testing.events.fireClickSequence(document);
assertFalse('Menu becomes invisible after document click when re-enabled',
comboBox.getMenu().isVisible());
}
function testSetFormatFromToken() {
var item = new goog.ui.ComboBoxItem('ABc');
item.setFormatFromToken('b');
var div = goog.dom.createDom('div');
new goog.ui.ControlRenderer().setContent(div, item.getContent());
assertTrue(div.innerHTML == 'A<b>B</b>c' || div.innerHTML == 'A<B>B</B>c');
}
function testSetValue() {
var clock = new goog.testing.MockClock(/* autoInstall */ true);
// Get the input focus. Note that both calls are needed to correctly
// simulate the focus (and setting document.activeElement) across all
// browsers.
input.focus();
goog.testing.events.fireClickSequence(input);
// Simulate text input.
input.value = 'Black';
comboBox.onInputEvent_();
clock.tick();
assertEquals('No items should be displayed',
0, comboBox.getNumberOfVisibleItems_());
assertFalse('Menu should be invisible', comboBox.getMenu().isVisible());
// Programmatic change with the input focus causes the menu visibility to
// change if needed.
comboBox.setValue('Blue');
clock.tick();
assertTrue('Menu should be visible1', comboBox.getMenu().isVisible());
assertEquals('One item should be displayed',
1, comboBox.getNumberOfVisibleItems_());
// Simulate user input to ensure all the items are invisible again, then
// blur away.
input.value = 'Black';
comboBox.onInputEvent_();
clock.tick();
input.blur();
document.body.focus();
clock.tick(goog.ui.ComboBox.BLUR_DISMISS_TIMER_MS);
assertEquals('No items should be displayed',
0, comboBox.getNumberOfVisibleItems_());
assertFalse('Menu should be invisible', comboBox.getMenu().isVisible());
// Programmatic change without the input focus does not pop up the menu,
// but still updates the list of visible items within it.
comboBox.setValue('Blue');
clock.tick();
assertFalse('Menu should be invisible', comboBox.getMenu().isVisible());
assertEquals('Menu should contain one item',
1, comboBox.getNumberOfVisibleItems_());
// Click on the combobox. The entire menu becomes visible, the last item
// (programmatically) set is highlighted.
goog.testing.events.fireClickSequence(comboBox.getElement());
assertTrue('Menu should be visible2', comboBox.getMenu().isVisible());
assertEquals('All items should be displayed',
comboBox.getMenu().getItemCount(), comboBox.getNumberOfVisibleItems_());
assertEquals('The last item set should be highlighted',
/* Blue= */ 3, comboBox.getMenu().getHighlightedIndex());
clock.uninstall();
}
</script>
</body>
</html>