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-links</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="links">
29      <template>
30        <paper-tabs>
31          <paper-tab link><a href="#one" tabindex="-1">ONE</a></paper-tab>
32          <paper-tab link><a href="#two" tabindex="-1">TWO</a></paper-tab>
33          <paper-tab link><a href="#three" tabindex="-1">THREE</a></paper-tab>
34        </paper-tabs>
35      </template>
36    </test-fixture>
37
38    <test-fixture id="not-links">
39      <template>
40        <paper-tabs>
41          <paper-tab><a href="#one" tabindex="-1">ONE</a></paper-tab>
42          <paper-tab><a href="#two" tabindex="-1">TWO</a></paper-tab>
43          <paper-tab><a href="#three" tabindex="-1">THREE</a></paper-tab>
44        </paper-tabs>
45      </template>
46    </test-fixture>
47
48    <test-fixture id="not-first-child">
49      <template>
50        <paper-tabs>
51          <paper-tab>
52            <div>
53              <a href="#one" tabindex="-1">ONE</a>
54            </div>
55          </paper-tab>
56          <paper-tab>
57            <div>
58              <a href="#two" tabindex="-1">TWO</a>
59            </div>
60          </paper-tab>
61          <paper-tab>
62            <div>
63              <a href="#three" tabindex="-1">THREE</a>
64            </div>
65          </paper-tab>
66        </paper-tabs>
67      </template>
68    </test-fixture>
69
70    <script>
71
72      suite('links', function() {
73
74        suite('has link attribute', function() {
75
76          var tabs;
77          var tab, anchor;
78
79          setup(function () {
80            tabs = fixture('links');
81            tab = tabs.querySelectorAll('paper-tab')[1];
82            anchor = tab.querySelector('a');
83          });
84
85          test('pressing enter on tab causes anchor click', function(done) {
86            tab.addEventListener('click', function onTabClick(event) {
87              tab.removeEventListener('click', onTabClick);
88
89              expect(event.target).to.be.equal(anchor);
90              done();
91            });
92
93            MockInteractions.pressEnter(tab);
94          });
95
96          test('pressing space on tab causes anchor click', function(done) {
97            tab.addEventListener('click', function onTabClick(event) {
98              tab.removeEventListener('click', onTabClick);
99
100              expect(event.target).to.be.equal(anchor);
101              done();
102            });
103
104            MockInteractions.pressSpace(tab);
105          });
106
107        });
108
109        suite('does not have link attribute', function() {
110
111          var tabs;
112          var tab, anchor;
113
114          setup(function () {
115            tabs = fixture('not-links');
116            tab = tabs.querySelectorAll('paper-tab')[1];
117            anchor = tab.querySelector('a');
118          });
119
120          test('pressing enter on tab does not cause anchor click', function(done) {
121            tab.addEventListener('click', function onTabClick(event) {
122              tab.removeEventListener('click', onTabClick);
123
124              expect(event.target).to.not.equal(anchor);
125              expect(event.target).to.be.equal(tab);
126              done();
127            });
128
129            MockInteractions.pressEnter(tab);
130          });
131
132        });
133
134        suite('not first child', function() {
135
136          var tabs;
137          var tab, anchor;
138
139          setup(function () {
140            tabs = fixture('links');
141            tab = tabs.querySelectorAll('paper-tab')[1];
142            anchor = tab.querySelector('a');
143          });
144
145          test('pressing enter on tab causes anchor click', function(done) {
146            tab.addEventListener('click', function onTabClick(event) {
147              tab.removeEventListener('click', onTabClick);
148
149              expect(event.target).to.be.equal(anchor);
150              done();
151            });
152
153            MockInteractions.pressEnter(tab);
154          });
155
156        });
157
158      });
159
160    </script>
161
162  </body>
163</html>
164