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

   1 <!doctype html>
   2 <html>
   3 <head>
   4   <title>polymer-selector-basic</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
  14     .my-selected {
  15       background: red;
  16     }
  17   </style>
  18 </head>
  19 <body>
  20
  21   <polymer-selector id="selector1">
  22     <div>Item 1</div>
  23     <div>Item 2</div>
  24     <div>Item 3</div>
  25     <div>Item 4</div>
  26     <div>Item 5</div>
  27   </polymer-selector>
  28
  29   <br><br>
  30
  31   <polymer-selector id="selector2" selected="item3" selectedClass="my-selected" valueattr="id">
  32     <div id="item1">Item 1</div>
  33     <div id="item2">Item 2</div>
  34     <div id="item3">Item 3</div>
  35     <div id="item4">Item 4</div>
  36     <div id="item5">Item 5</div>
  37   </polymer-selector>
  38
  39   <script>
  40     var assert = chai.assert;
  41     var async = requestAnimationFrame;
  42
  43     function oneMutation(node, options, cb) {
  44       var o = new MutationObserver(function() {
  45         cb();
  46         o.disconnect();
  47       });
  48       o.observe(node, options);
  49     }
  50
  51     document.addEventListener('polymer-ready', function() {
  52       // selector1
  53       var s = document.querySelector('#selector1');
  54       assert.equal(s.selected, null);
  55       assert.equal(s.selectedClass, 'polymer-selected');
  56       assert.isFalse(s.multi);
  57       assert.equal(s.valueattr, 'name');
  58       assert.equal(s.items.length, 5);
  59       // selector2
  60       s = document.querySelector('#selector2');
  61       assert.equal(s.selected, "item3");
  62       assert.equal(s.selectedClass, 'my-selected');
  63       // setup listener for polymer-select event
  64       var selectEventCounter = 0;
  65       s.addEventListener('polymer-select', function(e) {
  66         if (e.detail.isSelected) {
  67           selectEventCounter++;
  68           // selectedItem and detail.item should be the same
  69           assert.equal(e.detail.item, s.selectedItem);
  70         }
  71       });
  72       // set selected
  73       s.selected = 'item5';
  74       Platform.flush();
  75       oneMutation(s, {attributes: true}, function() {
  76         // check polymer-select event
  77         assert.equal(selectEventCounter, 1);
  78         // check selected class
  79         assert.isTrue(s.children[4].classList.contains('my-selected'));
  80         // check selectedItem
  81         assert.equal(s.selectedItem, s.children[4]);
  82         // selecting the same value shouldn't fire polymer-select
  83         selectEventCounter = 0;
  84         s.selected = 'item5';
  85         Platform.flush();
  86         // TODO(ffu): would be better to wait for something to happen
  87         // instead of not to happen
  88         setTimeout(function() {
  89           assert.equal(selectEventCounter, 0);
  90           done();
  91         }, 50);
  92       });
  93     });
  94   </script>
  95 </body>
  96 </html>