sku-pg
Version:
Skulpt is a Javascript implementation of Python 2.x. Python that runs in your browser!
607 lines (527 loc) • 38.1 kB
HTML
<html>
<!--
Copyright 2010 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.ac.Renderer</title>
<script src="../../base.js"></script>
<script>
goog.require('goog.dom');
goog.require('goog.a11y.aria');
goog.require('goog.a11y.aria.Role');
goog.require('goog.a11y.aria.State');
goog.require('goog.events');
goog.require('goog.functions');
goog.require('goog.fx.dom.FadeInAndShow');
goog.require('goog.fx.dom.FadeOutAndHide');
goog.require('goog.string');
goog.require('goog.style');
goog.require('goog.testing.PropertyReplacer');
goog.require('goog.testing.events');
goog.require('goog.testing.jsunit');
goog.require('goog.ui.ac.Renderer');
</script>
</head>
<body>
<div id="someElement">Click target</div>
<div id="target">Target</div>
<script>
var renderer;
var rendRows = [];
var someElement = goog.dom.getElement('someElement');
var target = goog.dom.getElement('target');
var propertyReplacer = new goog.testing.PropertyReplacer();
// One-time set up of rows formatted for the renderer.
var rows = [
'Amanda Annie Anderson',
'Frankie Manning',
'Louis D Armstrong',
// NOTE(user): sorry about this test input, but it has caused problems
// in the past, so I want to make sure to test against it.
'Foo Bar................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................'
];
for (var i = 0; i < rows.length; i++) {
rendRows.push({
id: i,
data: rows[i]
});
}
function setUp() {
renderer = new goog.ui.ac.Renderer();
renderer.rowDivs_ = [];
renderer.target_ = target;
}
function tearDown() {
renderer.dispose();
propertyReplacer.reset();
}
function testBasicStringTokenHighlightingUsingUniversalMatching() {
var row = rendRows[0]; // 'Amanda Annie Anderson'
renderer.setMatchWordBoundary(false);
// Should highlight first match only.
var token = 'A';
var node = renderer.renderRowHtml(row, token);
var boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 1);
assertPreviousNodeText(boldTagElArray[0], '');
assertHighlightedText(boldTagElArray[0], 'A');
assertLastNodeText(node, 'manda Annie Anderson');
// Match should be case insensitive, and should match tokens in the
// middle of words if useWordMatching is turned off ("an" in Amanda).
var token = 'an';
var node = renderer.renderRowHtml(row, token);
var boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 1);
assertPreviousNodeText(boldTagElArray[0], 'Am');
assertHighlightedText(boldTagElArray[0], 'an');
assertLastNodeText(node, 'da Annie Anderson');
// Should only match on non-empty strings.
token = '';
node = renderer.renderRowHtml(row, token);
boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 0);
assertLastNodeText(node, 'Amanda Annie Anderson');
// Should not match leading whitespace.
token = ' an';
node = renderer.renderRowHtml(row, token);
boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 0);
assertLastNodeText(node, 'Amanda Annie Anderson');
}
function testBasicStringTokenHighlighting() {
var row = rendRows[0]; // 'Amanda Annie Anderson'
// Should highlight first match only.
var token = 'A';
var node = renderer.renderRowHtml(row, token);
var boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 1);
assertPreviousNodeText(boldTagElArray[0], '');
assertHighlightedText(boldTagElArray[0], 'A');
assertLastNodeText(node, 'manda Annie Anderson');
// Should only match on non-empty strings.
token = '';
node = renderer.renderRowHtml(row, token);
boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 0);
assertLastNodeText(node, 'Amanda Annie Anderson');
// Match should be case insensitive, and should not match tokens in the
// middle of words ("an" in Amanda).
token = 'an';
node = renderer.renderRowHtml(row, token);
boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 1);
assertPreviousNodeText(boldTagElArray[0], 'Amanda ');
assertHighlightedText(boldTagElArray[0], 'An');
assertLastNodeText(node, 'nie Anderson');
// Should not match whitespace.
token = ' ';
node = renderer.renderRowHtml(row, token);
boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 0);
assertLastNodeText(node, 'Amanda Annie Anderson');
// Should not match leading whitespace since all matches are at the start of
// word boundaries.
token = ' an';
node = renderer.renderRowHtml(row, token);
boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 0);
assertLastNodeText(node, 'Amanda Annie Anderson');
// Should match trailing whitespace.
token = 'annie ';
node = renderer.renderRowHtml(row, token);
boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 1);
assertPreviousNodeText(boldTagElArray[0], 'Amanda ');
assertHighlightedText(boldTagElArray[0], 'Annie ');
assertLastNodeText(node, 'Anderson');
// Should match across whitespace.
row = rendRows[2]; // 'Louis D Armstrong'
token = 'd a';
node = renderer.renderRowHtml(row, token);
boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 1);
assertPreviousNodeText(boldTagElArray[0], 'Louis ');
assertHighlightedText(boldTagElArray[0], 'D A');
assertLastNodeText(node, 'rmstrong');
// Should match the last token.
token = 'aRmStRoNg';
node = renderer.renderRowHtml(row, token);
boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 1);
assertPreviousNodeText(boldTagElArray[0], 'Louis D ');
assertHighlightedText(boldTagElArray[0], 'Armstrong');
assertLastNodeText(node, '');
}
// The name of this function is fortuitous, in that it gets tested
// last on FF. The lazy regexp on FF is particularly slow, and causes
// the test to take a long time, and sometimes time out when run on forge
// because it triggers the test runner to go back to the event loop...
function testPathologicalInput() {
// Should not hang on bizarrely long strings
var row = rendRows[3]; // pathological row
var token = 'foo';
var node = renderer.renderRowHtml(row, token);
var boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 1);
assertHighlightedText(boldTagElArray[0], 'Foo');
assert(goog.string.startsWith(
boldTagElArray[0].nextSibling.nodeValue, ' Bar...'));
}
function testBasicArrayTokenHighlighting() {
var row = rendRows[1]; // 'Frankie Manning'
// Only the first match in the array should be highlighted.
var token = ['f', 'm'];
var node = renderer.renderRowHtml(row, token);
var boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 1);
assertPreviousNodeText(boldTagElArray[0], '');
assertHighlightedText(boldTagElArray[0], 'F');
assertLastNodeText(node, 'rankie Manning');
// Only the first match in the array should be highlighted.
token = ['m', 'f'];
node = renderer.renderRowHtml(row, token);
boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 1);
assertPreviousNodeText(boldTagElArray[0], 'Frankie ');
assertHighlightedText(boldTagElArray[0], 'M');
assertLastNodeText(node, 'anning');
// Skip tokens that do not match.
token = ['asdf', 'f'];
node = renderer.renderRowHtml(row, token);
boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 1);
assertPreviousNodeText(boldTagElArray[0], '');
assertHighlightedText(boldTagElArray[0], 'F');
assertLastNodeText(node, 'rankie Manning');
// Highlight nothing if no tokens match.
token = ['Foo', 'bar', 'baz'];
node = renderer.renderRowHtml(row, token);
boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 0);
assertLastNodeText(node, 'Frankie Manning');
// Empty array should not match.
token = [];
node = renderer.renderRowHtml(row, token);
boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 0);
assertLastNodeText(node, 'Frankie Manning');
// Empty string in array should not match.
token = [''];
node = renderer.renderRowHtml(row, token);
boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 0);
assertLastNodeText(node, 'Frankie Manning');
// Whitespace in array should not match.
token = [' '];
node = renderer.renderRowHtml(row, token);
boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 0);
assertLastNodeText(node, 'Frankie Manning');
// Whitespace entries in array should not match.
token = [' ', 'man'];
node = renderer.renderRowHtml(row, token);
boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 1);
assertPreviousNodeText(boldTagElArray[0], 'Frankie ');
assertHighlightedText(boldTagElArray[0], 'Man');
assertLastNodeText(node, 'ning');
// Whitespace in array entry should match as a whole token.
row = rendRows[2]; // 'Louis D Armstrong'
token = ['d arm', 'lou'];
node = renderer.renderRowHtml(row, token);
boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 1);
assertPreviousNodeText(boldTagElArray[0], 'Louis ');
assertHighlightedText(boldTagElArray[0], 'D Arm');
assertLastNodeText(node, 'strong');
}
function testHighlightAllTokensSingleTokenHighlighting() {
renderer.setHighlightAllTokens(true);
var row = rendRows[0]; // 'Amanda Annie Anderson'
// All matches at the start of the word should be highlighted when
// highlightAllTokens is set.
var token = 'a';
var node = renderer.renderRowHtml(row, token);
var boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 3);
assertPreviousNodeText(boldTagElArray[0], '');
assertHighlightedText(boldTagElArray[0], 'A');
assertPreviousNodeText(boldTagElArray[1], 'manda ');
assertHighlightedText(boldTagElArray[1], 'A');
assertPreviousNodeText(boldTagElArray[2], 'nnie ');
assertHighlightedText(boldTagElArray[2], 'A');
assertLastNodeText(node, 'nderson');
// Should not match on empty string.
token = '';
node = renderer.renderRowHtml(row, token);
boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 0);
assertLastNodeText(node, 'Amanda Annie Anderson');
// Match should be case insensitive.
token = 'AN';
node = renderer.renderRowHtml(row, token);
boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 2);
assertPreviousNodeText(boldTagElArray[0], 'Amanda ');
assertHighlightedText(boldTagElArray[0], 'An');
assertPreviousNodeText(boldTagElArray[1], 'nie ');
assertHighlightedText(boldTagElArray[1], 'An');
assertLastNodeText(node, 'derson');
// Should not match on whitespace.
token = ' ';
node = renderer.renderRowHtml(row, token);
boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 0);
assertLastNodeText(node, 'Amanda Annie Anderson');
// When highlighting all tokens, should match despite leading whitespace.
token = ' am';
node = renderer.renderRowHtml(row, token);
boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 1);
assertPreviousNodeText(boldTagElArray[0], '');
assertHighlightedText(boldTagElArray[0], 'Am');
assertLastNodeText(node, 'anda Annie Anderson');
// Should match with trailing whitepsace.
token = 'ann ';
node = renderer.renderRowHtml(row, token);
boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 1);
assertPreviousNodeText(boldTagElArray[0], 'Amanda ');
assertHighlightedText(boldTagElArray[0], 'Ann');
assertLastNodeText(node, 'ie Anderson');
}
function testHighlightAllTokensMultipleStringTokenHighlighting() {
renderer.setHighlightAllTokens(true);
var row = rendRows[1]; // 'Frankie Manning'
// Each individual space-separated token should match.
var token = 'm F';
var node = renderer.renderRowHtml(row, token);
var boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 2);
assertPreviousNodeText(boldTagElArray[0], '');
assertHighlightedText(boldTagElArray[0], 'F');
assertPreviousNodeText(boldTagElArray[1], 'rankie ');
assertHighlightedText(boldTagElArray[1], 'M');
assertLastNodeText(node, 'anning');
}
function testHighlightAllTokensArrayTokenHighlighting() {
renderer.setHighlightAllTokens(true);
var row = rendRows[0]; // 'Amanda Annie Anderson'
// All tokens in the array should match.
var token = ['AM', 'AN'];
var node = renderer.renderRowHtml(row, token);
var boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 3);
assertPreviousNodeText(boldTagElArray[0], '');
assertHighlightedText(boldTagElArray[0], 'Am');
assertPreviousNodeText(boldTagElArray[1], 'anda ');
assertHighlightedText(boldTagElArray[1], 'An');
assertPreviousNodeText(boldTagElArray[2], 'nie ');
assertHighlightedText(boldTagElArray[2], 'An');
assertLastNodeText(node, 'derson');
// Empty array should not match.
token = [];
node = renderer.renderRowHtml(row, token);
boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 0);
assertLastNodeText(node, 'Amanda Annie Anderson');
// Empty string in array should not match.
token = [''];
node = renderer.renderRowHtml(row, token);
boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 0);
assertLastNodeText(node, 'Amanda Annie Anderson');
// Whitespace in array should not match.
token = [' '];
node = renderer.renderRowHtml(row, token);
boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 0);
assertLastNodeText(node, 'Amanda Annie Anderson');
// Empty string entries in array should not match.
token = ['', 'Ann'];
node = renderer.renderRowHtml(row, token);
boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 1);
assertPreviousNodeText(boldTagElArray[0], 'Amanda ');
assertHighlightedText(boldTagElArray[0], 'Ann');
assertLastNodeText(node, 'ie Anderson');
// Whitespace entries in array should not match.
token = [' ', 'And'];
node = renderer.renderRowHtml(row, token);
boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 1);
assertPreviousNodeText(boldTagElArray[0], 'Amanda Annie ');
assertHighlightedText(boldTagElArray[0], 'And');
assertLastNodeText(node, 'erson');
// Whitespace in array entry should match as a whole token.
token = ['annie a', 'Am'];
node = renderer.renderRowHtml(row, token);
var boldTagElArray = node.getElementsByTagName('b');
assertNumBoldTags(boldTagElArray, 2);
assertPreviousNodeText(boldTagElArray[0], '');
assertHighlightedText(boldTagElArray[0], 'Am');
assertPreviousNodeText(boldTagElArray[1], 'anda ');
assertHighlightedText(boldTagElArray[1], 'Annie A');
assertLastNodeText(node, 'nderson');
}
function testMenuFadeDuration() {
var hideCalled = false;
var hideAnimCalled = false;
var showCalled = false;
var showAnimCalled = false;
propertyReplacer.set(goog.style, 'setElementShown', function(el, state) {
if (state) {
showCalled = true;
} else {
hideCalled = true;
}
});
propertyReplacer.set(goog.fx.dom.FadeInAndShow.prototype, 'play',
function() {
showAnimCalled = true;
});
propertyReplacer.set(goog.fx.dom.FadeOutAndHide.prototype, 'play',
function() {
hideAnimCalled = true;
});
// Default behavior does show/hide but not animations.
renderer.show();
assertTrue(showCalled);
assertFalse(showAnimCalled);
renderer.dismiss();
assertTrue(hideCalled);
assertFalse(hideAnimCalled);
// But animations can be turned on.
showCalled = false;
hideCalled = false;
renderer.setMenuFadeDuration(100);
renderer.show();
assertFalse(showCalled);
assertTrue(showAnimCalled);
renderer.dismiss();
assertFalse(hideCalled);
assertTrue(hideAnimCalled);
}
function testAriaTags() {
renderer.maybeCreateElement_();
assertNotNull(target);
assertEvaluatesToFalse('The role should be empty.',
goog.a11y.aria.getRole(target));
assertEquals('',
goog.a11y.aria.getState(target,
goog.a11y.aria.State.AUTOCOMPLETE));
assertEquals('',
goog.a11y.aria.getState(target,
goog.a11y.aria.State.HASPOPUP));
renderer.show();
assertEquals(goog.a11y.aria.Role.COMBOBOX, goog.a11y.aria.getRole(
target));
assertEquals('list',
goog.a11y.aria.getState(target,
goog.a11y.aria.State.AUTOCOMPLETE));
assertEquals('true',
goog.a11y.aria.getState(target,
goog.a11y.aria.State.HASPOPUP));
renderer.dismiss();
assertEquals(goog.a11y.aria.Role.COMBOBOX, goog.a11y.aria.getRole(
target));
assertEquals('list',
goog.a11y.aria.getState(target,
goog.a11y.aria.State.AUTOCOMPLETE));
assertEquals('false',
goog.a11y.aria.getState(target,
goog.a11y.aria.State.HASPOPUP));
}
function testHiliteRowWithDefaultRenderer() {
renderer.renderRows(rendRows, '');
renderer.hiliteRow(2);
assertEquals(2, renderer.hilitedRow_);
assertTrue(goog.dom.classes.has(
renderer.rowDivs_[2], renderer.activeClassName));
}
function testHiliteRowWithCustomRenderer() {
goog.dispose(renderer);
// Use a custom renderer that doesn't put the result divs as direct children
// of this.element_.
var customRenderer = {
render: function(renderer, element, rows, token) {
// Put all of the results into a results holder div that is a child of
// this.element_.
var resultsHolder = goog.dom.createDom('div');
goog.dom.appendChild(element, resultsHolder);
for (var i = 0, row; row = rows[i]; ++i) {
var node = renderer.renderRowHtml(row, token);
goog.dom.appendChild(resultsHolder, node);
}
}
};
renderer = new goog.ui.ac.Renderer(null, customRenderer);
// Make sure we can still highlight the row at position 2 even though
// this.element_.childNodes contains only a single child.
renderer.renderRows(rendRows, '');
renderer.hiliteRow(2);
assertEquals(2, renderer.hilitedRow_);
assertTrue(goog.dom.classes.has(
renderer.rowDivs_[2], renderer.activeClassName));
}
function testReposition() {
renderer.renderRows(rendRows, '', target);
var el = renderer.getElement();
el.style.position = 'absolute';
el.style.width = '100px';
renderer.setAutoPosition(true);
renderer.redraw();
var rendererOffset = goog.style.getPageOffset(renderer.getElement());
var targetOffset = goog.style.getPageOffset(target);
var targetSize = goog.style.getSize(target);
assertEquals(0 + targetOffset.x, rendererOffset.x);
assertRoughlyEquals(
targetOffset.y + targetSize.height, rendererOffset.y, 1);
}
function testRepositionWithRightAlign() {
renderer.renderRows(rendRows, '', target);
var el = renderer.getElement();
el.style.position = 'absolute';
el.style.width = '150px';
renderer.setAutoPosition(true);
renderer.setRightAlign(true);
renderer.redraw();
var rendererOffset = goog.style.getPageOffset(renderer.getElement());
var rendererSize = goog.style.getSize(renderer.getElement());
var targetOffset = goog.style.getPageOffset(target);
var targetSize = goog.style.getSize(target);
assertRoughlyEquals(
targetOffset.x + targetSize.width,
rendererOffset.x + rendererSize.width,
1);
assertRoughlyEquals(
targetOffset.y + targetSize.height, rendererOffset.y, 1);
}
// ------- Helper functions -------
function assertNumBoldTags (boldTagElArray, expectedNum) {
assertEquals('Incorrect number of bold tags', expectedNum,
boldTagElArray.length);
}
function assertPreviousNodeText(boldTag, expectedText) {
var prevNode = boldTag.previousSibling;
assertEquals('Expected text before the token does not match', expectedText,
prevNode.nodeValue);
}
function assertHighlightedText(boldTag, expectedHighlightedText) {
assertEquals('Incorrect text bolded', expectedHighlightedText,
boldTag.innerHTML);
}
function assertLastNodeText(node, expectedText) {
var lastNode = node.lastChild;
assertEquals('Incorrect text in the last node', expectedText,
lastNode.nodeValue);
}
</script>
</body>
</html>