| <!doctype html> |
| <!-- |
| @license |
| Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
| The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
| Code distributed by Google as part of the polymer project is also |
| subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
| --> |
| |
| <html> |
| <head> |
| |
| <title>iron-selector-multi</title> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> |
| |
| <script src="../../webcomponentsjs/webcomponents-lite.js"></script> |
| <script src="../../web-component-tester/browser.js"></script> |
| <script src="../../test-fixture/test-fixture-mocha.js"></script> |
| |
| <link rel="import" href="../../test-fixture/test-fixture.html"> |
| <link rel="import" href="../../iron-test-helpers/iron-test-helpers.html"> |
| <link rel="import" href="../iron-selector.html"> |
| |
| <style> |
| .iron-selected { |
| background: #ccc; |
| } |
| </style> |
| |
| </head> |
| <body> |
| |
| <test-fixture id="test"> |
| <template> |
| <iron-selector multi> |
| <div>Item 0</div> |
| <div>Item 1</div> |
| <div>Item 2</div> |
| <div>Item 3</div> |
| <div>Item 4</div> |
| </iron-selector> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="valueById"> |
| <template> |
| <iron-selector multi attr-for-selected="id"> |
| <div id="item0">Item 0</div> |
| <div id="item1">Item 1</div> |
| <div id="item2">Item 2</div> |
| <div id="item3">Item 3</div> |
| <div id="item4">Item 4</div> |
| </iron-selector> |
| </template> |
| </test-fixture> |
| |
| <!-- |
| NOTE(cdata): Enable test-fixture when polymer/polymer#2495 is resolved |
| --> |
| <!--<test-fixture id="repeatedItems"> |
| <template>--> |
| <iron-selector multi id="repeatedItems"> |
| <template is="dom-repeat" items='["foo", "bar", "baz"]'> |
| <div>[[item]]</div> |
| </template> |
| <div>vim</div> |
| </iron-selector> |
| <!--</template> |
| </test-fixture>--> |
| |
| <script> |
| |
| suite('multi', function() { |
| |
| var s; |
| |
| setup(function () { |
| s = fixture('test'); |
| t = Polymer.dom(s).querySelector('[is="dom-repeat"]'); |
| }); |
| |
| test('honors the multi attribute', function() { |
| assert.isTrue(s.multi); |
| }); |
| |
| test('has sane defaults', function() { |
| assert.equal(s.selectedValues, undefined); |
| assert.equal(s.selectedClass, 'iron-selected'); |
| assert.equal(s.items.length, 5); |
| }); |
| |
| test('set multi-selection via selected property', function() { |
| // set selectedValues |
| s.selectedValues = [0, 2]; |
| // check selected class |
| assert.isTrue(s.children[0].classList.contains('iron-selected')); |
| assert.isTrue(s.children[2].classList.contains('iron-selected')); |
| // check selectedItems |
| assert.equal(s.selectedItems.length, 2); |
| assert.equal(s.selectedItems[0], s.children[0]); |
| assert.equal(s.selectedItems[1], s.children[2]); |
| }); |
| |
| test('set multi-selection via tap', function() { |
| // set selectedValues |
| MockInteractions.tap(s.children[0]); |
| MockInteractions.tap(s.children[2]); |
| // check selected class |
| assert.isTrue(s.children[0].classList.contains('iron-selected')); |
| assert.isTrue(s.children[2].classList.contains('iron-selected')); |
| // check selectedItems |
| assert.equal(s.selectedItems.length, 2); |
| assert.equal(s.selectedItems[0], s.children[0]); |
| assert.equal(s.selectedItems[1], s.children[2]); |
| }); |
| |
| test('fire iron-select/deselect events when selectedValues changes', function() { |
| // setup listener for iron-select/deselect events |
| var items = [s.children[0], s.children[1], s.children[2]], |
| selectEventCounters = [0, 0, 0], |
| deselectEventCounters = [0, 0, 0]; |
| |
| s.addEventListener('iron-select', function(e) { |
| selectEventCounters[items.indexOf(e.detail.item)]++; |
| }); |
| s.addEventListener('iron-deselect', function(e) { |
| deselectEventCounters[items.indexOf(e.detail.item)]++; |
| }); |
| |
| // programatically select values 0 and 1 (both fire select) |
| s.selectedValues = [0, 1]; |
| |
| // programatically select values 1 and 2 (2 fires select, 0 fires deselect) |
| s.selectedValues = [1, 2]; |
| |
| // programatically deselect all values (1 and 2 fire deselect) |
| s.selectedValues = []; |
| |
| // check events |
| assert.equal(selectEventCounters[0], 1); |
| assert.equal(deselectEventCounters[0], 1); |
| assert.equal(selectEventCounters[1], 1); |
| assert.equal(deselectEventCounters[1], 1); |
| assert.equal(selectEventCounters[2], 1); |
| assert.equal(deselectEventCounters[2], 1); |
| }); |
| |
| test('fire iron-select/deselect events when selectedValues is modified', function() { |
| // setup listener for iron-select/deselect events |
| var items = [s.children[0], s.children[1], s.children[2]], |
| selectEventCounters = [0, 0, 0], |
| deselectEventCounters = [0, 0, 0]; |
| |
| s.addEventListener('iron-select', function(e) { |
| selectEventCounters[items.indexOf(e.detail.item)]++; |
| }); |
| s.addEventListener('iron-deselect', function(e) { |
| deselectEventCounters[items.indexOf(e.detail.item)]++; |
| }); |
| |
| s.selectedValues = [] |
| |
| // programatically select value 0 |
| s.push('selectedValues', 0, 1); |
| |
| // programatically deselect value 0 |
| s.shift('selectedValues'); |
| |
| // programatically select value 2 |
| s.push('selectedValues', 2); |
| |
| // programatically deselect value 1 |
| s.shift('selectedValues'); |
| |
| assert.equal(selectEventCounters[0], 1); |
| assert.equal(deselectEventCounters[0], 1); |
| assert.equal(selectEventCounters[1], 1); |
| assert.equal(deselectEventCounters[1], 1); |
| assert.equal(selectEventCounters[2], 1); |
| assert.equal(deselectEventCounters[2], 0); |
| }); |
| |
| test('fire iron-select/deselect events when toggling items', function() { |
| // setup listener for iron-select/deselect events |
| var items = [s.children[0], s.children[1], s.children[2]], |
| selectEventCounters = [0, 0, 0], |
| deselectEventCounters = [0, 0, 0]; |
| |
| s.addEventListener('iron-select', function(e) { |
| selectEventCounters[items.indexOf(e.detail.item)]++; |
| }); |
| s.addEventListener('iron-deselect', function(e) { |
| deselectEventCounters[items.indexOf(e.detail.item)]++; |
| }); |
| |
| // tap to select items 0 and 1 (both fire select) |
| MockInteractions.tap(items[0]); |
| MockInteractions.tap(items[1]); |
| |
| // programatically select values 1 and 2 (2 fires select, 0 fires deselect) |
| s.selectedValues = [1, 2]; |
| |
| // tap to deselect items 1 and 2 (both fire deselect) |
| MockInteractions.tap(items[1]); |
| MockInteractions.tap(items[2]); |
| |
| // check events |
| assert.equal(selectEventCounters[0], 1); |
| assert.equal(deselectEventCounters[0], 1); |
| assert.equal(selectEventCounters[1], 1); |
| assert.equal(deselectEventCounters[1], 1); |
| assert.equal(selectEventCounters[2], 1); |
| assert.equal(deselectEventCounters[2], 1); |
| }); |
| |
| test('toggle iron-selected class when toggling items selection', function() { |
| // setup listener for iron-item-select/deselect events |
| var item0 = s.children[0], item1 = s.children[1]; |
| |
| assert.isFalse(item0.classList.contains('iron-selected')); |
| assert.isFalse(item1.classList.contains('iron-selected')); |
| |
| // tap to select item 0 (add iron-selected class) |
| MockInteractions.tap(item0); |
| |
| assert.isTrue(item0.classList.contains('iron-selected')); |
| assert.isFalse(item1.classList.contains('iron-selected')); |
| |
| // tap to select item 1 (add iron-selected class) |
| MockInteractions.tap(item1); |
| |
| assert.isTrue(item0.classList.contains('iron-selected')); |
| assert.isTrue(item1.classList.contains('iron-selected')); |
| |
| // tap to deselect item 1 (remove iron-selected class) |
| MockInteractions.tap(item1); |
| |
| assert.isTrue(item0.classList.contains('iron-selected')); |
| assert.isFalse(item1.classList.contains('iron-selected')); |
| |
| // programatically select both values (1 add iron-selected class) |
| s.selectedValues = [0, 1]; |
| |
| assert.isTrue(item0.classList.contains('iron-selected')); |
| assert.isTrue(item1.classList.contains('iron-selected')); |
| |
| // programatically deselect all values (both removes iron-selected class) |
| s.selectedValues = []; |
| |
| assert.isFalse(item0.classList.contains('iron-selected')); |
| assert.isFalse(item1.classList.contains('iron-selected')); |
| }); |
| |
| test('fires selected-values-changed when selection changes', function() { |
| var selectedValuesChangedEventCounter = 0; |
| |
| s.addEventListener('selected-values-changed', function(e) { |
| selectedValuesChangedEventCounter++; |
| }); |
| |
| MockInteractions.tap(Polymer.dom(s).children[0]); |
| MockInteractions.tap(Polymer.dom(s).children[0]); |
| MockInteractions.tap(Polymer.dom(s).children[0]); |
| |
| expect(selectedValuesChangedEventCounter); |
| }); |
| |
| test('selects from items created by dom-repeat', function(done) { |
| var selectEventCounter = 0; |
| var firstChild; |
| |
| s = document.querySelector('#repeatedItems'); |
| s.addEventListener('iron-select', function(e) { |
| selectEventCounter++; |
| }); |
| |
| // NOTE(cdata): I guess `dom-repeat` doesn't stamp synchronously.. |
| Polymer.Base.async(function() { |
| firstChild = Polymer.dom(s).querySelector('div'); |
| MockInteractions.tap(firstChild); |
| |
| assert.equal(s.selectedItems[0].textContent, 'foo'); |
| done(); |
| }); |
| }); |
| |
| test('updates selection when dom changes', function(done) { |
| var selectEventCounter = 0; |
| |
| s = fixture('test'); |
| |
| Polymer.Base.async(function() { |
| var firstChild = Polymer.dom(s).querySelector(':first-child'); |
| var lastChild = Polymer.dom(s).querySelector(':last-child'); |
| |
| MockInteractions.tap(firstChild); |
| MockInteractions.tap(lastChild); |
| |
| expect(s.selectedItems.length).to.be.equal(2); |
| |
| Polymer.dom(s).removeChild(lastChild); |
| |
| Polymer.dom.flush(); |
| |
| expect(s.selectedItems.length).to.be.equal(1); |
| expect(s.selectedItems[0]).to.be.equal(firstChild); |
| |
| done(); |
| }); |
| |
| }); |
| |
| suite('`select()` and `selectIndex()`', function() { |
| var selector; |
| |
| setup(function() { |
| selector = fixture('valueById'); |
| }); |
| |
| test('`select()` selects an item with the given value', function() { |
| selector.select('item1'); |
| assert.equal(selector.selectedValues.length, 1); |
| assert.equal(selector.selectedValues.indexOf('item1'), 0); |
| |
| selector.select('item3'); |
| assert.equal(selector.selectedValues.length, 2); |
| assert.isTrue(selector.selectedValues.indexOf('item3') >= 0); |
| |
| selector.select('item2'); |
| assert.equal(selector.selectedValues.length, 3); |
| assert.isTrue(selector.selectedValues.indexOf('item2') >= 0); |
| }); |
| |
| test('`selectIndex()` selects an item with the given index', function() { |
| selector.selectIndex(1); |
| assert.equal(selector.selectedValues.length, 1); |
| assert.isTrue(selector.selectedValues.indexOf('item1') >= 0); |
| assert.equal(selector.selectedItems.length, 1); |
| assert.isTrue(selector.selectedItems.indexOf(selector.items[1]) >= 0); |
| |
| selector.selectIndex(3); |
| assert.equal(selector.selectedValues.length, 2); |
| assert.isTrue(selector.selectedValues.indexOf('item3') >= 0); |
| assert.equal(selector.selectedItems.length, 2); |
| assert.isTrue(selector.selectedItems.indexOf(selector.items[3]) >= 0); |
| |
| selector.selectIndex(0); |
| assert.equal(selector.selectedValues.length, 3); |
| assert.isTrue(selector.selectedValues.indexOf('item0') >= 0); |
| assert.equal(selector.selectedItems.length, 3); |
| assert.isTrue(selector.selectedItems.indexOf(selector.items[0]) >= 0); |
| }); |
| }); |
| |
| /* test('toggle multi from true to false', function() { |
| // set selected |
| s.selected = [0, 2]; |
| var first = s.selected[0]; |
| // set mutli to false, so to make it single-selection |
| s.multi = false; |
| // selected should not be an array |
| assert.isNotArray(s.selected); |
| // selected should be the first value from the old array |
| assert.equal(s.selected, first); |
| }); */ |
| |
| }); |
| |
| </script> |
| |
| </body> |
| </html> |