@swimlane/ngx-datatable 11.1.4 → 11.2.0

package/src/components/datatable.component.spec.ts

@@ -1,253 +1,416 @@
-import {TestBed, async} from '@angular/core/testing';
-import {DatatableComponent} from './datatable.component';
-import {NgxDatatableModule} from '../datatable.module';
-describe('Datatable component', () => {
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [NgxDatatableModule]
-    });
+import { Component, DebugElement } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import {
+  DatatableComponent,
+  DataTableHeaderCellComponent,
+  DataTableBodyRowComponent,
+  DataTableBodyCellComponent
+} from '.';
+import { NgxDatatableModule } from '../datatable.module';
+
+let fixture: ComponentFixture<TestFixtureComponent>;
+let component: TestFixtureComponent;
+
+describe('DatatableComponent', () => {
+  beforeEach(async(setupTest));
+
+  it('should sort date values', () => {
+    const initialRows = [
+      { birthDate: new Date(1980, 11, 1) },
+      { birthDate: new Date(1978, 8, 5) },
+      { birthDate: new Date(1995, 4, 3) }
+    ];
+
+    const columns = [
+      {
+        prop: 'birthDate'
+      }
+    ];
+
+    component.rows = initialRows;
+    component.columns = columns;
+    fixture.detectChanges();
+
+    // sort by `birthDate` ascending
+    sortBy({ column: 1 });
+    fixture.detectChanges();
+
+    expect(textContent({ row: 1, column: 1 })).toContain('1978', 'Ascending');
+    expect(textContent({ row: 2, column: 1 })).toContain('1980', 'Ascending');
+    expect(textContent({ row: 3, column: 1 })).toContain('1995', 'Ascending');
+
+    // sort by `birthDate` descending
+    sortBy({ column: 1 });
+    fixture.detectChanges();
+
+    expect(textContent({ row: 1, column: 1 })).toContain('1995', 'Descending');
+    expect(textContent({ row: 2, column: 1 })).toContain('1980', 'Descending');
+    expect(textContent({ row: 3, column: 1 })).toContain('1978', 'Descending');
   });
 
-  beforeEach(async(() => {
-    TestBed.compileComponents();
-  }));
-
-  describe('When the column is sorted', () => {
-    it('should sort a column with Date values', () => {
-      const fixture = TestBed.createComponent(DatatableComponent);
-      const initialRows = [
-        {birthDate: new Date(1980, 12, 1)},
-        {birthDate: new Date(1978, 8, 5)},
-        {birthDate: new Date(1995, 4, 3)}
-      ];
-  
-      const columns = [
-        {
-          prop: 'birthDate'
-        }
-      ];
-  
-      fixture.componentInstance.rows = initialRows;
-      fixture.componentInstance.columns = columns;
-  
-      fixture.detectChanges();
-  
-      fixture.componentInstance.onColumnSort({
-        sorts: [{prop: 'birthDate', dir: 'desc'}]
-      });
-  
-      expect(fixture.componentInstance._internalRows[0]).toBe(initialRows[2]);
-      expect(fixture.componentInstance._internalRows[1]).toBe(initialRows[0]);
-      expect(fixture.componentInstance._internalRows[2]).toBe(initialRows[1]);
-    });
-
-    it('should sort a column with number values', () => {
-      const fixture = TestBed.createComponent(DatatableComponent);
-      const initialRows = [
-        {id: 5},
-        {id: 20},
-        {id: 12}
-      ];
-  
-      const columns = [
-        {
-          prop: 'id'
-        }
-      ];
-  
-      fixture.componentInstance.rows = initialRows;
-      fixture.componentInstance.columns = columns;
-  
-      fixture.detectChanges();
-  
-      fixture.componentInstance.onColumnSort({
-        sorts: [{prop: 'id', dir: 'desc'}]
-      });
-  
-      expect(fixture.componentInstance._internalRows[0]).toBe(initialRows[1]);
-      expect(fixture.componentInstance._internalRows[1]).toBe(initialRows[2]);
-      expect(fixture.componentInstance._internalRows[2]).toBe(initialRows[0]);
-    });
-
-    it('should sort a column with string values', () => {
-      const fixture = TestBed.createComponent(DatatableComponent);
-      const initialRows = [
-        {product: 'Computers'},
-        {product: 'Bikes'},
-        {product: 'Smartphones'}
-      ];
-  
-      const columns = [
-        {
-          prop: 'product'
-        }
-      ];
-  
-      fixture.componentInstance.rows = initialRows;
-      fixture.componentInstance.columns = columns;
-  
-      fixture.detectChanges();
-  
-      fixture.componentInstance.onColumnSort({
-        sorts: [{prop: 'product', dir: 'desc'}]
-      });
-  
-      expect(fixture.componentInstance._internalRows[0]).toBe(initialRows[2]);
-      expect(fixture.componentInstance._internalRows[1]).toBe(initialRows[0]);
-      expect(fixture.componentInstance._internalRows[2]).toBe(initialRows[1]);
-    });
-
-    it('should use a stable sorting algorithm', () => {
-      const fixture = TestBed.createComponent(DatatableComponent);
-      /**
-       * the following `initialRows`, when sorted by the character length
-       * of the value of the `name` property would result in the following
-       * (unstable sort) in Chrome:
-       *  [
-       *    { name: 'cat' },
-       *    { name: 'sed' },
-       *    { name: 'man' },
-       *    { name: 'foo' },
-       *    { name: 'bar' },
-       *    { name: 'sit' },
-       *    { name: 'amet' },
-       *    { name: 'dolor' },
-       *    { name: 'ipsum' },
-       *    { name: 'lorem' },
-       *    { name: 'maecennas' }
-       *  ]
-       */
-      const initialRows = [
-        { name: 'sed' },
-        { name: 'dolor' },
-        { name: 'ipsum' },
-        { name: 'foo' },
-        { name: 'bar' },
-        { name: 'cat' },
-        { name: 'sit' },
-        { name: 'man' },
-        { name: 'lorem' },
-        { name: 'amet' },
-        { name: 'maecennas' }
-      ];
-
-      const columns = [
-        {
-          prop: 'name',
-          comparator: (nameA: string, nameB: string) => {
-            return nameA.length - nameB.length;
-          }
-        }
-      ];
-
-      fixture.componentInstance.rows = initialRows;
-      fixture.componentInstance.columns = columns;
-
-      fixture.detectChanges();
-
-      fixture.componentInstance.onColumnSort({
-        sorts: [{prop: 'name', dir: 'asc'}]
-      });
-
-      expect(fixture.componentInstance._internalRows[0]).toBe(initialRows[0]);
-      expect(fixture.componentInstance._internalRows[1]).toBe(initialRows[3]);
-      expect(fixture.componentInstance._internalRows[2]).toBe(initialRows[4]);
-      expect(fixture.componentInstance._internalRows[3]).toBe(initialRows[5]);
-      expect(fixture.componentInstance._internalRows[4]).toBe(initialRows[6]);
-      expect(fixture.componentInstance._internalRows[5]).toBe(initialRows[7]);
-      expect(fixture.componentInstance._internalRows[6]).toBe(initialRows[9]);
-      expect(fixture.componentInstance._internalRows[7]).toBe(initialRows[1]);
-      expect(fixture.componentInstance._internalRows[8]).toBe(initialRows[2]);
-      expect(fixture.componentInstance._internalRows[9]).toBe(initialRows[8]);
-      expect(fixture.componentInstance._internalRows[10]).toBe(initialRows[10]);
-    });
+  it('should sort number values', () => {
+    const initialRows = [
+      { id: 5  },
+      { id: 20 },
+      { id: 12 }
+    ];
+
+    const columns = [
+      {
+        prop: 'id'
+      }
+    ];
+
+    component.rows = initialRows;
+    component.columns = columns;
+    fixture.detectChanges();
+
+    // sort by `id` ascending
+    sortBy({ column: 1 });
+    fixture.detectChanges();
+
+    expect(textContent({ row: 1, column: 1 })).toContain('5', 'Ascending');
+    expect(textContent({ row: 2, column: 1 })).toContain('12', 'Ascending');
+    expect(textContent({ row: 3, column: 1 })).toContain('20', 'Ascending');
+
+    // sort by `id` descending
+    sortBy({ column: 1 });
+    fixture.detectChanges();
+
+    expect(textContent({ row: 1, column: 1 })).toContain('20', 'Descending');
+    expect(textContent({ row: 2, column: 1 })).toContain('12', 'Descending');
+    expect(textContent({ row: 3, column: 1 })).toContain('5', 'Descending');
   });
 
-  describe('When the column is sorted with a custom comparator', () => {
-
-    xit('should return a new array', () => {
-      const fixture = TestBed.createComponent(DatatableComponent);
-      const initialRows = [
-        {id: 1},
-        {id: 2},
-        {id: 3}
-      ];
-
-      const columns = [
-        {
-          prop: 'foo',
-          comparator: (propA: string, propB: string) => {
-            if (propA.toLowerCase() > propB.toLowerCase()) return -1;
-            if (propA.toLowerCase() < propB.toLowerCase()) return 1;
-          }
-        }
-      ];
+  it('should sort string values', () => {
+    const initialRows = [
+      { product: 'Computers' },
+      { product: 'Bikes' },
+      { product: 'Smartphones'}
+    ];
 
-      fixture.componentInstance.rows = initialRows;
-      fixture.componentInstance.columns = columns;
+    const columns = [
+      {
+        prop: 'product'
+      }
+    ];
 
-      fixture.detectChanges();
+    component.rows = initialRows;
+    component.columns = columns;
+    fixture.detectChanges();
 
-      expect(fixture.componentInstance._internalRows).toBe(initialRows);
+    // sort by `product` ascending
+    sortBy({ column: 1 });
+    fixture.detectChanges();
 
-      fixture.componentInstance.onColumnSort({
-        sorts: [{prop: 'foo', dir: 'desc'}]
-      });
+    expect(textContent({ row: 1, column: 1 })).toContain('Bikes', 'Ascending');
+    expect(textContent({ row: 2, column: 1 })).toContain('Computers', 'Ascending');
+    expect(textContent({ row: 3, column: 1 })).toContain('Smartphones', 'Ascending');
 
-      fixture.componentInstance.sort
-        .subscribe();
+    // sort by `product` descending
+    sortBy({ column: 1 });
+    fixture.detectChanges();
 
-      expect(fixture.componentInstance._internalRows).not.toBe(initialRows);
-    });
+    expect(textContent({ row: 1, column: 1 })).toContain('Smartphones', 'Descending');
+    expect(textContent({ row: 2, column: 1 })).toContain('Computers', 'Descending');
+    expect(textContent({ row: 3, column: 1 })).toContain('Bikes', 'Descending');
   });
 
-  it('should set offset to 0 when sorting by a column', () => {
-    const fixture = TestBed.createComponent(DatatableComponent);
+  it('should sort with a custom comparator', () => {
     const initialRows = [
-      {id: 1},
-      {id: 2},
-      {id: 3}
+      { product: 'Smartphones'},
+      { product: 'Cars' },
+      { product: 'Bikes' }
     ];
 
     const columns = [
       {
-        prop: 'id'
+        prop: 'product',
+        comparator: (productA: string, productB: string) => {
+          return productA.length - productB.length;
+        }
       }
     ];
 
-    fixture.componentInstance.rows = initialRows;
-    fixture.componentInstance.columns = columns;
-    fixture.componentInstance.offset = 1;
+    component.rows = initialRows;
+    component.columns = columns;
+    fixture.detectChanges();
 
+    // sort by `product` ascending
+    sortBy({ column: 1 });
     fixture.detectChanges();
 
-    fixture.componentInstance.onColumnSort({
-      sorts: [{prop: 'id', dir: 'desc'}]
-    });
+    expect(textContent({ row: 1, column: 1 })).toContain('Cars', 'Ascending');
+    expect(textContent({ row: 2, column: 1 })).toContain('Bikes', 'Ascending');
+    expect(textContent({ row: 3, column: 1 })).toContain('Smartphones', 'Ascending');
 
-    expect(fixture.componentInstance.offset).toBe(0);
+    // sort by `product` descending
+    sortBy({ column: 1 });
+    fixture.detectChanges();
+
+    expect(textContent({ row: 1, column: 1 })).toContain('Smartphones', 'Descending');
+    expect(textContent({ row: 2, column: 1 })).toContain('Bikes', 'Descending');
+    expect(textContent({ row: 3, column: 1 })).toContain('Cars', 'Descending');
   });
 
-  describe('table with numeric prop', () => {
-    it('should support array data', () => {
-      const fixture = TestBed.createComponent(DatatableComponent);
+  it('should sort using a stable sorting algorithm', () => {
+    const initialRows = [
+      { name: 'sed',        state: 'CA' },
+      { name: 'dolor',      state: 'NY' },
+      { name: 'ipsum',      state: 'NY' },
+      { name: 'foo',        state: 'CA' },
+      { name: 'bar',        state: 'CA' },
+      { name: 'cat',        state: 'CA' },
+      { name: 'sit',        state: 'CA' },
+      { name: 'man',        state: 'CA' },
+      { name: 'lorem',      state: 'NY' },
+      { name: 'amet',       state: 'NY' },
+      { name: 'maecennas',  state: 'NY' }
+    ];
+    
+    /**
+     * assume the following sort operations take place on `initialRows`:
+     * 1) initialRows.sort(byLengthOfNameProperty) (Ascending)
+     * 2) initialRows.sort(byState)                (Descending)
+     * 
+     * in browsers that do not natively implement stable sort (such as Chrome),
+     * the result could be:
+     * 
+     *  [
+     *    { name: 'maecennas',  state: 'NY' },
+     *    { name: 'amet',       state: 'NY' },
+     *    { name: 'dolor',      state: 'NY' },
+     *    { name: 'ipsum',      state: 'NY' },
+     *    { name: 'lorem',      state: 'NY' },
+     *    { name: 'sed',        state: 'CA' },
+     *    { name: 'cat',        state: 'CA' },
+     *    { name: 'man',        state: 'CA' },
+     *    { name: 'foo',        state: 'CA' },
+     *    { name: 'bar',        state: 'CA' },
+     *    { name: 'sit',        state: 'CA' }
+     *  ]
+     * 
+     * in browsers that natively implement stable sort the result is guaranteed
+     * to be:
+     * 
+     *  [
+     *    { name: 'amet',       state: 'NY' },
+     *    { name: 'dolor',      state: 'NY' },
+     *    { name: 'ipsum',      state: 'NY' },
+     *    { name: 'lorem',      state: 'NY' },
+     *    { name: 'maecennas',  state: 'NY' },
+     *    { name: 'sed',        state: 'CA' },
+     *    { name: 'foo',        state: 'CA' },
+     *    { name: 'bar',        state: 'CA' },
+     *    { name: 'cat',        state: 'CA' },
+     *    { name: 'sit',        state: 'CA' },
+     *    { name: 'man',        state: 'CA' }
+     *  ]
+     */
+    
+    const columns = [
+      {
+        prop: 'name',
+        comparator: (nameA: string, nameB: string) => {
+          return nameA.length - nameB.length;
+        }
+      },
+      {
+        prop: 'state'
+      }
+    ];
 
-      const tableInstance = fixture.componentInstance;
-      tableInstance.rows = [
-        ['Hello', 123]
-      ];
+    component.rows = initialRows;
+    component.columns = columns;
+    fixture.detectChanges();
 
-      tableInstance.columns = [
-        { prop: 0 },
-        { prop: 1 }
-      ];
+    // sort by `name` ascending
+    sortBy({ column: 1 });
+    fixture.detectChanges();
 
-      // previously, an exception was thrown from column-helper.ts setColumnDefaults()
-      fixture.detectChanges();
+    // sort by `state` descending
+    sortBy({ column: 2 });
+    fixture.detectChanges();
+    sortBy({ column: 2 });
+    fixture.detectChanges();
 
-      expect(tableInstance.columns).toBeTruthy();
-    });
+    expect(textContent({ row: 1, column: 1 })).toContain('amet');
+    expect(textContent({ row: 2, column: 1 })).toContain('dolor');
+    expect(textContent({ row: 3, column: 1 })).toContain('ipsum');
+    expect(textContent({ row: 4, column: 1 })).toContain('lorem');
+    expect(textContent({ row: 5, column: 1 })).toContain('maecennas');
+    expect(textContent({ row: 6, column: 1 })).toContain('sed');
+    expect(textContent({ row: 7, column: 1 })).toContain('foo');
+    expect(textContent({ row: 8, column: 1 })).toContain('bar');
+    expect(textContent({ row: 9, column: 1 })).toContain('cat');
+    expect(textContent({ row: 10, column: 1 })).toContain('sit');
+    expect(textContent({ row: 11, column: 1 })).toContain('man');
   });
+  
+  it('should sort correctly after push events', () => {
+    const initialRows = [
+      { name: 'sed',        state: 'CA' },
+      { name: 'dolor',      state: 'NY' },
+      { name: 'ipsum',      state: 'NY' },
+      { name: 'foo',        state: 'CA' },
+      { name: 'bar',        state: 'CA' },
+      { name: 'cat',        state: 'CA' },
+      { name: 'sit',        state: 'CA' },
+      { name: 'man',        state: 'CA' },
+      { name: 'lorem',      state: 'NY' },
+      { name: 'amet',       state: 'NY' },
+      { name: 'maecennas',  state: 'NY' }
+    ];
+    const additionalRows = [ ...initialRows ];
+    
+    const columns = [
+      {
+        prop: 'name',
+        comparator: (nameA: string, nameB: string) => {
+          return nameA.length - nameB.length;
+        }
+      },
+      {
+        prop: 'state'
+      }
+    ];
+
+    component.rows = initialRows;
+    component.columns = columns;
+    fixture.detectChanges();
 
+    // sort by `state` descending
+    sortBy({ column: 2 });
+    fixture.detectChanges();
+    sortBy({ column: 2 });
+    fixture.detectChanges();
+
+    // sort by `name` ascending
+    sortBy({ column: 1 });
+    fixture.detectChanges();
+    
+    // mimic new `rows` data pushed to component
+    component.rows = additionalRows;
+    fixture.detectChanges();
+
+    // sort by `state` descending
+    sortBy({ column: 2 });
+    fixture.detectChanges();
+    sortBy({ column: 2 });
+    fixture.detectChanges();
+    
+    expect(textContent({ row: 1, column: 1 })).toContain('amet');
+    expect(textContent({ row: 2, column: 1 })).toContain('dolor');
+    expect(textContent({ row: 3, column: 1 })).toContain('ipsum');
+    expect(textContent({ row: 4, column: 1 })).toContain('lorem');
+    expect(textContent({ row: 5, column: 1 })).toContain('maecennas');
+    expect(textContent({ row: 6, column: 1 })).toContain('sed');
+    expect(textContent({ row: 7, column: 1 })).toContain('foo');
+    expect(textContent({ row: 8, column: 1 })).toContain('bar');
+    expect(textContent({ row: 9, column: 1 })).toContain('cat');
+    expect(textContent({ row: 10, column: 1 })).toContain('sit');
+    expect(textContent({ row: 11, column: 1 })).toContain('man');
+  });
+
+  it('should set offset to 0 when sorting by a column', () => {
+    const initialRows = [
+      {id: 1},
+      {id: 2},
+      {id: 3}
+    ];
+  
+    const columns = [
+      {
+        prop: 'id'
+      }
+    ];
+  
+    component.rows = initialRows;
+    component.columns = columns;
+    fixture.detectChanges();
+
+    const datatableComponent = fixture.debugElement
+      .query(By.directive(DatatableComponent))
+      .componentInstance;
+    datatableComponent.offset = 1;
+    
+    // sort by `id` descending
+    sortBy({ column: 1 });
+    fixture.detectChanges();
+    sortBy({ column: 1 });
+    fixture.detectChanges();
+
+    expect(datatableComponent.offset).toBe(0);
+  });
+
+  it('should support array data', () => {
+    const initialRows = [
+      ['Hello', 123]
+    ];
+  
+    const columns = [
+      { prop: 0 },
+      { prop: 1 }
+    ];
+  
+    // previously, an exception was thrown from column-helper.ts setColumnDefaults()
+    component.rows = initialRows;
+    component.columns = columns;
+    fixture.detectChanges();
+  
+    expect(textContent({ row: 1, column: 1 })).toContain('Hello');
+    expect(textContent({ row: 1, column: 2 })).toContain('123');
+  });
 });
+
+@Component({
+  template: `
+    <ngx-datatable
+      [columns]="columns"
+      [rows]="rows">
+    </ngx-datatable>
+  `
+})
+class TestFixtureComponent {
+  columns: any[] = [];
+  rows: any[] = [];
+}
+
+function setupTest() {
+  return TestBed.configureTestingModule({
+    declarations: [ TestFixtureComponent ],
+    imports: [ NgxDatatableModule ]
+  })
+  .compileComponents()
+  .then(() => {
+    fixture = TestBed.createComponent(TestFixtureComponent);
+    component = fixture.componentInstance;
+  });
+}
+
+/**
+ * mimics the act of a user clicking a column to sort it
+ */
+function sortBy({ column }: { column: number }) {
+  const columnIndex = column - 1;
+  const headerCellDe = fixture.debugElement
+    .queryAll(By.css('datatable-header-cell'))[columnIndex];
+  const de = headerCellDe.query(By.css('span:last-child'));
+  de.triggerEventHandler('click', null);
+}
+
+/**
+ * test helper function to return text content of a cell within the
+ * body of the ngx-datatable component
+ */
+function textContent({ row, column }: { row: number, column: number }) {
+  const [ rowIndex, columnIndex ] = [ row - 1, column - 1];
+  const bodyRowDe = fixture.debugElement
+    .queryAll(By.directive(DataTableBodyRowComponent))[rowIndex];
+  const bodyCellDe = bodyRowDe
+    .queryAll(By.directive(DataTableBodyCellComponent))[columnIndex];
+  
+  return bodyCellDe.nativeElement.textContent;
+}