| 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 |
| 13 <title>paper-textarea tests</title> |
| 14 |
| 15 <meta charset="utf-8"> |
| 16 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| 17 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initia
l-scale=1, user-scalable=yes"> |
| 18 |
| 19 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> |
| 20 |
| 21 <script src="../../web-component-tester/browser.js"></script> |
| 22 <script src="../../test-fixture/test-fixture-mocha.js"></script> |
| 23 |
| 24 <script src="../../iron-test-helpers/test-helpers.js"></script> |
| 25 |
| 26 <link rel="import" href="../../test-fixture/test-fixture.html"> |
| 27 <link rel="import" href="../paper-textarea.html"> |
| 28 |
| 29 </head> |
| 30 <body> |
| 31 |
| 32 <test-fixture id="basic"> |
| 33 <template> |
| 34 <paper-textarea></paper-textarea> |
| 35 </template> |
| 36 </test-fixture> |
| 37 |
| 38 <test-fixture id="label"> |
| 39 <template> |
| 40 <paper-textarea label="foo"></paper-textarea> |
| 41 </template> |
| 42 </test-fixture> |
| 43 |
| 44 <test-fixture id="char-counter"> |
| 45 <template> |
| 46 <paper-textarea char-counter></paper-textarea> |
| 47 </template> |
| 48 </test-fixture> |
| 49 |
| 50 <test-fixture id="required"> |
| 51 <template> |
| 52 <paper-textarea auto-validate required error-message="error"></paper-texta
rea> |
| 53 </template> |
| 54 </test-fixture> |
| 55 |
| 56 <test-fixture id="required-char-counter"> |
| 57 <template> |
| 58 <paper-textarea auto-validate char-counter required error-message="error">
</paper-textarea> |
| 59 </template> |
| 60 </test-fixture> |
| 61 |
| 62 <test-fixture id="always-float-label"> |
| 63 <template> |
| 64 <paper-textarea always-float-label label="label"></paper-textarea> |
| 65 </template> |
| 66 </test-fixture> |
| 67 |
| 68 <script> |
| 69 |
| 70 suite('basic', function() { |
| 71 |
| 72 test('setting value sets the input value', function() { |
| 73 var input = fixture('basic'); |
| 74 input.value = 'foobar'; |
| 75 assert.equal(input.inputElement.bindValue, input.value, 'inputElement va
lue equals input.value'); |
| 76 }); |
| 77 |
| 78 test('empty required input shows error', function() { |
| 79 var input = fixture('required'); |
| 80 forceXIfStamp(input); |
| 81 var error = Polymer.dom(input.root).querySelector('paper-input-error'); |
| 82 assert.ok(error, 'paper-input-error exists'); |
| 83 assert.notEqual(getComputedStyle(error).display, 'none', 'error is not d
isplay:none'); |
| 84 }); |
| 85 |
| 86 test('caret position is preserved', function() { |
| 87 var input = fixture('basic'); |
| 88 var ironTextarea = Polymer.dom(input.root).querySelector('iron-autogrow-
textarea'); |
| 89 input.value = 'nananana'; |
| 90 ironTextarea.selectionStart = 2; |
| 91 ironTextarea.selectionEnd = 2; |
| 92 |
| 93 input.updateValueAndPreserveCaret('nanananabatman'); |
| 94 |
| 95 assert.equal(ironTextarea.selectionStart, 2, 'selectionStart is preserve
d'); |
| 96 assert.equal(ironTextarea.selectionEnd, 2, 'selectionEnd is preserved'); |
| 97 }); |
| 98 |
| 99 test('input attributes are bound to textarea', function() { |
| 100 var input = fixture('basic'); |
| 101 var attrs = { |
| 102 'autocomplete': 'true', |
| 103 'autofocus': true, |
| 104 'inputmode': 'number', |
| 105 'name': 'foo', |
| 106 'placeholder': 'bar', |
| 107 'readonly': true, |
| 108 'required': true, |
| 109 'maxlength': 3 |
| 110 }; |
| 111 for (var attr in attrs) { |
| 112 input[attr] = attrs[attr]; |
| 113 } |
| 114 for (var attr in attrs) { |
| 115 var inputAttr = input.inputElement.getAttribute(attr); |
| 116 if (typeof attrs[attr] === 'boolean') { |
| 117 assert.equal(inputAttr !== null, attrs[attr], 'attribute "' + attr +
'" is equal to property (' + attrs[attr] + ', ' + inputAttr !== null + ')'); |
| 118 } else { |
| 119 assert.equal(inputAttr, attrs[attr], 'attribute "' + attr + '" is eq
ual to property (' + attrs[attr] + ', ' + inputAttr + ')'); |
| 120 } |
| 121 } |
| 122 }); |
| 123 |
| 124 test('always-float-label attribute works', function() { |
| 125 var input = fixture('always-float-label'); |
| 126 var container = Polymer.dom(input.root).querySelector('paper-input-conta
iner'); |
| 127 var inputContent = Polymer.dom(container.root).querySelector('.input-con
tent'); |
| 128 assert.isTrue(inputContent.classList.contains('label-is-floating'), 'lab
el is floating'); |
| 129 }); |
| 130 |
| 131 }); |
| 132 |
| 133 suite('focus/blur events', function() { |
| 134 var input; |
| 135 |
| 136 setup(function() { |
| 137 input = fixture('basic'); |
| 138 }); |
| 139 |
| 140 test('focus/blur events fired on host element', function(done) { |
| 141 var nFocusEvents = 0; |
| 142 var nBlurEvents = 0; |
| 143 input.addEventListener('focus', function() { |
| 144 nFocusEvents += 1; |
| 145 // setTimeout to wait for potentially more, erroneous events |
| 146 setTimeout(function() { |
| 147 assert.equal(nFocusEvents, 1, 'one focus event fired'); |
| 148 input.inputElement.textarea.blur(); |
| 149 }); |
| 150 }); |
| 151 input.addEventListener('blur', function() { |
| 152 nBlurEvents += 1; |
| 153 // setTimeout to wait for potentially more, erroneous events |
| 154 setTimeout(function() { |
| 155 assert.equal(nBlurEvents, 1, 'one blur event fired'); |
| 156 done(); |
| 157 }); |
| 158 }); |
| 159 input.inputElement.textarea.focus(); |
| 160 }); |
| 161 |
| 162 }); |
| 163 |
| 164 suite('a11y', function() { |
| 165 |
| 166 test('has aria-labelledby', function() { |
| 167 var input = fixture('label'); |
| 168 assert.isTrue(input.inputElement.textarea.hasAttribute('aria-labelledby'
)) |
| 169 assert.equal(input.inputElement.textarea.getAttribute('aria-labelledby')
, Polymer.dom(input.root).querySelector('label').id, 'aria-labelledby points to
the label'); |
| 170 }); |
| 171 |
| 172 test('has aria-describedby for error message', function() { |
| 173 var input = fixture('required'); |
| 174 forceXIfStamp(input); |
| 175 assert.isTrue(input.inputElement.textarea.hasAttribute('aria-describedby
')); |
| 176 assert.equal(input.inputElement.textarea.getAttribute('aria-describedby'
), Polymer.dom(input.root).querySelector('paper-input-error').id, 'aria-describe
dby points to the error message'); |
| 177 }); |
| 178 |
| 179 test('has aria-describedby for character counter', function() { |
| 180 var input = fixture('char-counter'); |
| 181 forceXIfStamp(input); |
| 182 assert.isTrue(input.inputElement.textarea.hasAttribute('aria-describedby
')); |
| 183 assert.equal(input.inputElement.textarea.getAttribute('aria-describedby'
), Polymer.dom(input.root).querySelector('paper-input-char-counter').id, 'aria-d
escribedby points to the character counter'); |
| 184 }); |
| 185 |
| 186 test('has aria-describedby for character counter and error', function() { |
| 187 var input = fixture('required-char-counter'); |
| 188 forceXIfStamp(input); |
| 189 assert.isTrue(input.inputElement.textarea.hasAttribute('aria-describedby
')); |
| 190 assert.equal(input.inputElement.textarea.getAttribute('aria-describedby'
), Polymer.dom(input.root).querySelector('paper-input-error').id + ' ' + Polymer
.dom(input.root).querySelector('paper-input-char-counter').id, 'aria-describedby
points to the error message and character counter'); |
| 191 }); |
| 192 |
| 193 |
| 194 }); |
| 195 |
| 196 |
| 197 </script> |
| 198 |
| 199 </body> |
| 200 </html> |
| OLD | NEW |