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