2016-04-20 20:34:52 -07:00
|
|
|
<!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
|
|
|
|
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
|
|
|
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
|
|
|
|
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
|
|
|
|
|
-->
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>iron-list test</title>
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
|
|
|
|
|
|
|
|
|
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
|
|
|
|
<script src="../../web-component-tester/browser.js"></script>
|
|
|
|
|
|
|
|
|
|
<link rel="import" href="helpers.html">
|
|
|
|
|
<link rel="import" href="x-list.html">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<test-fixture id="trivialList">
|
|
|
|
|
<template>
|
|
|
|
|
<x-list></x-list>
|
|
|
|
|
</template>
|
|
|
|
|
</test-fixture>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
suite('basic features', function() {
|
|
|
|
|
var list, container;
|
|
|
|
|
|
|
|
|
|
setup(function() {
|
|
|
|
|
container = fixture('trivialList');
|
|
|
|
|
list = container.list;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
test('defaults', function() {
|
|
|
|
|
assert.equal(list.items, null, 'items');
|
|
|
|
|
assert.equal(list.as, 'item', 'as');
|
|
|
|
|
assert.equal(list.indexAs, 'index', 'indexAs');
|
|
|
|
|
assert.equal(list.selectedAs, 'selected', 'selectedAs');
|
|
|
|
|
assert.equal(list.scrollTarget, list, 'scrollTarget');
|
|
|
|
|
assert.isFalse(list.selectionEnabled, 'selectionEnabled');
|
|
|
|
|
assert.isFalse(list.multiSelection, 'multiSelection');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
test('check items length', function(done) {
|
|
|
|
|
container.data = buildDataSet(100);
|
|
|
|
|
|
|
|
|
|
flush(function() {
|
|
|
|
|
assert.equal(list.items.length, container.data.length);
|
|
|
|
|
done();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
test('check physical item heights', function(done) {
|
|
|
|
|
container.data = buildDataSet(100);
|
|
|
|
|
|
|
|
|
|
flush(function() {
|
|
|
|
|
var rowHeight = list._physicalItems[0].offsetHeight;
|
|
|
|
|
|
|
|
|
|
list._physicalItems.forEach(function(item) {
|
|
|
|
|
assert.equal(item.offsetHeight, rowHeight);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
done();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
test('check physical item size', function(done) {
|
|
|
|
|
var setSize = 10;
|
|
|
|
|
container.data = buildDataSet(setSize);
|
|
|
|
|
|
|
|
|
|
flush(function() {
|
|
|
|
|
assert.equal(list.items.length, setSize);
|
|
|
|
|
done();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
2016-06-02 10:08:25 -07:00
|
|
|
test('first visible index', function() {
|
2016-04-20 20:34:52 -07:00
|
|
|
container.data = buildDataSet(100);
|
2016-06-02 10:08:25 -07:00
|
|
|
Polymer.dom.flush();
|
|
|
|
|
assert.equal(list.firstVisibleIndex, 0);
|
|
|
|
|
list.scroll(0, container.itemHeight * 10);
|
|
|
|
|
list.fire('scroll');
|
|
|
|
|
assert.equal(list.firstVisibleIndex, 10);
|
|
|
|
|
list.scroll(0, container.itemHeight * 50);
|
|
|
|
|
list.fire('scroll');
|
|
|
|
|
assert.equal(list.firstVisibleIndex, 50);
|
|
|
|
|
list.scrollToIndex(60);
|
|
|
|
|
Polymer.dom.flush();
|
|
|
|
|
assert.equal(list.firstVisibleIndex, 60);
|
|
|
|
|
list.scrollToIndex(0);
|
|
|
|
|
Polymer.dom.flush();
|
|
|
|
|
assert.equal(list.firstVisibleIndex, 0);
|
|
|
|
|
});
|
2016-04-20 20:34:52 -07:00
|
|
|
|
2016-06-02 10:08:25 -07:00
|
|
|
test('last visible index', function() {
|
|
|
|
|
container.data = buildDataSet(1);
|
|
|
|
|
container.itemHeight = 1000;
|
|
|
|
|
Polymer.dom.flush();
|
|
|
|
|
assert.equal(list.lastVisibleIndex, 0);
|
|
|
|
|
container.data = buildDataSet(2);
|
|
|
|
|
container.itemHeight = 50;
|
|
|
|
|
Polymer.dom.flush();
|
|
|
|
|
assert.equal(list.lastVisibleIndex, 1);
|
|
|
|
|
container.data = buildDataSet(10);
|
|
|
|
|
Polymer.dom.flush();
|
|
|
|
|
list.scrollToIndex(8);
|
|
|
|
|
Polymer.dom.flush();
|
|
|
|
|
assert.equal(list.lastVisibleIndex, 9);
|
|
|
|
|
container.itemHeight = 50;
|
|
|
|
|
container.data = buildDataSet(100);
|
|
|
|
|
Polymer.dom.flush();
|
|
|
|
|
list.scroll(0, 100);
|
|
|
|
|
list.fire('scroll');
|
|
|
|
|
assert.equal(list.lastVisibleIndex, ((list._scrollTop + container.listHeight) / container.itemHeight) - 1);
|
2016-04-20 20:34:52 -07:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
test('scroll to index', function(done) {
|
|
|
|
|
list.items = buildDataSet(100);
|
|
|
|
|
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
list.scrollToIndex(30);
|
|
|
|
|
assert.equal(list.firstVisibleIndex, 30);
|
|
|
|
|
|
|
|
|
|
list.scrollToIndex(0);
|
|
|
|
|
assert.equal(list.firstVisibleIndex, 0);
|
|
|
|
|
|
|
|
|
|
var rowHeight = getFirstItemFromList(list).offsetHeight;
|
|
|
|
|
var viewportHeight = list.offsetHeight;
|
|
|
|
|
var itemsPerViewport = Math.floor(viewportHeight/rowHeight);
|
|
|
|
|
|
|
|
|
|
list.scrollToIndex(99);
|
|
|
|
|
assert.equal(list.firstVisibleIndex, list.items.length - itemsPerViewport);
|
|
|
|
|
|
|
|
|
|
// make the height of the viewport same as the height of the row
|
|
|
|
|
// and scroll to the last item
|
|
|
|
|
list.style.height = list._physicalItems[0].offsetHeight + 'px';
|
|
|
|
|
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
list.scrollToIndex(99);
|
|
|
|
|
assert.equal(list.firstVisibleIndex, 99);
|
|
|
|
|
done();
|
|
|
|
|
}, 100);
|
|
|
|
|
}, 100);
|
|
|
|
|
});
|
|
|
|
|
|
2016-06-02 10:08:25 -07:00
|
|
|
test('scroll to top', function(done) {
|
|
|
|
|
list.items = buildDataSet(100);
|
|
|
|
|
Polymer.dom.flush();
|
|
|
|
|
list.scrollToIndex(99);
|
|
|
|
|
Polymer.dom.flush();
|
|
|
|
|
list.scroll(0, 0);
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
assert.equal(list._scrollTop, 0, 'scrollTop = 0');
|
|
|
|
|
done();
|
|
|
|
|
}, 100);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
test('scroll to a given scrollTop', function(done) {
|
|
|
|
|
list.items = buildDataSet(100);
|
|
|
|
|
Polymer.dom.flush();
|
|
|
|
|
list.scrollToIndex(99);
|
|
|
|
|
Polymer.dom.flush();
|
|
|
|
|
list.scroll(0, 500);
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
assert.equal(list._scrollTop, 500, 'scrollTop = 500');
|
|
|
|
|
done();
|
|
|
|
|
}, 100);
|
|
|
|
|
});
|
|
|
|
|
|
2016-04-20 20:34:52 -07:00
|
|
|
test('reset items', function(done) {
|
|
|
|
|
list.items = buildDataSet(100);
|
|
|
|
|
|
|
|
|
|
flush(function() {
|
|
|
|
|
assert.equal(getFirstItemFromList(list).textContent, '0');
|
|
|
|
|
|
|
|
|
|
list.items = null;
|
|
|
|
|
|
|
|
|
|
flush(function() {
|
|
|
|
|
assert.notEqual(getFirstItemFromList(list).textContent, '0');
|
|
|
|
|
list.items = buildDataSet(100);
|
|
|
|
|
|
|
|
|
|
flush(function() {
|
|
|
|
|
assert.equal(getFirstItemFromList(list).textContent, '0');
|
|
|
|
|
done();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
