chore(table): remove data prefix (#5379)

* chore(table): rename data table

* fix demo template url

* move to cdk directory

* remove custom matchers

* rebase

* rebase

* aot fix

Author: andrewseguin

.pullapprove.yml

@@ -117,9 +117,9 @@ groups:
   data-table:
     conditions:
       files:
-        - 'src/(demo-app|e2e-app|lib)/data-table/*'
-        - 'src/lib/core/data-table/*'
-        - 'src/material-examples/data-table-*'
+        - 'src/(demo-app|e2e-app|lib)/table/*'
+        - 'src/lib/core/table/*'
+        - 'src/material-examples/table-*'
     users:
       - andrewseguin # primary
       - jelbourn

src/cdk/public_api.ts

@@ -7,3 +7,4 @@
  */
 
 export * from './coercion/index';
+export * from './table/index';

src/lib/core/data-table/cell.ts renamed to src/cdk/table/cell.ts

@@ -9,7 +9,7 @@
 import {ContentChild, Directive, ElementRef, Input, Renderer2, TemplateRef} from '@angular/core';
 
 /**
- * Cell definition for a CDK data-table.
+ * Cell definition for a CDK table.
  * Captures the template of a column's data row cell as well as cell-specific properties.
  */
 @Directive({selector: '[cdkCellDef]'})
@@ -18,7 +18,7 @@ export class CdkCellDef {
 }
 
 /**
- * Header cell definition for a CDK data-table.
+ * Header cell definition for a CDK table.
  * Captures the template of a column's header cell and as well as cell-specific properties.
  */
 @Directive({selector: '[cdkHeaderCellDef]'})
@@ -27,7 +27,7 @@ export class CdkHeaderCellDef {
 }
 
 /**
- * Column definition for the CDK data-table.
+ * Column definition for the CDK table.
  * Defines a set of cells available for a table column.
  */
 @Directive({selector: '[cdkColumnDef]'})

src/lib/core/data-table/data-source.ts renamed to src/cdk/table/data-source.ts

@@ -8,12 +8,14 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {HeaderRowPlaceholder, RowPlaceholder, CdkTable} from './data-table';
+import {HeaderRowPlaceholder, RowPlaceholder, CdkTable} from './table';
 import {CdkCellOutlet, CdkHeaderRow, CdkHeaderRowDef, CdkRow, CdkRowDef} from './row';
 import {CdkColumnDef, CdkHeaderCellDef, CdkHeaderCell, CdkCell, CdkCellDef} from './cell';
 
 export * from './data-source';
-export * from './data-table';
+export * from './table';
+export * from './cell';
+export * from './row';
 
 const EXPORTED_DECLARATIONS = [
   CdkTable,
@@ -37,4 +39,4 @@ const EXPORTED_DECLARATIONS = [
   declarations: [EXPORTED_DECLARATIONS]
 
 })
-export class CdkDataTableModule { }
+export class CdkTableModule { }

src/lib/core/data-table/index.ts renamed to src/cdk/table/index.ts

@@ -66,7 +66,7 @@ export abstract class BaseRowDef {
 }
 
 /**
- * Header row definition for the CDK data-table.
+ * Header row definition for the CDK table.
  * Captures the header row's template and other header properties such as the columns to display.
  */
 @Directive({
@@ -80,7 +80,7 @@ export class CdkHeaderRowDef extends BaseRowDef {
 }
 
 /**
- * Data row definition for the CDK data-table.
+ * Data row definition for the CDK table.
  * Captures the header row's template and other row properties such as the columns to display.
  */
 @Directive({
@@ -133,7 +133,7 @@ export class CdkCellOutlet {
 
   /**
    * Static property containing the latest constructed instance of this class.
-   * Used by the CDK data-table when each CdkHeaderRow and CdkRow component is created using
+   * Used by the CDK table when each CdkHeaderRow and CdkRow component is created using
    * createEmbeddedView. After one of these components are created, this property will provide
    * a handle to provide that component's cells and context. After init, the CdkCellOutlet will
    * construct the cells with the provided context.

src/lib/core/data-table/row.ts renamed to src/cdk/table/row.ts

@@ -1,13 +1,12 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {Component, ViewChild} from '@angular/core';
-import {CdkTable} from './data-table';
+import {CdkTable} from './table';
 import {CollectionViewer, DataSource} from './data-source';
 import {BehaviorSubject} from 'rxjs/BehaviorSubject';
-import {customMatchers} from '../testing/jasmine-matchers';
 import {Observable} from 'rxjs/Observable';
 import {combineLatest} from 'rxjs/observable/combineLatest';
-import {map} from '../rxjs/index';
-import {CdkDataTableModule} from './index';
+import {CdkTableModule} from './index';
+import {map} from 'rxjs/operator/map';
 
 describe('CdkTable', () => {
   let fixture: ComponentFixture<SimpleCdkTableApp>;
@@ -18,11 +17,8 @@ describe('CdkTable', () => {
   let tableElement: HTMLElement;
 
   beforeEach(async(() => {
-    jasmine.addMatchers(customMatchers);
-    jasmine.addMatchers(tableCustomMatchers);
-
     TestBed.configureTestingModule({
-      imports: [CdkDataTableModule],
+      imports: [CdkTableModule],
       declarations: [
         SimpleCdkTableApp,
         DynamicDataSourceCdkTableApp,
@@ -82,14 +78,18 @@ describe('CdkTable', () => {
     });
 
     it('with the right accessibility roles', () => {
-      expect(tableElement).toBeRole('grid');
+      expect(tableElement.getAttribute('role')).toBe('grid');
 
-      expect(getHeaderRow(tableElement)).toBeRole('row');
-      getHeaderCells(tableElement).forEach(cell => expect(cell).toBeRole('columnheader'));
+      expect(getHeaderRow(tableElement).getAttribute('role')).toBe('row');
+      getHeaderCells(tableElement).forEach(cell => {
+        expect(cell.getAttribute('role')).toBe('columnheader');
+      });
 
       getRows(tableElement).forEach(row => {
-        expect(row).toBeRole('row');
-        getCells(row).forEach(cell => expect(cell).toBeRole('gridcell'));
+        expect(row.getAttribute('role')).toBe('row');
+        getCells(row).forEach(cell => {
+          expect(cell.getAttribute('role')).toBe('gridcell');
+        });
       });
     });
   });
@@ -105,7 +105,7 @@ describe('CdkTable', () => {
     fixture = TestBed.createComponent(CustomRoleCdkTableApp);
     fixture.detectChanges();
 
-    expect(fixture.nativeElement.querySelector('cdk-table')).toBeRole('treegrid');
+    expect(fixture.nativeElement.querySelector('cdk-table').getAttribute('role')).toBe('treegrid');
   });
 
   it('should re-render the rows when the data changes', () => {
@@ -271,7 +271,7 @@ describe('CdkTable', () => {
     expect(dataSource.data.length).toBe(3);
 
     let data = dataSource.data;
-    expect(tableElement).toMatchTableContent([
+    expectTableToMatchContent(tableElement, [
       ['Column A', 'Column B', 'Column C'],
       [data[0].a, data[0].b, data[0].c],
       [data[1].a, data[1].b, data[1].c],
@@ -284,7 +284,7 @@ describe('CdkTable', () => {
     fixture.detectChanges();
 
     data = dataSource.data;
-    expect(tableElement).toMatchTableContent([
+    expectTableToMatchContent(tableElement, [
       ['Column A', 'Column B', 'Column C'],
       [data[0].a, data[0].b, data[0].c],
       [data[1].a, data[1].b, data[1].c],
@@ -303,7 +303,7 @@ describe('CdkTable', () => {
 
     // Expect that the component has no data source and the table element reflects empty data.
     expect(component.dataSource).toBe(undefined);
-    expect(tableElement).toMatchTableContent([
+    expectTableToMatchContent(tableElement, [
       ['Column A']
     ]);
 
@@ -314,7 +314,7 @@ describe('CdkTable', () => {
     expect(dynamicDataSource.isConnected).toBe(true);
 
     let data = component.dataSource.data;
-    expect(tableElement).toMatchTableContent([
+    expectTableToMatchContent(tableElement, [
       ['Column A'],
       [data[0].a],
       [data[1].a],
@@ -327,7 +327,7 @@ describe('CdkTable', () => {
 
     // Expect that the old data source has been disconnected.
     expect(dynamicDataSource.isConnected).toBe(false);
-    expect(tableElement).toMatchTableContent([
+    expectTableToMatchContent(tableElement, [
       ['Column A']
     ]);
   });
@@ -418,7 +418,7 @@ describe('CdkTable', () => {
     expect(dataSource.data.length).toBe(3);
 
     let data = dataSource.data;
-    expect(tableElement).toMatchTableContent([
+    expectTableToMatchContent(tableElement, [
       ['Column A', 'Column B', 'Column C'],
       [data[0].a, data[0].b, data[0].c],
       [data[1].a, data[1].b, data[1].c],
@@ -433,7 +433,7 @@ describe('CdkTable', () => {
     dataSource.data.forEach(rowData => changedTableContent.push([rowData.c, rowData.b]));
 
     data = dataSource.data;
-    expect(tableElement).toMatchTableContent([
+    expectTableToMatchContent(tableElement, [
       ['Column C', 'Column B'],
       [data[0].c, data[0].b],
       [data[1].c, data[1].b],
@@ -646,50 +646,36 @@ function getHeaderCells(tableElement: Element): Element[] {
   return getElements(getHeaderRow(tableElement), '.cdk-header-cell');
 }
 
-const tableCustomMatchers: jasmine.CustomMatcherFactories = {
-  toMatchTableContent: () => {
-    return {
-      compare: function (tableElement: Element, expectedTableContent: any[]) {
-        const missedExpectations: string[] = [];
-        function checkCellContent(cell: Element, expectedTextContent: string) {
-          const actualTextContent = cell.textContent!.trim();
-          if (actualTextContent !== expectedTextContent) {
-            missedExpectations.push(
-                `Expected cell contents to be ${expectedTextContent} but was ${actualTextContent}`);
-          }
-        }
-
-        // Check header cells
-        const expectedHeaderContent = expectedTableContent.shift();
-        getHeaderCells(tableElement).forEach((cell, index) => {
-          const expected = expectedHeaderContent ?
-              expectedHeaderContent[index] :
-              null;
-          checkCellContent(cell, expected);
-        });
+function expectTableToMatchContent(tableElement: Element, expectedTableContent: any[]) {
+  const missedExpectations: string[] = [];
+  function checkCellContent(cell: Element, expectedTextContent: string) {
+    const actualTextContent = cell.textContent!.trim();
+    if (actualTextContent !== expectedTextContent) {
+      missedExpectations.push(
+          `Expected cell contents to be ${expectedTextContent} but was ${actualTextContent}`);
+    }
+  }
 
-        // Check data row cells
-        getRows(tableElement).forEach((row, rowIndex) => {
-          getCells(row).forEach((cell, cellIndex) => {
-            const expected = expectedHeaderContent ?
-                expectedTableContent[rowIndex][cellIndex] :
-                null;
-            checkCellContent(cell, expected);
-          });
-        });
+  // Check header cells
+  const expectedHeaderContent = expectedTableContent.shift();
+  getHeaderCells(tableElement).forEach((cell, index) => {
+    const expected = expectedHeaderContent ?
+        expectedHeaderContent[index] :
+        null;
+    checkCellContent(cell, expected);
+  });
 
-        if (missedExpectations.length) {
-          return {
-            pass: false,
-            message: missedExpectations.join('\n')
-          };
-        }
-
-        return {
-          pass: true,
-          message: 'Table contained the right content'
-        };
-      }
-    };
+  // Check data row cells
+  getRows(tableElement).forEach((row, rowIndex) => {
+    getCells(row).forEach((cell, cellIndex) => {
+      const expected = expectedHeaderContent ?
+          expectedTableContent[rowIndex][cellIndex] :
+          null;
+      checkCellContent(cell, expected);
+    });
+  });
+
+  if (missedExpectations.length) {
+    fail(missedExpectations.join('\n'));
   }
-};
+}

src/lib/core/data-table/data-table.spec.ts renamed to src/cdk/table/table.spec.ts

@@ -32,7 +32,7 @@ import {
 import {CollectionViewer, DataSource} from './data-source';
 import {CdkCellOutlet, CdkCellOutletRowContext, CdkHeaderRowDef, CdkRowDef} from './row';
 import {merge} from 'rxjs/observable/merge';
-import {takeUntil} from '../rxjs/index';
+import {takeUntil} from 'rxjs/operator/takeUntil';
 import {BehaviorSubject} from 'rxjs/BehaviorSubject';
 import {Subscription} from 'rxjs/Subscription';
 import {Subject} from 'rxjs/Subject';
@@ -43,8 +43,8 @@ import {CdkCellDef, CdkColumnDef, CdkHeaderCellDef} from './cell';
  * @param id Id whose lookup failed.
  * @docs-private
  */
-export function getDataTableUnknownColumnError(id: string) {
-  return new Error(`md-data-table: Could not find column with id "${id}".`);
+export function getTableUnknownColumnError(id: string) {
+  return new Error(`cdk-table: Could not find column with id "${id}".`);
 }
 
 /**
@@ -357,7 +357,7 @@ export class CdkTable<T> implements CollectionViewer {
       const column = this._columnDefinitionsByName.get(columnId);
 
       if (!column) {
-        throw getDataTableUnknownColumnError(columnId);
+        throw getTableUnknownColumnError(columnId);
       }
 
       return column.headerCell;
@@ -374,7 +374,7 @@ export class CdkTable<T> implements CollectionViewer {
       const column = this._columnDefinitionsByName.get(columnId);
 
       if (!column) {
-        throw getDataTableUnknownColumnError(columnId);
+        throw getTableUnknownColumnError(columnId);
       }
 
       return column.cell;

src/lib/core/data-table/data-table.ts renamed to src/cdk/table/table.ts

@@ -37,13 +37,12 @@ import {PlatformDemo} from './platform/platform-demo';
 import {AutocompleteDemo} from './autocomplete/autocomplete-demo';
 import {InputDemo} from './input/input-demo';
 import {StyleDemo} from './style/style-demo';
-import {DataTableDemo} from './data-table/data-table-demo';
-import {PeopleDatabase} from './data-table/people-database';
+import {TableDemo} from './table/table-demo';
+import {PeopleDatabase} from './table/people-database';
 import {DatepickerDemo} from './datepicker/datepicker-demo';
 import {TypographyDemo} from './typography/typography-demo';
 import {ExpansionDemo} from './expansion/expansion-demo';
 import {
-  CdkDataTableModule,
   FullscreenOverlayContainer,
   MdAutocompleteModule,
   MdButtonModule,
@@ -79,7 +78,8 @@ import {
   OverlayContainer,
   StyleModule
 } from '@angular/material';
-import {TableHeaderDemo} from './data-table/table-header-demo';
+import {CdkTableModule} from '@angular/cdk';
+import {TableHeaderDemo} from './table/table-header-demo';
 
 /**
  * NgModule that includes all Material modules that are required to serve the demo-app.
@@ -117,7 +117,7 @@ import {TableHeaderDemo} from './data-table/table-header-demo';
     MdToolbarModule,
     MdTooltipModule,
     MdNativeDateModule,
-    CdkDataTableModule,
+    CdkTableModule,
     StyleModule
   ]
 })
@@ -142,7 +142,6 @@ export class DemoMaterialModule {}
     CardDemo,
     ChipsDemo,
     CheckboxDemo,
-    DataTableDemo,
     DatepickerDemo,
     DemoApp,
     DemoAppOnPush,
@@ -177,6 +176,7 @@ export class DemoMaterialModule {}
     TableHeaderDemo,
     ToolbarDemo,
     TooltipDemo,
+    TableDemo,
     TabsDemo,
     SunnyTabContent,
     RainyTabContent,