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-basic</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
31    .my-selected {
32      background: red;
33    }
34  </style>
35
36</head>
37<body>
38
39  <test-fixture id="defaults">
40    <template>
41      <iron-selector>
42        <div>Item 0</div>
43        <div>Item 1</div>
44        <div>Item 2</div>
45        <div>Item 3</div>
46        <div>Item 4</div>
47      </iron-selector>
48    </template>
49  </test-fixture>
50
51  <br><br>
52
53  <test-fixture id="basic">
54    <template>
55      <iron-selector selected="item2" attr-for-selected="id">
56        <div id="item0">Item 0</div>
57        <div id="item1">Item 1</div>
58        <div id="item2">Item 2</div>
59        <div id="item3">Item 3</div>
60        <div id="item4">Item 4</div>
61      </iron-selector>
62    </template>
63  </test-fixture>
64
65  <script>
66
67    suite('defaults', function() {
68
69      var s1;
70
71      setup(function () {
72        s1 = fixture('defaults');
73      });
74
75      test('to nothing selected', function() {
76        assert.equal(s1.selected, null);
77      });
78
79      test('to iron-selected as selectedClass', function() {
80        assert.equal(s1.selectedClass, 'iron-selected');
81      });
82
83      test('to false as multi', function() {
84        assert.isFalse(s1.multi);
85      });
86
87      test('to tap as activateEvent', function() {
88        assert.equal(s1.activateEvent, 'tap');
89      });
90
91      test('to nothing as attrForSelected', function() {
92        assert.equal(s1.attrForSelected, null);
93      });
94
95      test('as many items as children', function() {
96        assert.equal(s1.items.length, s1.querySelectorAll('div').length);
97      });
98    });
99
100    suite('basic', function() {
101
102      var s2;
103
104      setup(function () {
105        s2 = fixture('basic');
106      });
107
108      test('honors the attrForSelected attribute', function(done) {
109        Polymer.Base.async(function() {
110          assert.equal(s2.attrForSelected, 'id');
111          assert.equal(s2.selected, 'item2');
112          assert.equal(s2.selectedItem, document.querySelector('#item2'));
113          done();
114        });
115      });
116
117      test('allows assignment to selected', function() {
118        // set selected
119        s2.selected = 'item4';
120        // check selected class
121        assert.isTrue(s2.children[4].classList.contains('iron-selected'));
122        // check item
123        assert.equal(s2.selectedItem, s2.children[4]);
124      });
125
126      test('fire iron-select when selected is set', function() {
127        // setup listener for iron-select event
128        var selectedEventCounter = 0;
129        s2.addEventListener('iron-select', function(e) {
130          selectedEventCounter++;
131        });
132        // set selected
133        s2.selected = 'item4';
134        // check iron-select event
135        assert.equal(selectedEventCounter, 1);
136      });
137
138      test('set selected to old value', function() {
139        // setup listener for iron-select event
140        var selectedEventCounter = 0;
141        s2.addEventListener('iron-select', function(e) {
142          selectedEventCounter++;
143        });
144        // selecting the same value shouldn't fire iron-select
145        s2.selected = 'item2';
146        assert.equal(selectedEventCounter, 0);
147      });
148
149      test('force synchronous item update', function() {
150        expect(s2.items.length).to.be.equal(5);
151        Polymer.dom(s2).appendChild(document.createElement('div'));
152        expect(s2.items.length).to.be.equal(5);
153        s2.forceSynchronousItemUpdate();
154        expect(s2.items.length).to.be.equal(6);
155      });
156
157      suite('`select()` and `selectIndex()`', function() {
158        test('`select()` selects an item with the given value', function() {
159          s2.select('item1');
160          assert.equal(s2.selected, 'item1');
161
162          s2.select('item3');
163          assert.equal(s2.selected, 'item3');
164
165          s2.select('item2');
166          assert.equal(s2.selected, 'item2');
167        });
168
169        test('`selectIndex()` selects an item with the given index', function() {
170          assert.equal(s2.selectedItem, undefined);
171
172          s2.selectIndex(1);
173          assert.equal(s2.selected, 'item1');
174          assert.equal(s2.selectedItem, s2.items[1]);
175
176          s2.selectIndex(3);
177          assert.equal(s2.selected, 'item3');
178          assert.equal(s2.selectedItem, s2.items[3]);
179
180          s2.selectIndex(4);
181          assert.equal(s2.selected, 'item4');
182          assert.equal(s2.selectedItem, s2.items[4]);
183        });
184      });
185
186      suite('items changing', function() {
187        var s1;
188
189        setup(function() {
190          s1 = fixture('defaults');
191        });
192
193        test('cause iron-items-changed to fire', function(done) {
194          var newItem = document.createElement('div');
195          var changeCount = 0;
196
197          newItem.id = 'item999';
198
199          s2.addEventListener('iron-items-changed', function(event) {
200            changeCount++;
201            var mutation = event.detail;
202            assert.notEqual(mutation, undefined);
203            assert.notEqual(mutation.addedNodes, undefined);
204            assert.notEqual(mutation.removedNodes, undefined);
205          });
206
207          Polymer.dom(s2).appendChild(newItem);
208
209          Polymer.Base.async(function() {
210            Polymer.dom(s2).removeChild(newItem);
211
212            Polymer.Base.async(function() {
213              expect(changeCount).to.be.equal(2);
214              done();
215            }, 1);
216          }, 1);
217        });
218
219        test('updates selected item', function(done) {
220          s1.addEventListener('iron-items-changed', function firstListener() {
221            s1.removeEventListener('iron-items-changed', firstListener);
222            var firstElementChild = Polymer.dom(s1).firstElementChild;
223            expect(firstElementChild).to.be.equal(s1.selectedItem);
224            expect(firstElementChild.classList.contains('iron-selected'))
225                .to.be.eql(true);
226            Polymer.dom(s1).removeChild(s1.selectedItem);
227
228            s1.addEventListener('iron-items-changed', function() {
229              firstElementChild = Polymer.dom(s1).firstElementChild;
230              expect(firstElementChild).to.be.equal(s1.selectedItem);
231              expect(firstElementChild.classList.contains('iron-selected'))
232                  .to.be.eql(true);
233              done();
234            });
235          });
236          s1.selected = 0;
237        });
238      });
239
240      suite('dynamic selector', function() {
241        test('selects dynamically added child automatically', function(done) {
242          var selector = document.createElement('iron-selector');
243          var child = document.createElement('div');
244
245          selector.selected = '0';
246          child.textContent = 'Item 0';
247
248          Polymer.dom(selector).appendChild(child);
249          document.body.appendChild(selector);
250
251          Polymer.Base.async(function() {
252            assert.equal(child.className, 'iron-selected');
253            document.body.removeChild(selector);
254            done();
255          }, 1);
256        });
257      });
258    });
259
260  </script>
261
262</body>
263</html>
264