Home | History | Annotate | Download | only in test 
      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-selected-attribute</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   </style>
     31 
     32 </head>
     33 <body>
     34 
     35   <test-fixture id="test">
     36     <template>
     37       <iron-selector id="selector">
     38         <div>Item 0</div>
     39         <div>Item 1</div>
     40         <div>Item 2</div>
     41         <div>Item 3</div>
     42         <div>Item 4</div>
     43       </iron-selector>
     44     </template>
     45   </test-fixture>
     46 
     47   <test-fixture id="test-attr-change">
     48     <template>
     49       <iron-selector id="selector" attr-for-selected="data-x" selected="x-1">
     50         <div data-x="x-1" data-y="y-1">1</div>
     51         <div data-x="x-2" data-y="y-2">2</div>
     52         <div data-x="x-3" data-y="y-3">3</div>
     53       </iron-selector>
     54     </template>
     55   </test-fixture>
     56 
     57   <test-fixture id="test-attr-change-multi">
     58     <template>
     59       <iron-selector multi id="selector"
     60                      attr-for-selected="data-x"
     61                      selected-values='["x-1","x-2"]'>
     62         <div data-x="x-1" data-y="y-1">1</div>
     63         <div data-x="x-2" data-y="y-2">2</div>
     64         <div data-x="x-3" data-y="y-3">3</div>
     65       </iron-selector>
     66     </template>
     67   </test-fixture>
     68 
     69   <script>
     70 
     71     suite('selected attributes', function() {
     72 
     73       var s;
     74 
     75       setup(function () {
     76         s = fixture('test');
     77       });
     78 
     79       test('custom selectedAttribute', function() {
     80         // set selectedAttribute
     81         s.selectedAttribute = 'myattr';
     82         // check selected attribute (should not be there)
     83         assert.isFalse(s.children[4].hasAttribute('myattr'));
     84         // set selected
     85         s.selected = 4;
     86         // now selected attribute should be there
     87         assert.isTrue(s.children[4].hasAttribute('myattr'));
     88       });
     89 
     90     });
     91 
     92     suite('changing attrForSelected', function() {
     93 
     94       var s;
     95 
     96       setup(function () {
     97         s = fixture('test-attr-change');
     98       });
     99 
    100       test('changing selectedAttribute', function() {
    101         Polymer.dom.flush();
    102         s.attrForSelected = 'data-y';
    103         assert.equal(s.selected, 'y-1');
    104       });
    105 
    106     });
    107 
    108     suite('changing attrForSelected in multi', function() {
    109 
    110       var s;
    111 
    112       setup(function () {
    113         s = fixture('test-attr-change-multi');
    114       });
    115 
    116       test('changing selectedAttribute', function() {
    117         Polymer.dom.flush();
    118         s.attrForSelected = 'data-y';
    119         assert.equal(s.selectedValues.length, 2);
    120         assert.equal(s.selectedValues[0],'y-1');
    121         assert.equal(s.selectedValues[1],'y-2');
    122       });
    123 
    124     });
    125 
    126   </script>
    127 
    128 </body>
    129 </html>
    130