Skip to content

Commit 364d478

Browse files
crisbetocrisbeto
committed
test(multiple): switch tests to new control flow
Switches all of our tests to use the new control flow in order to validate that it works as expected.
1 parent b27ec4b commit 364d478

File tree

65 files changed

+1159
-829
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+1159
-829
lines changed

‎src/cdk-experimental/popover-edit/popover-edit.spec.ts

Lines changed: 31 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -194,18 +194,20 @@ abstract class BaseTestComponent {
194194
${WEIGHT_EDIT_TEMPLATE}
195195
</ng-template>
196196
197-
<tr *ngFor="let element of elements">
198-
<td> just a cell </td>
199-
200-
<td ${POPOVER_EDIT_DIRECTIVE_NAME}
201-
[cdkPopoverEditContext]="element">
202-
${CELL_TEMPLATE}
203-
</td>
204-
205-
<td ${POPOVER_EDIT_DIRECTIVE_WEIGHT}>
206-
{{element.weight}}
207-
</td>
208-
</tr>
197+
@for (element of elements; track element) {
198+
<tr>
199+
<td> just a cell </td>
200+
201+
<td ${POPOVER_EDIT_DIRECTIVE_NAME}
202+
[cdkPopoverEditContext]="element">
203+
${CELL_TEMPLATE}
204+
</td>
205+
206+
<td ${POPOVER_EDIT_DIRECTIVE_WEIGHT}>
207+
{{element.weight}}
208+
</td>
209+
</tr>
210+
}
209211
</table>
210212
`,
211213
})
@@ -220,25 +222,27 @@ class VanillaTableOutOfCell extends BaseTestComponent {
220222
@Component({
221223
template: `
222224
<table #table editable [dir]="direction">
223-
<tr *ngFor="let element of elements">
224-
<td> just a cell </td>
225+
@for (element of elements; track element) {
226+
<tr>
227+
<td> just a cell </td>
225228
226-
<td ${POPOVER_EDIT_DIRECTIVE_NAME}>
227-
${CELL_TEMPLATE}
229+
<td ${POPOVER_EDIT_DIRECTIVE_NAME}>
230+
${CELL_TEMPLATE}
228231
229-
<ng-template #nameEdit>
230-
${NAME_EDIT_TEMPLATE}
231-
</ng-template>
232-
</td>
232+
<ng-template #nameEdit>
233+
${NAME_EDIT_TEMPLATE}
234+
</ng-template>
235+
</td>
233236
234-
<td ${POPOVER_EDIT_DIRECTIVE_WEIGHT}>
235-
{{element.weight}}
237+
<td ${POPOVER_EDIT_DIRECTIVE_WEIGHT}>
238+
{{element.weight}}
236239
237-
<ng-template #weightEdit>
238-
${WEIGHT_EDIT_TEMPLATE}
239-
</ng-template>
240-
</td>
241-
</tr>
240+
<ng-template #weightEdit>
241+
${WEIGHT_EDIT_TEMPLATE}
242+
</ng-template>
243+
</td>
244+
</tr>
245+
}
242246
</table>
243247
`,
244248
})

‎src/cdk-experimental/selection/selection.spec.ts

Lines changed: 38 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -442,15 +442,17 @@ describe('cdkSelectionColumn with multiple = false', () => {
442442
<button cdkSelectAll #toggleAll="cdkSelectAll" (click)="toggleAll.toggle($event)">
443443
{{selectAllState(toggleAll.indeterminate | async, toggleAll.checked | async)}}
444444
</button>
445-
<li *ngFor="let item of data; index as i">
446-
<button cdkSelectionToggle #toggle="cdkSelectionToggle"
447-
[cdkSelectionToggleValue]="item"
448-
[cdkSelectionToggleIndex]="i"
449-
(click)="toggle.toggle()">
450-
{{(toggle.checked | async) ? 'checked' : 'unchecked'}}
451-
</button>
452-
{{item}}
453-
</li>
445+
@for (item of data; track item; let i = $index) {
446+
<li>
447+
<button cdkSelectionToggle #toggle="cdkSelectionToggle"
448+
[cdkSelectionToggleValue]="item"
449+
[cdkSelectionToggleIndex]="i"
450+
(click)="toggle.toggle()">
451+
{{(toggle.checked | async) ? 'checked' : 'unchecked'}}
452+
</button>
453+
{{item}}
454+
</li>
455+
}
454456
</ul>`,
455457
})
456458
class ListWithMultiSelection {
@@ -460,7 +462,10 @@ class ListWithMultiSelection {
460462

461463
selectionChange?: SelectionChange<string>;
462464

463-
constructor(private readonly _elementRef: ElementRef, private readonly _cdr: ChangeDetectorRef) {}
465+
constructor(
466+
private readonly _elementRef: ElementRef,
467+
private readonly _cdr: ChangeDetectorRef,
468+
) {}
464469

465470
selectAllState(indeterminateState: boolean | null, checkedState: boolean | null): string {
466471
if (indeterminateState) {
@@ -502,15 +507,17 @@ class ListWithMultiSelection {
502507
template: `
503508
<ul cdkSelection [dataSource]="data" [cdkSelectionMultiple]="false"
504509
(cdkSelectionChange)="selectionChange = $event" >
505-
<li *ngFor="let item of data; index as i">
506-
<button cdkSelectionToggle #toggle="cdkSelectionToggle"
507-
[cdkSelectionToggleValue]="item"
508-
[cdkSelectionToggleIndex]="i"
509-
(click)="toggle.toggle()">
510-
{{(toggle.checked | async) ? 'checked' : 'unchecked'}}
511-
</button>
512-
{{item}}
513-
</li>
510+
@for (item of data; track item; let i = $index) {
511+
<li>
512+
<button cdkSelectionToggle #toggle="cdkSelectionToggle"
513+
[cdkSelectionToggleValue]="item"
514+
[cdkSelectionToggleIndex]="i"
515+
(click)="toggle.toggle()">
516+
{{(toggle.checked | async) ? 'checked' : 'unchecked'}}
517+
</button>
518+
{{item}}
519+
</li>
520+
}
514521
</ul>`,
515522
})
516523
class ListWithSingleSelection {
@@ -530,7 +537,10 @@ class ListWithSingleSelection {
530537
this._cdr.detectChanges();
531538
}
532539

533-
constructor(private readonly _elementRef: ElementRef, private readonly _cdr: ChangeDetectorRef) {}
540+
constructor(
541+
private readonly _elementRef: ElementRef,
542+
private readonly _cdr: ChangeDetectorRef,
543+
) {}
534544

535545
getSelectionToggle(index: number) {
536546
return this._elementRef.nativeElement.querySelectorAll('[cdkselectiontoggle]')[index];
@@ -585,7 +595,10 @@ class MultiSelectTableWithSelectionColumn {
585595
this._cdr.detectChanges();
586596
}
587597

588-
constructor(readonly elementRef: ElementRef, private readonly _cdr: ChangeDetectorRef) {}
598+
constructor(
599+
readonly elementRef: ElementRef,
600+
private readonly _cdr: ChangeDetectorRef,
601+
) {}
589602

590603
getSelectAll(): HTMLInputElement {
591604
return this.elementRef.nativeElement.querySelector('input[cdkselectall]');
@@ -632,7 +645,10 @@ class SingleSelectTableWithSelectionColumn {
632645
this._cdr.detectChanges();
633646
}
634647

635-
constructor(readonly elementRef: ElementRef, private readonly _cdr: ChangeDetectorRef) {}
648+
constructor(
649+
readonly elementRef: ElementRef,
650+
private readonly _cdr: ChangeDetectorRef,
651+
) {}
636652

637653
getSelectionToggle(index: number): HTMLInputElement {
638654
return this.elementRef.nativeElement.querySelectorAll('input[cdkselectiontoggle]')[index];

‎src/cdk-experimental/table-scroll-container/table-scroll-container.spec.ts

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -247,13 +247,15 @@ class FakeDataSource extends DataSource<TestData> {
247247
template: `
248248
<div cdkTableScrollContainer>
249249
<table cdk-table [dataSource]="dataSource">
250-
<ng-container [cdkColumnDef]="column" *ngFor="let column of columns"
251-
[sticky]="isStuck(stickyStartColumns, column)"
252-
[stickyEnd]="isStuck(stickyEndColumns, column)">
253-
<th cdk-header-cell *cdkHeaderCellDef> Header {{column}} </th>
254-
<td cdk-cell *cdkCellDef="let row"> {{column}} </td>
255-
<td cdk-footer-cell *cdkFooterCellDef> Footer {{column}} </td>
256-
</ng-container>
250+
@for (column of columns; track column) {
251+
<ng-container [cdkColumnDef]="column"
252+
[sticky]="isStuck(stickyStartColumns, column)"
253+
[stickyEnd]="isStuck(stickyEndColumns, column)">
254+
<th cdk-header-cell *cdkHeaderCellDef> Header {{column}} </th>
255+
<td cdk-cell *cdkCellDef="let row"> {{column}} </td>
256+
<td cdk-footer-cell *cdkFooterCellDef> Footer {{column}} </td>
257+
</ng-container>
258+
}
257259
258260
<tr cdk-header-row *cdkHeaderRowDef="columns; sticky: isStuck(stickyHeaders, 'header-1')">
259261
</tr>

‎src/cdk/a11y/focus-trap/focus-trap.spec.ts

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -339,10 +339,12 @@ class SimpleFocusTrap {
339339

340340
const AUTO_FOCUS_TEMPLATE = `
341341
<button type="button">Toggle</button>
342-
<div *ngIf="showTrappedRegion" cdkTrapFocus [cdkTrapFocusAutoCapture]="autoCaptureEnabled">
343-
<input id="auto-capture-target">
344-
<button>SAVE</button>
345-
</div>
342+
@if (showTrappedRegion) {
343+
<div cdkTrapFocus [cdkTrapFocusAutoCapture]="autoCaptureEnabled">
344+
<input id="auto-capture-target">
345+
<button>SAVE</button>
346+
</div>
347+
}
346348
`;
347349

348350
@Component({template: AUTO_FOCUS_TEMPLATE})
@@ -360,11 +362,13 @@ class FocusTrapWithAutoCaptureInShadowDom extends FocusTrapWithAutoCapture {}
360362

361363
@Component({
362364
template: `
363-
<div *ngIf="renderFocusTrap" [cdkTrapFocus]="_isFocusTrapEnabled">
364-
<input>
365-
<button>SAVE</button>
366-
</div>
367-
`,
365+
@if (renderFocusTrap) {
366+
<div [cdkTrapFocus]="_isFocusTrapEnabled">
367+
<input>
368+
<button>SAVE</button>
369+
</div>
370+
}
371+
`,
368372
})
369373
class FocusTrapWithBindings {
370374
@ViewChild(CdkTrapFocus) focusTrapDirective: CdkTrapFocus;

0 commit comments

Comments
 (0)