mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-19 03:48:18 -07:00
189 lines
5.3 KiB
HTML
189 lines
5.3 KiB
HTML
|
<!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();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
test('first visible index', function(done) {
|
||
|
|
container.data = buildDataSet(100);
|
||
|
|
|
||
|
|
flush(function() {
|
||
|
|
var setSize = list.items.length;
|
||
|
|
var rowHeight = container.itemHeight;
|
||
|
|
var viewportHeight = list.offsetHeight;
|
||
|
|
var scrollToItem;
|
||
|
|
|
||
|
|
function checkFirstVisible() {
|
||
|
|
assert.equal(list.firstVisibleIndex, scrollToItem);
|
||
|
|
assert.equal(getFirstItemFromList(list).textContent, scrollToItem);
|
||
|
|
}
|
||
|
|
|
||
|
|
function checkLastVisible() {
|
||
|
|
var visibleItemsCount = Math.floor(viewportHeight / rowHeight);
|
||
|
|
assert.equal(list.lastVisibleIndex, scrollToItem + visibleItemsCount - 1);
|
||
|
|
assert.equal(getLastItemFromList(list).textContent, scrollToItem + visibleItemsCount - 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
function doneScrollDown() {
|
||
|
|
checkFirstVisible();
|
||
|
|
checkLastVisible();
|
||
|
|
scrollToItem = 1;
|
||
|
|
flush(function() {
|
||
|
|
simulateScroll({
|
||
|
|
list: list,
|
||
|
|
contribution: rowHeight,
|
||
|
|
target: scrollToItem*rowHeight,
|
||
|
|
onScrollEnd: doneScrollUp
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function doneScrollUp() {
|
||
|
|
checkFirstVisible();
|
||
|
|
checkLastVisible();
|
||
|
|
done();
|
||
|
|
}
|
||
|
|
scrollToItem = 50;
|
||
|
|
|
||
|
|
simulateScroll({
|
||
|
|
list: list,
|
||
|
|
contribution: 50,
|
||
|
|
target: scrollToItem*rowHeight,
|
||
|
|
onScrollEnd: doneScrollDown
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
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);
|
||
|
|
});
|
||
|
|
|
||
|
|
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>
|