five-bells-visualization
Version:
Tool to visualize Five Bells payments
127 lines (104 loc) • 3.76 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>core-selector-basic</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>
<link rel="import" href="../core-selector.html">
<style>
.core-selected {
background: #ccc;
}
.my-selected {
background: red;
}
</style>
</head>
<body>
<core-selector id="selector1">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
</core-selector>
<br><br>
<core-selector id="selector2" selected="item3" selectedClass="my-selected" valueattr="id">
<div id="item1">Item 1</div>
<div id="item2">Item 2</div>
<div id="item3">Item 3</div>
<div id="item4">Item 4</div>
<div id="item5">Item 5</div>
</core-selector>
<script>
var s1 = document.querySelector('#selector1');
var s2 = document.querySelector('#selector2');
suite('basic', function() {
suite('defaults', function() {
test('to nothing selected', function() {
assert.equal(s1.selected, null);
});
test('to core-selected as selectedClass', function() {
assert.equal(s1.selectedClass, 'core-selected');
});
test('to a single-select', function() {
assert.isFalse(s1.multi);
});
test('to name as valueattr', function() {
assert.equal(s1.valueattr, 'name');
});
test('as many items as children', function() {
assert.equal(s1.items.length, 5);
});
});
test('honors the selected attribute', function() {
assert.equal(s2.selected, 'item3');
assert.equal(s2.selectedIndex, 2);
assert.equal(s2.selectedItem, document.querySelector('#item3'));
});
test('honors the selectedClass attribute', function() {
assert.equal(s2.selectedClass, 'my-selected');
assert.isTrue(document.querySelector('#item3').classList.contains('my-selected'));
});
test('allows assignment to selected', function(done) {
// setup listener for core-select event
var selectEventCounter = 0;
s2.addEventListener('core-select', function(e) {
if (e.detail.isSelected) {
selectEventCounter++;
// selectedItem and detail.item should be the same
assert.equal(e.detail.item, s2.selectedItem);
}
});
// set selected
s2.selected = 'item5';
asyncPlatformFlush(function() {
// check core-select event
assert.equal(selectEventCounter, 1);
// check selected class
assert.isTrue(s2.children[4].classList.contains('my-selected'));
// check selectedItem
assert.equal(s2.selectedItem, s2.children[4]);
// selecting the same value shouldn't fire core-select
selectEventCounter = 0;
s2.selected = 'item5';
flush(function() {
assert.equal(selectEventCounter, 0);
done();
});
});
});
});
</script>
</body>
</html>