| <!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-basic</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-selector.html"> |
| |
| <style> |
| .iron-selected { |
| background: #ccc; |
| } |
| |
| .my-selected { |
| background: red; |
| } |
| </style> |
| |
| </head> |
| <body> |
| |
| <test-fixture id="defaults"> |
| <template> |
| <iron-selector> |
| <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> |
| |
| <br><br> |
| |
| <test-fixture id="basic"> |
| <template> |
| <iron-selector selected="item2" 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> |
| |
| <script> |
| |
| suite('defaults', function() { |
| |
| var s1; |
| |
| setup(function () { |
| s1 = fixture('defaults'); |
| }); |
| |
| test('to nothing selected', function() { |
| assert.equal(s1.selected, null); |
| }); |
| |
| test('to iron-selected as selectedClass', function() { |
| assert.equal(s1.selectedClass, 'iron-selected'); |
| }); |
| |
| test('to false as multi', function() { |
| assert.isFalse(s1.multi); |
| }); |
| |
| test('to tap as activateEvent', function() { |
| assert.equal(s1.activateEvent, 'tap'); |
| }); |
| |
| test('to nothing as attrForSelected', function() { |
| assert.equal(s1.attrForSelected, null); |
| }); |
| |
| test('as many items as children', function() { |
| assert.equal(s1.items.length, s1.querySelectorAll('div').length); |
| }); |
| }); |
| |
| suite('basic', function() { |
| |
| var s2; |
| |
| setup(function () { |
| s2 = fixture('basic'); |
| }); |
| |
| test('honors the attrForSelected attribute', function(done) { |
| Polymer.Base.async(function() { |
| assert.equal(s2.attrForSelected, 'id'); |
| assert.equal(s2.selected, 'item2'); |
| assert.equal(s2.selectedItem, document.querySelector('#item2')); |
| done(); |
| }); |
| }); |
| |
| test('allows assignment to selected', function() { |
| // set selected |
| s2.selected = 'item4'; |
| // check selected class |
| assert.isTrue(s2.children[4].classList.contains('iron-selected')); |
| // check item |
| assert.equal(s2.selectedItem, s2.children[4]); |
| }); |
| |
| test('fire iron-select when selected is set', function() { |
| // setup listener for iron-select event |
| var selectedEventCounter = 0; |
| s2.addEventListener('iron-select', function(e) { |
| selectedEventCounter++; |
| }); |
| // set selected |
| s2.selected = 'item4'; |
| // check iron-select event |
| assert.equal(selectedEventCounter, 1); |
| }); |
| |
| test('set selected to old value', function() { |
| // setup listener for iron-select event |
| var selectedEventCounter = 0; |
| s2.addEventListener('iron-select', function(e) { |
| selectedEventCounter++; |
| }); |
| // selecting the same value shouldn't fire iron-select |
| s2.selected = 'item2'; |
| assert.equal(selectedEventCounter, 0); |
| }); |
| |
| test('force synchronous item update', function() { |
| expect(s2.items.length).to.be.equal(5); |
| Polymer.dom(s2).appendChild(document.createElement('div')); |
| expect(s2.items.length).to.be.equal(5); |
| s2.forceSynchronousItemUpdate(); |
| expect(s2.items.length).to.be.equal(6); |
| }); |
| |
| suite('`select()` and `selectIndex()`', function() { |
| test('`select()` selects an item with the given value', function() { |
| s2.select('item1'); |
| assert.equal(s2.selected, 'item1'); |
| |
| s2.select('item3'); |
| assert.equal(s2.selected, 'item3'); |
| |
| s2.select('item2'); |
| assert.equal(s2.selected, 'item2'); |
| }); |
| |
| test('`selectIndex()` selects an item with the given index', function() { |
| assert.equal(s2.selectedItem, undefined); |
| |
| s2.selectIndex(1); |
| assert.equal(s2.selected, 'item1'); |
| assert.equal(s2.selectedItem, s2.items[1]); |
| |
| s2.selectIndex(3); |
| assert.equal(s2.selected, 'item3'); |
| assert.equal(s2.selectedItem, s2.items[3]); |
| |
| s2.selectIndex(4); |
| assert.equal(s2.selected, 'item4'); |
| assert.equal(s2.selectedItem, s2.items[4]); |
| }); |
| }); |
| |
| suite('items changing', function() { |
| var s1; |
| |
| setup(function() { |
| s1 = fixture('defaults'); |
| }); |
| |
| test('cause iron-items-changed to fire', function(done) { |
| var newItem = document.createElement('div'); |
| var changeCount = 0; |
| |
| newItem.id = 'item999'; |
| |
| s2.addEventListener('iron-items-changed', function(event) { |
| changeCount++; |
| var mutation = event.detail; |
| assert.notEqual(mutation, undefined); |
| assert.notEqual(mutation.addedNodes, undefined); |
| assert.notEqual(mutation.removedNodes, undefined); |
| }); |
| |
| Polymer.dom(s2).appendChild(newItem); |
| |
| Polymer.Base.async(function() { |
| Polymer.dom(s2).removeChild(newItem); |
| |
| Polymer.Base.async(function() { |
| expect(changeCount).to.be.equal(2); |
| done(); |
| }, 1); |
| }, 1); |
| }); |
| |
| test('updates selected item', function(done) { |
| s1.addEventListener('iron-items-changed', function firstListener() { |
| s1.removeEventListener('iron-items-changed', firstListener); |
| var firstElementChild = Polymer.dom(s1).firstElementChild; |
| expect(firstElementChild).to.be.equal(s1.selectedItem); |
| expect(firstElementChild.classList.contains('iron-selected')) |
| .to.be.eql(true); |
| Polymer.dom(s1).removeChild(s1.selectedItem); |
| |
| s1.addEventListener('iron-items-changed', function() { |
| firstElementChild = Polymer.dom(s1).firstElementChild; |
| expect(firstElementChild).to.be.equal(s1.selectedItem); |
| expect(firstElementChild.classList.contains('iron-selected')) |
| .to.be.eql(true); |
| done(); |
| }); |
| }); |
| s1.selected = 0; |
| }); |
| }); |
| |
| suite('dynamic selector', function() { |
| test('selects dynamically added child automatically', function(done) { |
| var selector = document.createElement('iron-selector'); |
| var child = document.createElement('div'); |
| |
| selector.selected = '0'; |
| child.textContent = 'Item 0'; |
| |
| Polymer.dom(selector).appendChild(child); |
| document.body.appendChild(selector); |
| |
| Polymer.Base.async(function() { |
| assert.equal(child.className, 'iron-selected'); |
| document.body.removeChild(selector); |
| done(); |
| }, 1); |
| }); |
| }); |
| }); |
| |
| </script> |
| |
| </body> |
| </html> |
