• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!doctype html>
2<!--
3@license
4Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8Code distributed by Google as part of the polymer project is also
9subject 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      test('label does not receive pointer events', function() {
130        var input = fixture('always-float-label');
131        var label = Polymer.dom(input.root).querySelector('label');
132        assert.equal(getComputedStyle(label).pointerEvents, 'none');
133      });
134
135      test('no extra space between input and underline', function() {
136        var input = fixture('label');
137        var container = Polymer.dom(input.root).querySelector('paper-input-container');
138        var inputContent = Polymer.dom(container.root).querySelector('.input-content');
139        var ironTextarea = Polymer.dom(input.root).querySelector('iron-autogrow-textarea');
140        assert.equal(inputContent.clientHeight,ironTextarea.clientHeight, 'container and textarea are same height');
141      });
142    });
143
144    suite('focus/blur events', function() {
145      var input;
146
147      setup(function() {
148        input = fixture('basic');
149      });
150
151      // At the moment, it is very hard to correctly fire exactly
152      // one focus/blur events on a paper-textarea. This is because
153      // when a paper-textarea is focused, it needs to focus
154      // its underlying native textarea, which will also fire a `blur`
155      // event.
156      test('focus events fired on host element', function() {
157        input.addEventListener('focus', function(event) {
158          assert(input.focused, 'input is focused');
159        });
160        MockInteractions.focus(input);
161      });
162
163      test('focus events fired on host element if nested element is focused', function() {
164        input.addEventListener('focus', function(event) {
165          assert(input.focused, 'input is focused');
166        });
167        MockInteractions.focus(input.inputElement.textarea);
168      });
169
170      test('blur events fired on host element', function() {
171        MockInteractions.focus(input);
172        input.addEventListener('blur', function(event) {
173          assert(!input.focused, 'input is blurred');
174        });
175        MockInteractions.blur(input);
176      });
177
178      test('blur events fired on host element nested element is blurred', function() {
179        MockInteractions.focus(input);
180        input.addEventListener('blur', function(event) {
181          assert(!input.focused, 'input is blurred');
182        });
183        MockInteractions.blur(input.inputElement.textarea);
184      });
185
186      test('focusing then bluring sets the focused attribute correctly', function() {
187        MockInteractions.focus(input);
188        assert(input.focused, 'input is focused');
189        MockInteractions.blur(input);
190        assert(!input.focused, 'input is blurred');
191        MockInteractions.focus(input.inputElement.textarea);
192        assert(input.focused, 'input is focused');
193        MockInteractions.blur(input.inputElement.textarea);
194        assert(!input.focused, 'input is blurred');
195      });
196    });
197
198    suite('a11y', function() {
199
200      test('has aria-labelledby', function() {
201        var input = fixture('label');
202        assert.isTrue(input.inputElement.textarea.hasAttribute('aria-labelledby'))
203        assert.equal(input.inputElement.textarea.getAttribute('aria-labelledby'), Polymer.dom(input.root).querySelector('label').id, 'aria-labelledby points to the label');
204      });
205
206      test('has aria-describedby for error message', function() {
207        var input = fixture('required');
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, 'aria-describedby points to the error message');
211      });
212
213      test('has aria-describedby for character counter', function() {
214        var input = fixture('char-counter');
215        forceXIfStamp(input);
216        assert.isTrue(input.inputElement.textarea.hasAttribute('aria-describedby'));
217        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');
218      });
219
220      test('has aria-describedby for character counter and error', function() {
221        var input = fixture('required-char-counter');
222        forceXIfStamp(input);
223        assert.isTrue(input.inputElement.textarea.hasAttribute('aria-describedby'));
224        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');
225      });
226
227    });
228
229
230  </script>
231
232</body>
233</html>
234