7345c56ae7
Makes autocomplete entries focusable, supplies the <li> elements with proper keydown handling, and adds a focus() call to <gr-cursor-manager>. This focus() call is optional, enabled by the 'focus-on-move' property. Bug: Issue 4281, Issue 4279, Issue 5321 Change-Id: I944350090ccb240bde6302f0aba8f2585172f5df
187 lines
6.0 KiB
HTML
187 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Copyright (C) 2016 The Android Open Source Project
|
|
|
|
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.
|
|
-->
|
|
|
|
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
|
<title>gr-cursor-manager</title>
|
|
|
|
<script src="../../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
|
|
<script src="../../../bower_components/web-component-tester/browser.js"></script>
|
|
|
|
<link rel="import" href="../../../bower_components/iron-test-helpers/iron-test-helpers.html">
|
|
<link rel="import" href="gr-cursor-manager.html">
|
|
|
|
<test-fixture id="basic">
|
|
<template>
|
|
<gr-cursor-manager cursor-target-class="targeted"></gr-cursor-manager>
|
|
<ul>
|
|
<li>A</li>
|
|
<li>B</li>
|
|
<li>C</li>
|
|
<li>D</li>
|
|
</ul>
|
|
</template>
|
|
</test-fixture>
|
|
|
|
<script>
|
|
suite('gr-cursor-manager tests', function() {
|
|
var sandbox;
|
|
var element;
|
|
var list;
|
|
|
|
setup(function() {
|
|
sandbox = sinon.sandbox.create();
|
|
var fixtureElements = fixture('basic');
|
|
element = fixtureElements[0];
|
|
list = fixtureElements[1];
|
|
});
|
|
|
|
teardown(function() {
|
|
sandbox.restore();
|
|
});
|
|
|
|
test('core cursor functionality', function() {
|
|
// The element is initialized into the proper state.
|
|
assert.isArray(element.stops);
|
|
assert.equal(element.stops.length, 0);
|
|
assert.equal(element.index, -1);
|
|
assert.isNotOk(element.target);
|
|
|
|
// Initialize the cursor with its stops.
|
|
element.stops = list.querySelectorAll('li');
|
|
|
|
// It should have the stops but it should not be targeting any of them.
|
|
assert.isNotNull(element.stops);
|
|
assert.equal(element.stops.length, 4);
|
|
assert.equal(element.index, -1);
|
|
assert.isNotOk(element.target);
|
|
|
|
// Select the third stop.
|
|
element.setCursor(list.children[2]);
|
|
|
|
// It should update its internal state and update the element's class.
|
|
assert.equal(element.index, 2);
|
|
assert.equal(element.target, list.children[2]);
|
|
assert.isTrue(list.children[2].classList.contains('targeted'));
|
|
assert.isFalse(element.isAtStart());
|
|
assert.isFalse(element.isAtEnd());
|
|
|
|
// Progress the cursor.
|
|
element.next();
|
|
|
|
// Confirm that the next stop is selected and that the previous stop is
|
|
// unselected.
|
|
assert.equal(element.index, 3);
|
|
assert.equal(element.target, list.children[3]);
|
|
assert.isTrue(element.isAtEnd());
|
|
assert.isFalse(list.children[2].classList.contains('targeted'));
|
|
assert.isTrue(list.children[3].classList.contains('targeted'));
|
|
|
|
// Progress the cursor.
|
|
element.next();
|
|
|
|
// We should still be at the end.
|
|
assert.equal(element.index, 3);
|
|
assert.equal(element.target, list.children[3]);
|
|
assert.isTrue(element.isAtEnd());
|
|
|
|
// Wind the cursor all the way back to the first stop.
|
|
element.previous();
|
|
element.previous();
|
|
element.previous();
|
|
|
|
// The element state should reflect the end of the list.
|
|
assert.equal(element.index, 0);
|
|
assert.equal(element.target, list.children[0]);
|
|
assert.isTrue(element.isAtStart());
|
|
assert.isTrue(list.children[0].classList.contains('targeted'));
|
|
|
|
var newLi = document.createElement('li');
|
|
newLi.textContent = 'Z';
|
|
list.insertBefore(newLi, list.children[0]);
|
|
element.stops = list.querySelectorAll('li');
|
|
|
|
assert.equal(element.index, 1);
|
|
|
|
// De-select all targets.
|
|
element.unsetCursor();
|
|
|
|
// There should now be no cursor target.
|
|
assert.isFalse(list.children[1].classList.contains('targeted'));
|
|
assert.isNotOk(element.target);
|
|
assert.equal(element.index, -1);
|
|
});
|
|
|
|
test('opt_noScroll', function() {
|
|
sandbox.stub(element, '_targetIsVisible', function() { return false; });
|
|
var scrollStub = sandbox.stub(window, 'scrollTo');
|
|
element.stops = list.querySelectorAll('li');
|
|
element.scrollBehavior = 'keep-visible';
|
|
|
|
element.setCursorAtIndex(1, true);
|
|
assert.isFalse(scrollStub.called);
|
|
|
|
element.setCursorAtIndex(2);
|
|
assert.isTrue(scrollStub.called);
|
|
});
|
|
|
|
test('_getNextindex', function() {
|
|
var isLetterB = function(row) {
|
|
return row.textContent === 'B';
|
|
};
|
|
element.stops = list.querySelectorAll('li');
|
|
// Start cursor at the first stop.
|
|
element.setCursor(list.children[0]);
|
|
|
|
// Move forward to meet the next condition.
|
|
assert.equal(element._getNextindex(1, isLetterB), 1);
|
|
element.index = 1;
|
|
|
|
// Nothing else meets the condition, should be at last stop.
|
|
assert.equal(element._getNextindex(1, isLetterB), 3);
|
|
element.index = 3;
|
|
|
|
// Should stay at last stop if try to proceed.
|
|
assert.equal(element._getNextindex(1, isLetterB), 3);
|
|
|
|
// Go back to the previous condition met. Should be back at.
|
|
// stop 1.
|
|
assert.equal(element._getNextindex(-1, isLetterB), 1);
|
|
element.index = 1;
|
|
|
|
// Go back. No more meet the condition. Should be at stop 0.
|
|
assert.equal(element._getNextindex(-1, isLetterB), 0);
|
|
});
|
|
|
|
test('focusOnMove prop', function() {
|
|
var listEls = list.querySelectorAll('li');
|
|
for (var i = 0; i < listEls.length; i++) {
|
|
sandbox.spy(listEls[i], 'focus');
|
|
}
|
|
element.stops = listEls;
|
|
element.setCursor(list.children[0]);
|
|
|
|
element.focusOnMove = false;
|
|
element.next();
|
|
assert.isFalse(element.target.focus.called);
|
|
|
|
element.focusOnMove = true;
|
|
element.next();
|
|
assert.isTrue(element.target.focus.called);
|
|
});
|
|
});
|
|
</script>
|