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>paper-tabs-basic</title>
16    <meta charset="utf-8">
17    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
18
19    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
20    <script src="../../web-component-tester/browser.js"></script>
21
22    <link rel="import" href="../paper-tabs.html">
23    <link rel="import" href="../../iron-test-helpers/iron-test-helpers.html">
24
25  </head>
26  <body>
27
28    <test-fixture id="basic">
29      <template>
30        <paper-tabs>
31          <paper-tab>ITEM ONE</paper-tab>
32          <paper-tab>ITEM TWO</paper-tab>
33          <paper-tab>ITEM THREE</paper-tab>
34        </paper-tabs>
35      </template>
36    </test-fixture>
37
38    <test-fixture id="HiddenTabs">
39      <template>
40        <paper-tabs hidden>
41          <paper-tab>ITEM ONE</paper-tab>
42          <paper-tab>ITEM TWO</paper-tab>
43        </paper-tabs>
44      </template>
45    </test-fixture>
46
47    <script>
48
49      function ensureDocumentHasFocus() {
50        window.top && window.top.focus();
51      }
52
53      function checkSelectionBar(tabs, tab) {
54        var tabRect = tab.getBoundingClientRect();
55        var rect = Polymer.dom(tabs.root).querySelector('#selectionBar').getBoundingClientRect();
56        assert.equal(Math.round(tabRect.left), Math.round(rect.left));
57      }
58
59      suite('defaults', function() {
60
61        var tabs;
62
63        setup(function () {
64          tabs = fixture('basic');
65        });
66
67        test('to nothing selected', function() {
68          assert.equal(tabs.selected, undefined);
69        });
70
71        test('no tabs have iron-selected class', function() {
72          Array.prototype.forEach.call(tabs.querySelectorAll('paper-tab'), function(tab) {
73            assert.isFalse(tab.classList.contains('iron-selected'));
74          });
75        });
76
77        test('to false as noink', function() {
78          assert.equal(tabs.noink, false);
79        });
80
81        test('to false as noBar', function() {
82          assert.equal(tabs.noBar, false);
83        });
84
85        test('to false as noSlide', function() {
86          assert.equal(tabs.noSlide, false);
87        });
88
89        test('to false as scrollable', function() {
90          assert.equal(tabs.scrollable, false);
91        });
92
93        test('to false as disableDrag', function() {
94          assert.equal(tabs.disableDrag, false);
95        });
96
97        test('to false as hideScrollButtons', function() {
98          assert.equal(tabs.hideScrollButtons, false);
99        });
100
101        test('to false as alignBottom', function() {
102          assert.equal(tabs.alignBottom, false);
103        });
104      });
105
106      suite('hidden tabs', function() {
107        var tabs;
108
109        setup(function() {
110          tabs = fixture('HiddenTabs');
111        });
112
113        test('choose the correct bar position once made visible', function() {
114          tabs.removeAttribute('hidden');
115          tabs.selected = 0;
116          expect(tabs._width).to.be.greaterThan(0);
117          expect(tabs._left).to.be.equal(0);
118        });
119      });
120
121      suite('set the selected attribute', function() {
122
123        var tabs, index = 0;
124
125        setup(function () {
126          tabs = fixture('basic');
127          tabs.selected = index;
128        });
129
130        test('selected value', function() {
131          assert.equal(tabs.selected, index);
132        });
133
134        test('selected tab has iron-selected class', function() {
135          var tab = tabs.querySelectorAll('paper-tab')[index];
136          assert.isTrue(tab.classList.contains('iron-selected'));
137        });
138
139        test('selected tab has selection bar position at the bottom of the tab', function(done) {
140          setTimeout(function() {
141            checkSelectionBar(tabs, tabs.querySelectorAll('paper-tab')[index]);
142            done();
143          }, 1000);
144        });
145
146      });
147
148      suite('select tab via click', function() {
149
150        var tabs, index = 1;
151        var tab;
152
153        setup(function () {
154          tabs = fixture('basic');
155          tab = tabs.querySelectorAll('paper-tab')[index];
156          tab.dispatchEvent(new CustomEvent('click', {bubbles: true}));
157        });
158
159        test('selected value', function() {
160          assert.equal(tabs.selected, index);
161        });
162
163        test('selected tab has iron-selected class', function() {
164          var tab = tabs.querySelectorAll('paper-tab')[index];
165          assert.isTrue(tab.classList.contains('iron-selected'));
166        });
167
168        test('selected tab has selection bar position at the bottom of the tab', function(done) {
169          setTimeout(function() {
170            checkSelectionBar(tabs, tabs.querySelectorAll('paper-tab')[index]);
171            done();
172          }, 1000);
173        });
174
175        test('pressing enter on tab causes a click', function(done) {
176          var clickCount = 0;
177          tab.addEventListener('click', function onTabClick() {
178            clickCount++;
179            tab.removeEventListener('click', onTabClick);
180
181            expect(clickCount).to.be.equal(1);
182            done();
183          });
184
185          MockInteractions.pressEnter(tab);
186        });
187      });
188
189      suite('noink attribute', function() {
190        var tabs;
191
192        setup(function () {
193          tabs = fixture('basic');
194        });
195
196        test('noink attribute propagates to all descendant tabs', function() {
197          tabs.noink = true;
198          Array.prototype.slice.apply(tabs.querySelectorAll('paper-tab')).forEach(function(tab) {
199            assert.isTrue(tab.noink);
200          });
201
202          tabs.noink = false;
203          Array.prototype.slice.apply(tabs.querySelectorAll('paper-tab')).forEach(function(tab) {
204            assert.isFalse(tab.noink);
205          });
206        });
207      });
208
209      suite('accessibility', function() {
210        var LEFT = 37;
211        var RIGHT = 39;
212        var tabs;
213
214        setup(function () {
215          tabs = fixture('basic');
216          Polymer.dom.flush();
217        });
218
219        test('paper-tabs has role tablist', function() {
220          assert.equal(tabs.getAttribute('role'), 'tablist');
221        });
222
223        test('paper-tab has role tab', function() {
224          tabs.items.forEach(function(tab) {
225            assert.equal(tab.getAttribute('role'), 'tab');
226          });
227        });
228
229        test('without autoselect, tabs are not automatically selected',
230          function(done) {
231            ensureDocumentHasFocus();
232            Polymer.Base.async(function() {
233              tabs.select(0);
234              MockInteractions.pressAndReleaseKeyOn(tabs.selectedItem, RIGHT);
235              Polymer.Base.async(function() {
236                assert.equal(tabs.selected, 0);
237
238                MockInteractions.pressAndReleaseKeyOn(tabs.selectedItem, LEFT);
239                Polymer.Base.async(function() {
240                  assert.equal(tabs.selected, 0);
241
242                  MockInteractions.pressAndReleaseKeyOn(tabs.selectedItem, LEFT);
243                  Polymer.Base.async(function() {
244                    assert.equal(tabs.selected, 0);
245                    done();
246                  }, 100);
247                }, 100);
248              }, 100);
249            });
250          });
251
252        test('with autoselect, tabs are selected when moved to using arrow ' +
253          'keys', function(done) {
254            ensureDocumentHasFocus();
255            Polymer.Base.async(function() {
256              tabs.autoselect = true;
257              tabs.select(0);
258              MockInteractions.pressAndReleaseKeyOn(tabs.selectedItem, RIGHT);
259              Polymer.Base.async(function() {
260                assert.equal(tabs.selected, 1);
261
262                MockInteractions.pressAndReleaseKeyOn(tabs.selectedItem, RIGHT);
263                Polymer.Base.async(function() {
264                  assert.equal(tabs.selected, 2);
265
266                  MockInteractions.pressAndReleaseKeyOn(tabs.selectedItem, LEFT);
267                  Polymer.Base.async(function() {
268                    assert.equal(tabs.selected, 1);
269                    done();
270                  }, 100);
271                }, 100);
272              }, 100);
273            });
274          });
275
276        test('with autoselect, tabs are selected when moved to using arrow ' +
277          'keys (RTL)',function(done) {
278            ensureDocumentHasFocus();
279            Polymer.Base.async(function() {
280              tabs.setAttribute('dir', 'rtl');
281
282              tabs.autoselect = true;
283              tabs.select(0);
284              MockInteractions.pressAndReleaseKeyOn(tabs.selectedItem, LEFT);
285              Polymer.Base.async(function() {
286                assert.equal(tabs.selected, 1);
287
288                MockInteractions.pressAndReleaseKeyOn(tabs.selectedItem, LEFT);
289                Polymer.Base.async(function() {
290                  assert.equal(tabs.selected, 2);
291
292                  MockInteractions.pressAndReleaseKeyOn(tabs.selectedItem, RIGHT);
293                  Polymer.Base.async(function() {
294                    assert.equal(tabs.selected, 1);
295                    done();
296                  }, 100);
297                }, 100);
298              }, 100);
299            });
300          });
301
302        test('with autoselect-delay zero, tabs are selected with ' +
303          'microtask timing after the keyup', function(done) {
304            ensureDocumentHasFocus();
305            Polymer.Base.async(function() {
306              tabs.autoselect = true;
307              tabs.autoselectDelay = 0;
308              tabs.select(0);
309
310              MockInteractions.keyDownOn(tabs.selectedItem, RIGHT);
311              Polymer.Base.async(function() {
312                assert.equal(tabs.selected, 0);
313                assert.equal(tabs.items.indexOf(tabs.focusedItem), 1);
314
315                // No keyup between keydown events: the key is being held.
316                MockInteractions.keyDownOn(tabs.selectedItem, RIGHT);
317                Polymer.Base.async(function() {
318                  assert.equal(tabs.selected, 0);
319                  assert.equal(tabs.items.indexOf(tabs.focusedItem), 2);
320
321                  MockInteractions.keyUpOn(tabs.selectedItem, RIGHT);
322                  assert.equal(tabs.selected, 0);
323                  Polymer.Base.async(function() {
324                    assert.equal(tabs.selected, 2);
325                    assert.equal(tabs.items.indexOf(tabs.focusedItem), 2);
326
327                    MockInteractions.keyDownOn(tabs.selectedItem, LEFT);
328                    Polymer.Base.async(function() {
329                      assert.equal(tabs.selected, 2);
330                      assert.equal(tabs.items.indexOf(tabs.focusedItem), 1);
331
332                      MockInteractions.keyUpOn(tabs.selectedItem, LEFT);
333                      assert.equal(tabs.selected, 2);
334                      Polymer.Base.async(function() {
335                        assert.equal(tabs.selected, 1);
336                        done();
337                      });
338                    });
339                  });
340                });
341              });
342            });
343          });
344
345        test('with autoselect-delay positive, tabs are selected with ' +
346          'microtask timing after the keyup and delay', function(done) {
347            ensureDocumentHasFocus();
348            Polymer.Base.async(function() {
349              var DELAY = 100;
350
351              tabs.autoselect = true;
352              tabs.autoselectDelay = DELAY;
353              tabs.select(0);
354
355              MockInteractions.keyDownOn(tabs.selectedItem, RIGHT);
356              Polymer.Base.async(function() {
357                assert.equal(tabs.selected, 0);
358                assert.equal(tabs.items.indexOf(tabs.focusedItem), 1);
359
360                // No keyup between keydown events: the key is being held.
361                MockInteractions.keyDownOn(tabs.selectedItem, RIGHT);
362                Polymer.Base.async(function() {
363                  assert.equal(tabs.selected, 0);
364                  assert.equal(tabs.items.indexOf(tabs.focusedItem), 2);
365
366                  MockInteractions.keyUpOn(tabs.selectedItem, RIGHT);
367                  assert.equal(tabs.selected, 0);
368                  Polymer.Base.async(function() {
369                    assert.equal(tabs.selected, 2);
370                    assert.equal(tabs.items.indexOf(tabs.focusedItem), 2);
371
372                    MockInteractions.keyDownOn(tabs.selectedItem, LEFT);
373                    Polymer.Base.async(function() {
374                      assert.equal(tabs.selected, 2);
375                      assert.equal(tabs.items.indexOf(tabs.focusedItem), 1);
376
377                      MockInteractions.keyUpOn(tabs.selectedItem, LEFT);
378                      assert.equal(tabs.selected, 2);
379                      Polymer.Base.async(function() {
380                        assert.equal(tabs.selected, 1);
381                        done();
382                      }, DELAY + 100);
383                    });
384                  }, DELAY + 100);
385                });
386              });
387            });
388          });
389      });
390
391    </script>
392
393  </body>
394</html>
395