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

fixes #84
fixes #128

Author: bigopon

test/utilities.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;

test/virtual-repeat-integration.spec.ts

@@ -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>`)

test/virtual-repeat-integration.table.spec.ts

@@ -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) {