third_party/polymer/components-chromium/core-selector/test/basic.html

   1 <!doctype html>
   2 <!--
   3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10 <html>
  11 <head>
  12   <meta charset="UTF-8">
  13   <title>core-selector-basic</title>
  14   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  15
  16   <script src="../../webcomponentsjs/webcomponents.js"></script>
  17   <script src="../../web-component-tester/browser.js"></script>
  18
  19   <link rel="import" href="../core-selector.html">
  20
  21   <style>
  22     .core-selected {
  23       background: #ccc;
  24     }
  25
  26     .my-selected {
  27       background: red;
  28     }
  29   </style>
  30
  31 </head>
  32 <body>
  33
  34   <core-selector id="selector1">
  35     <div>Item 1</div>
  36     <div>Item 2</div>
  37     <div>Item 3</div>
  38     <div>Item 4</div>
  39     <div>Item 5</div>
  40   </core-selector>
  41
  42   <br><br>
  43
  44   <core-selector id="selector2" selected="item3" selectedClass="my-selected" valueattr="id">
  45     <div id="item1">Item 1</div>
  46     <div id="item2">Item 2</div>
  47     <div id="item3">Item 3</div>
  48     <div id="item4">Item 4</div>
  49     <div id="item5">Item 5</div>
  50   </core-selector>
  51
  52   <script>
  53
  54     var s1 = document.querySelector('#selector1');
  55     var s2 = document.querySelector('#selector2');
  56
  57     suite('basic', function() {
  58
  59       suite('defaults', function() {
  60         test('to nothing selected', function() {
  61           assert.equal(s1.selected, null);
  62         });
  63
  64         test('to core-selected as selectedClass', function() {
  65           assert.equal(s1.selectedClass, 'core-selected');
  66         });
  67
  68         test('to a single-select', function() {
  69           assert.isFalse(s1.multi);
  70         });
  71
  72         test('to name as valueattr', function() {
  73           assert.equal(s1.valueattr, 'name');
  74         });
  75
  76         test('as many items as children', function() {
  77           assert.equal(s1.items.length, 5);
  78         });
  79       });
  80
  81       test('honors the selected attribute', function() {
  82         assert.equal(s2.selected, 'item3');
  83         assert.equal(s2.selectedIndex, 2);
  84         assert.equal(s2.selectedItem, document.querySelector('#item3'));
  85       });
  86
  87       test('honors the selectedClass attribute', function() {
  88         assert.equal(s2.selectedClass, 'my-selected');
  89         assert.isTrue(document.querySelector('#item3').classList.contains('my-selected'));
  90       });
  91
  92       test('allows assignment to selected', function(done) {
  93         // setup listener for core-select event
  94         var selectEventCounter = 0;
  95         s2.addEventListener('core-select', function(e) {
  96           if (e.detail.isSelected) {
  97             selectEventCounter++;
  98             // selectedItem and detail.item should be the same
  99             assert.equal(e.detail.item, s2.selectedItem);
 100           }
 101         });
 102         // set selected
 103         s2.selected = 'item5';
 104         asyncPlatformFlush(function() {
 105           // check core-select event
 106           assert.equal(selectEventCounter, 1);
 107           // check selected class
 108           assert.isTrue(s2.children[4].classList.contains('my-selected'));
 109           // check selectedItem
 110           assert.equal(s2.selectedItem, s2.children[4]);
 111           // selecting the same value shouldn't fire core-select
 112           selectEventCounter = 0;
 113           s2.selected = 'item5';
 114           flush(function() {
 115             assert.equal(selectEventCounter, 0);
 116             done();
 117           });
 118         });
 119       });
 120
 121     });
 122
 123   </script>
 124
 125 </body>
 126 </html>