1 <!doctype html> 2 <!-- 3 @license 4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 5 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 7 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 8 Code distributed by Google as part of the polymer project is also 9 subject 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 <script> 69 70 suite('<paper-submenu>', function() { 71 var menu, 72 sub1, sub2, sub3, 73 collapse1, collapse2, collapse3, 74 trigger1, trigger2, trigger3; 75 76 setup(function() { 77 menu = fixture('basic'); 78 79 sub1 = menu.querySelectorAll('paper-submenu')[0]; 80 sub2 = menu.querySelectorAll('paper-submenu')[1]; 81 sub3 = menu.querySelectorAll('paper-submenu')[2]; 82 83 collapse1 = Polymer.dom(sub1.root).querySelector('iron-collapse'); 84 collapse2 = Polymer.dom(sub2.root).querySelector('iron-collapse'); 85 collapse3 = Polymer.dom(sub3.root).querySelector('iron-collapse'); 86 87 trigger1 = sub1.querySelector('.menu-trigger'); 88 trigger2 = sub2.querySelector('.menu-trigger'); 89 trigger3 = sub3.querySelector('.menu-trigger'); 90 }); 91 92 test('selecting an item expands the submenu', function() { 93 assert.isFalse(collapse1.opened); 94 assert.isFalse(collapse2.opened); 95 assert.isFalse(collapse3.opened); 96 97 MockInteractions.tap(trigger1); 98 99 assert.isTrue(collapse1.opened); 100 assert.isFalse(collapse2.opened); 101 assert.isFalse(collapse3.opened); 102 }); 103 104 test('selecting a different item closes the previously opened submenu', function() { 105 assert.isFalse(collapse1.opened); 106 assert.isFalse(collapse2.opened); 107 assert.isFalse(collapse3.opened); 108 109 MockInteractions.tap(trigger1); 110 111 assert.isTrue(collapse1.opened); 112 assert.isFalse(collapse2.opened); 113 assert.isFalse(collapse3.opened); 114 115 MockInteractions.tap(trigger2); 116 117 assert.isFalse(collapse1.opened); 118 assert.isTrue(collapse2.opened); 119 assert.isFalse(collapse3.opened); 120 }); 121 122 test('cannot open a disabled submenu', function() { 123 assert.isFalse(collapse1.opened); 124 assert.isFalse(collapse2.opened); 125 assert.isFalse(collapse3.opened); 126 127 MockInteractions.tap(trigger3); 128 129 assert.isFalse(collapse1.opened); 130 assert.isFalse(collapse2.opened); 131 assert.isFalse(collapse3.opened); 132 }); 133 134 test('selecting an item styles it and the parent', function() { 135 var boldDiv = document.createElement('div'); 136 boldDiv.style.fontWeight = 'bold'; 137 document.body.appendChild(boldDiv); 138 139 var normalDiv = document.createElement('div'); 140 normalDiv.style.fontWeight = 'normal'; 141 document.body.appendChild(normalDiv); 142 143 assert.equal(getComputedStyle(trigger1).fontWeight, getComputedStyle(normalDiv).fontWeight); 144 assert.equal(getComputedStyle(trigger2).fontWeight, getComputedStyle(normalDiv).fontWeight); 145 assert.equal(getComputedStyle(trigger3).fontWeight, getComputedStyle(normalDiv).fontWeight); 146 147 var item1 = sub1.querySelector('.menu-content').querySelector('paper-item'); 148 149 MockInteractions.tap(trigger1); 150 // Nothing is initially selected. 151 assert.equal(getComputedStyle(item1).fontWeight, getComputedStyle(normalDiv).fontWeight); 152 MockInteractions.tap(item1); 153 154 assert.equal(getComputedStyle(item1).fontWeight, getComputedStyle(boldDiv).fontWeight); 155 assert.equal(getComputedStyle(trigger1).fontWeight, getComputedStyle(boldDiv).fontWeight); 156 assert.equal(getComputedStyle(trigger2).fontWeight, getComputedStyle(normalDiv).fontWeight); 157 assert.equal(getComputedStyle(trigger3).fontWeight, getComputedStyle(normalDiv).fontWeight); 158 }); 159 160 test('selecting a new item de-styles the previous one', function() { 161 var boldDiv = document.createElement('div'); 162 boldDiv.style.fontWeight = 'bold'; 163 document.body.appendChild(boldDiv); 164 165 var normalDiv = document.createElement('div'); 166 normalDiv.style.fontWeight = 'normal'; 167 document.body.appendChild(normalDiv); 168 169 assert.equal(getComputedStyle(trigger1).fontWeight, getComputedStyle(normalDiv).fontWeight); 170 assert.equal(getComputedStyle(trigger2).fontWeight, getComputedStyle(normalDiv).fontWeight); 171 assert.equal(getComputedStyle(trigger3).fontWeight, getComputedStyle(normalDiv).fontWeight); 172 173 var item1 = sub1.querySelector('.menu-content').querySelector('paper-item'); 174 var item2 = sub2.querySelector('.menu-content').querySelector('paper-item'); 175 176 MockInteractions.tap(trigger1); 177 MockInteractions.tap(item1); 178 MockInteractions.tap(trigger2); 179 MockInteractions.tap(item2); 180 181 // Both children are still selected even though the first one is hidden. 182 assert.equal(getComputedStyle(item1).fontWeight, getComputedStyle(boldDiv).fontWeight); 183 assert.equal(getComputedStyle(item2).fontWeight, getComputedStyle(boldDiv).fontWeight); 184 185 assert.equal(getComputedStyle(trigger1).fontWeight, getComputedStyle(normalDiv).fontWeight); 186 assert.equal(getComputedStyle(trigger2).fontWeight, getComputedStyle(boldDiv).fontWeight); 187 assert.equal(getComputedStyle(trigger3).fontWeight, getComputedStyle(normalDiv).fontWeight); 188 }); 189 190 test('focus a submenu should redirect focus to the trigger', function(done) { 191 MockInteractions.focus(sub1); 192 flush(function() { 193 assert.equal(sub1.shadowRoot ? sub1.shadowRoot.activeElement : 194 document.activeElement, sub1.__trigger); 195 done(); 196 }); 197 }); 198 }); 199 200 </script> 201 202 </body> 203 </html> 204
