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 14 <title>iron-autogrow-textarea 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 <link rel="import" href="../iron-autogrow-textarea.html"> 25 26 </head> 27 <body> 28 29 <test-fixture id="basic"> 30 <template> 31 <iron-autogrow-textarea></iron-autogrow-textarea> 32 </template> 33 </test-fixture> 34 35 <test-fixture id="has-bindValue"> 36 <template> 37 <iron-autogrow-textarea bind-value="foobar"></iron-autogrow-textarea> 38 </template> 39 </test-fixture> 40 41 <test-fixture id="has-value"> 42 <template> 43 <iron-autogrow-textarea value="foobar"></iron-autogrow-textarea> 44 </template> 45 </test-fixture> 46 47 <test-fixture id="rows"> 48 <template> 49 <iron-autogrow-textarea rows="3"></iron-autogrow-textarea> 50 </template> 51 </test-fixture> 52 53 <script> 54 55 suite('basic', function() { 56 57 test('setting bindValue sets textarea value', function() { 58 var autogrow = fixture('basic'); 59 var textarea = autogrow.textarea; 60 61 autogrow.bindValue = 'batman'; 62 assert.equal(textarea.value, autogrow.bindValue, 'textarea value equals to bindValue'); 63 }); 64 65 test('can set an initial bindValue', function() { 66 var autogrow = fixture('has-bindValue'); 67 assert.equal(autogrow.textarea.value, 'foobar', 'textarea value equals to initial bindValue'); 68 assert.equal(autogrow.value, 'foobar', 'value equals to initial bindValue'); 69 }); 70 71 test('can set an initial value', function() { 72 var autogrow = fixture('has-value'); 73 assert.equal(autogrow.textarea.value, 'foobar', 'textarea value equals to initial bindValue'); 74 assert.equal(autogrow.bindValue, 'foobar', 'textarea bindValue equals to initial value'); 75 }); 76 77 test('can update the value', function() { 78 var autogrow = fixture('has-bindValue'); 79 assert.equal(autogrow.textarea.value, 'foobar', 'textarea value equals to initial bindValue'); 80 autogrow.value = 'batman'; 81 assert.equal(autogrow.textarea.value, 'batman', 'textarea value is updated'); 82 assert.equal(autogrow.bindValue, 'batman', 'bindValue is updated'); 83 assert.equal(autogrow.value, 'batman', 'value is updated'); 84 }); 85 86 test('can update the bindValue', function() { 87 var autogrow = fixture('has-bindValue'); 88 assert.equal(autogrow.textarea.value, 'foobar', 'textarea value equals to initial bindValue'); 89 autogrow.bindValue = 'batman'; 90 assert.equal(autogrow.textarea.value, 'batman', 'textarea value is updated'); 91 assert.equal(autogrow.bindValue, 'batman', 'bindValue is updated'); 92 assert.equal(autogrow.value, 'batman', 'value is updated'); 93 }); 94 95 test('can set an initial number of rows', function() { 96 var autogrow = fixture("rows"); 97 assert.equal(autogrow.textarea.rows, 3, 'textarea has rows=3'); 98 }); 99 100 test('adding rows grows the textarea', function() { 101 var autogrow = fixture('basic'); 102 var initialHeight = autogrow.offsetHeight; 103 104 autogrow.bindValue = 'batman\nand\nrobin'; 105 var finalHeight = autogrow.offsetHeight 106 assert.isTrue(finalHeight > initialHeight); 107 }); 108 109 test('removing rows shrinks the textarea', function() { 110 var autogrow = fixture('basic'); 111 autogrow.bindValue = 'batman\nand\nrobin'; 112 var initialHeight = autogrow.offsetHeight; 113 114 autogrow.bindValue = 'batman'; 115 var finalHeight = autogrow.offsetHeight 116 assert.isTrue(finalHeight < initialHeight); 117 }); 118 119 test('an undefined bindValue is the empty string', function() { 120 var autogrow = fixture('basic'); 121 var initialHeight = autogrow.offsetHeight; 122 123 autogrow.bindValue = 'batman\nand\nrobin'; 124 var finalHeight = autogrow.offsetHeight; 125 assert.isTrue(finalHeight > initialHeight); 126 127 autogrow.bindValue = undefined; 128 assert.equal(autogrow.offsetHeight, initialHeight); 129 assert.equal(autogrow.textarea.value, ''); 130 }); 131 132 test('textarea selection works', function() { 133 var autogrow = fixture('basic'); 134 var textarea = autogrow.textarea; 135 autogrow.bindValue = 'batman\nand\nrobin'; 136 137 autogrow.selectionStart = 3; 138 autogrow.selectionEnd = 5; 139 140 assert.equal(textarea.selectionStart, 3); 141 assert.equal(textarea.selectionEnd, 5); 142 }); 143 }); 144 145 suite('focus/blur events', function() { 146 var input; 147 148 setup(function() { 149 input = fixture('basic'); 150 }); 151 152 test('focus/blur events fired on host element', function(done) { 153 var nFocusEvents = 0; 154 var nBlurEvents = 0; 155 input.addEventListener('focus', function() { 156 nFocusEvents += 1; 157 // setTimeout to wait for potentially more, erroneous events 158 setTimeout(function() { 159 assert.equal(nFocusEvents, 1, 'one focus event fired'); 160 MockInteractions.blur(input.textarea); 161 }); 162 }); 163 input.addEventListener('blur', function() { 164 nBlurEvents += 1; 165 // setTimeout to wait for potentially more, erroneous events 166 setTimeout(function() { 167 assert.equal(nBlurEvents, 1, 'one blur event fired'); 168 done(); 169 }); 170 }); 171 MockInteractions.focus(input.textarea); 172 }); 173 174 }); 175 176 suite('validation', function() { 177 test('a required textarea with no text is invalid', function() { 178 var input = fixture('basic'); 179 input.required = true; 180 assert.isFalse(input.validate()); 181 182 input.bindValue = 'batman'; 183 assert.isTrue(input.validate()); 184 }); 185 }); 186 187 </script> 188 189 </body> 190 </html> 191
