comments

Author: andrewseguin

src/demo-app/data-table/data-table-demo.html

@@ -1,19 +1,16 @@
-<div class="demo-database-actions">
+<div class="demo-data-source-actions">
   <button md-raised-button (click)="connect()">Connect New Data Source</button>
   <button md-raised-button (click)="disconnect()" [disabled]="!dataSource">Disconnect Data Source</button>
 
   <button md-raised-button (click)="_peopleDatabase.shuffle(changeReferences)">Randomize Data</button>
   <md-checkbox [(ngModel)]="changeReferences">Change references</md-checkbox>
-</div>
 
-<span>Track By</span>
-<md-radio-group [(ngModel)]="trackBy">
-  <md-radio-button [value]="'id'">ID</md-radio-button>
-  <md-radio-button [value]="'reference'">Reference</md-radio-button>
-  <md-radio-button [value]="'index'">Index</md-radio-button>
-</md-radio-group>
-
-<div class="demo-data-source-actions">
+  <span>Track By</span>
+  <md-radio-group [(ngModel)]="trackBy">
+    <md-radio-button [value]="'id'">ID</md-radio-button>
+    <md-radio-button [value]="'reference'">Reference</md-radio-button>
+    <md-radio-button [value]="'index'">Index</md-radio-button>
+  </md-radio-group>
 </div>
 
 <div class="demo-table-container mat-elevation-z4">

src/demo-app/data-table/people-database.ts

@@ -28,7 +28,7 @@ export class PeopleDatabase {
     for (let i = 0; i < 100; i++) { this.addPerson(); }
   }
 
-  randomize(changeReferences: boolean) {
+  shuffle(changeReferences: boolean) {
     let copiedData = this.data.slice();
     for (let i = copiedData.length; i; i--) {
       let j = Math.floor(Math.random() * i);

src/lib/core/data-table/data-table.spec.ts

@@ -143,14 +143,14 @@ describe('CdkTable', () => {
     expect(changedRows[2].getAttribute('initialIndex')).toBe(null);
   });
 
-  describe('should properly use trackBy when diffing to add/remove/move rows', () => {
+  describe('with trackBy', () => {
 
     afterEach(() => {
       // Resetting the static value of the trackby function for TrackByCdkTableApp
-      TrackByCdkTableApp.TRACK_BY = 'reference';
+      TrackByCdkTableApp.trackBy = 'reference';
     });
 
-    function createComponent() {
+    function createTestComponentWithTrackyByTable() {
       fixture = TestBed.createComponent(TrackByCdkTableApp);
 
       component = fixture.componentInstance;
@@ -174,7 +174,7 @@ describe('CdkTable', () => {
     }
 
     // Swap first two elements, remove the third, add new data
-    function changeData() {
+    function mutateData() {
       // Swap first and second data in data array
       const copiedData = component.dataSource.data.slice();
       const temp = copiedData[0];
@@ -189,9 +189,9 @@ describe('CdkTable', () => {
       component.dataSource.addData();
     }
 
-    it('with reference-based trackBy', () => {
-      createComponent();
-      changeData();
+    it('should add/remove/move rows with reference-based trackBy', () => {
+      createTestComponentWithTrackyByTable();
+      mutateData();
 
       // Expect that the first and second rows were swapped and that the last row is new
       const changedRows = getRows(tableElement);
@@ -201,9 +201,9 @@ describe('CdkTable', () => {
       expect(changedRows[2].getAttribute('initialIndex')).toBe(null);
     });
 
-    it('with changed references without property-based trackBy', () => {
-      createComponent();
-      changeData();
+    it('should add/remove/move rows with changed references without property-based trackBy', () => {
+      createTestComponentWithTrackyByTable();
+      mutateData();
 
       // Change each item reference to show that the trackby is not checking the item properties.
       component.dataSource.data = component.dataSource.data
@@ -217,10 +217,10 @@ describe('CdkTable', () => {
       expect(changedRows[2].getAttribute('initialIndex')).toBe(null);
     });
 
-    it('with changed references with property-based trackBy', () => {
-      TrackByCdkTableApp.TRACK_BY = 'propertyA';
-      createComponent();
-      changeData();
+    it('should add/remove/move rows with changed references with property-based trackBy', () => {
+      TrackByCdkTableApp.trackBy = 'propertyA';
+      createTestComponentWithTrackyByTable();
+      mutateData();
 
       // Change each item reference to show that the trackby is checking the item properties.
       // Otherwise this would cause them all to be removed/added.
@@ -235,10 +235,10 @@ describe('CdkTable', () => {
       expect(changedRows[2].getAttribute('initialIndex')).toBe(null);
     });
 
-    it('with changed references with index-based trackBy', () => {
-      TrackByCdkTableApp.TRACK_BY = 'index';
-      createComponent();
-      changeData();
+    it('should add/remove/move rows with changed references with index-based trackBy', () => {
+      TrackByCdkTableApp.trackBy = 'index';
+      createTestComponentWithTrackyByTable();
+      mutateData();
 
       // Change each item reference to show that the trackby is checking the index.
       // Otherwise this would cause them all to be removed/added.
@@ -453,15 +453,15 @@ class DynamicDataSourceCdkTableApp {
   `
 })
 class TrackByCdkTableApp {
-  static TRACK_BY: 'reference' | 'propertyA' | 'index' = 'reference';
+  static trackBy: 'reference' | 'propertyA' | 'index' = 'reference';
 
   dataSource: FakeDataSource = new FakeDataSource();
   columnsToRender = ['column_a', 'column_b'];
 
   @ViewChild(CdkTable) table: CdkTable<TestData>;
 
   trackBy(index: number, item: TestData) {
-    switch (TrackByCdkTableApp.TRACK_BY) {
+    switch (TrackByCdkTableApp.trackBy) {
       case 'reference': return item;
       case 'propertyA': return item.a;
       case 'index': return index;