1 <!doctype html> 2 <!-- 3 @license 4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 5 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 7 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 8 Code distributed by Google as part of the polymer project is also 9 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 10 --> 11 12 <html> 13 <head> 14 15 <title>iron-selector-basic</title> 16 <meta charset="utf-8"> 17 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> 18 19 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 20 <script src="../../web-component-tester/browser.js"></script> 21 <script src="../../test-fixture/test-fixture-mocha.js"></script> 22 23 <link rel="import" href="../../test-fixture/test-fixture.html"> 24 <link rel="import" href="../iron-selector.html"> 25 26 <style> 27 .iron-selected { 28 background: #ccc; 29 } 30 31 .my-selected { 32 background: red; 33 } 34 </style> 35 36 </head> 37 <body> 38 39 <test-fixture id="defaults"> 40 <template> 41 <iron-selector> 42 <div>Item 0</div> 43 <div>Item 1</div> 44 <div>Item 2</div> 45 <div>Item 3</div> 46 <div>Item 4</div> 47 </iron-selector> 48 </template> 49 </test-fixture> 50 51 <br><br> 52 53 <test-fixture id="basic"> 54 <template> 55 <iron-selector selected="item2" attr-for-selected="id"> 56 <div id="item0">Item 0</div> 57 <div id="item1">Item 1</div> 58 <div id="item2">Item 2</div> 59 <div id="item3">Item 3</div> 60 <div id="item4">Item 4</div> 61 </iron-selector> 62 </template> 63 </test-fixture> 64 65 <script> 66 67 suite('defaults', function() { 68 69 var s1; 70 71 setup(function () { 72 s1 = fixture('defaults'); 73 }); 74 75 test('to nothing selected', function() { 76 assert.equal(s1.selected, null); 77 }); 78 79 test('to iron-selected as selectedClass', function() { 80 assert.equal(s1.selectedClass, 'iron-selected'); 81 }); 82 83 test('to false as multi', function() { 84 assert.isFalse(s1.multi); 85 }); 86 87 test('to tap as activateEvent', function() { 88 assert.equal(s1.activateEvent, 'tap'); 89 }); 90 91 test('to nothing as attrForSelected', function() { 92 assert.equal(s1.attrForSelected, null); 93 }); 94 95 test('as many items as children', function() { 96 assert.equal(s1.items.length, s1.querySelectorAll('div').length); 97 }); 98 }); 99 100 suite('basic', function() { 101 102 var s2; 103 104 setup(function () { 105 s2 = fixture('basic'); 106 }); 107 108 test('honors the attrForSelected attribute', function(done) { 109 Polymer.Base.async(function() { 110 assert.equal(s2.attrForSelected, 'id'); 111 assert.equal(s2.selected, 'item2'); 112 assert.equal(s2.selectedItem, document.querySelector('#item2')); 113 done(); 114 }); 115 }); 116 117 test('allows assignment to selected', function() { 118 // set selected 119 s2.selected = 'item4'; 120 // check selected class 121 assert.isTrue(s2.children[4].classList.contains('iron-selected')); 122 // check item 123 assert.equal(s2.selectedItem, s2.children[4]); 124 }); 125 126 test('fire iron-select when selected is set', function() { 127 // setup listener for iron-select event 128 var selectedEventCounter = 0; 129 s2.addEventListener('iron-select', function(e) { 130 selectedEventCounter++; 131 }); 132 // set selected 133 s2.selected = 'item4'; 134 // check iron-select event 135 assert.equal(selectedEventCounter, 1); 136 }); 137 138 test('set selected to old value', function() { 139 // setup listener for iron-select event 140 var selectedEventCounter = 0; 141 s2.addEventListener('iron-select', function(e) { 142 selectedEventCounter++; 143 }); 144 // selecting the same value shouldn't fire iron-select 145 s2.selected = 'item2'; 146 assert.equal(selectedEventCounter, 0); 147 }); 148 149 test('force synchronous item update', function() { 150 expect(s2.items.length).to.be.equal(5); 151 Polymer.dom(s2).appendChild(document.createElement('div')); 152 expect(s2.items.length).to.be.equal(5); 153 s2.forceSynchronousItemUpdate(); 154 expect(s2.items.length).to.be.equal(6); 155 }); 156 157 suite('`select()` and `selectIndex()`', function() { 158 test('`select()` selects an item with the given value', function() { 159 s2.select('item1'); 160 assert.equal(s2.selected, 'item1'); 161 162 s2.select('item3'); 163 assert.equal(s2.selected, 'item3'); 164 165 s2.select('item2'); 166 assert.equal(s2.selected, 'item2'); 167 }); 168 169 test('`selectIndex()` selects an item with the given index', function() { 170 assert.equal(s2.selectedItem, undefined); 171 172 s2.selectIndex(1); 173 assert.equal(s2.selected, 'item1'); 174 assert.equal(s2.selectedItem, s2.items[1]); 175 176 s2.selectIndex(3); 177 assert.equal(s2.selected, 'item3'); 178 assert.equal(s2.selectedItem, s2.items[3]); 179 180 s2.selectIndex(4); 181 assert.equal(s2.selected, 'item4'); 182 assert.equal(s2.selectedItem, s2.items[4]); 183 }); 184 }); 185 186 suite('items changing', function() { 187 var s1; 188 189 setup(function() { 190 s1 = fixture('defaults'); 191 }); 192 193 test('cause iron-items-changed to fire', function(done) { 194 var newItem = document.createElement('div'); 195 var changeCount = 0; 196 197 newItem.id = 'item999'; 198 199 s2.addEventListener('iron-items-changed', function(event) { 200 changeCount++; 201 var mutation = event.detail; 202 assert.notEqual(mutation, undefined); 203 assert.notEqual(mutation.addedNodes, undefined); 204 assert.notEqual(mutation.removedNodes, undefined); 205 }); 206 207 Polymer.dom(s2).appendChild(newItem); 208 209 Polymer.Base.async(function() { 210 Polymer.dom(s2).removeChild(newItem); 211 212 Polymer.Base.async(function() { 213 expect(changeCount).to.be.equal(2); 214 done(); 215 }, 1); 216 }, 1); 217 }); 218 219 test('updates selected item', function(done) { 220 s1.addEventListener('iron-items-changed', function firstListener() { 221 s1.removeEventListener('iron-items-changed', firstListener); 222 var firstElementChild = Polymer.dom(s1).firstElementChild; 223 expect(firstElementChild).to.be.equal(s1.selectedItem); 224 expect(firstElementChild.classList.contains('iron-selected')) 225 .to.be.eql(true); 226 Polymer.dom(s1).removeChild(s1.selectedItem); 227 228 s1.addEventListener('iron-items-changed', function() { 229 firstElementChild = Polymer.dom(s1).firstElementChild; 230 expect(firstElementChild).to.be.equal(s1.selectedItem); 231 expect(firstElementChild.classList.contains('iron-selected')) 232 .to.be.eql(true); 233 done(); 234 }); 235 }); 236 s1.selected = 0; 237 }); 238 }); 239 240 suite('dynamic selector', function() { 241 test('selects dynamically added child automatically', function(done) { 242 var selector = document.createElement('iron-selector'); 243 var child = document.createElement('div'); 244 245 selector.selected = '0'; 246 child.textContent = 'Item 0'; 247 248 Polymer.dom(selector).appendChild(child); 249 document.body.appendChild(selector); 250 251 Polymer.Base.async(function() { 252 assert.equal(child.className, 'iron-selected'); 253 document.body.removeChild(selector); 254 done(); 255 }, 1); 256 }); 257 }); 258 }); 259 260 </script> 261 262 </body> 263 </html> 264
