OLD | NEW |
(Empty) | |
| 1 <!doctype html> |
| 2 <html> |
| 3 <head> |
| 4 <title>polymer-selector-multi</title> |
| 5 <script src="../../../platform/platform.js"></script> |
| 6 <script src="../../../tools/test/htmltest.js"></script> |
| 7 <script src="../../../tools/test/chai/chai.js"></script> |
| 8 <link rel="import" href="../../polymer-selector.html"> |
| 9 <style> |
| 10 .polymer-selected { |
| 11 background: #ccc; |
| 12 } |
| 13 </style> |
| 14 </head> |
| 15 <body> |
| 16 |
| 17 <polymer-selector id="selector" multi> |
| 18 <div>Item 1</div> |
| 19 <div>Item 2</div> |
| 20 <div>Item 3</div> |
| 21 <div>Item 4</div> |
| 22 <div>Item 5</div> |
| 23 </polymer-selector> |
| 24 |
| 25 <script> |
| 26 var assert = chai.assert; |
| 27 document.addEventListener('WebComponentsReady', function() { |
| 28 // |
| 29 var s = document.querySelector('#selector'); |
| 30 assert.equal(s.selected, null); |
| 31 assert.equal(s.selectedClass, 'polymer-selected'); |
| 32 assert.isTrue(s.multi); |
| 33 assert.equal(s.valueattr, 'name'); |
| 34 assert.equal(s.items.length, 5); |
| 35 // setup listener for polymer-select event |
| 36 var selectEventCounter = 0; |
| 37 s.addEventListener('polymer-select', function(e) { |
| 38 if (e.detail.isSelected) { |
| 39 selectEventCounter++; |
| 40 } else { |
| 41 selectEventCounter--; |
| 42 } |
| 43 // check selectedItem in polymer-select event |
| 44 assert.equal(this.selectedItem.length, selectEventCounter); |
| 45 }); |
| 46 // set selected |
| 47 new PathObserver(s, 'selected', function() { |
| 48 // check polymer-select event |
| 49 assert.equal(selectEventCounter, 2); |
| 50 // check selected class |
| 51 assert.isTrue(s.children[0].classList.contains('polymer-selected')); |
| 52 assert.isTrue(s.children[2].classList.contains('polymer-selected')); |
| 53 // check selectedItem |
| 54 assert.equal(s.selectedItem.length, 2); |
| 55 assert.equal(s.selectedItem[0], s.children[0]); |
| 56 assert.equal(s.selectedItem[1], s.children[2]); |
| 57 // tap on already selected element should unselect it |
| 58 s.children[0].dispatchEvent(new CustomEvent('tap', {bubbles: true})); |
| 59 // check selected |
| 60 assert.equal(s.selected.length, 1); |
| 61 assert.isFalse(s.children[0].classList.contains('polymer-selected')); |
| 62 done(); |
| 63 }); |
| 64 s.selected = [0, 2]; |
| 65 Platform.flush(); |
| 66 }); |
| 67 </script> |
| 68 </body> |
| 69 </html> |
OLD | NEW |