Skip to content

Commit f18fe55

Browse files
kseamonkseamon
committed
Rework modules, start on tests
1 parent 767aed0 commit f18fe55

File tree

5 files changed

+256
-6
lines changed

5 files changed

+256
-6
lines changed

‎src/dev-app/column-resize/default-enabled-flex/default-enabled-column-resize-flex-demo-module.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@
88

99
import {NgModule} from '@angular/core';
1010
import {MatTableModule} from '@angular/material/table';
11-
import {MatColumnResizeDefaultEnabledModule} from '@angular/material-experimental/column-resize';
11+
import {MatDefaultEnabledColumnResizeModule} from '@angular/material-experimental/column-resize';
1212

1313
import {DefaultEnabledColumnResizeFlexDemo} from './default-enabled-column-resize-flex-demo';
1414

1515
@NgModule({
1616
imports: [
17-
MatColumnResizeDefaultEnabledModule,
17+
MatDefaultEnabledColumnResizeModule,
1818
MatTableModule,
1919
],
2020
declarations: [DefaultEnabledColumnResizeFlexDemo],

‎src/dev-app/column-resize/default-enabled/default-enabled-column-resize-demo-module.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@
88

99
import {NgModule} from '@angular/core';
1010
import {MatTableModule} from '@angular/material/table';
11-
import {MatColumnResizeDefaultEnabledModule} from '@angular/material-experimental/column-resize';
11+
import {MatDefaultEnabledColumnResizeModule} from '@angular/material-experimental/column-resize';
1212

1313
import {DefaultEnabledColumnResizeDemo} from './default-enabled-column-resize-demo';
1414

1515
@NgModule({
1616
imports: [
17-
MatColumnResizeDefaultEnabledModule,
17+
MatDefaultEnabledColumnResizeModule,
1818
MatTableModule,
1919
],
2020
declarations: [DefaultEnabledColumnResizeDemo],

‎src/material-experimental/column-resize/column-resize-module.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const IMPORTS = [
5050
MatDefaultResizable,
5151
],
5252
})
53-
export class MatColumnResizeDefaultEnabledModule {}
53+
export class MatDefaultEnabledColumnResizeModule {}
5454

5555
@NgModule({
5656
imports: IMPORTS,

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

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
import {Component, ElementRef, Type, ViewChild} from '@angular/core';
2+
import {ComponentFixture, TestBed, inject} from '@angular/core/testing';
3+
import {BidiModule} from '@angular/cdk/bidi';
4+
import {DataSource} from '@angular/cdk/collections';
5+
import {OverlayContainer} from '@angular/cdk/overlay';
6+
import {MatTableModule} from '@angular/material/table';
7+
import {BehaviorSubject} from 'rxjs';
8+
9+
import {MatColumnResizeModule, MatDefaultEnabledColumnResizeModule} from './index';
10+
11+
12+
function test() {
13+
return 'string!';
14+
}
15+
16+
/*const flexTemplate = `
17+
<mat-table [dir]="direction" [dataSource]="dataSource">
18+
<!-- Position Column -->
19+
<ng-container matColumnDef="position">
20+
<mat-header-cell *matHeaderCellDef [matResizableMaxWidthPx]="100"> No. </mat-header-cell>
21+
<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
22+
</ng-container>
23+
24+
<!-- Name Column -->
25+
<ng-container matColumnDef="name">
26+
<mat-header-cell *matHeaderCellDef [matResizableMinWidthPx]="100"> Name </mat-header-cell>
27+
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
28+
</ng-container>
29+
30+
<!-- Weight Column (not resizable) -->
31+
<ng-container matColumnDef="weight">
32+
<mat-header-cell *matHeaderCellDef disableResize> Weight (Not resizable) </mat-header-cell>
33+
<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
34+
</ng-container>
35+
36+
<!-- Symbol Column -->
37+
<ng-container matColumnDef="symbol">
38+
<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
39+
<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
40+
</ng-container>
41+
42+
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
43+
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
44+
</mat-table>
45+
`;
46+
47+
const tableTemplate = `
48+
<table mat-table [dir]="direction" [dataSource]="dataSource">
49+
<!-- Position Column -->
50+
<ng-container matColumnDef="position">
51+
<th mat-header-cell *matHeaderCellDef [matResizableMaxWidthPx]="100"> No. </th>
52+
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
53+
</ng-container>
54+
55+
<!-- Name Column -->
56+
<ng-container matColumnDef="name">
57+
<th mat-header-cell *matHeaderCellDef [matResizableMinWidthPx]="100"> Name </th>
58+
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
59+
</ng-container>
60+
61+
<!-- Weight Column (not resizable) -->
62+
<ng-container matColumnDef="weight">
63+
<th mat-header-cell *matHeaderCellDef disableResize> Weight (Not resizable) </th>
64+
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
65+
</ng-container>
66+
67+
<!-- Symbol Column -->
68+
<ng-container matColumnDef="symbol">
69+
<th mat-header-cell *matHeaderCellDef> Symbol </th>
70+
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
71+
</ng-container>
72+
73+
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
74+
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
75+
</table>
76+
`;
77+
78+
const defaultEnabledFlexTemplate = `
79+
<mat-table [dir]="direction" [dataSource]="dataSource">
80+
<!-- Position Column -->
81+
<ng-container matColumnDef="position">
82+
<mat-header-cell *matHeaderCellDef [matResizableMaxWidthPx]="100"> No. </mat-header-cell>
83+
<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
84+
</ng-container>
85+
86+
<!-- Name Column -->
87+
<ng-container matColumnDef="name">
88+
<mat-header-cell *matHeaderCellDef [matResizableMinWidthPx]="100"> Name </mat-header-cell>
89+
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
90+
</ng-container>
91+
92+
<!-- Weight Column (not resizable) -->
93+
<ng-container matColumnDef="weight">
94+
<mat-header-cell *matHeaderCellDef disableResize> Weight (Not resizable) </mat-header-cell>
95+
<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
96+
</ng-container>
97+
98+
<!-- Symbol Column -->
99+
<ng-container matColumnDef="symbol">
100+
<mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
101+
<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
102+
</ng-container>
103+
104+
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
105+
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
106+
</mat-table>
107+
`;
108+
109+
const defaultEnabledTableTemplate = `
110+
<table mat-table [dir]="direction" [dataSource]="dataSource">
111+
<!-- Position Column -->
112+
<ng-container matColumnDef="position">
113+
<th mat-header-cell *matHeaderCellDef [matResizableMaxWidthPx]="100"> No. </th>
114+
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
115+
</ng-container>
116+
117+
<!-- Name Column -->
118+
<ng-container matColumnDef="name">
119+
<th mat-header-cell *matHeaderCellDef [matResizableMinWidthPx]="100"> Name </th>
120+
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
121+
</ng-container>
122+
123+
<!-- Weight Column (not resizable) -->
124+
<ng-container matColumnDef="weight">
125+
<th mat-header-cell *matHeaderCellDef disableResize> Weight (Not resizable) </th>
126+
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
127+
</ng-container>
128+
129+
<!-- Symbol Column -->
130+
<ng-container matColumnDef="symbol">
131+
<th mat-header-cell *matHeaderCellDef> Symbol </th>
132+
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
133+
</ng-container>
134+
135+
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
136+
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
137+
</table>
138+
`;*/
139+
140+
abstract class BaseTestComponent {
141+
@ViewChild('table', {static: false}) table: ElementRef;
142+
143+
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
144+
dataSource = new ElementDataSource();
145+
direction = 'ltr';
146+
/*
147+
getColumnSize(index: number): number {
148+
149+
}
150+
151+
triggerHoverState() {
152+
const row = this.table.nativeElement.querySelector('.mat-header-row');
153+
row.dispatchEvent(new Event('mouseover', {bubbles: true}));
154+
}
155+
156+
beginColumnResizeWithMouse(index: number): void {
157+
}
158+
159+
updateResizeWithMouseInProgress(index: number, delta: number): void {
160+
}
161+
162+
completeResizeWithMouseInProgress(index: number): void {
163+
}
164+
165+
resizeColumnWithMouse(index: number, resizeDelta: number): void {
166+
}*/
167+
}
168+
/*
169+
abstract class BaseTestComponentRtl extends BaseTestComponent {
170+
direction = 'rtl';
171+
}*/
172+
173+
const testTemplate = test();
174+
175+
@Component({template: testTemplate})
176+
class MatResizeTest extends BaseTestComponent {
177+
}
178+
179+
@Component({template: testTemplate})
180+
class MatResizeDefaultTest extends BaseTestComponent {
181+
}
182+
183+
interface PeriodicElement {
184+
name: string;
185+
position: number;
186+
weight: number;
187+
symbol: string;
188+
}
189+
190+
class ElementDataSource extends DataSource<PeriodicElement> {
191+
/** Stream of data that is provided to the table. */
192+
data = new BehaviorSubject(createElementData());
193+
194+
/** Connect function called by the table to retrieve one stream containing the data to render. */
195+
connect() {
196+
return this.data.asObservable();
197+
}
198+
199+
disconnect() {}
200+
}
201+
202+
const testCases: ReadonlyArray<[Type<object>, Type<BaseTestComponent>, string]> = [
203+
[MatColumnResizeModule, MatResizeTest, 'opt-in table-based mat-table'],
204+
/* [MatColumnResizeModule, MatResizeFlexTest, 'opt-in flex-based mat-table'],*/
205+
[MatDefaultEnabledColumnResizeModule, MatResizeDefaultTest, 'default enabled table-based mat-table'],
206+
/*[MatDefaultEnabledColumnResizeModule, MatResizeDefaultRtlTest, 'default enabled table-based mat-table'],
207+
[MatDefaultEnabledColumnResizeModule, MatResizeDefaultFlexTest, 'default enabled flex-based mat-table'],
208+
[MatDefaultEnabledColumnResizeModule, MatResizeDefaultFlexRtlTest, 'default enabled flex-based mat-table'],*/
209+
];
210+
211+
fdescribe('Material Popover Edit', () => {
212+
for (const [resizeModule, componentClass, label] of testCases) {
213+
describe(label, () => {
214+
let component: BaseTestComponent;
215+
let fixture: ComponentFixture<BaseTestComponent>;
216+
let overlayContainer: OverlayContainer;
217+
218+
beforeEach(() => {
219+
TestBed.configureTestingModule({
220+
imports: [BidiModule, MatTableModule, resizeModule],
221+
declarations: [componentClass],
222+
}).compileComponents();
223+
inject([OverlayContainer], (oc: OverlayContainer) => {
224+
overlayContainer = oc;
225+
})();
226+
fixture = TestBed.createComponent(componentClass);
227+
component = fixture.componentInstance;
228+
fixture.detectChanges();
229+
component;//remove
230+
});
231+
232+
afterEach(() => {
233+
// The overlay container's `ngOnDestroy` won't be called between test runs so we need
234+
// to call it ourselves, in order to avoid leaking containers between tests and potentially
235+
// throwing `querySelector` calls.
236+
overlayContainer.ngOnDestroy();
237+
});
238+
});
239+
}
240+
});
241+
242+
function createElementData() {
243+
return [
244+
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
245+
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
246+
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
247+
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
248+
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
249+
];
250+
}

‎src/material-experimental/column-resize/overlay-handle.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import {
2525
ResizeRef,
2626
} from '@angular/cdk-experimental/column-resize';
2727

28-
import {AbstractMatColumnResize} from './column-resize';
28+
import {AbstractMatColumnResize} from './column-resize-directives/common';
2929

3030
@Component({
3131
moduleId: module.id,

0 commit comments

Comments
 (0)