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<html>
12  <head>
13
14    <title>paper-submenu tests</title>
15
16    <meta charset="utf-8">
17    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
18    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
19
20    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
21
22    <script src="../../web-component-tester/browser.js"></script>
23    <script src="../../iron-test-helpers/mock-interactions.js"></script>
24
25    <link rel="import" href="../../paper-item/paper-item.html">
26    <link rel="import" href="../paper-menu.html">
27    <link rel="import" href="../paper-submenu.html">
28
29  </head>
30  <style>
31    paper-item {
32      font-weight: normal;
33    }
34  </style>
35  <body>
36
37    <test-fixture id="basic">
38      <template>
39        <paper-menu>
40          <paper-submenu>
41            <paper-item class="menu-trigger">Topic 1</paper-item>
42            <paper-menu class="menu-content">
43              <paper-item>item 1.1</paper-item>
44              <paper-item>item 1.2</paper-item>
45              <paper-item>item 1.3</paper-item>
46            </paper-menu>
47          </paper-submenu>
48          <paper-submenu>
49            <paper-item class="menu-trigger">Topic 2</paper-item>
50            <paper-menu class="menu-content">
51              <paper-item>item 2.1</paper-item>
52              <paper-item>item 2.2</paper-item>
53              <paper-item>item 2.3</paper-item>
54            </paper-menu>
55          </paper-submenu>
56          <paper-submenu disabled>
57            <paper-item class="menu-trigger">Topic 3</paper-item>
58            <paper-menu class="menu-content">
59              <paper-item>item 3.1</paper-item>
60              <paper-item>item 3.2</paper-item>
61              <paper-item>item 3.3</paper-item>
62            </paper-menu>
63          </paper-submenu>
64        </paper-menu>
65      </template>
66    </test-fixture>
67
68    <test-fixture id="opened">
69      <template>
70        <paper-menu>
71          <paper-submenu class="menu-content" opened>
72            <paper-item class="menu-trigger">My submenu is opened to start!</paper-item>
73            <paper-menu class="menu-content">
74              <paper-item>Triggered item</paper-item>
75            </paper-menu>
76          </paper-submenu>
77        </paper-menu>
78      </template>
79    </test-fixture>
80
81    <script>
82
83      suite('<paper-submenu>', function() {
84        var menu,
85            sub1, sub2, sub3,
86            collapse1, collapse2, collapse3,
87            trigger1, trigger2, trigger3;
88
89        setup(function() {
90          menu = fixture('basic');
91
92          sub1 = menu.querySelectorAll('paper-submenu')[0];
93          sub2 = menu.querySelectorAll('paper-submenu')[1];
94          sub3 = menu.querySelectorAll('paper-submenu')[2];
95
96          collapse1 = Polymer.dom(sub1.root).querySelector('iron-collapse');
97          collapse2 = Polymer.dom(sub2.root).querySelector('iron-collapse');
98          collapse3 = Polymer.dom(sub3.root).querySelector('iron-collapse');
99
100          trigger1 = sub1.querySelector('.menu-trigger');
101          trigger2 = sub2.querySelector('.menu-trigger');
102          trigger3 = sub3.querySelector('.menu-trigger');
103        });
104
105        test('selecting an item expands the submenu', function() {
106          assert.isFalse(collapse1.opened);
107          assert.isFalse(collapse2.opened);
108          assert.isFalse(collapse3.opened);
109
110          MockInteractions.tap(trigger1);
111
112          assert.isTrue(collapse1.opened);
113          assert.isFalse(collapse2.opened);
114          assert.isFalse(collapse3.opened);
115        });
116
117        test('selecting a different item closes the previously opened submenu', function() {
118          assert.isFalse(collapse1.opened);
119          assert.isFalse(collapse2.opened);
120          assert.isFalse(collapse3.opened);
121
122          MockInteractions.tap(trigger1);
123
124          assert.isTrue(collapse1.opened);
125          assert.isFalse(collapse2.opened);
126          assert.isFalse(collapse3.opened);
127
128          MockInteractions.tap(trigger2);
129
130          assert.isFalse(collapse1.opened);
131          assert.isTrue(collapse2.opened);
132          assert.isFalse(collapse3.opened);
133        });
134
135        test('cannot open a disabled submenu', function() {
136          assert.isFalse(collapse1.opened);
137          assert.isFalse(collapse2.opened);
138          assert.isFalse(collapse3.opened);
139
140          MockInteractions.tap(trigger3);
141
142          assert.isFalse(collapse1.opened);
143          assert.isFalse(collapse2.opened);
144          assert.isFalse(collapse3.opened);
145        });
146
147        test('selecting an item styles it and the parent', function() {
148          var boldDiv = document.createElement('div');
149          boldDiv.style.fontWeight = 'bold';
150          document.body.appendChild(boldDiv);
151
152          var normalDiv = document.createElement('div');
153          normalDiv.style.fontWeight = 'normal';
154          document.body.appendChild(normalDiv);
155
156          assert.equal(getComputedStyle(trigger1).fontWeight, getComputedStyle(normalDiv).fontWeight);
157          assert.equal(getComputedStyle(trigger2).fontWeight, getComputedStyle(normalDiv).fontWeight);
158          assert.equal(getComputedStyle(trigger3).fontWeight, getComputedStyle(normalDiv).fontWeight);
159
160          var item1 = sub1.querySelector('.menu-content').querySelector('paper-item');
161
162          MockInteractions.tap(trigger1);
163          // Nothing is initially selected.
164          assert.equal(getComputedStyle(item1).fontWeight, getComputedStyle(normalDiv).fontWeight);
165          MockInteractions.tap(item1);
166
167          assert.equal(getComputedStyle(item1).fontWeight, getComputedStyle(boldDiv).fontWeight);
168          assert.equal(getComputedStyle(trigger1).fontWeight, getComputedStyle(boldDiv).fontWeight);
169          assert.equal(getComputedStyle(trigger2).fontWeight, getComputedStyle(normalDiv).fontWeight);
170          assert.equal(getComputedStyle(trigger3).fontWeight, getComputedStyle(normalDiv).fontWeight);
171        });
172
173        test('selecting a new item de-styles the previous one', function() {
174          var boldDiv = document.createElement('div');
175          boldDiv.style.fontWeight = 'bold';
176          document.body.appendChild(boldDiv);
177
178          var normalDiv = document.createElement('div');
179          normalDiv.style.fontWeight = 'normal';
180          document.body.appendChild(normalDiv);
181
182          assert.equal(getComputedStyle(trigger1).fontWeight, getComputedStyle(normalDiv).fontWeight);
183          assert.equal(getComputedStyle(trigger2).fontWeight, getComputedStyle(normalDiv).fontWeight);
184          assert.equal(getComputedStyle(trigger3).fontWeight, getComputedStyle(normalDiv).fontWeight);
185
186          var item1 = sub1.querySelector('.menu-content').querySelector('paper-item');
187          var item2 = sub2.querySelector('.menu-content').querySelector('paper-item');
188
189          MockInteractions.tap(trigger1);
190          MockInteractions.tap(item1);
191          MockInteractions.tap(trigger2);
192          MockInteractions.tap(item2);
193
194          // Both children are still selected even though the first one is hidden.
195          assert.equal(getComputedStyle(item1).fontWeight, getComputedStyle(boldDiv).fontWeight);
196          assert.equal(getComputedStyle(item2).fontWeight, getComputedStyle(boldDiv).fontWeight);
197
198          assert.equal(getComputedStyle(trigger1).fontWeight, getComputedStyle(normalDiv).fontWeight);
199          assert.equal(getComputedStyle(trigger2).fontWeight, getComputedStyle(boldDiv).fontWeight);
200          assert.equal(getComputedStyle(trigger3).fontWeight, getComputedStyle(normalDiv).fontWeight);
201        });
202
203        test('focus a submenu should redirect focus to the trigger', function(done) {
204          MockInteractions.focus(sub1);
205          flush(function() {
206            assert.equal(sub1.shadowRoot ? sub1.shadowRoot.activeElement :
207                document.activeElement, sub1.__trigger);
208            done();
209          });
210        });
211      });
212
213      suite('<paper-submenu opened>', function() {
214        var opened;
215        var submenu;
216        var collapse;
217
218        var fail = function(msg) {
219          return function() {
220            throw new Error(msg);
221          };
222        };
223
224        setup(function() {
225          opened = fixture('opened');
226          submenu = opened.querySelector('paper-submenu');
227          collapse = Polymer.dom(submenu.root).querySelector('iron-collapse');
228        });
229
230        test('opened binding + .menu-trigger tap', function() {
231          assert.isTrue(submenu.opened);
232
233          var trigger = submenu.querySelector('.menu-trigger');
234          MockInteractions.tap(trigger);
235          assert.isFalse(submenu.opened);
236
237          MockInteractions.tap(trigger);
238          assert.isTrue(submenu.opened);
239        });
240
241        test('opened binding + open()/close()', function() {
242          assert.isTrue(submenu.opened);
243
244          submenu.close();
245          assert.isFalse(submenu.opened);
246          assert.isFalse(collapse.opened);
247
248          submenu.open();
249          assert.isTrue(submenu.opened);
250          assert.isTrue(collapse.opened);
251        });
252
253        test('opened binding + toggle()', function() {
254          assert.isTrue(submenu.opened);
255
256          submenu.toggle();
257          assert.isFalse(submenu.opened);
258          assert.isFalse(collapse.opened);
259
260          submenu.toggle();
261          assert.isTrue(submenu.opened);
262          assert.isTrue(collapse.opened);
263        });
264
265        test('opened binding + open() x 2', function() {
266          assert.isTrue(submenu.opened);
267
268          opened.addEventListener('paper-submenu-open', fail('duplicate open'));
269
270          submenu.open();  // Opening when already opened should not fire().
271        });
272
273        test('opened binding + close() x 2', function() {
274          submenu.close();
275          assert.isFalse(submenu.opened);
276
277          opened.addEventListener('paper-submenu-close', fail('duplicate close'));
278
279          submenu.close();  // Closing again when !opened should not fire().
280        });
281      });
282    </script>
283
284  </body>
285</html>
286