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

aurelia · Mar 6, 2019 · fd45928 · fd45928
1 parent 5171740
commit fd45928
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 34 deletions.
diff --git a/sample/sample-v-ui-app/src/app.ts b/sample/sample-v-ui-app/src/app.ts
@@ -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'
       }
     ]);
 

diff --git a/sample/sample-v-ui-app/src/nav-bar.html b/sample/sample-v-ui-app/src/nav-bar.html
@@ -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>
diff --git a/sample/sample-v-ui-app/src/promise-get-more/sub-app.html b/sample/sample-v-ui-app/src/promise-get-more/sub-app.html
@@ -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>
diff --git a/sample/sample-v-ui-app/src/promise-get-more/sub-app.ts b/sample/sample-v-ui-app/src/promise-get-more/sub-app.ts
@@ -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);
+    });
+  }
+}
diff --git a/test/virtual-repeat-integration.spec.ts b/test/virtual-repeat-integration.spec.ts
@@ -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 = [];

diff --git a/test/vr-integration.scrolling.spec.ts b/test/vr-integration.scrolling.spec.ts