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 <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 <script> 53 54 function runAfterOpen(menu, callback) { 55 menu.$.menuButton.$.dropdown.addEventListener('iron-overlay-opened', function() { 56 Polymer.Base.async(callback, 1); 57 }); 58 MockInteractions.tap(menu); 59 } 60 61 suite('<paper-dropdown-menu>', function() { 62 var dropdownMenu; 63 64 setup(function() { 65 dropdownMenu = fixture('TrivialDropdownMenu'); 66 content = Polymer.dom(dropdownMenu).querySelector('.dropdown-content'); 67 }); 68 69 test('opens when tapped', function(done) { 70 var contentRect = content.getBoundingClientRect(); 71 72 expect(contentRect.width).to.be.equal(0); 73 expect(contentRect.height).to.be.equal(0); 74 75 runAfterOpen(dropdownMenu, function() { 76 contentRect = content.getBoundingClientRect(); 77 78 expect(dropdownMenu.opened).to.be.equal(true); 79 80 expect(contentRect.width).to.be.greaterThan(0); 81 expect(contentRect.height).to.be.greaterThan(0); 82 done(); 83 }); 84 85 expect(dropdownMenu.opened).to.be.equal(true); 86 }); 87 88 test('closes when an item is activated', function(done) { 89 runAfterOpen(dropdownMenu, function() { 90 var firstItem = Polymer.dom(content).querySelector('paper-item'); 91 92 MockInteractions.tap(firstItem); 93 94 Polymer.Base.async(function() { 95 expect(dropdownMenu.opened).to.be.equal(false); 96 done(); 97 }); 98 }); 99 }); 100 101 test('sets selected item to the activated item', function(done) { 102 runAfterOpen(dropdownMenu, function() { 103 var firstItem = Polymer.dom(content).querySelector('paper-item'); 104 105 MockInteractions.tap(firstItem); 106 107 Polymer.Base.async(function() { 108 expect(dropdownMenu.selectedItem).to.be.equal(firstItem); 109 done(); 110 }); 111 }); 112 }); 113 114 suite('when a value is preselected', function() { 115 setup(function() { 116 dropdownMenu = fixture('PreselectedDropdownMenu'); 117 }); 118 119 test('the input area shows the correct selection', function() { 120 Polymer.dom.flush(); 121 var secondItem = Polymer.dom(dropdownMenu).querySelectorAll('paper-item')[1]; 122 expect(dropdownMenu.selectedItem).to.be.equal(secondItem); 123 }); 124 }); 125 126 suite('deselecting', function() { 127 var menu; 128 129 setup(function() { 130 dropdownMenu = fixture('PreselectedDropdownMenu'); 131 menu = Polymer.dom(dropdownMenu).querySelector('.dropdown-content'); 132 }); 133 134 test('an `iron-deselect` event clears the current selection', function() { 135 Polymer.dom.flush(); 136 menu.selected = null; 137 expect(dropdownMenu.selectedItem).to.be.equal(null); 138 }); 139 }); 140 141 suite('validation', function() { 142 test('a non required dropdown is valid regardless of its selection', function() { 143 var dropdownMenu = fixture('TrivialDropdownMenu'); 144 menu = Polymer.dom(dropdownMenu).querySelector('.dropdown-content'); 145 146 // no selection. 147 expect(dropdownMenu.validate()).to.be.true; 148 expect(dropdownMenu.invalid).to.be.false; 149 expect(dropdownMenu.value).to.not.be.ok; 150 151 // some selection. 152 menu.selected = 1; 153 expect(dropdownMenu.validate()).to.be.true; 154 expect(dropdownMenu.invalid).to.be.false; 155 expect(dropdownMenu.value).to.be.equal('Bar'); 156 }); 157 158 test('a required dropdown is invalid without a selection', function() { 159 var dropdownMenu = fixture('TrivialDropdownMenu'); 160 dropdownMenu.required = true; 161 162 // no selection. 163 expect(dropdownMenu.validate()).to.be.false; 164 expect(dropdownMenu.invalid).to.be.true; 165 expect(dropdownMenu.value).to.not.be.ok; 166 }); 167 168 test('a required dropdown is valid with a selection', function() { 169 var dropdownMenu = fixture('PreselectedDropdownMenu'); 170 Polymer.dom.flush(); 171 172 dropdownMenu.required = true; 173 174 expect(dropdownMenu.validate()).to.be.true; 175 expect(dropdownMenu.invalid).to.be.false; 176 expect(dropdownMenu.value).to.be.equal('Bar'); 177 }); 178 }); 179 }); 180 </script> 181 182 </body> 183 </html> 184
