• 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-input-container 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
25  <link rel="import" href="../../iron-input/iron-input.html">
26  <link rel="import" href="../paper-input-container.html">
27  <link rel="import" href="letters-only.html">
28
29</head>
30<body>
31
32  <test-fixture id="basic">
33    <template>
34      <paper-input-container>
35        <label id="l">label</label>
36        <input id="i">
37      </paper-input-container>
38    </template>
39  </test-fixture>
40
41  <test-fixture id="prefix">
42    <template>
43      <paper-input-container>
44        <div prefix>$</div>
45        <label id="l">label</label>
46        <input is="iron-input" id="i">
47      </paper-input-container>
48    </template>
49  </test-fixture>
50
51  <test-fixture id="prefix-has-value">
52    <template>
53      <paper-input-container>
54        <div prefix>$</div>
55        <label id="l">label</label>
56        <input is="iron-input" id="i" value="foo">
57      </paper-input-container>
58    </template>
59  </test-fixture>
60
61  <test-fixture id="has-value">
62    <template>
63      <paper-input-container>
64        <label id="l">label</label>
65        <input id="i" value="value">
66      </paper-input-container>
67    </template>
68  </test-fixture>
69
70  <test-fixture id="no-float-has-value">
71    <template>
72      <paper-input-container no-label-float>
73        <label id="l">label</label>
74        <input id="i" value="value">
75      </paper-input-container>
76    </template>
77  </test-fixture>
78
79  <test-fixture id="always-float">
80    <template>
81      <paper-input-container always-float-label>
82        <label id="l">label</label>
83        <input id="i" value="value">
84      </paper-input-container>
85    </template>
86  </test-fixture>
87
88  <test-fixture id="auto-validate-numbers">
89    <template>
90      <paper-input-container auto-validate>
91        <label id="l">label</label>
92        <input is="iron-input" id="i" pattern="[0-9]*">
93      </paper-input-container>
94    </template>
95  </test-fixture>
96
97  <test-fixture id="manual-validate-numbers">
98    <template>
99      <paper-input-container>
100        <label id="l">label</label>
101        <input is="iron-input" id="i" pattern="[0-9]*">
102      </paper-input-container>
103    </template>
104  </test-fixture>
105
106  <test-fixture id="required-validate">
107    <template>
108      <paper-input-container>
109        <label id="l">label</label>
110        <input is="iron-input" id="i" required>
111      </paper-input-container>
112    </template>
113  </test-fixture>
114
115  <letters-only></letters-only>
116
117  <test-fixture id="auto-validate-validator">
118    <template>
119      <paper-input-container auto-validate>
120        <label id="l">label</label>
121        <input is="iron-input" id="i" pattern="[0-9]*" validator="letters-only">
122      </paper-input-container>
123    </template>
124  </test-fixture>
125
126  <test-fixture id="auto-validate-validator-has-invalid-value">
127    <template>
128      <paper-input-container auto-validate>
129        <label id="l">label</label>
130        <input is="iron-input" id="i" validator="letters-only" value="123123">
131      </paper-input-container>
132    </template>
133  </test-fixture>
134
135  <script>
136
137    function getTransform(node) {
138      var style = getComputedStyle(node);
139      return style.transform || style.webkitTransform;
140    }
141
142    suite('basic', function() {
143      test('can be created imperatively', function() {
144        var container = document.createElement('paper-input-container');
145        var input = document.createElement('input', 'iron-input');
146        input.className = 'paper-input-input';
147        input.id = 'input';
148
149        var label = document.createElement('label');
150        label.innerHTML = 'label';
151
152        Polymer.dom(container).appendChild(label);
153        Polymer.dom(container).appendChild(input);
154
155        document.body.appendChild(container);
156        assert.isOk(container);
157        document.body.removeChild(container);
158      });
159    });
160
161    suite('label position', function() {
162
163      test('label is visible by default', function() {
164        var container = fixture('basic');
165        assert.equal(getComputedStyle(container.querySelector('#l')).visibility, 'visible', 'label has visibility:visible');
166      });
167
168      test('label is floated if value is initialized to not null', function(done) {
169        var container = fixture('has-value');
170        requestAnimationFrame(function() {
171          assert.notEqual(getTransform(container.querySelector('#l')), 'none', 'label has transform');
172          done();
173        });
174      });
175
176      test('label is invisible if no-label-float and value is initialized to not null', function() {
177        var container = fixture('no-float-has-value');
178        assert.equal(getComputedStyle(container.querySelector('#l')).visibility, 'hidden', 'label has visibility:hidden');
179      });
180
181      test('label is floated if always-float-label is true', function() {
182        var container = fixture('always-float');
183        assert.notEqual(getTransform(container.querySelector('#l')), 'none', 'label has transform');
184      });
185
186      test('label is floated correctly with a prefix', function(done) {
187        var container = fixture('prefix');
188        var label = Polymer.dom(container).querySelector('#l');
189        var input = Polymer.dom(container).querySelector('#i');
190
191        // Label is initially visible.
192        assert.equal(getComputedStyle(label).visibility, 'visible', 'label has visibility:visible');
193
194        // After entering text, the label floats, and it is not indented.
195        input.bindValue = 'foobar';
196        requestAnimationFrame(function() {
197          assert.notEqual(getTransform(label), 'none', 'label has transform');
198          assert.equal(label.getBoundingClientRect().left, container.getBoundingClientRect().left);
199          done();
200        });
201      });
202
203      test('label is floated correctly with a prefix and prefilled value', function(done) {
204        var container = fixture('prefix-has-value');
205        var label = Polymer.dom(container).querySelector('#l');
206
207        // The label floats, and it is not indented.
208        requestAnimationFrame(function() {
209          assert.notEqual(getTransform(label), 'none', 'label has transform');
210          assert.equal(label.getBoundingClientRect().left, container.getBoundingClientRect().left);
211          done();
212        });
213      });
214
215    });
216
217    suite('focused styling', function() {
218
219      test('label is colored when input is focused and has value', function(done) {
220        var container = fixture('has-value');
221        var label = Polymer.dom(container).querySelector('#l');
222        var input = Polymer.dom(container).querySelector('#i');
223        var inputContent = Polymer.dom(container.root).querySelector('.input-content');
224        MockInteractions.focus(input);
225        requestAnimationFrame(function() {
226          assert.isTrue(container.focused, 'focused is true');
227          assert.isTrue(inputContent.classList.contains('label-is-highlighted'), 'label is highlighted when input has focus');
228          done();
229        });
230      });
231
232      test('label is not colored when input is focused and has null value', function(done) {
233        var container = fixture('basic');
234        var label = Polymer.dom(container).querySelector('#l');
235        var input = Polymer.dom(container).querySelector('#i');
236        var inputContent = Polymer.dom(container.root).querySelector('.input-content');
237        MockInteractions.focus(input);
238        requestAnimationFrame(function() {
239          assert.isFalse(inputContent.classList.contains('label-is-highlighted'), 'label is not highlighted when input has focus and has null value');
240          done();
241        });
242      });
243
244      test('underline is colored when input is focused', function(done) {
245        var container = fixture('basic');
246        var input = Polymer.dom(container).querySelector('#i');
247        var line = Polymer.dom(container.root).querySelector('.underline');
248        assert.isFalse(line.classList.contains('is-highlighted'), 'line is not highlighted when input is not focused');
249        MockInteractions.focus(input);
250        requestAnimationFrame(function() {
251          assert.isTrue(line.classList.contains('is-highlighted'), 'line is highlighted when input is focused');
252          done();
253        });
254      });
255
256      test('focused class added to input content', function(done) {
257        var container = fixture('basic');
258        var input = Polymer.dom(container).querySelector('#i');
259        var inputContent = Polymer.dom(container.root).querySelector('.input-content');
260        assert.isFalse(inputContent.classList.contains('focused'), 'input content does not have class "focused" when input is not focused');
261        MockInteractions.focus(input);
262        requestAnimationFrame(function() {
263          assert.isTrue(inputContent.classList.contains('focused'), 'input content has class "focused" when input is focused');
264          done();
265        });
266      });
267
268    });
269
270    suite('validation', function() {
271
272      test('styled when the input is set to an invalid value with auto-validate', function() {
273        var container = fixture('auto-validate-numbers');
274        var input = Polymer.dom(container).querySelector('#i');
275        var inputContent = Polymer.dom(container.root).querySelector('.input-content');
276        var line = Polymer.dom(container.root).querySelector('.underline');
277
278        input.bindValue = 'foobar';
279
280        assert.isTrue(container.invalid, 'invalid is true');
281        assert.isTrue(inputContent.classList.contains('is-invalid'), 'label has invalid styling when input is invalid');
282        assert.isTrue(line.classList.contains('is-invalid'), 'underline has invalid styling when input is invalid');
283      });
284
285      test('styled when the input is set to an invalid value with auto-validate, with validator', function() {
286        var container = fixture('auto-validate-validator');
287        var input = Polymer.dom(container).querySelector('#i');
288        var inputContent = Polymer.dom(container.root).querySelector('.input-content');
289        var line = Polymer.dom(container.root).querySelector('.underline');
290
291        input.bindValue = '123123';
292
293        assert.isTrue(container.invalid, 'invalid is true');
294        assert.isTrue(inputContent.classList.contains('is-invalid'), 'label has invalid styling when input is invalid');
295        assert.isTrue(line.classList.contains('is-invalid'), 'underline has invalid styling when input is invalid');
296      });
297
298      test('styled when the input is set initially to an invalid value with auto-validate, with validator', function() {
299        var container = fixture('auto-validate-validator-has-invalid-value');
300        assert.isTrue(container.invalid, 'invalid is true');
301        assert.isTrue(Polymer.dom(container.root).querySelector('.underline').classList.contains('is-invalid'), 'underline has is-invalid class');
302      });
303
304      test('styled when the input is set to an invalid value with manual validation', function() {
305        var container = fixture('manual-validate-numbers');
306        var input = Polymer.dom(container).querySelector('#i');
307        var inputContent = Polymer.dom(container.root).querySelector('.input-content');
308        var line = Polymer.dom(container.root).querySelector('.underline');
309
310        input.bindValue = 'foobar';
311        input.validate();
312
313        assert.isTrue(container.invalid, 'invalid is true');
314        assert.isTrue(inputContent.classList.contains('is-invalid'), 'label has invalid styling when input is invalid');
315        assert.isTrue(line.classList.contains('is-invalid'), 'underline has invalid styling when input is invalid');
316      });
317
318      test('styled when the input is manually validated and required', function() {
319        var container = fixture('required-validate');
320        var input = Polymer.dom(container).querySelector('#i');
321        var inputContent = Polymer.dom(container.root).querySelector('.input-content');
322        assert.isFalse(container.invalid, 'invalid is false');
323        input.validate();
324        assert.isTrue(container.invalid, 'invalid is true');
325        assert.isTrue(inputContent.classList.contains('is-invalid'), 'input content has is-invalid class');
326      });
327
328    });
329
330  </script>
331
332</body>
333</html>
334