goog.ui.checkbox_test.js Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of google-closure-library
Show all versions of google-closure-library
The Google Closure Library is a collection of JavaScript code
designed for use with the Google Closure JavaScript Compiler.
This non-official distribution was prepared by the ClojureScript
team at http://clojure.org/
// Copyright 2009 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.CheckboxTest');
goog.setTestOnly('goog.ui.CheckboxTest');
goog.require('goog.a11y.aria');
goog.require('goog.a11y.aria.Role');
goog.require('goog.a11y.aria.State');
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.events');
goog.require('goog.testing.jsunit');
goog.require('goog.ui.Checkbox');
goog.require('goog.ui.CheckboxRenderer');
goog.require('goog.ui.Component');
goog.require('goog.ui.ControlRenderer');
goog.require('goog.ui.decorate');
var checkbox;
function setUp() {
checkbox = new goog.ui.Checkbox();
}
function tearDown() {
checkbox.dispose();
}
function testClassNames() {
checkbox.createDom();
checkbox.setChecked(false);
assertSameElements(
'classnames of unchecked checkbox',
['goog-checkbox', 'goog-checkbox-unchecked'],
goog.dom.classlist.get(checkbox.getElement()));
checkbox.setChecked(true);
assertSameElements(
'classnames of checked checkbox',
['goog-checkbox', 'goog-checkbox-checked'],
goog.dom.classlist.get(checkbox.getElement()));
checkbox.setChecked(null);
assertSameElements(
'classnames of partially checked checkbox',
['goog-checkbox', 'goog-checkbox-undetermined'],
goog.dom.classlist.get(checkbox.getElement()));
checkbox.setEnabled(false);
assertSameElements(
'classnames of partially checked disabled checkbox',
['goog-checkbox', 'goog-checkbox-undetermined', 'goog-checkbox-disabled'],
goog.dom.classlist.get(checkbox.getElement()));
}
function testIsEnabled() {
assertTrue('enabled by default', checkbox.isEnabled());
checkbox.setEnabled(false);
assertFalse('has been disabled', checkbox.isEnabled());
}
function testCheckedState() {
assertTrue(
'unchecked by default', !checkbox.isChecked() && checkbox.isUnchecked() &&
!checkbox.isUndetermined());
checkbox.setChecked(true);
assertTrue(
'set to checked', checkbox.isChecked() && !checkbox.isUnchecked() &&
!checkbox.isUndetermined());
checkbox.setChecked(null);
assertTrue(
'set to partially checked', !checkbox.isChecked() &&
!checkbox.isUnchecked() && checkbox.isUndetermined());
}
function testToggle() {
checkbox.setChecked(null);
checkbox.toggle();
assertTrue('undetermined -> checked', checkbox.getChecked());
checkbox.toggle();
assertFalse('checked -> unchecked', checkbox.getChecked());
checkbox.toggle();
assertTrue('unchecked -> checked', checkbox.getChecked());
}
function testEvents() {
checkbox.render();
var events = [];
goog.events.listen(
checkbox,
[
goog.ui.Component.EventType.ACTION, goog.ui.Component.EventType.CHECK,
goog.ui.Component.EventType.UNCHECK, goog.ui.Component.EventType.CHANGE
],
function(e) { events.push(e.type); });
checkbox.setEnabled(false);
goog.testing.events.fireClickSequence(checkbox.getElement());
assertArrayEquals('disabled => no events', [], events);
assertFalse('checked state did not change', checkbox.getChecked());
events = [];
checkbox.setEnabled(true);
goog.testing.events.fireClickSequence(checkbox.getElement());
assertArrayEquals(
'ACTION+CHECK+CHANGE fired',
[
goog.ui.Component.EventType.ACTION, goog.ui.Component.EventType.CHECK,
goog.ui.Component.EventType.CHANGE
],
events);
assertTrue('checkbox became checked', checkbox.getChecked());
events = [];
goog.testing.events.fireClickSequence(checkbox.getElement());
assertArrayEquals(
'ACTION+UNCHECK+CHANGE fired',
[
goog.ui.Component.EventType.ACTION, goog.ui.Component.EventType.UNCHECK,
goog.ui.Component.EventType.CHANGE
],
events);
assertFalse('checkbox became unchecked', checkbox.getChecked());
events = [];
goog.events.listen(checkbox, goog.ui.Component.EventType.CHECK, function(e) {
e.preventDefault();
});
goog.testing.events.fireClickSequence(checkbox.getElement());
assertArrayEquals(
'ACTION+CHECK fired',
[goog.ui.Component.EventType.ACTION, goog.ui.Component.EventType.CHECK],
events);
assertFalse('toggling has been prevented', checkbox.getChecked());
}
function testCheckboxAriaLabelledby() {
var label = goog.dom.createElement(goog.dom.TagName.DIV);
var label2 = goog.dom.createElement(
goog.dom.TagName.DIV, {id: checkbox.makeId('foo')});
document.body.appendChild(label);
document.body.appendChild(label2);
try {
checkbox.setChecked(false);
checkbox.setLabel(label);
checkbox.render(label);
assertNotNull(checkbox.getElement());
assertEquals(
label.id, goog.a11y.aria.getState(
checkbox.getElement(), goog.a11y.aria.State.LABELLEDBY));
checkbox.setLabel(label2);
assertEquals(
label2.id, goog.a11y.aria.getState(
checkbox.getElement(), goog.a11y.aria.State.LABELLEDBY));
} finally {
document.body.removeChild(label);
document.body.removeChild(label2);
}
}
function testLabel() {
var label = goog.dom.createElement(goog.dom.TagName.DIV);
document.body.appendChild(label);
try {
checkbox.setChecked(false);
checkbox.setLabel(label);
checkbox.render(label);
// Clicking on label toggles checkbox.
goog.testing.events.fireClickSequence(label);
assertTrue(
'checkbox toggled if the label is clicked', checkbox.getChecked());
goog.testing.events.fireClickSequence(checkbox.getElement());
assertFalse('checkbox toggled if it is clicked', checkbox.getChecked());
// Test that mouse events on the label have the correct effect on the
// checkbox state when it is enabled.
checkbox.setEnabled(true);
goog.testing.events.fireMouseOverEvent(label);
assertTrue(checkbox.hasState(goog.ui.Component.State.HOVER));
assertContains(
'checkbox gets hover state on mouse over', 'goog-checkbox-hover',
goog.dom.classlist.get(checkbox.getElement()));
goog.testing.events.fireMouseDownEvent(label);
assertTrue(checkbox.hasState(goog.ui.Component.State.ACTIVE));
assertContains(
'checkbox gets active state on label mousedown', 'goog-checkbox-active',
goog.dom.classlist.get(checkbox.getElement()));
goog.testing.events.fireMouseOutEvent(checkbox.getElement());
assertFalse(checkbox.hasState(goog.ui.Component.State.HOVER));
assertNotContains(
'checkbox does not have hover state after mouse out',
'goog-checkbox-hover', goog.dom.classlist.get(checkbox.getElement()));
assertFalse(checkbox.hasState(goog.ui.Component.State.ACTIVE));
assertNotContains(
'checkbox does not have active state after mouse out',
'goog-checkbox-active', goog.dom.classlist.get(checkbox.getElement()));
// Test label mouse events on disabled checkbox.
checkbox.setEnabled(false);
goog.testing.events.fireMouseOverEvent(label);
assertFalse(checkbox.hasState(goog.ui.Component.State.HOVER));
assertNotContains(
'disabled checkbox does not get hover state on mouseover',
'goog-checkbox-hover', goog.dom.classlist.get(checkbox.getElement()));
goog.testing.events.fireMouseDownEvent(label);
assertFalse(checkbox.hasState(goog.ui.Component.State.ACTIVE));
assertNotContains(
'disabled checkbox does not get active state mousedown',
'goog-checkbox-active', goog.dom.classlist.get(checkbox.getElement()));
goog.testing.events.fireMouseOutEvent(checkbox.getElement());
assertFalse(checkbox.hasState(goog.ui.Component.State.ACTIVE));
assertNotContains(
'checkbox does not get stuck in hover state', 'goog-checkbox-hover',
goog.dom.classlist.get(checkbox.getElement()));
// Making the label null prevents it from affecting checkbox state.
checkbox.setEnabled(true);
checkbox.setLabel(null);
goog.testing.events.fireClickSequence(label);
assertFalse('label element deactivated', checkbox.getChecked());
goog.testing.events.fireClickSequence(checkbox.getElement());
assertTrue('checkbox still active', checkbox.getChecked());
} finally {
document.body.removeChild(label);
}
}
function testLabel_setAgain() {
var label = goog.dom.createElement(goog.dom.TagName.DIV);
document.body.appendChild(label);
try {
checkbox.setChecked(false);
checkbox.setLabel(label);
checkbox.render(label);
checkbox.getElement().focus();
checkbox.setLabel(label);
assertEquals(
'checkbox should not have lost focus', checkbox.getElement(),
document.activeElement);
} finally {
document.body.removeChild(label);
}
}
function testConstructor() {
assertEquals(
'state is unchecked', goog.ui.Checkbox.State.UNCHECKED,
checkbox.getChecked());
var testCheckboxWithState =
new goog.ui.Checkbox(goog.ui.Checkbox.State.UNDETERMINED);
assertNotNull('checkbox created with custom state', testCheckboxWithState);
assertEquals(
'checkbox state is undetermined', goog.ui.Checkbox.State.UNDETERMINED,
testCheckboxWithState.getChecked());
testCheckboxWithState.dispose();
}
function testCustomRenderer() {
var cssClass = 'my-custom-checkbox';
var renderer = goog.ui.ControlRenderer.getCustomRenderer(
goog.ui.CheckboxRenderer, cssClass);
var customCheckbox = new goog.ui.Checkbox(undefined, undefined, renderer);
customCheckbox.createDom();
assertElementsEquals(
['my-custom-checkbox', 'my-custom-checkbox-unchecked'],
goog.dom.classlist.get(customCheckbox.getElement()));
customCheckbox.setChecked(true);
assertElementsEquals(
['my-custom-checkbox', 'my-custom-checkbox-checked'],
goog.dom.classlist.get(customCheckbox.getElement()));
customCheckbox.setChecked(null);
assertElementsEquals(
['my-custom-checkbox', 'my-custom-checkbox-undetermined'],
goog.dom.classlist.get(customCheckbox.getElement()));
customCheckbox.dispose();
}
function testGetAriaRole() {
checkbox.createDom();
assertNotNull(checkbox.getElement());
assertEquals(
"Checkbox's ARIA role should be 'checkbox'", goog.a11y.aria.Role.CHECKBOX,
goog.a11y.aria.getRole(checkbox.getElement()));
}
function testCreateDomUpdateAriaState() {
checkbox.createDom();
assertNotNull(checkbox.getElement());
assertEquals(
'Checkbox must have default false ARIA state aria-checked', 'false',
goog.a11y.aria.getState(
checkbox.getElement(), goog.a11y.aria.State.CHECKED));
checkbox.setChecked(goog.ui.Checkbox.State.CHECKED);
assertEquals(
'Checkbox must have true ARIA state aria-checked', 'true',
goog.a11y.aria.getState(
checkbox.getElement(), goog.a11y.aria.State.CHECKED));
checkbox.setChecked(goog.ui.Checkbox.State.UNCHECKED);
assertEquals(
'Checkbox must have false ARIA state aria-checked', 'false',
goog.a11y.aria.getState(
checkbox.getElement(), goog.a11y.aria.State.CHECKED));
checkbox.setChecked(goog.ui.Checkbox.State.UNDETERMINED);
assertEquals(
'Checkbox must have mixed ARIA state aria-checked', 'mixed',
goog.a11y.aria.getState(
checkbox.getElement(), goog.a11y.aria.State.CHECKED));
}
function testDecorateUpdateAriaState() {
var decorateSpan = goog.dom.getElement('decorate');
checkbox.decorate(decorateSpan);
assertEquals(
'Checkbox must have default false ARIA state aria-checked', 'false',
goog.a11y.aria.getState(
checkbox.getElement(), goog.a11y.aria.State.CHECKED));
checkbox.setChecked(goog.ui.Checkbox.State.CHECKED);
assertEquals(
'Checkbox must have true ARIA state aria-checked', 'true',
goog.a11y.aria.getState(
checkbox.getElement(), goog.a11y.aria.State.CHECKED));
checkbox.setChecked(goog.ui.Checkbox.State.UNCHECKED);
assertEquals(
'Checkbox must have false ARIA state aria-checked', 'false',
goog.a11y.aria.getState(
checkbox.getElement(), goog.a11y.aria.State.CHECKED));
checkbox.setChecked(goog.ui.Checkbox.State.UNDETERMINED);
assertEquals(
'Checkbox must have mixed ARIA state aria-checked', 'mixed',
goog.a11y.aria.getState(
checkbox.getElement(), goog.a11y.aria.State.CHECKED));
}
function testSpaceKey() {
var normalSpan = goog.dom.getElement('normal');
checkbox.decorate(normalSpan);
assertEquals(
'default state is unchecked', goog.ui.Checkbox.State.UNCHECKED,
checkbox.getChecked());
goog.testing.events.fireKeySequence(normalSpan, goog.events.KeyCodes.SPACE);
assertEquals(
'SPACE toggles checkbox to be checked', goog.ui.Checkbox.State.CHECKED,
checkbox.getChecked());
goog.testing.events.fireKeySequence(normalSpan, goog.events.KeyCodes.SPACE);
assertEquals(
'another SPACE toggles checkbox to be unchecked',
goog.ui.Checkbox.State.UNCHECKED, checkbox.getChecked());
// Enter for example doesn't work
goog.testing.events.fireKeySequence(normalSpan, goog.events.KeyCodes.ENTER);
assertEquals(
'Enter leaves checkbox unchecked', goog.ui.Checkbox.State.UNCHECKED,
checkbox.getChecked());
}
function testSpaceKeyFiresEvents() {
var normalSpan = goog.dom.getElement('normal');
checkbox.decorate(normalSpan);
var events = [];
goog.events.listen(
checkbox,
[
goog.ui.Component.EventType.ACTION, goog.ui.Component.EventType.CHECK,
goog.ui.Component.EventType.UNCHECK, goog.ui.Component.EventType.CHANGE
],
function(e) { events.push(e.type); });
assertEquals(
'Unexpected default state.', goog.ui.Checkbox.State.UNCHECKED,
checkbox.getChecked());
goog.testing.events.fireKeySequence(normalSpan, goog.events.KeyCodes.SPACE);
assertArrayEquals(
'Unexpected events fired when checking with spacebar.',
[
goog.ui.Component.EventType.ACTION, goog.ui.Component.EventType.CHECK,
goog.ui.Component.EventType.CHANGE
],
events);
assertEquals(
'Unexpected state after checking.', goog.ui.Checkbox.State.CHECKED,
checkbox.getChecked());
events = [];
goog.testing.events.fireKeySequence(normalSpan, goog.events.KeyCodes.SPACE);
assertArrayEquals(
'Unexpected events fired when unchecking with spacebar.',
[
goog.ui.Component.EventType.ACTION, goog.ui.Component.EventType.UNCHECK,
goog.ui.Component.EventType.CHANGE
],
events);
assertEquals(
'Unexpected state after unchecking.', goog.ui.Checkbox.State.UNCHECKED,
checkbox.getChecked());
events = [];
goog.events.listenOnce(
checkbox, goog.ui.Component.EventType.CHECK,
function(e) { e.preventDefault(); });
goog.testing.events.fireKeySequence(normalSpan, goog.events.KeyCodes.SPACE);
assertArrayEquals(
'Unexpected events fired when checking with spacebar and ' +
'the check event is cancelled.',
[goog.ui.Component.EventType.ACTION, goog.ui.Component.EventType.CHECK],
events);
assertEquals(
'Unexpected state after check event is cancelled.',
goog.ui.Checkbox.State.UNCHECKED, checkbox.getChecked());
}
function testDecorate() {
var normalSpan = goog.dom.getElement('normal');
var checkedSpan = goog.dom.getElement('checked');
var uncheckedSpan = goog.dom.getElement('unchecked');
var undeterminedSpan = goog.dom.getElement('undetermined');
var disabledSpan = goog.dom.getElement('disabled');
validateCheckBox(normalSpan, goog.ui.Checkbox.State.UNCHECKED);
validateCheckBox(checkedSpan, goog.ui.Checkbox.State.CHECKED);
validateCheckBox(uncheckedSpan, goog.ui.Checkbox.State.UNCHECKED);
validateCheckBox(undeterminedSpan, goog.ui.Checkbox.State.UNDETERMINED);
validateCheckBox(disabledSpan, goog.ui.Checkbox.State.UNCHECKED, true);
}
function validateCheckBox(span, state, opt_disabled) {
var testCheckbox = goog.ui.decorate(span);
assertNotNull('checkbox created', testCheckbox);
assertEquals(
'decorate was successful', goog.ui.Checkbox, testCheckbox.constructor);
assertEquals(
'checkbox state should be: ' + state, state, testCheckbox.getChecked());
assertEquals(
'checkbox is ' + (!opt_disabled ? 'enabled' : 'disabled'), !opt_disabled,
testCheckbox.isEnabled());
testCheckbox.dispose();
}
function testSetAriaLabel() {
assertNull(
'Checkbox must not have aria label by default', checkbox.getAriaLabel());
checkbox.setAriaLabel('Checkbox 1');
checkbox.render();
var el = checkbox.getElementStrict();
assertEquals(
'Checkbox element must have expected aria-label', 'Checkbox 1',
el.getAttribute('aria-label'));
assertEquals(
'Checkbox element must have expected aria-role', 'checkbox',
el.getAttribute('role'));
checkbox.setAriaLabel('Checkbox 2');
assertEquals(
'Checkbox element must have updated aria-label', 'Checkbox 2',
el.getAttribute('aria-label'));
assertEquals(
'Checkbox element must have expected aria-role', 'checkbox',
el.getAttribute('role'));
}
© 2015 - 2025 Weber Informatics LLC | Privacy Policy