test wip

Author: kseamon

src/material-experimental/column-resize/column-resize.spec.ts

@@ -62,21 +62,21 @@ function getTableTemplate(defaultEnabled: boolean) {
         <table ${directives.table} mat-table [dataSource]="dataSource"
             style="table-layout: fixed;">
           <!-- Position Column -->
-          <ng-container matColumnDef="position">
+          <ng-container matColumnDef="position" sticky>
             <th mat-header-cell *matHeaderCellDef
                 ${directives.columnEnabled} [matResizableMaxWidthPx]="100"> No. </th>
             <td mat-cell *matCellDef="let element"> {{element.position}} </td>
           </ng-container>
 
           <!-- Name Column -->
-          <ng-container matColumnDef="name">
+          <ng-container matColumnDef="name" sticky>
             <th mat-header-cell *matHeaderCellDef
                 ${directives.columnEnabled} [matResizableMinWidthPx]="150"> Name </th>
             <td mat-cell *matCellDef="let element"> {{element.name}} </td>
           </ng-container>
 
           <!-- Weight Column (not resizable) -->
-          <ng-container matColumnDef="weight">
+          <ng-container matColumnDef="weight" sticky>
             <th mat-header-cell *matHeaderCellDef ${directives.columnDisabled}>
               Weight (Not resizable)
             </th>
@@ -117,21 +117,21 @@ function getFlexTemplate(defaultEnabled: boolean) {
       <div #table [dir]="direction">
         <mat-table ${directives.table} [dataSource]="dataSource">
           <!-- Position Column -->
-          <ng-container matColumnDef="position">
+          <ng-container matColumnDef="position" sticky>
             <mat-header-cell *matHeaderCellDef
                 ${directives.columnEnabled} [matResizableMaxWidthPx]="100"> No. </mat-header-cell>
             <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
           </ng-container>
 
           <!-- Name Column -->
-          <ng-container matColumnDef="name">
+          <ng-container matColumnDef="name" sticky>
             <mat-header-cell *matHeaderCellDef
                 ${directives.columnEnabled} [matResizableMinWidthPx]="150"> Name </mat-header-cell>
             <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
           </ng-container>
 
           <!-- Weight Column (not resizable) -->
-          <ng-container matColumnDef="weight">
+          <ng-container matColumnDef="weight" sticky>
             <mat-header-cell *matHeaderCellDef ${directives.columnDisabled}>
               Weight (Not resizable)
             </mat-header-cell>
@@ -178,6 +178,7 @@ abstract class BaseTestComponent {
   }
 
   getColumnOriginPosition(index: number): number {
+    console.log(index, this.getColumnElement(index).offsetLeft);
     return this.getColumnElement(index).offsetLeft + this.getColumnWidth(index);
   }
 
@@ -323,24 +324,25 @@ const approximateMatcher = {
 };
 
 const testCases: ReadonlyArray<[Type<object>, Type<BaseTestComponent>, string]> = [
-  [MatColumnResizeModule, MatResizeTest, 'opt-in table-based mat-table'],
+/*  [MatColumnResizeModule, MatResizeTest, 'opt-in table-based mat-table'],
   [MatColumnResizeModule, MatResizeOnPushTest, 'inside OnPush component'],
   [MatColumnResizeModule, MatResizeFlexTest, 'opt-in flex-based mat-table'],
   [
     MatDefaultEnabledColumnResizeModule, MatResizeDefaultTest,
     'default enabled table-based mat-table'
   ],
-  [
+*/  [
     MatDefaultEnabledColumnResizeModule, MatResizeDefaultRtlTest,
-    'default enabled rtl table-based mat-table'],
-  [
+    'default enabled rtl table-based mat-table'
+  ],
+/*  [
     MatDefaultEnabledColumnResizeModule, MatResizeDefaultFlexTest,
     'default enabled flex-based mat-table'
   ],
   [
     MatDefaultEnabledColumnResizeModule, MatResizeDefaultFlexRtlTest,
     'default enabled rtl flex-based mat-table'
-  ],
+  ],*/
 ];
 
 describe('Material Popover Edit', () => {
@@ -400,10 +402,11 @@ describe('Material Popover Edit', () => {
         expect(component.getOverlayThumbElement(0)).toBeUndefined();
       }));
 
-      it('resizes the target column via mouse input', fakeAsync(() => {
+      fit('resizes the target column via mouse input', fakeAsync(() => {
         const initialTableWidth = component.getTableWidth();
         const initialColumnWidth = component.getColumnWidth(1);
         const initialColumnPosition = component.getColumnOriginPosition(1);
+        const initialNextColumnPosition = component.getColumnOriginPosition(2);
 
         component.triggerHoverState();
         fixture.detectChanges();
@@ -415,7 +418,9 @@ describe('Material Popover Edit', () => {
 
         let thumbPositionDelta = component.getOverlayThumbPosition(1) - initialThumbPosition;
         let columnPositionDelta = component.getColumnOriginPosition(1) - initialColumnPosition;
+        let nextColumnPositionDelta = component.getColumnOriginPosition(2) - initialNextColumnPosition;
         (expect(thumbPositionDelta) as any).isApproximately(columnPositionDelta);
+        (expect(nextColumnPositionDelta) as any).isApproximately(columnPositionDelta);
 
         (expect(component.getTableWidth()) as any).isApproximately(initialTableWidth + 5);
         (expect(component.getColumnWidth(1)) as any).isApproximately(initialColumnWidth + 5);