Andreas Hocevar
731 lines
41 KiB
JavaScript
731 lines
41 KiB
JavaScript
// Copyright 2010 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.ac.RendererTest');
|
|
goog.setTestOnly('goog.ui.ac.RendererTest');
|
|
|
|
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.classlist');
|
|
goog.require('goog.events');
|
|
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.jsunit');
|
|
goog.require('goog.ui.ac.AutoComplete');
|
|
goog.require('goog.ui.ac.Renderer');
|
|
var renderer;
|
|
var rendRows = [];
|
|
var someElement;
|
|
var target;
|
|
var viewport;
|
|
var viewportTarget;
|
|
var propertyReplacer;
|
|
|
|
function setUpPage() {
|
|
someElement = goog.dom.getElement('someElement');
|
|
target = goog.dom.getElement('target');
|
|
viewport = goog.dom.getElement('viewport');
|
|
viewportTarget = goog.dom.getElement('viewportTarget');
|
|
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................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................',
|
|
'<div><div>test</div></div>',
|
|
'<div><div>test1</div><div>test2</div></div>',
|
|
'<div>random test string<div>test1</div><div><div>test2</div><div>test3</div></div></div>'
|
|
];
|
|
|
|
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 testBasicMatchingWithHtmlRow() {
|
|
// '<div><div>test</div></div>'
|
|
var row = rendRows[4];
|
|
var token = 'te';
|
|
enableHtmlRendering(renderer);
|
|
var node = renderer.renderRowHtml(row, token);
|
|
var boldTagElArray = node.getElementsByTagName('b');
|
|
assertNumBoldTags(boldTagElArray, 1);
|
|
}
|
|
|
|
function testShouldMatchOnlyOncePerDefaultWithComplexHtmlStrings() {
|
|
// '<div><div>test1</div><div>test2</div></div>'
|
|
var row = rendRows[5];
|
|
var token = 'te';
|
|
enableHtmlRendering(renderer);
|
|
var node = renderer.renderRowHtml(row, token);
|
|
var boldTagElArray = node.getElementsByTagName('b');
|
|
|
|
// It should match and render highlighting for the first 'test1' and
|
|
// stop here. This is the default behavior of the renderer.
|
|
assertNumBoldTags(boldTagElArray, 1);
|
|
}
|
|
|
|
function testShouldMatchMultipleTimesWithComplexHtmlStrings() {
|
|
renderer.setHighlightAllTokens(true);
|
|
|
|
// '<div><div>test1</div><div>test2</div></div>'
|
|
var row = rendRows[5];
|
|
var token = 'te';
|
|
enableHtmlRendering(renderer);
|
|
var node = renderer.renderRowHtml(row, token);
|
|
var boldTagElArray = node.getElementsByTagName('b');
|
|
|
|
// It should match and render highlighting for both 'test1' and 'test2'.
|
|
assertNumBoldTags(boldTagElArray, 2);
|
|
|
|
// Try again with a more complex HTML string.
|
|
// '<div>random test string<div>test1</div><div><div>test2</div><div>test3</div></div></div>'
|
|
row = rendRows[6];
|
|
node = renderer.renderRowHtml(row, token);
|
|
boldTagElArray = node.getElementsByTagName('b');
|
|
// It should match 'test', 'test1', 'test2' and 'test3' wherever they are in the
|
|
// DOM tree.
|
|
assertNumBoldTags(boldTagElArray, 4);
|
|
}
|
|
|
|
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.classlist.contains(
|
|
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.classlist.contains(
|
|
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 rendererSize = goog.style.getSize(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);
|
|
}
|
|
|
|
function testRepositionResizeHeight() {
|
|
renderer = new goog.ui.ac.Renderer(viewport);
|
|
// Render the first 4 rows from test set.
|
|
renderer.renderRows(rendRows.slice(0, 4), '', viewportTarget);
|
|
renderer.setAutoPosition(true);
|
|
renderer.setShowScrollbarsIfTooLarge(true);
|
|
|
|
// Stick a huge row in the dropdown element, to make sure it won't fit in the viewport.
|
|
var hugeRow = goog.dom.createDom('div', {style: 'height:1000px'});
|
|
goog.dom.appendChild(renderer.getElement(), hugeRow);
|
|
|
|
renderer.reposition();
|
|
|
|
var rendererOffset = goog.style.getPageOffset(renderer.getElement());
|
|
var rendererSize = goog.style.getSize(renderer.getElement());
|
|
var viewportOffset = goog.style.getPageOffset(viewport);
|
|
var viewportSize = goog.style.getSize(viewport);
|
|
|
|
assertRoughlyEquals(
|
|
viewportOffset.y + viewportSize.height,
|
|
rendererSize.height + rendererOffset.y,
|
|
1);
|
|
|
|
// Remove the huge row, and make sure that the dropdown element gets shrunk.
|
|
renderer.getElement().removeChild(hugeRow);
|
|
renderer.reposition();
|
|
|
|
rendererOffset = goog.style.getPageOffset(renderer.getElement());
|
|
rendererSize = goog.style.getSize(renderer.getElement());
|
|
viewportOffset = goog.style.getPageOffset(viewport);
|
|
viewportSize = goog.style.getSize(viewport);
|
|
|
|
assertTrue((rendererSize.height + rendererOffset.y) < (viewportOffset.y + viewportSize.height));
|
|
}
|
|
|
|
function testHiliteEvent() {
|
|
renderer.renderRows(rendRows, '');
|
|
|
|
var hiliteEventFired = false;
|
|
goog.events.listenOnce(renderer,
|
|
goog.ui.ac.AutoComplete.EventType.ROW_HILITE,
|
|
function(e) {
|
|
hiliteEventFired = true;
|
|
assertEquals(e.row, rendRows[1].data);
|
|
});
|
|
renderer.hiliteRow(1);
|
|
assertTrue(hiliteEventFired);
|
|
|
|
hiliteEventFired = false;
|
|
goog.events.listenOnce(renderer,
|
|
goog.ui.ac.AutoComplete.EventType.ROW_HILITE,
|
|
function(e) {
|
|
hiliteEventFired = true;
|
|
assertNull(e.row);
|
|
});
|
|
renderer.hiliteRow(rendRows.length); // i.e. out of bounds.
|
|
assertTrue(hiliteEventFired);
|
|
}
|
|
|
|
// ------- Helper functions -------
|
|
|
|
// The default rowRenderer will escape any HTML in the row content.
|
|
// Activating HTML rendering will allow HTML strings to be rendered to DOM
|
|
// instead of being escaped.
|
|
function enableHtmlRendering(renderer) {
|
|
renderer.customRenderer_ = {
|
|
renderRow: function(row, token, node) {
|
|
node.innerHTML = row.data.toString();
|
|
}
|
|
};
|
|
}
|
|
|
|
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);
|
|
}
|