OLD | NEW |
(Empty) | |
| 1 <!doctype html> |
| 2 <!-- |
| 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.g
ithub.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/CONTRI
BUTORS.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/PATEN
TS.txt |
| 9 --> |
| 10 <html> |
| 11 <head> |
| 12 <title>active-state</title> |
| 13 |
| 14 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> |
| 15 <script src="../../web-component-tester/browser.js"></script> |
| 16 <script src="../../iron-test-helpers/mock-interactions.js"></script> |
| 17 <link rel="import" href="test-elements.html"> |
| 18 <link rel="import" href="../../paper-input/paper-input.html"> |
| 19 </head> |
| 20 <body> |
| 21 <test-fixture id="TrivialActiveState"> |
| 22 <template> |
| 23 <test-button></test-button> |
| 24 </template> |
| 25 </test-fixture> |
| 26 |
| 27 <test-fixture id="ToggleActiveState"> |
| 28 <template> |
| 29 <test-button toggles></test-button> |
| 30 </template> |
| 31 </test-fixture> |
| 32 |
| 33 <test-fixture id="ButtonWithNativeInput"> |
| 34 <template> |
| 35 <test-light-dom><input id="input"></test-light-dom> |
| 36 </template> |
| 37 </test-fixture> |
| 38 |
| 39 <test-fixture id="ButtonWithPaperInput"> |
| 40 <template> |
| 41 <test-light-dom><paper-input id="input"></paper-input></test-light-dom> |
| 42 </template> |
| 43 </test-fixture> |
| 44 |
| 45 <script> |
| 46 suite('active-state', function() { |
| 47 var activeTarget; |
| 48 |
| 49 setup(function() { |
| 50 activeTarget = fixture('TrivialActiveState'); |
| 51 }); |
| 52 |
| 53 suite('active state with toggles attribute', function() { |
| 54 setup(function() { |
| 55 activeTarget = fixture('ToggleActiveState'); |
| 56 }); |
| 57 |
| 58 suite('when down', function() { |
| 59 test('is pressed', function() { |
| 60 MockInteractions.down(activeTarget); |
| 61 expect(activeTarget.hasAttribute('pressed')).to.be.eql(true); |
| 62 }); |
| 63 }); |
| 64 |
| 65 suite('when clicked', function() { |
| 66 test('is activated', function(done) { |
| 67 MockInteractions.downAndUp(activeTarget, function() { |
| 68 try { |
| 69 expect(activeTarget.hasAttribute('active')).to.be.eql(true); |
| 70 expect(activeTarget.hasAttribute('aria-pressed')).to.be.eql(true
); |
| 71 expect(activeTarget.getAttribute('aria-pressed')).to.be.eql('tru
e'); |
| 72 done(); |
| 73 } catch (e) { |
| 74 done(e); |
| 75 } |
| 76 }); |
| 77 }); |
| 78 |
| 79 test('is deactivated by a subsequent click', function(done) { |
| 80 MockInteractions.downAndUp(activeTarget, function() { |
| 81 MockInteractions.downAndUp(activeTarget, function() { |
| 82 try { |
| 83 expect(activeTarget.hasAttribute('active')).to.be.eql(false); |
| 84 expect(activeTarget.hasAttribute('aria-pressed')).to.be.eql(tr
ue); |
| 85 expect(activeTarget.getAttribute('aria-pressed')).to.be.eql('f
alse'); |
| 86 done(); |
| 87 } catch (e) { |
| 88 done(e); |
| 89 } |
| 90 }); |
| 91 }); |
| 92 }); |
| 93 |
| 94 test('the correct aria attribute is set', function(done) { |
| 95 activeTarget.ariaActiveAttribute = 'aria-checked'; |
| 96 MockInteractions.downAndUp(activeTarget, function() { |
| 97 try { |
| 98 expect(activeTarget.hasAttribute('active')).to.be.eql(true); |
| 99 expect(activeTarget.hasAttribute('aria-checked')).to.be.eql(true
); |
| 100 expect(activeTarget.getAttribute('aria-checked')).to.be.eql('tru
e'); |
| 101 done(); |
| 102 } catch (e) { |
| 103 done(e); |
| 104 } |
| 105 }); |
| 106 }); |
| 107 |
| 108 test('the aria attribute is updated correctly', function(done) { |
| 109 activeTarget.ariaActiveAttribute = 'aria-checked'; |
| 110 MockInteractions.downAndUp(activeTarget, function() { |
| 111 try { |
| 112 expect(activeTarget.hasAttribute('active')).to.be.eql(true); |
| 113 expect(activeTarget.hasAttribute('aria-checked')).to.be.eql(true
); |
| 114 expect(activeTarget.getAttribute('aria-checked')).to.be.eql('tru
e'); |
| 115 |
| 116 activeTarget.ariaActiveAttribute = 'aria-pressed'; |
| 117 expect(activeTarget.hasAttribute('aria-checked')).to.be.eql(fals
e); |
| 118 expect(activeTarget.hasAttribute('aria-pressed')).to.be.eql(true
); |
| 119 expect(activeTarget.getAttribute('aria-pressed')).to.be.eql('tru
e'); |
| 120 done(); |
| 121 } catch (e) { |
| 122 done(e); |
| 123 } |
| 124 }); |
| 125 }); |
| 126 }); |
| 127 }); |
| 128 |
| 129 suite('without toggles attribute', function() { |
| 130 suite('when mouse is down', function() { |
| 131 test('does not get an active attribute', function() { |
| 132 expect(activeTarget.hasAttribute('active')).to.be.eql(false); |
| 133 MockInteractions.down(activeTarget); |
| 134 expect(activeTarget.hasAttribute('active')).to.be.eql(false); |
| 135 }); |
| 136 }); |
| 137 |
| 138 suite('when mouse is up', function() { |
| 139 test('does not get an active attribute', function() { |
| 140 MockInteractions.down(activeTarget); |
| 141 expect(activeTarget.hasAttribute('active')).to.be.eql(false); |
| 142 MockInteractions.up(activeTarget); |
| 143 expect(activeTarget.hasAttribute('active')).to.be.eql(false); |
| 144 }); |
| 145 }); |
| 146 }); |
| 147 |
| 148 suite('when space is pressed', function() { |
| 149 test('triggers a click event', function(done) { |
| 150 activeTarget.addEventListener('click', function() { |
| 151 done(); |
| 152 }); |
| 153 MockInteractions.pressSpace(activeTarget); |
| 154 }); |
| 155 |
| 156 test('only triggers click after the key is released', function(done) { |
| 157 var keyupTriggered = false; |
| 158 |
| 159 activeTarget.addEventListener('keyup', function() { |
| 160 keyupTriggered = true; |
| 161 }); |
| 162 |
| 163 activeTarget.addEventListener('click', function() { |
| 164 try { |
| 165 expect(keyupTriggered).to.be.eql(true); |
| 166 done(); |
| 167 } catch (e) { |
| 168 done(e); |
| 169 } |
| 170 }); |
| 171 |
| 172 MockInteractions.pressSpace(activeTarget); |
| 173 }); |
| 174 }); |
| 175 |
| 176 suite('when enter is pressed', function() { |
| 177 test('triggers a click event', function(done) { |
| 178 activeTarget.addEventListener('click', function() { |
| 179 done(); |
| 180 }); |
| 181 |
| 182 MockInteractions.pressEnter(activeTarget); |
| 183 }); |
| 184 |
| 185 test('only triggers click before the key is released', function(done) { |
| 186 var keyupTriggered = false; |
| 187 |
| 188 activeTarget.addEventListener('keyup', function() { |
| 189 keyupTriggered = true; |
| 190 }); |
| 191 |
| 192 activeTarget.addEventListener('click', function() { |
| 193 try { |
| 194 expect(keyupTriggered).to.be.eql(false); |
| 195 done(); |
| 196 } catch (e) { |
| 197 done(e); |
| 198 } |
| 199 }); |
| 200 |
| 201 MockInteractions.pressEnter(activeTarget); |
| 202 }); |
| 203 }); |
| 204 |
| 205 suite('nested native input inside button', function() { |
| 206 test('space in light child input does not trigger a button click event',
function(done) { |
| 207 var item = fixture('ButtonWithNativeInput'); |
| 208 var input = item.querySelector('#input'); |
| 209 |
| 210 var itemClickHandler = sinon.spy(); |
| 211 item.addEventListener('click', itemClickHandler); |
| 212 |
| 213 input.focus(); |
| 214 MockInteractions.pressSpace(input); |
| 215 Polymer.Base.async(function(){ |
| 216 expect(itemClickHandler.callCount).to.be.equal(0); |
| 217 done(); |
| 218 }, 1); |
| 219 }); |
| 220 |
| 221 test('space in button triggers a button click event', function(done) { |
| 222 var item = fixture('ButtonWithNativeInput'); |
| 223 var input = item.querySelector('#input'); |
| 224 |
| 225 var itemClickHandler = sinon.spy(); |
| 226 item.addEventListener('click', itemClickHandler); |
| 227 |
| 228 MockInteractions.pressSpace(item); |
| 229 |
| 230 Polymer.Base.async(function(){ |
| 231 // You need two ticks, one for the MockInteractions event, and one |
| 232 // for the button event. |
| 233 Polymer.Base.async(function(){ |
| 234 expect(itemClickHandler.callCount).to.be.equal(1); |
| 235 done(); |
| 236 }, 1); |
| 237 }, 1); |
| 238 }); |
| 239 }); |
| 240 |
| 241 suite('nested paper-input inside button', function() { |
| 242 test('space in light child input does not trigger a button click event',
function(done) { |
| 243 var item = fixture('ButtonWithPaperInput'); |
| 244 var input = item.querySelector('#input'); |
| 245 |
| 246 var itemClickHandler = sinon.spy(); |
| 247 item.addEventListener('click', itemClickHandler); |
| 248 |
| 249 input.focus(); |
| 250 MockInteractions.pressSpace(input); |
| 251 Polymer.Base.async(function(){ |
| 252 expect(itemClickHandler.callCount).to.be.equal(0); |
| 253 done(); |
| 254 }, 1); |
| 255 }); |
| 256 |
| 257 test('space in button triggers a button click event', function(done) { |
| 258 var item = fixture('ButtonWithPaperInput'); |
| 259 var input = item.querySelector('#input'); |
| 260 |
| 261 var itemClickHandler = sinon.spy(); |
| 262 item.addEventListener('click', itemClickHandler); |
| 263 |
| 264 MockInteractions.pressSpace(item); |
| 265 Polymer.Base.async(function(){ |
| 266 // You need two ticks, one for the MockInteractions event, and one |
| 267 // for the button event. |
| 268 Polymer.Base.async(function(){ |
| 269 expect(itemClickHandler.callCount).to.be.equal(1); |
| 270 done(); |
| 271 }, 1); |
| 272 }, 1); |
| 273 }); |
| 274 }); |
| 275 |
| 276 }); |
| 277 </script> |
| 278 </body> |
| 279 </html> |
OLD | NEW |