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 <meta charset="UTF-8"> 14 <title>paper-dropdown-menu basic tests</title> 15 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> 16 17 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 18 <script src="../../web-component-tester/browser.js"></script> 19 <script src="../../test-fixture/test-fixture-mocha.js"></script> 20 <script src="../../iron-test-helpers/mock-interactions.js"></script> 21 22 <link rel="import" href="../../paper-listbox/paper-listbox.html"> 23 <link rel="import" href="../../paper-item/paper-item.html"> 24 <link rel="import" href="../../test-fixture/test-fixture.html"> 25 <link rel="import" href="../paper-dropdown-menu.html"> 26 27</head> 28<body> 29 30 <test-fixture id="TrivialDropdownMenu"> 31 <template> 32 <paper-dropdown-menu no-animations> 33 <paper-listbox class="dropdown-content"> 34 <paper-item>Foo</paper-item> 35 <paper-item>Bar</paper-item> 36 </paper-listbox> 37 </paper-dropdown-menu> 38 </template> 39 </test-fixture> 40 41 <test-fixture id="PreselectedDropdownMenu"> 42 <template> 43 <paper-dropdown-menu no-animations> 44 <paper-listbox class="dropdown-content" selected="1"> 45 <paper-item>Foo</paper-item> 46 <paper-item>Bar</paper-item> 47 </paper-listbox> 48 </paper-dropdown-menu> 49 </template> 50 </test-fixture> 51 52 <test-fixture id="LabelsDropdownMenu"> 53 <template> 54 <paper-dropdown-menu no-animations> 55 <paper-listbox class="dropdown-content"> 56 <paper-item label="Foo label property">Foo textContent</paper-item> 57 <paper-item label="Foo label attribute">Foo textContent</paper-item> 58 <paper-item>Foo textContent</paper-item> 59 </paper-listbox> 60 </paper-dropdown-menu> 61 </template> 62 </test-fixture> 63 64 <script> 65 66 function runAfterOpen(menu, callback) { 67 menu.$.menuButton.$.dropdown.addEventListener('iron-overlay-opened', function() { 68 Polymer.Base.async(callback, 1); 69 }); 70 MockInteractions.tap(menu); 71 } 72 73 suite('<paper-dropdown-menu>', function() { 74 var dropdownMenu; 75 76 setup(function() { 77 dropdownMenu = fixture('TrivialDropdownMenu'); 78 content = Polymer.dom(dropdownMenu).querySelector('.dropdown-content'); 79 }); 80 81 test('opens when tapped', function(done) { 82 var contentRect = content.getBoundingClientRect(); 83 84 expect(contentRect.width).to.be.equal(0); 85 expect(contentRect.height).to.be.equal(0); 86 87 runAfterOpen(dropdownMenu, function() { 88 contentRect = content.getBoundingClientRect(); 89 90 expect(dropdownMenu.opened).to.be.equal(true); 91 92 expect(contentRect.width).to.be.greaterThan(0); 93 expect(contentRect.height).to.be.greaterThan(0); 94 done(); 95 }); 96 97 expect(dropdownMenu.opened).to.be.equal(true); 98 }); 99 100 test('closes when an item is activated', function(done) { 101 runAfterOpen(dropdownMenu, function() { 102 var firstItem = Polymer.dom(content).querySelector('paper-item'); 103 104 MockInteractions.tap(firstItem); 105 106 Polymer.Base.async(function() { 107 expect(dropdownMenu.opened).to.be.equal(false); 108 done(); 109 }); 110 }); 111 }); 112 113 test('sets selected item to the activated item', function(done) { 114 runAfterOpen(dropdownMenu, function() { 115 var firstItem = Polymer.dom(content).querySelector('paper-item'); 116 117 MockInteractions.tap(firstItem); 118 119 Polymer.Base.async(function() { 120 expect(dropdownMenu.selectedItem).to.be.equal(firstItem); 121 done(); 122 }); 123 }); 124 }); 125 126 suite('when a value is preselected', function() { 127 setup(function() { 128 dropdownMenu = fixture('PreselectedDropdownMenu'); 129 }); 130 131 test('the input area shows the correct selection', function() { 132 Polymer.dom.flush(); 133 var secondItem = Polymer.dom(dropdownMenu).querySelectorAll('paper-item')[1]; 134 expect(dropdownMenu.selectedItem).to.be.equal(secondItem); 135 }); 136 }); 137 138 suite('deselecting', function() { 139 var menu; 140 141 setup(function() { 142 dropdownMenu = fixture('PreselectedDropdownMenu'); 143 menu = Polymer.dom(dropdownMenu).querySelector('.dropdown-content'); 144 }); 145 146 test('an `iron-deselect` event clears the current selection', function() { 147 Polymer.dom.flush(); 148 menu.selected = null; 149 expect(dropdownMenu.selectedItem).to.be.equal(null); 150 }); 151 }); 152 153 suite('validation', function() { 154 test('a non required dropdown is valid regardless of its selection', function() { 155 var dropdownMenu = fixture('TrivialDropdownMenu'); 156 menu = Polymer.dom(dropdownMenu).querySelector('.dropdown-content'); 157 158 // no selection. 159 expect(dropdownMenu.validate()).to.be.true; 160 expect(dropdownMenu.invalid).to.be.false; 161 expect(dropdownMenu.value).to.not.be.ok; 162 163 // some selection. 164 menu.selected = 1; 165 expect(dropdownMenu.validate()).to.be.true; 166 expect(dropdownMenu.invalid).to.be.false; 167 expect(dropdownMenu.value).to.be.equal('Bar'); 168 }); 169 170 test('a required dropdown is invalid without a selection', function() { 171 var dropdownMenu = fixture('TrivialDropdownMenu'); 172 dropdownMenu.required = true; 173 174 // no selection. 175 expect(dropdownMenu.validate()).to.be.false; 176 expect(dropdownMenu.invalid).to.be.true; 177 expect(dropdownMenu.value).to.not.be.ok; 178 }); 179 180 test('a required dropdown is valid with a selection', function() { 181 var dropdownMenu = fixture('PreselectedDropdownMenu'); 182 Polymer.dom.flush(); 183 184 dropdownMenu.required = true; 185 186 expect(dropdownMenu.validate()).to.be.true; 187 expect(dropdownMenu.invalid).to.be.false; 188 expect(dropdownMenu.value).to.be.equal('Bar'); 189 }); 190 }); 191 192 suite('selectedItemLabel', function() { 193 test('label property', function() { 194 var dropdownMenu = fixture('LabelsDropdownMenu'); 195 var menu = Polymer.dom(dropdownMenu).querySelector('.dropdown-content'); 196 menu.selected = 0; 197 //Fake a label property since paper-item doesn't have one 198 dropdownMenu.selectedItem.label = dropdownMenu.selectedItem.getAttribute('label'); 199 expect(dropdownMenu.selectedItemLabel).to.be.equal('Foo label property'); 200 }); 201 202 test('label attribute', function() { 203 var dropdownMenu = fixture('LabelsDropdownMenu'); 204 var menu = Polymer.dom(dropdownMenu).querySelector('.dropdown-content'); 205 menu.selected = 1; 206 expect(dropdownMenu.selectedItemLabel).to.be.equal('Foo label attribute'); 207 }); 208 209 test('textContent', function() { 210 var dropdownMenu = fixture('LabelsDropdownMenu'); 211 var menu = Polymer.dom(dropdownMenu).querySelector('.dropdown-content'); 212 menu.selected = 2; 213 expect(dropdownMenu.selectedItemLabel).to.be.equal('Foo textContent'); 214 }); 215 }); 216 }); 217 </script> 218 219</body> 220</html> 221