| <!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-stop-selector="li" |
| 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 element; |
| var list; |
| |
| setup(function() { |
| var fixtureElements = fixture('basic'); |
| element = fixtureElements[0]; |
| list = fixtureElements[1]; |
| }); |
| |
| 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); |
| }); |
| }); |
| </script> |