Permalink
Browse files

fix(virtual-repeat): better handles repeating with table row / table …

…body

fixes #84
fixes #128
  • Loading branch information...
bigopon committed Jan 13, 2019
1 parent fb67af5 commit a09d2a828065dbebd20d7933e6018a61cb9425a1
Showing with 47 additions and 9 deletions.
  1. +6 −2 test/utilities.ts
  2. +6 −3 test/virtual-repeat-integration.spec.ts
  3. +35 −4 test/virtual-repeat-integration.table.spec.ts
@@ -10,7 +10,7 @@ export function createAssertionQueue(): Queue {
let func = queue.shift();
func();
next();
});
}, 1);
}
};

@@ -22,7 +22,11 @@ export function createAssertionQueue(): Queue {
};
}

export function validateState(virtualRepeat: VirtualRepeat, viewModel: any, itemHeight: number) {
/**
*
* @param extraHeight height of static content that contributes to overall heigh. Happen in case of table
*/
export function validateState(virtualRepeat: VirtualRepeat, viewModel: any, itemHeight: number, extraHeight?: number) {
let views = virtualRepeat.viewSlot.children;
let expectedHeight = viewModel.items.length * itemHeight;
let topBufferHeight = virtualRepeat.topBuffer.getBoundingClientRect().height;
@@ -7,6 +7,9 @@ import { PLATFORM } from 'aurelia-pal';
import { createAssertionQueue, validateState, validateScrolledState } from './utilities';
import { VirtualRepeat } from '../src/virtual-repeat';

PLATFORM.moduleName('src/virtual-repeat');
PLATFORM.moduleName('test/noop-value-converter');
PLATFORM.moduleName('src/infinite-scroll-next');

describe('VirtualRepeat Integration', () => {

@@ -95,7 +98,7 @@ describe('VirtualRepeat Integration', () => {
nq(() => done());
}

function validateSplice(virtualRepeat, viewModel, done) {
function validateSplice(virtualRepeat: VirtualRepeat, viewModel: any, done: Function) {
viewModel.items.splice(2, 1, 'x', 'y');
nq(() => validateState(virtualRepeat, viewModel, itemHeight));
nq(() => done());
@@ -138,7 +141,7 @@ describe('VirtualRepeat Integration', () => {
items.push('item' + i);
}
component = StageComponent
.withResources(PLATFORM.moduleName('src/virtual-repeat'))
.withResources('src/virtual-repeat')
.inView(`<div style="height: ${itemHeight}px;" virtual-repeat.for="item of items">\${item}</div>`)
.boundTo({ items: items });

@@ -436,7 +439,7 @@ describe('VirtualRepeat Integration', () => {
spyOn(nestedVm, 'getNextPage').and.callThrough();

component = StageComponent
.withResources(['src/virtual-repeat', PLATFORM.moduleName('src/infinite-scroll-next')])
.withResources(['src/virtual-repeat', 'src/infinite-scroll-next'])
.inView(`<div id="scrollContainer" style="height: 500px; overflow-y: scroll">
<div style="height: ${itemHeight}px;" virtual-repeat.for="item of items" infinite-scroll-next="getNextPage">\${item}</div>
</div>`)
@@ -7,7 +7,7 @@ import { VirtualRepeat } from '../src/virtual-repeat';
PLATFORM.moduleName('src/virtual-repeat');
PLATFORM.moduleName('test/noop-value-converter');

fdescribe('VirtualRepeat Integration', () => {
describe('VirtualRepeat Integration', () => {
const itemHeight = 100;
const nq = createAssertionQueue();

@@ -80,8 +80,10 @@ fdescribe('VirtualRepeat Integration', () => {
});

afterEach(() => {
if (component) {
return component.cleanUp();
try {
component.cleanUp();
} catch (ex) {
console.log('Error cleaning up component');
}
});

@@ -92,7 +94,6 @@ fdescribe('VirtualRepeat Integration', () => {
virtualRepeat = component.sut;
viewModel = component.viewModel;
});
const element = virtualRepeat['element'];
const { topBuffer, bottomBuffer } = virtualRepeat;
expect(topBuffer.nextElementSibling.tagName).toBe('TBODY');
expect(topBuffer.tagName).toBe('TR');
@@ -127,6 +128,36 @@ fdescribe('VirtualRepeat Integration', () => {
done.fail(ex);
}
});

it('works with static row', async done => {
try {
component.inView(
// there is a small border spacing between tbodies, rows that will add up
// need to add border spacing 0 for testing purposes
`<table style="border-spacing: 0">
<tr><td>Name</td></tr>
<tbody virtual-repeat.for="item of items">
<tr style="height: ${itemHeight}px;"><td>\${item}</td></tr>
</tbody>
</table>`);

await component.create().then(() => {
virtualRepeat = component.sut;
viewModel = component.viewModel;
});
const element = virtualRepeat['element'];
const table = element.parentNode;
expect(table.firstElementChild).toBe(virtualRepeat.topBuffer.previousElementSibling);
expect(table.firstElementChild.innerHTML.trim()).toBe('<tr><td>Name</td></tr>');
nq(() => validateState(virtualRepeat, viewModel, itemHeight));
nq(() => validatePush(virtualRepeat, viewModel, () => {

done();
}));
} catch (ex) {
done.fail(ex);
}
});
});

function validatePush(virtualRepeat: VirtualRepeat, viewModel: any, done: Function) {

0 comments on commit a09d2a8

Please sign in to comment.