sku-pg
Version:
Skulpt is a Javascript implementation of Python 2.x. Python that runs in your browser!
253 lines (206 loc) • 8.1 kB
HTML
<html>
<!--
Copyright 2011 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.
-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Closure Unit Tests - goog.ui.LabelInput</title>
<script src="../base.js"></script>
<script>
goog.require('goog.dom');
goog.require('goog.a11y.aria');
goog.require('goog.a11y.aria.State');
goog.require('goog.dom.classlist');
goog.require('goog.events.EventType');
goog.require('goog.testing.MockClock');
goog.require('goog.testing.events');
goog.require('goog.testing.jsunit');
goog.require('goog.ui.LabelInput');
goog.require('goog.userAgent');
</script>
</head>
<body>
<input id="i" type="text"></input>
<input id="p" type="text" placeholder="browser-ignorant placeholder"></input>
<script>
var labelInput;
var mockClock;
function setUp() {
mockClock = new goog.testing.MockClock(true);
}
function tearDown() {
mockClock.dispose();
labelInput.dispose();
}
function testGetLabel() {
labelInput = new goog.ui.LabelInput();
assertEquals('no label', '', labelInput.getLabel());
labelInput = new goog.ui.LabelInput('search');
assertEquals('label is given in the ctor', 'search', labelInput.getLabel());
}
function testSetLabel() {
labelInput = new goog.ui.LabelInput();
labelInput.setLabel('search');
assertEquals('label is set', 'search', labelInput.getLabel());
// When browsers support the placeholder attribute, we use that instead of
// the value property - and this test will fail.
if (isPlaceholderSupported()) {
return;
}
labelInput.createDom();
labelInput.enterDocument();
mockClock.tick(10);
assertEquals('label is rendered', 'search', labelInput.getElement().value);
assertNotNull(labelInput.getElement());
assertEquals('label should have aria-label attribute \'search\'', 'search',
goog.a11y.aria.getState(labelInput.getElement(),
goog.a11y.aria.State.LABEL));
labelInput.setLabel('new label');
assertEquals('label is updated', 'new label', labelInput.getElement().value);
assertEquals('label should have aria-label attribute \'new label\'',
'new label', goog.a11y.aria.getState(labelInput.getElement(),
goog.a11y.aria.State.LABEL));
}
function testPlaceholderAttribute() {
labelInput = new goog.ui.LabelInput();
labelInput.setLabel('search');
// Some browsers don't support the placeholder attribute, in which case we
// this test will fail.
if (! isPlaceholderSupported()) {
return;
}
labelInput.createDom();
labelInput.enterDocument();
mockClock.tick(10);
assertEquals('label should have placeholder attribute \'search\'', 'search',
labelInput.getElement().placeholder);
labelInput.setLabel('new label');
assertEquals('label should have aria-label attribute \'new label\'',
'new label', labelInput.getElement().placeholder);
}
function testDecorateElementWithExistingPlaceholderAttribute() {
labelInput = new goog.ui.LabelInput();
labelInput.setLabel('search');
labelInput.decorate(goog.dom.getElement('p'));
labelInput.enterDocument();
mockClock.tick(10);
// The presence of an existing placeholder doesn't necessarily mean the
// browser supports placeholders. Make sure labels are used for browsers
// without placeholder support:
if (isPlaceholderSupported()) {
assertEquals('label should have placeholder attribute \'search\'', 'search',
labelInput.getElement().placeholder);
} else {
assertNotNull(labelInput.getElement());
assertEquals('label is rendered', 'search', labelInput.getElement().value);
assertEquals('label should have aria-label attribute \'search\'', 'search',
goog.a11y.aria.getState(labelInput.getElement(),
goog.a11y.aria.State.LABEL));
}
}
function testDecorateElementWithFocus() {
labelInput = new goog.ui.LabelInput();
labelInput.setLabel('search');
var decoratedElement = goog.dom.getElement('i');
decoratedElement.value = '';
decoratedElement.focus();
labelInput.decorate(decoratedElement);
labelInput.enterDocument();
mockClock.tick(10);
assertEquals('label for pre-focused input should not have LABEL_CLASS_NAME',
-1,
labelInput.getElement().className.indexOf(labelInput.LABEL_CLASS_NAME));
if (!isPlaceholderSupported()) {
assertEquals('label rendered for pre-focused element',
'', labelInput.getElement().value);
// NOTE(user): element.blur() doesn't seem to trigger the BLUR event in
// IE in the test environment. This could be related to the IE issues with
// testClassName() below.
goog.testing.events.fireBrowserEvent(
new goog.testing.events.Event(
goog.events.EventType.BLUR, decoratedElement));
mockClock.tick(10);
assertEquals('label not rendered for blurred element',
'search', labelInput.getElement().value);
}
}
function testDecorateElementWithFocusDelay() {
if (isPlaceholderSupported()) {
return; // Delay only affects the older browsers.
}
var placeholder = 'search';
labelInput = new goog.ui.LabelInput();
labelInput.setLabel(placeholder);
var delay = 150;
labelInput.labelRestoreDelayMs = delay;
var decoratedElement = goog.dom.getElement('i');
decoratedElement.value = '';
decoratedElement.focus();
labelInput.decorate(decoratedElement);
labelInput.enterDocument();
// wait for all initial setup to settle
mockClock.tick(delay);
// NOTE(user): element.blur() doesn't seem to trigger the BLUR event in
// IE in the test environment. This could be related to the IE issues with
// testClassName() below.
goog.testing.events.fireBrowserEvent(
new goog.testing.events.Event(
goog.events.EventType.BLUR, decoratedElement));
mockClock.tick(delay - 1);
assertEquals('label should not be restored before labelRestoreDelay',
'', labelInput.getElement().value);
mockClock.tick(1);
assertEquals('label not rendered for blurred element with labelRestoreDelay',
placeholder, labelInput.getElement().value);
}
function testClassName() {
labelInput = new goog.ui.LabelInput();
// IE always fails this test, suspect it is a focus issue.
if (goog.userAgent.IE) {
return;
}
// FF does not perform focus if the window is not active in the first place.
if (goog.userAgent.GECKO && document.hasFocus && !document.hasFocus()) {
return;
}
labelInput.decorate(goog.dom.getElement('i'));
labelInput.setLabel('search');
var el = labelInput.getElement();
assertTrue('label before focus should have LABEL_CLASS_NAME',
goog.dom.classlist.contains(el, labelInput.LABEL_CLASS_NAME));
labelInput.getElement().focus();
assertFalse('label after focus should not have LABEL_CLASS_NAME',
goog.dom.classlist.contains(el, labelInput.LABEL_CLASS_NAME));
labelInput.getElement().blur();
assertTrue('label after blur should have LABEL_CLASS_NAME',
goog.dom.classlist.contains(el, labelInput.LABEL_CLASS_NAME));
}
function isPlaceholderSupported() {
if (goog.dom.getElement('i').placeholder != null) {
return true;
}
}
function testEnable() {
labelInput = new goog.ui.LabelInput();
labelInput.createDom();
labelInput.enterDocument();
var labelElement = labelInput.getElement();
var disabledClass = goog.getCssName(labelInput.LABEL_CLASS_NAME, 'disabled');
assertTrue('label should be enabled', labelInput.isEnabled());
assertFalse('label should not have the disabled class',
goog.dom.classlist.contains(labelElement, disabledClass));
labelInput.setEnabled(false);
assertFalse('label should be disabled', labelInput.isEnabled());
assertTrue('label should have the disabled class',
goog.dom.classlist.contains(labelElement, disabledClass));
labelInput.setEnabled(true);
assertTrue('label should be enabled', labelInput.isEnabled());
assertFalse('label should not have the disabled class',
goog.dom.classlist.contains(labelElement, disabledClass));
}
</script>
</body>
</html>