five-bells-visualization
Version:
Tool to visualize Five Bells payments
241 lines (199 loc) • 7.2 kB
HTML
<!--
Copyright (c) 2014 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>
<meta charset="UTF-8">
<title>paper-input-decorator tests</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../polymer-gestures/test/js/fake.js"></script>
<script src="util.js"></script>
<link href="../../core-input/core-input.html" rel="import">
<link href="../paper-input-decorator.html" rel="import">
<link href="../paper-autogrow-textarea.html" rel="import">
<link href="../paper-char-counter.html" rel="import">
<style>
paper-input-decorator {
width: 400px;
}
</style>
</head>
<body>
<template id="default">
<paper-input-decorator label="label">
<input is="core-input">
</paper-input-decorator>
<br>
</template>
<template id="floating-label">
<paper-input-decorator label="floating label" floatingLabel>
<input is="core-input">
</paper-input-decorator>
<br>
</template>
<template id="label-visible-false">
<paper-input-decorator label="labelVisible = false" labelVisible="false">
<input is="core-input">
</paper-input-decorator>
<br>
</template>
<template id="floating-label-filled">
<paper-input-decorator label="input" floatingLabel>
<input is="core-input" value="prefilled">
</paper-input-decorator>
</template>
<template id="no-input">
<paper-input-decorator label="no input">
</paper-input-decorator>
<br>
</template>
<template id="error">
<paper-input-decorator label="input" floatingLabel isInvalid error="error message">
<input is="core-input" value="something">
</paper-input-decorator>
<br>
</template>
<template id="auto-validate">
<paper-input-decorator autoValidate error="input is required">
<input is="core-input" required>
</paper-input-decorator>
<br>
</template>
<template id="char-counter">
<paper-input-decorator label="character counter">
<input is="core-input" maxlength="5">
<paper-char-counter class="counter"></paper-char-counter>
</paper-input-decorator>
<br>
</template>
<script>
var fake = new Fake();
function cloneAndAppendTemplate(templateId) {
var tmpl = document.getElementById(templateId);
var frag = document.importNode(tmpl.content, true);
var node = frag.children[0];
document.body.appendChild(frag);
return {
d: node,
i: node.querySelector('input')
};
}
test('label is invisible if value is not null', function() {
var nodes = cloneAndAppendTemplate('default');
nodes.i.value = 'foobar';
nodes.d.updateLabelVisibility(nodes.i.value);
assert.ok(!nodes.d._labelVisible);
});
test('label is invisible if floating label and focused', function(done) {
var nodes = cloneAndAppendTemplate('floating-label');
async.series([
function(callback) {
ensureFocus(nodes.i, callback);
},
function(callback) {
assert.ok(!nodes.d._labelVisible);
callback();
}
], done);
});
test('label is invisible if value = 0', function() {
var nodes = cloneAndAppendTemplate('default');
nodes.i.value = 0;
nodes.d.updateLabelVisibility(nodes.i.value);
assert.ok(!nodes.d._labelVisible);
});
test('labelVisible overrides label visibility', function() {
var nodes = cloneAndAppendTemplate('default');
nodes.d.labelVisible = false;
assert.ok(!nodes.i.value);
assert.ok(!nodes.d._labelVisible);
});
test('labelVisible works in an attribute', function() {
var nodes = cloneAndAppendTemplate('label-visible-false');
assert.ok(!nodes.d._labelVisible);
});
test('can create inputs lazily', function() {
var nodes = cloneAndAppendTemplate('no-input');
var input = document.createElement('input');
input.value = 'foobar';
nodes.d.appendChild(input);
assert.ok(!nodes.d._labelVisible);
});
test('tapping on floating label focuses input', function(done) {
var nodes = cloneAndAppendTemplate('floating-label-filled');
var floatedLabel = nodes.d.shadowRoot.querySelector('.floated-label');
fake.downOnNode(floatedLabel);
fake.upOnNode(floatedLabel);
waitFor(function() {
assertNodeHasFocus(nodes.i);
}, done);
});
test('floating label and the error message are the same color', function(done) {
var nodes = cloneAndAppendTemplate('error');
flush(function() {
var s1 = getComputedStyle(nodes.d.$.floatedLabelText);
var s2 = getComputedStyle(nodes.d.shadowRoot.querySelector('.error-text'));
assert.strictEqual(s1.color, s2.color);
done();
});
});
test('auto-validate input validates after creation', function() {
var nodes = cloneAndAppendTemplate('auto-validate');
flush(function() {
assert.ok(nodes.d.isInvalid);
});
});
test('char-counter is visible', function() {
var nodes = cloneAndAppendTemplate('char-counter');
var counter = nodes.d.querySelector('.counter');
assert.ok(nodes.i.maxLength != 0);
assert.ok(nodes.d.error == "");
nodes.i.id="input";
counter.target = "input";
counter.ready();
flush(function() {
assert.ok(!counter.shadowRoot.querySelector('.counter-text').hidden);
});
});
test('char-counter is invalid when input exceeds maxLength', function() {
var nodes = cloneAndAppendTemplate('char-counter');
var counter = nodes.d.querySelector('.counter');
assert.ok(nodes.i.maxLength == 5);
nodes.i.id = "input";
counter.target = "input";
counter.ready();
flush(function() {
nodes.i.value = "nanananabatman";
var e = new Event('input', {
bubbles: true
});
nodes.i.dispatchEvent(e);
flush(function() {
assert.ok(counter._isCounterInvalid);
assert.ok(nodes.d.isInvalid);
assert.strictEqual(
CoreStyle.g.paperInput.invalidColor,
counter.shadowRoot.querySelector('.counter-text').color);
done();
});
});
});
suite('a11y', function() {
test('aria-label set on input', function() {
var nodes = cloneAndAppendTemplate('default');
flush(function() {
assert.strictEqual(nodes.i.getAttribute('aria-label'), nodes.d.label);
});
});
});
</script>
</body>
</html>