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-attr-for-selected</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
24  </head>
25  <body>
26
27    <test-fixture id="basic">
28      <template>
29        <paper-tabs attr-for-selected="name" selected="bar">
30          <paper-tab name="foo">ITEM FOO</paper-tab>
31          <paper-tab name="bar">ITEM BAR</paper-tab>
32          <paper-tab name="zot">ITEM ZOT</paper-tab>
33        </paper-tabs>
34      </template>
35    </test-fixture>
36
37    <script>
38
39      suite('set the selected attribute', function() {
40
41        var tabs;
42
43        setup(function () {
44          tabs = fixture('basic');
45        });
46
47        test('selected value', function() {
48          assert.equal(tabs.selected, 'bar');
49        });
50
51        test('selected tab has iron-selected class', function() {
52          Polymer.dom.flush();
53          assert.isTrue(tabs.querySelector('[name=bar]').classList.contains('iron-selected'));
54        });
55
56      });
57
58      suite('select tab via click', function() {
59
60        var tabs, tab;
61
62        setup(function () {
63          tabs = fixture('basic');
64          tab = tabs.querySelector('[name=zot]');
65          tab.dispatchEvent(new CustomEvent('click', {bubbles: true}));
66        });
67
68        test('selected value', function() {
69          assert.equal(tabs.selected, 'zot');
70        });
71
72        test('selected tab has iron-selected class', function() {
73          Polymer.dom.flush();
74          assert.isTrue(tab.classList.contains('iron-selected'));
75        });
76
77      });
78
79    </script>
80
81  </body>
82</html>
83