src/third_party/polymer/polymer-selector/test/html/polymer-selector-multi.html

   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
  28     function oneMutation(node, options, cb) {
  29       var o = new MutationObserver(function() {
  30         cb();
  31         o.disconnect();
  32       });
  33       o.observe(node, options);
  34     }
  35
  36     document.addEventListener('polymer-ready', function() {
  37       //
  38       var s = document.querySelector('#selector');
  39       assert.equal(s.selected, null);
  40       assert.equal(s.selectedClass, 'polymer-selected');
  41       assert.isTrue(s.multi);
  42       assert.equal(s.valueattr, 'name');
  43       assert.equal(s.items.length, 5);
  44       // setup listener for polymer-select event
  45       var selectEventCounter = 0;
  46       s.addEventListener('polymer-select', function(e) {
  47         if (e.detail.isSelected) {
  48           selectEventCounter++;
  49         } else {
  50           selectEventCounter--;
  51         }
  52         // check selectedItem in polymer-select event
  53         assert.equal(this.selectedItem.length, selectEventCounter);
  54       });
  55       // set selected
  56       s.selected = [0, 2];
  57       Platform.flush();
  58       oneMutation(s, {attributes: true}, function() {
  59         // check polymer-select event
  60         assert.equal(selectEventCounter, 2);
  61         // check selected class
  62         assert.isTrue(s.children[0].classList.contains('polymer-selected'));
  63         assert.isTrue(s.children[2].classList.contains('polymer-selected'));
  64         // check selectedItem
  65         assert.equal(s.selectedItem.length, 2);
  66         assert.equal(s.selectedItem[0], s.children[0]);
  67         assert.equal(s.selectedItem[1], s.children[2]);
  68         // tap on already selected element should unselect it
  69         s.children[0].dispatchEvent(new CustomEvent('tap', {bubbles: true}));
  70         // check selected
  71         assert.equal(s.selected.length, 1);
  72         assert.isFalse(s.children[0].classList.contains('polymer-selected'));
  73         done();
  74       });
  75     });
  76   </script>
  77 </body>
  78 </html>