2015-06-26 20:27:38 -07:00
|
|
|
<!doctype html>
|
|
|
|
|
<!--
|
|
|
|
|
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="../../test-fixture/test-fixture-mocha.js"></script>
|
|
|
|
|
|
2015-07-13 14:26:11 -07:00
|
|
|
<script src="../../iron-test-helpers/mock-interactions.js"></script>
|
|
|
|
|
|
2015-06-26 20:27:38 -07:00
|
|
|
<link rel="import" href="../../test-fixture/test-fixture.html">
|
|
|
|
|
<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="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>
|
|
|
|
|
|
|
|
|
|
<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('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() {
|
|
|
|
|
var container = fixture('has-value');
|
|
|
|
|
assert.notEqual(getTransform(container.querySelector('#l')), 'none', 'label has transform');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
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');
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
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');
|
2015-07-13 14:26:11 -07:00
|
|
|
MockInteractions.focus(input);
|
2015-06-26 20:27:38 -07:00
|
|
|
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');
|
2015-07-13 14:26:11 -07:00
|
|
|
MockInteractions.focus(input);
|
2015-06-26 20:27:38 -07:00
|
|
|
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');
|
2015-07-13 14:26:11 -07:00
|
|
|
MockInteractions.focus(input);
|
2015-06-26 20:27:38 -07:00
|
|
|
requestAnimationFrame(function() {
|
|
|
|
|
assert.isTrue(line.classList.contains('is-highlighted'), 'line is highlighted 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');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
