• 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
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