Unit testing for internal paging, sorting

Author: Sgroi

src/components/DataTableController.js

@@ -150,7 +150,9 @@ export class DataTableController {
    * Sorts the values of the grid for client side sorting.
    */
   onSorted(){
-    if(!this.rows) return;
+    if (!this.rows) {
+      return;
+    }
 
     // return all sorted column, in the same order in which they were sorted
     var sorts = this.options.columns
@@ -175,16 +177,18 @@ export class DataTableController {
         c.sortPriority = i + 1;
         return c;
       });
-
-    if(sorts.length){
-      this.onSort({sorts: sorts});
+      
+    if (sorts.length) {
+      if (this.onSort) {
+        this.onSort({sorts: sorts});
+      }
 
       if (this.options.onSort){
         this.options.onSort(sorts);
       }
 
       var clientSorts = [];
-      for(var i=0, len=sorts.length; i < len; i++) {
+      for (var i=0, len=sorts.length; i < len; i++) {
         var c = sorts[i];
         if(c.comparator !== false){
           var dir = c.sort === 'asc' ? '' : '-';
@@ -195,8 +199,8 @@ export class DataTableController {
           }
         }
       }
-
-      if(clientSorts.length){
+      
+      if (clientSorts.length) {
         // todo: more ideal to just resort vs splice and repush
         // but wasn't responding to this change ...
         var sortedValues = this.$filter('orderBy')(this.rows, clientSorts);
@@ -205,7 +209,9 @@ export class DataTableController {
       }
     }
 
-    this.options.internal.setYOffset(0);
+    if (this.options.internal && this.options.internal.setYOffset) {
+      this.options.internal.setYOffset(0);
+    }
   }
 
   /**

src/components/DataTableController.spec.js

@@ -1,19 +1,70 @@
 import { DataTableController } from './DataTableController';
+import { TableDefaults } from '../defaults';
 
 describe('DataTableController', function () {
-  let $controller = null;
+  let $controller = null,
+      ctrl = null,
+      scope = null,
+      setController = null;
 
-  beforeEach(
-    inject((_$controller_) => {
-      $controller = _$controller_;
-    })
-  );
+  beforeEach(inject(($rootScope, $filter) => {
+    scope = $rootScope.$new();
 
-  it('should export a function', () => {
-    expect(DataTableController).toEqual(jasmine.any(Function));
-  });
+    setController = (bindings) => {
+      bindings.options = Object.assign({}, TableDefaults, bindings.options);
+      bindings.data = bindings.rows;
+
+      ctrl = new DataTableController(scope, $filter);
+
+      Object.assign(ctrl, bindings);
+    };
+  }));
+
+  describe('sorting', () => {
+
+    beforeEach(() => {
+      let options = {
+        columns: [
+          { prop: 'name', sort: 'asc' },
+          { prop: 'age'}
+        ]
+      };
+      let rows = [
+        { name: 'Walter', age: 49 },
+        { name: 'Dude', age: 45 },
+        { name: 'Donnie', age: 46 },
+        { name: 'Maude', age: 48 }
+      ];
+
+      setController({ 
+        options: options,
+        rows: rows
+      });
+
+      ctrl.$onInit();
+    });
+
+    it('should be sorted', () => {
+      ctrl.onSorted();
+
+      let sortOrder = ctrl.rows[0].name < ctrl.rows[1].name;
+
+      expect(sortOrder).toBe(true);
+    });
+
+    it('should re-sort', () => {
+      ctrl.onSorted();
+
+      let sortedAscending = ctrl.rows[0].name < ctrl.rows[1].name;
+
+      expect(sortedAscending).toBe(true);
+
+      ctrl.options.columns[0].sort = 'desc';
+      ctrl.onSorted();
 
-  describe('', function () {
+      sortedAscending = ctrl.rows[0].name < ctrl.rows[1].name;
 
+      expect(sortedAscending).toBe(false);
+    });    
   });
 });

src/components/body/BodyController.js

@@ -117,10 +117,12 @@ export default class BodyController {
             this.buildInternalPage();
           }
 
-          this.onPage({
-            offset: newVal,
-            size: this.options.paging.size
-          });
+          if (this.onPage) {
+            this.onPage({
+              offset: newVal,
+              size: this.options.paging.size
+            });
+          }
         }
       }));
     }
@@ -167,6 +169,7 @@ export default class BodyController {
           // We're using internal paging
           this.buildInternalPage();
         } else {
+          // No paging
           this.tempRows.splice(0, this.tempRows.length);
           this.tempRows.push(...rows);
         }
@@ -390,7 +393,6 @@ export default class BodyController {
             addChildren(groupRows, toArray, level + 1);
           }
         }
-
       });
     }
 
@@ -452,7 +454,9 @@ export default class BodyController {
       rowIndex++;
     }
 
-    this.options.internal.styleTranslator.update(this.tempRows);
+    if (this.options.internal && this.options.internal.styleTranslator) {
+      this.options.internal.styleTranslator.update(this.tempRows);
+    }
 
     return this.tempRows;
   }

src/components/body/BodyController.spec.js

@@ -63,6 +63,56 @@ describe('BodyController', function () {
 
       expect(ctrl.data).not.toEqual(0);
     });
+
+    it('should have the correct number of rows', () => {
+      let options = {
+        columns: [
+          { name: 'Name', prop: 'name' },
+          { name: 'Company', prop: 'company' }
+        ],
+        paging: {
+          offset: 0,
+          size: 3
+        }
+      };
+
+      setController({
+        options: options,
+        rows: olympicRows
+      });
+
+      ctrl.$onInit();
+      scope.$digest();
+
+      expect(ctrl.tempRows.length).toBe(3);
+    });
+
+    it('should increment page', () => {
+      let options = {
+        columns: [
+          { name: 'Name', prop: 'name' },
+          { name: 'Company', prop: 'company' }
+        ],
+        paging: {
+          offset: 0,
+          size: 3
+        }
+      };
+
+      setController({
+        options: options,
+        rows: olympicRows
+      });
+
+      ctrl.$onInit();
+      scope.$digest();
+
+      let name = ctrl.tempRows[0].name;
+      ctrl.options.paging.offset = 1;
+      scope.$digest();
+
+      expect(ctrl.tempRows[0].name).not.toBe(name);
+    });
   });
 
   describe('when setting tree and group columns', () => {

src/components/body/BodyController.spechelper.json

@@ -2,8 +2,8 @@
   "Olympics": {
     "Columns": [
       {
-        "name": "Athlete",
-        "prop": "athlete",
+        "name": "Name",
+        "prop": "name",
         "width": 300
       },
       {
@@ -22,7 +22,7 @@
     ],
     "Rows": [
       {
-        "athlete": "Michael Phelps",
+        "name": "Michael Phelps",
         "age": 19,
         "country": "United States",
         "year": 2004,
@@ -34,7 +34,7 @@
         "total": 8
       },
       {
-        "athlete": "Michael Phelps",
+        "name": "Michael Phelps",
         "age": 27,
         "country": "United States",
         "year": 2012,
@@ -46,7 +46,7 @@
         "total": 6
       },
       {
-        "athlete": "Natalie Coughlin",
+        "name": "Natalie Coughlin",
         "age": 25,
         "country": "United States",
         "year": 2008,
@@ -58,7 +58,7 @@
         "total": 6
       },
       {
-        "athlete": "Aleksey Nemov",
+        "name": "Aleksey Nemov",
         "age": 24,
         "country": "Russia",
         "year": 2000,
@@ -70,7 +70,7 @@
         "total": 6
       },
       {
-        "athlete": "Alicia Coutts",
+        "name": "Alicia Coutts",
         "age": 24,
         "country": "Australia",
         "year": 2012,
@@ -82,7 +82,7 @@
         "total": 5
       },
       {
-        "athlete": "Missy Franklin",
+        "name": "Missy Franklin",
         "age": 17,
         "country": "United States",
         "year": 2012,