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