Skip to content
Permalink
Browse files

fix(virtual repeat): prepare new tests, add examples

  • Loading branch information...
bigopon committed Mar 6, 2019
1 parent 5171740 commit fd45928b3ea6d89572145fd0d9d1abe4cb01820a
@@ -42,6 +42,12 @@ export class App {
moduleId: PLATFORM.moduleName('./issue-146/sub-app'),
nav: 6,
title: 'Issue 146'
},
{
route: 'promise-get-more',
moduleId: PLATFORM.moduleName('./promise-get-more/sub-app'),
nav: 7,
title: 'Infinite Scroll + Promise'
}
]);

@@ -1,33 +1,40 @@
<template>
<nav class="navbar navbar-expand-lg" role="navigation">
<div class="navbar-brand">
<!-- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> -->
<img src='static/aurelia-icon.png' width=22>
<a class="navbar-brand" href="#">${router.title}</a>
</div>
<style>
.sb.sb-x {
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
scrollbar-color: royalblue;
}
.sb::-webkit-scrollbar{
width: 6px;
background-color: rgba(224, 224, 224, 0.5);
}
.sb::-webkit-scrollbar:horizontal {
height: 6px;
scrollbar-width: 6px;
}
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li repeat.for="nav of router.navigation"
class="nav-item"
css="border: 1px solid ${nav.isActive ? 'blue' : 'transparent'};">
<a
class='nav-link'
data-toggle="collapse"
href.bind="nav.href">${nav.config.title}</a>
</li>
</ul>
.sb::-webkit-scrollbar-thumb {
background-color: royalblue;
}
</style>
<nav class="d-flex flex-nowrap align-items-start" role="navigation"
style="height: 70px; padding-top: 10px; padding-bottom: 10px;">
<div class="navbar-brand d-inline-flex align-items-center m-0" style="height: 50px;">
<img class='mr-2' src='static/aurelia-icon.png' width=22>
<a class="navbar-brand py-0" href="#" style="color: #c4097c;">${router.title}</a>
</div>

<ul class="navbar-nav navbar-right">
<li class="loader" if.bind="router.isNavigating">
<i class="fa fa-spinner fa-spin fa-2x"></i>
</li>
</ul>
<div class="sb sb-x w-100" style="height: 56px; white-space: nowrap">
<a
repeat.for="nav of router.navigation"
class='d-inline-flex align-items-center px-2'
data-toggle="collapse"
href.bind="nav.href"
style="height: 50px;"
css="border: 1px solid ${nav.isActive ? '#007bff' : 'transparent'};">${nav.config.title}</a>
</div>
</nav>
</template>
@@ -0,0 +1,27 @@
<template>
<div class="">
<div class="d-flex justify-content-around" style="height: 500px; overflow-y: auto">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr virtual-repeat.for="person of people" infinite-scroll-next.call="push30($scrollContext)">
<td>${$index}</td>
<td>${person.fname}</td>
<td>${person.lname}</td>
<td>
<button type="button" class="btn btn-link"><i class="far fa-edit"></i></button>
<button type="button" class="btn btn-link"><i class="far fa-trash-alt"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
@@ -0,0 +1,52 @@
interface IScrollContext {
isAtTop: boolean;
isAtBottom: boolean;
topIndex: number;
}

export interface Person {
fname: string;
lname: string;
}

const fNames = [
// tslint:disable-next-line:max-line-length
'Ford', 'Arthur', 'Trillian', 'Sneezy', 'Sleepy', 'Dopey', 'Doc', 'Happy', 'Bashful', 'Grumpy', 'Mufasa', 'Sarabi', 'Simba', 'Nala', 'Kiara', 'Kovu', 'Timon', 'Pumbaa', 'Rafiki', 'Shenzi'
];
const lNames = [
// tslint:disable-next-line:max-line-length
'Prefect', 'Dent', 'Astra', 'Adams', 'Baker', 'Clark', 'Davis', 'Evans', 'Frank', 'Ghosh', 'Hills', 'Irwin', 'Jones', 'Klein', 'Lopez', 'Mason', 'Nalty', 'Ochoa', 'Patel', 'Quinn', 'Reily', 'Smith', 'Trott', 'Usman', 'Valdo', 'White', 'Xiang', 'Yakub', 'Zafar'
];
export class PromiseGetMoreApp {
private people: Person[];

constructor() {
this.people = [
{ fname: fNames[0], lname: lNames[0] },
{ fname: fNames[1], lname: lNames[1] },
{ fname: fNames[2], lname: lNames[2] }
];
this.push30(undefined, 0);
}

public async push30(scrollContext?: IScrollContext, count = 30) {
console.log('Issue-102 getting more...');
// if (scrollContext) {
// console.log('Issue-129 getting more:', JSON.stringify(scrollContext, undefined, 2));
// }
return new Promise(resolve => {
setTimeout(() => {
if (!scrollContext || scrollContext.isAtBottom) {
for (let i = 0; i < count; i++) {
this.people.push({
fname: fNames[Math.floor(Math.random() * fNames.length)],
lname: lNames[Math.floor(Math.random() * lNames.length)]
});
}
}
resolve();
console.log('Population size:', this.people.length);
}, Math.random() * 2000 + 500);
});
}
}
@@ -422,7 +422,7 @@ describe('VirtualRepeat Integration', () => {
promisedVm = {
items: items,
test: '2',
getNextPage: function () {
getNextPage: jasmine.createSpy('promisedVm.getNextPage', function() {
return new Promise((resolve, reject) => {
let itemLength = this.items.length;
for (let i = 0; i < 100; ++i) {
@@ -431,7 +431,7 @@ describe('VirtualRepeat Integration', () => {
}
resolve(true);
});
}
}).and.callThrough()
};
for (let i = 0; i < 1000; ++i) {
items.push('item' + i);
@@ -524,14 +524,21 @@ describe('VirtualRepeat Integration', () => {
});
});
});
it('handles getting next data set with promises', done => {
promisedCreate.then(() => {
validateScroll(promisedVirtualRepeat, promisedViewModel, () => {
it('handles getting next data set with promises', async done => {
await create;
await promisedCreate;
validateScroll(
promisedVirtualRepeat,
promisedViewModel,
async () => {
await waitForTimeout(500);
expect(promisedVm.getNextPage).toHaveBeenCalled();
// Jasmine spies seem to not be working with returned promises and getting the instance of them, causing regular checks on getNextPage to fail
expect(promisedVm.items.length).toBe(1100);
done();
}, 'scrollContainerPromise');
});
},
'scrollContainerPromise'
);
});
it('handles getting next data set with small page size', done => {
vm.items = [];

0 comments on commit fd45928

Please sign in to comment.
You can’t perform that action at this time.