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 12 <html> 13 <head> 14 15 <title>iron-selector-activate-event</title> 16 <meta charset="UTF-8"> 17 18 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 19 <script src="../../web-component-tester/browser.js"></script> 20 <script src="../../test-fixture/test-fixture-mocha.js"></script> 21 22 <link rel="import" href="../../test-fixture/test-fixture.html"> 23 <link rel="import" href="../iron-selector.html"> 24 25 <style> 26 .iron-selected { 27 background: #ccc; 28 } 29 </style> 30 31 </head> 32 <body> 33 34 <test-fixture id="test"> 35 <template> 36 <iron-selector id="selector" selected="0"> 37 <div>Item 0</div> 38 <div>Item 1</div> 39 <div>Item 2</div> 40 <div>Item 3</div> 41 <div>Item 4</div> 42 </iron-selector> 43 </template> 44 </test-fixture> 45 46 <script> 47 48 suite('activate event', function() { 49 50 var s; 51 52 setup(function () { 53 s = fixture('test'); 54 }); 55 56 test('activates on tap', function() { 57 assert.equal(s.selected, '0'); 58 59 // select Item 1 60 s.children[1].dispatchEvent(new CustomEvent('tap', {bubbles: true})); 61 assert.equal(s.selected, '1'); 62 }); 63 64 test('activates on tap and fires iron-activate', function(done) { 65 assert.equal(s.selected, '0'); 66 67 // attach iron-activate listener 68 s.addEventListener("iron-activate", function(event) { 69 assert.equal(event.detail.selected, '1'); 70 assert.equal(event.detail.item, s.children[1]); 71 done(); 72 }); 73 74 // select Item 1 75 s.children[1].dispatchEvent(new CustomEvent('tap', {bubbles: true})); 76 }); 77 78 test('tap on already selected and fires iron-activate', function(done) { 79 assert.equal(s.selected, '0'); 80 81 // attach iron-activate listener 82 s.addEventListener("iron-activate", function(event) { 83 assert.equal(event.detail.selected, '0'); 84 assert.equal(event.detail.item, s.children[0]); 85 done(); 86 }); 87 88 // select Item 0 89 s.children[0].dispatchEvent(new CustomEvent('tap', {bubbles: true})); 90 }); 91 92 test('activates on mousedown', function() { 93 // set activateEvent to mousedown 94 s.activateEvent = 'mousedown'; 95 // select Item 2 96 s.children[2].dispatchEvent(new CustomEvent('mousedown', {bubbles: true})); 97 assert.equal(s.selected, '2'); 98 }); 99 100 test('activates on mousedown and fires iron-activate', function(done) { 101 // attach iron-activate listener 102 s.addEventListener("iron-activate", function(event) { 103 assert.equal(event.detail.selected, '2'); 104 assert.equal(event.detail.item, s.children[2]); 105 done(); 106 }); 107 108 // set activateEvent to mousedown 109 s.activateEvent = 'mousedown'; 110 // select Item 2 111 s.children[2].dispatchEvent(new CustomEvent('mousedown', {bubbles: true})); 112 }); 113 114 test('no activation', function() { 115 assert.equal(s.selected, '0'); 116 // set activateEvent to null 117 s.activateEvent = null; 118 // select Item 2 119 s.children[2].dispatchEvent(new CustomEvent('mousedown', {bubbles: true})); 120 assert.equal(s.selected, '0'); 121 }); 122 123 test('activates on tap and preventDefault', function() { 124 // attach iron-activate listener 125 s.addEventListener("iron-activate", function(event) { 126 event.preventDefault(); 127 }); 128 // select Item 2 129 s.children[2].dispatchEvent(new CustomEvent('tap', {bubbles: true})); 130 // shouldn't got selected since we preventDefault in iron-activate 131 assert.equal(s.selected, '0'); 132 }); 133 134 test('activates after detach and re-attach', function() { 135 // Detach and re-attach 136 var parent = s.parentNode; 137 parent.removeChild(s); 138 parent.appendChild(s); 139 140 // select Item 2 141 s.children[2].dispatchEvent(new CustomEvent('tap', {bubbles: true})); 142 assert.equal(s.selected, '2'); 143 }); 144 145 }); 146 147 </script> 148 149 </body> 150 </html> 151
