Skip to content

Commit 894344d

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. (cherry picked from commit 364d478)
1 parent 157c0e2 commit 894344d

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)