| <!doctype html> |
| <!-- |
| @license |
| Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
| The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
| Code distributed by Google as part of the polymer project is also |
| subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
| --> |
| <html> |
| <head> |
| |
| <title>iron-input tests</title> |
| |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> |
| |
| <script src="../../webcomponentsjs/webcomponents-lite.js"></script> |
| <script src="../../web-component-tester/browser.js"></script> |
| <link rel="import" href="../iron-input.html"> |
| <link rel="import" href="letters-only.html"> |
| <link rel="import" href="disabled-input.html"> |
| |
| </head> |
| <body> |
| |
| <test-fixture id="basic"> |
| <template> |
| <input is="iron-input"> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="has-value"> |
| <template> |
| <input is="iron-input" value="foobar"> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="has-bind-value"> |
| <template> |
| <input is="iron-input" bind-value="foobar"> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="prevent-invalid-input"> |
| <template> |
| <input is="iron-input" prevent-invalid-input allowed-pattern="[0-9]"> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="prevent-invalid-input-with-pattern"> |
| <template> |
| <input is="iron-input" prevent-invalid-input pattern="[a-zA-Z]{3}[0-9]*"> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="prevent-invalid-input-has-value"> |
| <template> |
| <input is="iron-input" prevent-invalid-input allowed-pattern="[0-9]" value="foobar"> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="prevent-invalid-input-has-bind-value"> |
| <template> |
| <input is="iron-input" prevent-invalid-input allowed-pattern="[0-9]" bind-value="foobar"> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="automatically-prevent-invalid-input-if-allowed-pattern"> |
| <template> |
| <input is="iron-input" allowed-pattern="[0-9]"> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="no-validator"> |
| <template> |
| <input is="iron-input" pattern="[a-zA-Z]{3}[0-9]*"> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="has-validator"> |
| <template> |
| <letters-only></letters-only> |
| <input is="iron-input" validator="letters-only" pattern="[0-9]*"> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="native-and-custom-validator"> |
| <template> |
| <letters-only></letters-only> |
| <input is="iron-input" validator="letters-only" pattern="[a-c]*"> |
| </template> |
| </test-fixture> |
| |
| <template is="dom-bind" id="bind-to-object"> |
| <input is="iron-input" id="input" bind-value="{{foo}}"> |
| </template> |
| |
| <test-fixture id="disabled-input"> |
| <template> |
| <disabled-input></disabled-input> |
| </template> |
| </test-fixture> |
| |
| <script> |
| |
| suite('basic', function() { |
| |
| test('setting bindValue sets value', function() { |
| var input = fixture('basic'); |
| input.bindValue = 'foobar'; |
| assert.equal(input.value, input.bindValue, 'value equals to bindValue'); |
| }); |
| |
| test('changing the input triggers an event', function(done) { |
| var input = fixture('basic'); |
| |
| input.addEventListener('bind-value-changed', function(value) { |
| assert.equal(input.value, input.bindValue, 'value equals to bindValue'); |
| done(); |
| }); |
| |
| input.value = "foo"; |
| input._onInput(); |
| }); |
| |
| test('default value sets bindValue', function() { |
| var input = fixture('has-value'); |
| assert.equal(input.bindValue, input.value, 'bindValue equals value'); |
| }); |
| |
| test('default bindValue sets value', function() { |
| var input = fixture('has-bind-value'); |
| assert.equal(input.value, input.bindValue, 'value equals to bindValue'); |
| }); |
| |
| test('set bindValue to undefined', function() { |
| var scope = document.getElementById('bind-to-object'); |
| scope.foo = undefined; |
| assert.ok(!scope.$.input.bindValue, 'bindValue is falsy'); |
| assert.ok(!scope.$.input.value, 'value is falsy'); |
| }); |
| |
| test('can validate using a complex regex', function() { |
| var input = fixture('no-validator'); |
| input.value = '123'; |
| input.validate(); |
| assert.isTrue(input.invalid, 'input is invalid'); |
| input.value = 'foo'; |
| input.validate(); |
| assert.isFalse(input.invalid, 'input is valid'); |
| input.value = 'foo123'; |
| input.validate(); |
| assert.isFalse(input.invalid, 'input is valid'); |
| }); |
| |
| test('set bindValue to false', function() { |
| var scope = document.getElementById('bind-to-object'); |
| scope.foo = false; |
| assert.isFalse(scope.$.input.bindValue); |
| assert.equal(scope.$.input.value, 'false'); |
| }); |
| |
| test('validator used instead of constraints api if provided', function() { |
| var input = fixture('has-validator')[1]; |
| input.value = '123'; |
| input.validate(); |
| assert.isTrue(input.invalid, 'input is invalid'); |
| }); |
| |
| test('prevent invalid input works in _onInput', function() { |
| var input = fixture('prevent-invalid-input'); |
| input.value = '123'; |
| input._onInput(); |
| assert.equal(input.bindValue, '123'); |
| |
| input.value = '123foo'; |
| input._onInput(); |
| assert.equal(input.bindValue, '123'); |
| }); |
| |
| test('inputs can be validated', function() { |
| var input = fixture('prevent-invalid-input-with-pattern'); |
| input.value = '123'; |
| input._onInput(); |
| assert.equal(input.bindValue, '123'); |
| input.validate(); |
| assert.isTrue(input.invalid, 'input is invalid'); |
| |
| input.value = 'foo'; |
| input._onInput(); |
| assert.equal(input.bindValue, 'foo'); |
| input.validate(); |
| assert.isFalse(input.invalid, 'input is valid'); |
| |
| input.value = 'foo123'; |
| input._onInput(); |
| assert.equal(input.bindValue, 'foo123'); |
| input.validate(); |
| assert.isFalse(input.invalid, 'input is valid'); |
| }); |
| |
| test('prevent invalid input works automatically when allowed pattern is set', function() { |
| var input = fixture('automatically-prevent-invalid-input-if-allowed-pattern'); |
| input.value = '123'; |
| input._onInput(); |
| assert.equal(input.bindValue, '123'); |
| |
| input.value = '123foo'; |
| input._onInput(); |
| assert.equal(input.bindValue, '123'); |
| |
| input.allowedPattern = ''; |
| input.value = '#123foo BAR!'; |
| input._onInput(); |
| assert.equal(input.bindValue, '#123foo BAR!'); |
| |
| input.allowedPattern = '[a-zA-Z]'; |
| input.value = 'foo'; |
| input._onInput(); |
| input.value = 'bar123'; |
| input._onInput(); |
| assert.equal(input.bindValue, 'foo'); |
| }); |
| |
| test('disabled input doesn\'t throw on Firefox', function() { |
| var el = fixture('disabled-input'); |
| var input = el.$.input; |
| |
| assert.equal(input.bindValue, 'foo'); |
| |
| assert.isFalse(el.myInvalid); |
| assert.isTrue(input.disabled); |
| }); |
| |
| test('browser validation beats custom validation', function() { |
| var input = fixture('native-and-custom-validator')[1]; |
| // The input allows any letters, but the browser only allows one |
| // of [abc]. |
| input.value = 'aaaa'; |
| input.validate(); |
| assert.isFalse(input.invalid, 'input is valid'); |
| |
| // The validator allows this, but the browser doesn't. |
| input.value = 'zzz'; |
| input.validate(); |
| assert.isTrue(input.invalid, 'input is invalid'); |
| }); |
| }); |
| |
| suite('a11y', function() { |
| test('announces invalid characters when _onInput is called', function() { |
| var input = fixture('prevent-invalid-input'); |
| input.addEventListener('iron-announce', function(event) { |
| assert.equal(event.detail.text, 'Invalid string of characters not entered.'); |
| }); |
| input.value = 'foo'; |
| input._onInput(); |
| }); |
| |
| test('announces invalid characters on keypress', function() { |
| var input = fixture('prevent-invalid-input'); |
| input.addEventListener('iron-announce', function(event) { |
| assert.equal(event.detail.text, 'Invalid character a not entered.'); |
| }); |
| |
| // Simulate key press event. |
| var event = new CustomEvent('keypress', { |
| bubbles: true, |
| cancelable: true |
| }); |
| event.charCode = 97 /* a */; |
| input.dispatchEvent(event); |
| }); |
| }); |
| </script> |
| |
| </body> |
| </html> |
