1 <!-- 2 @license 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 7 Code distributed by Google as part of the polymer project is also 8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 9 --> 10 <!doctype html> 11 <html> 12 <head> 13 14 <title>paper-item 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-input/paper-input.html"> 26 <link rel="import" href="../paper-item.html"> 27 <link rel="import" href="../paper-icon-item.html"> 28 29 </head> 30 <body> 31 32 <test-fixture id="item"> 33 <template> 34 <div role="listbox"> 35 <paper-item>item</paper-item> 36 </div> 37 </template> 38 </test-fixture> 39 40 <test-fixture id="button"> 41 <template> 42 <div role="listbox"> 43 <button class="paper-item" role="option">item</button> 44 </div> 45 </template> 46 </test-fixture> 47 48 <test-fixture id="iconItem"> 49 <template> 50 <div role="listbox"> 51 <paper-icon-item>item</paper-icon-item> 52 </div> 53 </template> 54 </test-fixture> 55 56 <test-fixture id="item-with-input"> 57 <template> 58 <div role="list"> 59 <paper-item><input></paper-item> 60 </div> 61 </template> 62 </test-fixture> 63 64 <test-fixture id="item-with-paper-input"> 65 <template> 66 <div role="list"> 67 <paper-item><paper-input></paper-input></paper-item> 68 </div> 69 </template> 70 </test-fixture> 71 72 <test-fixture id="iconItem-with-input"> 73 <template> 74 <div role="list"> 75 <paper-icon-item><input></paper-icon-item> 76 </div> 77 </template> 78 </test-fixture> 79 80 <script> 81 suite('paper-item basic', function() { 82 var item, clickHandler; 83 84 setup(function() { 85 item = fixture('item').querySelector('paper-item'); 86 clickHandler = sinon.spy(); 87 item.addEventListener('click', clickHandler); 88 }); 89 90 test('space triggers a click event', function(done) { 91 MockInteractions.pressSpace(item); 92 Polymer.Base.async(function(){ 93 // You need two ticks, one for the MockInteractions event, and one 94 // for the button event. 95 Polymer.Base.async(function(){ 96 expect(clickHandler.callCount).to.be.equal(1); 97 done(); 98 }, 1); 99 }, 1); 100 }); 101 102 test('enter triggers a click event', function(done) { 103 MockInteractions.pressEnter(item); 104 Polymer.Base.async(function(){ 105 // You need two ticks, one for the MockInteractions event, and one 106 // for the button event. 107 Polymer.Base.async(function(){ 108 expect(clickHandler.callCount).to.be.equal(1); 109 done(); 110 }, 1); 111 }, 1); 112 }); 113 }); 114 115 suite('paper-icon-item basic', function() { 116 var item, clickHandler; 117 118 setup(function() { 119 item = fixture('iconItem').querySelector('paper-icon-item'); 120 clickHandler = sinon.spy(); 121 item.addEventListener('click', clickHandler); 122 }); 123 124 test('space triggers a click event', function(done) { 125 MockInteractions.pressSpace(item); 126 Polymer.Base.async(function(){ 127 // You need two ticks, one for the MockInteractions event, and one 128 // for the button event. 129 Polymer.Base.async(function(){ 130 expect(clickHandler.callCount).to.be.equal(1); 131 done(); 132 }, 1); 133 }, 1); 134 }); 135 136 test('click triggers a click event', function(done) { 137 MockInteractions.tap(item); 138 Polymer.Base.async(function(){ 139 expect(clickHandler.callCount).to.be.equal(1); 140 done(); 141 }, 1); 142 }); 143 }); 144 145 suite('clickable element inside item', function() { 146 test('paper-item: space in child native input does not trigger a click event', function(done) { 147 var f = fixture('item-with-input'); 148 var outerItem = f.querySelector('paper-item'); 149 var innerInput = f.querySelector('input'); 150 151 var itemClickHandler = sinon.spy(); 152 outerItem.addEventListener('click', itemClickHandler); 153 154 innerInput.focus(); 155 MockInteractions.pressSpace(innerInput); 156 Polymer.Base.async(function(){ 157 expect(itemClickHandler.callCount).to.be.equal(0); 158 done(); 159 }, 1); 160 }); 161 162 test('paper-item: space in child paper-input does not trigger a click event', function(done) { 163 var f = fixture('item-with-paper-input'); 164 var outerItem = f.querySelector('paper-item'); 165 var innerInput = f.querySelector('paper-input'); 166 167 var itemClickHandler = sinon.spy(); 168 outerItem.addEventListener('click', itemClickHandler); 169 170 innerInput.focus(); 171 MockInteractions.pressSpace(innerInput); 172 Polymer.Base.async(function(){ 173 expect(itemClickHandler.callCount).to.be.equal(0); 174 done(); 175 }, 1); 176 }); 177 178 test('paper-icon-item: space in child input does not trigger a click event', function(done) { 179 var f = fixture('iconItem-with-input'); 180 var outerItem = f.querySelector('paper-icon-item'); 181 var innerInput = f.querySelector('input'); 182 183 var itemClickHandler = sinon.spy(); 184 outerItem.addEventListener('click', itemClickHandler); 185 186 MockInteractions.pressSpace(innerInput); 187 Polymer.Base.async(function(){ 188 expect(itemClickHandler.callCount).to.be.equal(0); 189 done(); 190 }, 1); 191 }); 192 }); 193 194 suite('item a11y tests', function() { 195 var item, iconItem; 196 197 setup(function() { 198 item = fixture('item').querySelector('paper-item'); 199 iconItem = fixture('iconItem').querySelector('paper-icon-item'); 200 }); 201 202 test('item has role="listitem"', function() { 203 assert.equal(item.getAttribute('role'), 'option', 'has role="option"'); 204 }); 205 206 test('icon item has role="listitem"', function() { 207 assert.equal(iconItem.getAttribute('role'), 'option', 'has role="option"'); 208 }); 209 210 a11ySuite('item'); 211 a11ySuite('button'); 212 a11ySuite('iconItem'); 213 }); 214 215 </script> 216 217 </body> 218 </html> 219
