• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!doctype html>
2<!--
3@license
4Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8Code distributed by Google as part of the polymer project is also
9subject 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-content</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="content-element.html">
25
26  <style>
27    .iron-selected {
28      background: #ccc;
29    }
30  </style>
31
32</head>
33<body>
34
35  <test-content-element id="selector1" selected="item0">
36    <div id="item0">item0</div>
37    <div id="item1">item1</div>
38    <div id="item2">item2</div>
39    <div id="item3">item3</div>
40  </test-content-element>
41
42  <test-content-element id="selector2" selected="item0" selectable="item">
43    <item id="item0">item0</item>
44    <hr>
45    <item id="item1">item1</item>
46    <item id="item2">item2</item>
47    <hr>
48    <item id="item3">item3</item>
49  </test-content-element>
50
51  <test-content-element id="selector3" selected="item0">
52    <template is="dom-repeat" id="t">
53      <div id$="[[item.name]]">[[item.name]]</div>
54    </template>
55  </test-content-element>
56
57  <script>
58
59    var s1 = document.querySelector('#selector1');
60    var s2 = document.querySelector('#selector2');
61    var s3 = document.querySelector('#selector3');
62
63    var t = document.querySelector('#t');
64
65    suite('content', function() {
66
67      test('attribute selected', function() {
68        // check selected class
69        assert.isTrue(s1.querySelector('#item0').classList.contains('iron-selected'));
70      });
71
72      test('set selected', function() {
73        // set selected
74        s1.selected = 'item1';
75        // check selected class
76        assert.isTrue(s1.querySelector('#item1').classList.contains('iron-selected'));
77      });
78
79      test('get items', function() {
80        assert.equal(s1.$.selector.items.length, 4);
81      });
82
83      test('activate event', function() {
84        var item = s1.querySelector('#item2');
85        item.dispatchEvent(new CustomEvent('tap', {bubbles: true}));
86        // check selected class
87        assert.isTrue(item.classList.contains('iron-selected'));
88      });
89
90      test('add item dynamically', function() {
91        var item = document.createElement('div');
92        item.id = 'item4';
93        item.textContent = 'item4';
94        Polymer.dom(s1).appendChild(item);
95        Polymer.dom.flush();
96        // set selected
97        s1.selected = 'item4';
98        // check items length
99        assert.equal(s1.$.selector.items.length, 5);
100        // check selected class
101        assert.isTrue(s1.querySelector('#item4').classList.contains('iron-selected'));
102      });
103
104    });
105
106    suite('content with selectable', function() {
107
108      test('attribute selected', function() {
109        // check selected class
110        assert.isTrue(s2.querySelector('#item0').classList.contains('iron-selected'));
111      });
112
113      test('set selected', function() {
114        // set selected
115        s2.selected = 'item1';
116        // check selected class
117        assert.isTrue(s2.querySelector('#item1').classList.contains('iron-selected'));
118      });
119
120      test('get items', function() {
121        assert.equal(s2.$.selector.items.length, 4);
122      });
123
124      test('activate event', function() {
125        var item = s2.querySelector('#item2');
126        item.dispatchEvent(new CustomEvent('tap', {bubbles: true}));
127        // check selected class
128        assert.isTrue(item.classList.contains('iron-selected'));
129      });
130
131      test('add item dynamically', function() {
132        var item = document.createElement('item');
133        item.id = 'item4';
134        item.textContent = 'item4';
135        Polymer.dom(s2).appendChild(item);
136        Polymer.dom.flush();
137        // set selected
138        s2.selected = 'item4';
139        // check items length
140        assert.equal(s2.$.selector.items.length, 5);
141        // check selected class
142        assert.isTrue(s2.querySelector('#item4').classList.contains('iron-selected'));
143      });
144
145    });
146
147    suite('content with dom-repeat', function() {
148
149      test('supports repeated children', function(done) {
150        t.items = [{name:'item0'}, {name: 'item1'}, {name: 'item2'}, {name: 'item3'}];
151        setTimeout(function() {
152          // check selected
153          assert.equal(s3.selected, 'item0');
154          // check selected class
155          assert.isTrue(s3.querySelector('#item0').classList.contains('iron-selected'));
156          // set selected
157          s3.selected = 'item2';
158          // check selected class
159          assert.isTrue(s3.querySelector('#item2').classList.contains('iron-selected'));
160          done();
161        });
162      });
163
164    });
165
166  </script>
167
168</body>
169</html>
170