• 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>iron-input 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  <script src="../../web-component-tester/browser.js"></script>
22  <link rel="import" href="../iron-input.html">
23  <link rel="import" href="letters-only.html">
24  <link rel="import" href="disabled-input.html">
25
26</head>
27<body>
28
29  <test-fixture id="basic">
30    <template>
31      <input is="iron-input">
32    </template>
33  </test-fixture>
34
35  <test-fixture id="has-value">
36    <template>
37      <input is="iron-input" value="foobar">
38    </template>
39  </test-fixture>
40
41  <test-fixture id="has-bind-value">
42    <template>
43      <input is="iron-input" bind-value="foobar">
44    </template>
45  </test-fixture>
46
47  <test-fixture id="prevent-invalid-input">
48    <template>
49      <input is="iron-input" prevent-invalid-input allowed-pattern="[0-9]">
50    </template>
51  </test-fixture>
52
53  <test-fixture id="prevent-invalid-input-with-pattern">
54    <template>
55      <input is="iron-input" prevent-invalid-input pattern="[a-zA-Z]{3}[0-9]*">
56    </template>
57  </test-fixture>
58
59  <test-fixture id="prevent-invalid-input-has-value">
60    <template>
61      <input is="iron-input" prevent-invalid-input allowed-pattern="[0-9]" value="foobar">
62    </template>
63  </test-fixture>
64
65  <test-fixture id="prevent-invalid-input-has-bind-value">
66    <template>
67      <input is="iron-input" prevent-invalid-input allowed-pattern="[0-9]" bind-value="foobar">
68    </template>
69  </test-fixture>
70
71  <test-fixture id="automatically-prevent-invalid-input-if-allowed-pattern">
72    <template>
73      <input is="iron-input" allowed-pattern="[0-9]">
74    </template>
75  </test-fixture>
76
77  <test-fixture id="no-validator">
78    <template>
79      <input is="iron-input" pattern="[a-zA-Z]{3}[0-9]*">
80    </template>
81  </test-fixture>
82
83  <test-fixture id="has-validator">
84    <template>
85      <letters-only></letters-only>
86      <input is="iron-input" validator="letters-only" pattern="[0-9]*">
87    </template>
88  </test-fixture>
89
90  <test-fixture id="native-and-custom-validator">
91    <template>
92      <letters-only></letters-only>
93      <input is="iron-input" validator="letters-only" pattern="[a-c]*">
94    </template>
95  </test-fixture>
96
97  <template is="dom-bind" id="bind-to-object">
98    <input is="iron-input" id="input" bind-value="{{foo}}">
99  </template>
100
101  <test-fixture id="disabled-input">
102    <template>
103      <disabled-input></disabled-input>
104    </template>
105  </test-fixture>
106
107  <script>
108
109    suite('basic', function() {
110
111      test('setting bindValue sets value', function() {
112        var input = fixture('basic');
113        input.bindValue = 'foobar';
114        assert.equal(input.value, input.bindValue, 'value equals to bindValue');
115      });
116
117      test('changing the input triggers an event', function(done) {
118        var input = fixture('basic');
119
120        input.addEventListener('bind-value-changed', function(value) {
121          assert.equal(input.value, input.bindValue, 'value equals to bindValue');
122          done();
123        });
124
125        input.value = "foo";
126        input._onInput();
127      });
128
129      test('default value sets bindValue', function() {
130        var input = fixture('has-value');
131        assert.equal(input.bindValue, input.value, 'bindValue equals value');
132      });
133
134      test('default bindValue sets value', function() {
135        var input = fixture('has-bind-value');
136        assert.equal(input.value, input.bindValue, 'value equals to bindValue');
137      });
138
139      test('set bindValue to undefined', function() {
140        var scope = document.getElementById('bind-to-object');
141        scope.foo = undefined;
142        assert.ok(!scope.$.input.bindValue, 'bindValue is falsy');
143        assert.ok(!scope.$.input.value, 'value is falsy');
144      });
145
146      test('can validate using a complex regex', function() {
147        var input = fixture('no-validator');
148        input.value = '123';
149        input.validate();
150        assert.isTrue(input.invalid, 'input is invalid');
151        input.value = 'foo';
152        input.validate();
153        assert.isFalse(input.invalid, 'input is valid');
154        input.value = 'foo123';
155        input.validate();
156        assert.isFalse(input.invalid, 'input is valid');
157      });
158
159      test('set bindValue to false', function() {
160        var scope = document.getElementById('bind-to-object');
161        scope.foo = false;
162        assert.isFalse(scope.$.input.bindValue);
163        assert.equal(scope.$.input.value, 'false');
164      });
165
166      test('validator used instead of constraints api if provided', function() {
167        var input = fixture('has-validator')[1];
168        input.value = '123';
169        input.validate();
170        assert.isTrue(input.invalid, 'input is invalid');
171      });
172
173      test('prevent invalid input works in _onInput', function() {
174        var input = fixture('prevent-invalid-input');
175        input.value = '123';
176        input._onInput();
177        assert.equal(input.bindValue, '123');
178
179        input.value = '123foo';
180        input._onInput();
181        assert.equal(input.bindValue, '123');
182      });
183
184      test('inputs can be validated', function() {
185        var input = fixture('prevent-invalid-input-with-pattern');
186        input.value = '123';
187        input._onInput();
188        assert.equal(input.bindValue, '123');
189        input.validate();
190        assert.isTrue(input.invalid, 'input is invalid');
191
192        input.value = 'foo';
193        input._onInput();
194        assert.equal(input.bindValue, 'foo');
195        input.validate();
196        assert.isFalse(input.invalid, 'input is valid');
197
198        input.value = 'foo123';
199        input._onInput();
200        assert.equal(input.bindValue, 'foo123');
201        input.validate();
202        assert.isFalse(input.invalid, 'input is valid');
203      });
204
205      test('prevent invalid input works automatically when allowed pattern is set', function() {
206        var input = fixture('automatically-prevent-invalid-input-if-allowed-pattern');
207        input.value = '123';
208        input._onInput();
209        assert.equal(input.bindValue, '123');
210
211        input.value = '123foo';
212        input._onInput();
213        assert.equal(input.bindValue, '123');
214
215        input.allowedPattern = '';
216        input.value = '#123foo BAR!';
217        input._onInput();
218        assert.equal(input.bindValue, '#123foo BAR!');
219
220        input.allowedPattern = '[a-zA-Z]';
221        input.value = 'foo';
222        input._onInput();
223        input.value = 'bar123';
224        input._onInput();
225        assert.equal(input.bindValue, 'foo');
226      });
227
228      test('disabled input doesn\'t throw on Firefox', function() {
229        var el = fixture('disabled-input');
230        var input = el.$.input;
231
232        assert.equal(input.bindValue, 'foo');
233
234        assert.isFalse(el.myInvalid);
235        assert.isTrue(input.disabled);
236      });
237
238      test('browser validation beats custom validation', function() {
239        var input = fixture('native-and-custom-validator')[1];
240        // The input allows any letters, but the browser only allows one
241        // of [abc].
242        input.value = 'aaaa';
243        input.validate();
244        assert.isFalse(input.invalid, 'input is valid');
245
246        // The validator allows this, but the browser doesn't.
247        input.value = 'zzz';
248        input.validate();
249        assert.isTrue(input.invalid, 'input is invalid');
250      });
251    });
252
253    suite('a11y', function() {
254      test('announces invalid characters when _onInput is called', function() {
255        var input = fixture('prevent-invalid-input');
256        input.addEventListener('iron-announce', function(event) {
257          assert.equal(event.detail.text, 'Invalid string of characters not entered.');
258        });
259        input.value = 'foo';
260        input._onInput();
261      });
262
263      test('announces invalid characters on keypress', function() {
264        var input = fixture('prevent-invalid-input');
265        input.addEventListener('iron-announce', function(event) {
266          assert.equal(event.detail.text, 'Invalid character a not entered.');
267        });
268
269        // Simulate key press event.
270        var event = new CustomEvent('keypress', {
271          bubbles: true,
272          cancelable: true
273        });
274        event.charCode = 97 /* a */;
275        input.dispatchEvent(event);
276      });
277    });
278  </script>
279
280</body>
281</html>
282