| <!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>paper-input-container 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> |
| <script src="../../iron-test-helpers/mock-interactions.js"></script> |
| |
| <link rel="import" href="../../iron-input/iron-input.html"> |
| <link rel="import" href="../paper-input-container.html"> |
| <link rel="import" href="letters-only.html"> |
| |
| </head> |
| <body> |
| |
| <test-fixture id="basic"> |
| <template> |
| <paper-input-container> |
| <label id="l">label</label> |
| <input id="i"> |
| </paper-input-container> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="prefix"> |
| <template> |
| <paper-input-container> |
| <div prefix>$</div> |
| <label id="l">label</label> |
| <input is="iron-input" id="i"> |
| </paper-input-container> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="prefix-has-value"> |
| <template> |
| <paper-input-container> |
| <div prefix>$</div> |
| <label id="l">label</label> |
| <input is="iron-input" id="i" value="foo"> |
| </paper-input-container> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="has-value"> |
| <template> |
| <paper-input-container> |
| <label id="l">label</label> |
| <input id="i" value="value"> |
| </paper-input-container> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="no-float-has-value"> |
| <template> |
| <paper-input-container no-label-float> |
| <label id="l">label</label> |
| <input id="i" value="value"> |
| </paper-input-container> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="always-float"> |
| <template> |
| <paper-input-container always-float-label> |
| <label id="l">label</label> |
| <input id="i" value="value"> |
| </paper-input-container> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="auto-validate-numbers"> |
| <template> |
| <paper-input-container auto-validate> |
| <label id="l">label</label> |
| <input is="iron-input" id="i" pattern="[0-9]*"> |
| </paper-input-container> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="manual-validate-numbers"> |
| <template> |
| <paper-input-container> |
| <label id="l">label</label> |
| <input is="iron-input" id="i" pattern="[0-9]*"> |
| </paper-input-container> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="required-validate"> |
| <template> |
| <paper-input-container> |
| <label id="l">label</label> |
| <input is="iron-input" id="i" required> |
| </paper-input-container> |
| </template> |
| </test-fixture> |
| |
| <letters-only></letters-only> |
| |
| <test-fixture id="auto-validate-validator"> |
| <template> |
| <paper-input-container auto-validate> |
| <label id="l">label</label> |
| <input is="iron-input" id="i" pattern="[0-9]*" validator="letters-only"> |
| </paper-input-container> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="auto-validate-validator-has-invalid-value"> |
| <template> |
| <paper-input-container auto-validate> |
| <label id="l">label</label> |
| <input is="iron-input" id="i" validator="letters-only" value="123123"> |
| </paper-input-container> |
| </template> |
| </test-fixture> |
| |
| <script> |
| |
| function getTransform(node) { |
| var style = getComputedStyle(node); |
| return style.transform || style.webkitTransform; |
| } |
| |
| suite('basic', function() { |
| test('can be created imperatively', function() { |
| var container = document.createElement('paper-input-container'); |
| var input = document.createElement('input', 'iron-input'); |
| input.className = 'paper-input-input'; |
| input.id = 'input'; |
| |
| var label = document.createElement('label'); |
| label.innerHTML = 'label'; |
| |
| Polymer.dom(container).appendChild(label); |
| Polymer.dom(container).appendChild(input); |
| |
| document.body.appendChild(container); |
| assert.isOk(container); |
| document.body.removeChild(container); |
| }); |
| }); |
| |
| suite('label position', function() { |
| |
| test('label is visible by default', function() { |
| var container = fixture('basic'); |
| assert.equal(getComputedStyle(container.querySelector('#l')).visibility, 'visible', 'label has visibility:visible'); |
| }); |
| |
| test('label is floated if value is initialized to not null', function(done) { |
| var container = fixture('has-value'); |
| requestAnimationFrame(function() { |
| assert.notEqual(getTransform(container.querySelector('#l')), 'none', 'label has transform'); |
| done(); |
| }); |
| }); |
| |
| test('label is invisible if no-label-float and value is initialized to not null', function() { |
| var container = fixture('no-float-has-value'); |
| assert.equal(getComputedStyle(container.querySelector('#l')).visibility, 'hidden', 'label has visibility:hidden'); |
| }); |
| |
| test('label is floated if always-float-label is true', function() { |
| var container = fixture('always-float'); |
| assert.notEqual(getTransform(container.querySelector('#l')), 'none', 'label has transform'); |
| }); |
| |
| test('label is floated correctly with a prefix', function(done) { |
| var container = fixture('prefix'); |
| var label = Polymer.dom(container).querySelector('#l'); |
| var input = Polymer.dom(container).querySelector('#i'); |
| |
| // Label is initially visible. |
| assert.equal(getComputedStyle(label).visibility, 'visible', 'label has visibility:visible'); |
| |
| // After entering text, the label floats, and it is not indented. |
| input.bindValue = 'foobar'; |
| requestAnimationFrame(function() { |
| assert.notEqual(getTransform(label), 'none', 'label has transform'); |
| assert.equal(label.getBoundingClientRect().left, container.getBoundingClientRect().left); |
| done(); |
| }); |
| }); |
| |
| test('label is floated correctly with a prefix and prefilled value', function(done) { |
| var container = fixture('prefix-has-value'); |
| var label = Polymer.dom(container).querySelector('#l'); |
| |
| // The label floats, and it is not indented. |
| requestAnimationFrame(function() { |
| assert.notEqual(getTransform(label), 'none', 'label has transform'); |
| assert.equal(label.getBoundingClientRect().left, container.getBoundingClientRect().left); |
| done(); |
| }); |
| }); |
| |
| }); |
| |
| suite('focused styling', function() { |
| |
| test('label is colored when input is focused and has value', function(done) { |
| var container = fixture('has-value'); |
| var label = Polymer.dom(container).querySelector('#l'); |
| var input = Polymer.dom(container).querySelector('#i'); |
| var inputContent = Polymer.dom(container.root).querySelector('.input-content'); |
| MockInteractions.focus(input); |
| requestAnimationFrame(function() { |
| assert.isTrue(container.focused, 'focused is true'); |
| assert.isTrue(inputContent.classList.contains('label-is-highlighted'), 'label is highlighted when input has focus'); |
| done(); |
| }); |
| }); |
| |
| test('label is not colored when input is focused and has null value', function(done) { |
| var container = fixture('basic'); |
| var label = Polymer.dom(container).querySelector('#l'); |
| var input = Polymer.dom(container).querySelector('#i'); |
| var inputContent = Polymer.dom(container.root).querySelector('.input-content'); |
| MockInteractions.focus(input); |
| requestAnimationFrame(function() { |
| assert.isFalse(inputContent.classList.contains('label-is-highlighted'), 'label is not highlighted when input has focus and has null value'); |
| done(); |
| }); |
| }); |
| |
| test('underline is colored when input is focused', function(done) { |
| var container = fixture('basic'); |
| var input = Polymer.dom(container).querySelector('#i'); |
| var line = Polymer.dom(container.root).querySelector('.underline'); |
| assert.isFalse(line.classList.contains('is-highlighted'), 'line is not highlighted when input is not focused'); |
| MockInteractions.focus(input); |
| requestAnimationFrame(function() { |
| assert.isTrue(line.classList.contains('is-highlighted'), 'line is highlighted when input is focused'); |
| done(); |
| }); |
| }); |
| |
| test('focused class added to input content', function(done) { |
| var container = fixture('basic'); |
| var input = Polymer.dom(container).querySelector('#i'); |
| var inputContent = Polymer.dom(container.root).querySelector('.input-content'); |
| assert.isFalse(inputContent.classList.contains('focused'), 'input content does not have class "focused" when input is not focused'); |
| MockInteractions.focus(input); |
| requestAnimationFrame(function() { |
| assert.isTrue(inputContent.classList.contains('focused'), 'input content has class "focused" when input is focused'); |
| done(); |
| }); |
| }); |
| |
| }); |
| |
| suite('validation', function() { |
| |
| test('styled when the input is set to an invalid value with auto-validate', function() { |
| var container = fixture('auto-validate-numbers'); |
| var input = Polymer.dom(container).querySelector('#i'); |
| var inputContent = Polymer.dom(container.root).querySelector('.input-content'); |
| var line = Polymer.dom(container.root).querySelector('.underline'); |
| |
| input.bindValue = 'foobar'; |
| |
| assert.isTrue(container.invalid, 'invalid is true'); |
| assert.isTrue(inputContent.classList.contains('is-invalid'), 'label has invalid styling when input is invalid'); |
| assert.isTrue(line.classList.contains('is-invalid'), 'underline has invalid styling when input is invalid'); |
| }); |
| |
| test('styled when the input is set to an invalid value with auto-validate, with validator', function() { |
| var container = fixture('auto-validate-validator'); |
| var input = Polymer.dom(container).querySelector('#i'); |
| var inputContent = Polymer.dom(container.root).querySelector('.input-content'); |
| var line = Polymer.dom(container.root).querySelector('.underline'); |
| |
| input.bindValue = '123123'; |
| |
| assert.isTrue(container.invalid, 'invalid is true'); |
| assert.isTrue(inputContent.classList.contains('is-invalid'), 'label has invalid styling when input is invalid'); |
| assert.isTrue(line.classList.contains('is-invalid'), 'underline has invalid styling when input is invalid'); |
| }); |
| |
| test('styled when the input is set initially to an invalid value with auto-validate, with validator', function() { |
| var container = fixture('auto-validate-validator-has-invalid-value'); |
| assert.isTrue(container.invalid, 'invalid is true'); |
| assert.isTrue(Polymer.dom(container.root).querySelector('.underline').classList.contains('is-invalid'), 'underline has is-invalid class'); |
| }); |
| |
| test('styled when the input is set to an invalid value with manual validation', function() { |
| var container = fixture('manual-validate-numbers'); |
| var input = Polymer.dom(container).querySelector('#i'); |
| var inputContent = Polymer.dom(container.root).querySelector('.input-content'); |
| var line = Polymer.dom(container.root).querySelector('.underline'); |
| |
| input.bindValue = 'foobar'; |
| input.validate(); |
| |
| assert.isTrue(container.invalid, 'invalid is true'); |
| assert.isTrue(inputContent.classList.contains('is-invalid'), 'label has invalid styling when input is invalid'); |
| assert.isTrue(line.classList.contains('is-invalid'), 'underline has invalid styling when input is invalid'); |
| }); |
| |
| test('styled when the input is manually validated and required', function() { |
| var container = fixture('required-validate'); |
| var input = Polymer.dom(container).querySelector('#i'); |
| var inputContent = Polymer.dom(container.root).querySelector('.input-content'); |
| assert.isFalse(container.invalid, 'invalid is false'); |
| input.validate(); |
| assert.isTrue(container.invalid, 'invalid is true'); |
| assert.isTrue(inputContent.classList.contains('is-invalid'), 'input content has is-invalid class'); |
| }); |
| |
| }); |
| |
| </script> |
| |
| </body> |
| </html> |
