| <!doctype html> |
| <!-- |
| @license |
| Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
| The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
| Code distributed by Google as part of the polymer project is also |
| subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
| --> |
| |
| <html> |
| <head> |
| |
| <title>iron-selector-activate-event</title> |
| <meta charset="UTF-8"> |
| |
| <script src="../../webcomponentsjs/webcomponents-lite.js"></script> |
| <script src="../../web-component-tester/browser.js"></script> |
| <script src="../../test-fixture/test-fixture-mocha.js"></script> |
| |
| <link rel="import" href="../../test-fixture/test-fixture.html"> |
| <link rel="import" href="../iron-selector.html"> |
| |
| <style> |
| .iron-selected { |
| background: #ccc; |
| } |
| </style> |
| |
| </head> |
| <body> |
| |
| <test-fixture id="test"> |
| <template> |
| <iron-selector id="selector" selected="0"> |
| <div>Item 0</div> |
| <div>Item 1</div> |
| <div>Item 2</div> |
| <div>Item 3</div> |
| <div>Item 4</div> |
| </iron-selector> |
| </template> |
| </test-fixture> |
| |
| <script> |
| |
| suite('activate event', function() { |
| |
| var s; |
| |
| setup(function () { |
| s = fixture('test'); |
| }); |
| |
| test('activates on tap', function() { |
| assert.equal(s.selected, '0'); |
| |
| // select Item 1 |
| s.children[1].dispatchEvent(new CustomEvent('tap', {bubbles: true})); |
| assert.equal(s.selected, '1'); |
| }); |
| |
| test('activates on tap and fires iron-activate', function(done) { |
| assert.equal(s.selected, '0'); |
| |
| // attach iron-activate listener |
| s.addEventListener("iron-activate", function(event) { |
| assert.equal(event.detail.selected, '1'); |
| assert.equal(event.detail.item, s.children[1]); |
| done(); |
| }); |
| |
| // select Item 1 |
| s.children[1].dispatchEvent(new CustomEvent('tap', {bubbles: true})); |
| }); |
| |
| test('tap on already selected and fires iron-activate', function(done) { |
| assert.equal(s.selected, '0'); |
| |
| // attach iron-activate listener |
| s.addEventListener("iron-activate", function(event) { |
| assert.equal(event.detail.selected, '0'); |
| assert.equal(event.detail.item, s.children[0]); |
| done(); |
| }); |
| |
| // select Item 0 |
| s.children[0].dispatchEvent(new CustomEvent('tap', {bubbles: true})); |
| }); |
| |
| test('activates on mousedown', function() { |
| // set activateEvent to mousedown |
| s.activateEvent = 'mousedown'; |
| // select Item 2 |
| s.children[2].dispatchEvent(new CustomEvent('mousedown', {bubbles: true})); |
| assert.equal(s.selected, '2'); |
| }); |
| |
| test('activates on mousedown and fires iron-activate', function(done) { |
| // attach iron-activate listener |
| s.addEventListener("iron-activate", function(event) { |
| assert.equal(event.detail.selected, '2'); |
| assert.equal(event.detail.item, s.children[2]); |
| done(); |
| }); |
| |
| // set activateEvent to mousedown |
| s.activateEvent = 'mousedown'; |
| // select Item 2 |
| s.children[2].dispatchEvent(new CustomEvent('mousedown', {bubbles: true})); |
| }); |
| |
| test('no activation', function() { |
| assert.equal(s.selected, '0'); |
| // set activateEvent to null |
| s.activateEvent = null; |
| // select Item 2 |
| s.children[2].dispatchEvent(new CustomEvent('mousedown', {bubbles: true})); |
| assert.equal(s.selected, '0'); |
| }); |
| |
| test('activates on tap and preventDefault', function() { |
| // attach iron-activate listener |
| s.addEventListener("iron-activate", function(event) { |
| event.preventDefault(); |
| }); |
| // select Item 2 |
| s.children[2].dispatchEvent(new CustomEvent('tap', {bubbles: true})); |
| // shouldn't got selected since we preventDefault in iron-activate |
| assert.equal(s.selected, '0'); |
| }); |
| |
| test('activates after detach and re-attach', function() { |
| // Detach and re-attach |
| var parent = s.parentNode; |
| parent.removeChild(s); |
| parent.appendChild(s); |
| |
| // select Item 2 |
| s.children[2].dispatchEvent(new CustomEvent('tap', {bubbles: true})); |
| assert.equal(s.selected, '2'); |
| }); |
| |
| }); |
| |
| </script> |
| |
| </body> |
| </html> |