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>paper-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/test-helpers.js"></script> 24 <script src="../../iron-test-helpers/mock-interactions.js"></script> 25 26 <link rel="import" href="../paper-textarea.html"> 27 </head> 28 <body> 29 30 <test-fixture id="basic"> 31 <template> 32 <paper-textarea></paper-textarea> 33 </template> 34 </test-fixture> 35 36 <test-fixture id="label"> 37 <template> 38 <paper-textarea label="foo"></paper-textarea> 39 </template> 40 </test-fixture> 41 42 <test-fixture id="char-counter"> 43 <template> 44 <paper-textarea char-counter></paper-textarea> 45 </template> 46 </test-fixture> 47 48 <test-fixture id="required"> 49 <template> 50 <paper-textarea auto-validate required error-message="error"></paper-textarea> 51 </template> 52 </test-fixture> 53 54 <test-fixture id="required-char-counter"> 55 <template> 56 <paper-textarea auto-validate char-counter required error-message="error"></paper-textarea> 57 </template> 58 </test-fixture> 59 60 <test-fixture id="always-float-label"> 61 <template> 62 <paper-textarea always-float-label label="label"></paper-textarea> 63 </template> 64 </test-fixture> 65 66 <script> 67 68 suite('basic', function() { 69 70 test('setting value sets the input value', function() { 71 var input = fixture('basic'); 72 input.value = 'foobar'; 73 assert.equal(input.inputElement.bindValue, input.value, 'inputElement value equals input.value'); 74 }); 75 76 test('empty required input shows error', function() { 77 var input = fixture('required'); 78 forceXIfStamp(input); 79 var error = Polymer.dom(input.root).querySelector('paper-input-error'); 80 assert.ok(error, 'paper-input-error exists'); 81 assert.notEqual(getComputedStyle(error).display, 'none', 'error is not display:none'); 82 }); 83 84 test('caret position is preserved', function() { 85 var input = fixture('basic'); 86 var ironTextarea = Polymer.dom(input.root).querySelector('iron-autogrow-textarea'); 87 input.value = 'nananana'; 88 ironTextarea.selectionStart = 2; 89 ironTextarea.selectionEnd = 2; 90 91 input.updateValueAndPreserveCaret('nanananabatman'); 92 93 assert.equal(ironTextarea.selectionStart, 2, 'selectionStart is preserved'); 94 assert.equal(ironTextarea.selectionEnd, 2, 'selectionEnd is preserved'); 95 }); 96 97 test('input attributes are bound to textarea', function() { 98 var input = fixture('basic'); 99 var attrs = { 100 'autocomplete': 'true', 101 'autofocus': true, 102 'inputmode': 'number', 103 'name': 'foo', 104 'placeholder': 'bar', 105 'readonly': true, 106 'required': true, 107 'maxlength': 3 108 }; 109 for (var attr in attrs) { 110 input[attr] = attrs[attr]; 111 } 112 for (var attr in attrs) { 113 var inputAttr = input.inputElement.getAttribute(attr); 114 if (typeof attrs[attr] === 'boolean') { 115 assert.equal(inputAttr !== null, attrs[attr], 'attribute "' + attr + '" is equal to property (' + attrs[attr] + ', ' + inputAttr !== null + ')'); 116 } else { 117 assert.equal(inputAttr, attrs[attr], 'attribute "' + attr + '" is equal to property (' + attrs[attr] + ', ' + inputAttr + ')'); 118 } 119 } 120 }); 121 122 test('always-float-label attribute works', function() { 123 var input = fixture('always-float-label'); 124 var container = Polymer.dom(input.root).querySelector('paper-input-container'); 125 var inputContent = Polymer.dom(container.root).querySelector('.input-content'); 126 assert.isTrue(inputContent.classList.contains('label-is-floating'), 'label is floating'); 127 }); 128 }); 129 130 suite('focus/blur events', function() { 131 var input; 132 133 setup(function() { 134 input = fixture('basic'); 135 }); 136 137 // At the moment, it is very hard to correctly fire exactly 138 // one focus/blur events on a paper-textarea. This is because 139 // when a paper-textarea is focused, it needs to focus 140 // its underlying native textarea, which will also fire a `blur` 141 // event. 142 test('focus events fired on host element', function() { 143 input.addEventListener('focus', function(event) { 144 assert(input.focused, 'input is focused'); 145 }); 146 MockInteractions.focus(input); 147 }); 148 149 test('focus events fired on host element if nested element is focused', function() { 150 input.addEventListener('focus', function(event) { 151 assert(input.focused, 'input is focused'); 152 }); 153 MockInteractions.focus(input.inputElement.textarea); 154 }); 155 156 test('blur events fired on host element', function() { 157 MockInteractions.focus(input); 158 input.addEventListener('blur', function(event) { 159 assert(!input.focused, 'input is blurred'); 160 }); 161 MockInteractions.blur(input); 162 }); 163 164 test('blur events fired on host element nested element is blurred', function() { 165 MockInteractions.focus(input); 166 input.addEventListener('blur', function(event) { 167 assert(!input.focused, 'input is blurred'); 168 }); 169 MockInteractions.blur(input.inputElement.textarea); 170 }); 171 172 test('focusing then bluring sets the focused attribute correctly', function() { 173 MockInteractions.focus(input); 174 assert(input.focused, 'input is focused'); 175 MockInteractions.blur(input); 176 assert(!input.focused, 'input is blurred'); 177 MockInteractions.focus(input.inputElement.textarea); 178 assert(input.focused, 'input is focused'); 179 MockInteractions.blur(input.inputElement.textarea); 180 assert(!input.focused, 'input is blurred'); 181 }); 182 }); 183 184 suite('a11y', function() { 185 186 test('has aria-labelledby', function() { 187 var input = fixture('label'); 188 assert.isTrue(input.inputElement.textarea.hasAttribute('aria-labelledby')) 189 assert.equal(input.inputElement.textarea.getAttribute('aria-labelledby'), Polymer.dom(input.root).querySelector('label').id, 'aria-labelledby points to the label'); 190 }); 191 192 test('has aria-describedby for error message', function() { 193 var input = fixture('required'); 194 forceXIfStamp(input); 195 assert.isTrue(input.inputElement.textarea.hasAttribute('aria-describedby')); 196 assert.equal(input.inputElement.textarea.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-error').id, 'aria-describedby points to the error message'); 197 }); 198 199 test('has aria-describedby for character counter', function() { 200 var input = fixture('char-counter'); 201 forceXIfStamp(input); 202 assert.isTrue(input.inputElement.textarea.hasAttribute('aria-describedby')); 203 assert.equal(input.inputElement.textarea.getAttribute('aria-describedby'), Polymer.dom(input.root).querySelector('paper-input-char-counter').id, 'aria-describedby points to the character counter'); 204 }); 205 206 test('has aria-describedby for character counter and error', function() { 207 var input = fixture('required-char-counter'); 208 forceXIfStamp(input); 209 assert.isTrue(input.inputElement.textarea.hasAttribute('aria-describedby')); 210 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'); 211 }); 212 213 }); 214 215 216 </script> 217 218 </body> 219 </html> 220
