Skip to content

Commit

Permalink
test(multiple): switch tests to new control flow
Browse files Browse the repository at this point in the history 
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)
  • Loading branch information
@crisbeto
crisbeto committed Nov 6, 2023
1 parent 157c0e2 commit 894344d
Show file tree
Hide file tree
Showing 65 changed files with 1,159 additions and 829 deletions.
58 changes: 31 additions & 27 deletions src/cdk-experimental/popover-edit/popover-edit.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,18 +194,20 @@ abstract class BaseTestComponent {
${WEIGHT_EDIT_TEMPLATE}
</ng-template>
<tr *ngFor="let element of elements">
<td> just a cell </td>
<td ${POPOVER_EDIT_DIRECTIVE_NAME}
[cdkPopoverEditContext]="element">
${CELL_TEMPLATE}
</td>
<td ${POPOVER_EDIT_DIRECTIVE_WEIGHT}>
{{element.weight}}
</td>
</tr>
@for (element of elements; track element) {
<tr>
<td> just a cell </td>
<td ${POPOVER_EDIT_DIRECTIVE_NAME}
[cdkPopoverEditContext]="element">
${CELL_TEMPLATE}
</td>
<td ${POPOVER_EDIT_DIRECTIVE_WEIGHT}>
{{element.weight}}
</td>
</tr>
}
</table>
`,
})
Expand All @@ -220,25 +222,27 @@ class VanillaTableOutOfCell extends BaseTestComponent {
@Component({
template: `
<table #table editable [dir]="direction">
<tr *ngFor="let element of elements">
<td> just a cell </td>
@for (element of elements; track element) {
<tr>
<td> just a cell </td>
<td ${POPOVER_EDIT_DIRECTIVE_NAME}>
${CELL_TEMPLATE}
<td ${POPOVER_EDIT_DIRECTIVE_NAME}>
${CELL_TEMPLATE}
<ng-template #nameEdit>
${NAME_EDIT_TEMPLATE}
</ng-template>
</td>
<ng-template #nameEdit>
${NAME_EDIT_TEMPLATE}
</ng-template>
</td>
<td ${POPOVER_EDIT_DIRECTIVE_WEIGHT}>
{{element.weight}}
<td ${POPOVER_EDIT_DIRECTIVE_WEIGHT}>
{{element.weight}}
<ng-template #weightEdit>
${WEIGHT_EDIT_TEMPLATE}
</ng-template>
</td>
</tr>
<ng-template #weightEdit>
${WEIGHT_EDIT_TEMPLATE}
</ng-template>
</td>
</tr>
}
</table>
`,
})
Expand Down
60 changes: 38 additions & 22 deletions src/cdk-experimental/selection/selection.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -442,15 +442,17 @@ describe('cdkSelectionColumn with multiple = false', () => {
<button cdkSelectAll #toggleAll="cdkSelectAll" (click)="toggleAll.toggle($event)">
{{selectAllState(toggleAll.indeterminate | async, toggleAll.checked | async)}}
</button>
<li *ngFor="let item of data; index as i">
<button cdkSelectionToggle #toggle="cdkSelectionToggle"
[cdkSelectionToggleValue]="item"
[cdkSelectionToggleIndex]="i"
(click)="toggle.toggle()">
{{(toggle.checked | async) ? 'checked' : 'unchecked'}}
</button>
{{item}}
</li>
@for (item of data; track item; let i = $index) {
<li>
<button cdkSelectionToggle #toggle="cdkSelectionToggle"
[cdkSelectionToggleValue]="item"
[cdkSelectionToggleIndex]="i"
(click)="toggle.toggle()">
{{(toggle.checked | async) ? 'checked' : 'unchecked'}}
</button>
{{item}}
</li>
}
</ul>`,
})
class ListWithMultiSelection {
Expand All @@ -460,7 +462,10 @@ class ListWithMultiSelection {

selectionChange?: SelectionChange<string>;

constructor(private readonly _elementRef: ElementRef, private readonly _cdr: ChangeDetectorRef) {}
constructor(
private readonly _elementRef: ElementRef,
private readonly _cdr: ChangeDetectorRef,
) {}

selectAllState(indeterminateState: boolean | null, checkedState: boolean | null): string {
if (indeterminateState) {
Expand Down Expand Up @@ -502,15 +507,17 @@ class ListWithMultiSelection {
template: `
<ul cdkSelection [dataSource]="data" [cdkSelectionMultiple]="false"
(cdkSelectionChange)="selectionChange = $event" >
<li *ngFor="let item of data; index as i">
<button cdkSelectionToggle #toggle="cdkSelectionToggle"
[cdkSelectionToggleValue]="item"
[cdkSelectionToggleIndex]="i"
(click)="toggle.toggle()">
{{(toggle.checked | async) ? 'checked' : 'unchecked'}}
</button>
{{item}}
</li>
@for (item of data; track item; let i = $index) {
<li>
<button cdkSelectionToggle #toggle="cdkSelectionToggle"
[cdkSelectionToggleValue]="item"
[cdkSelectionToggleIndex]="i"
(click)="toggle.toggle()">
{{(toggle.checked | async) ? 'checked' : 'unchecked'}}
</button>
{{item}}
</li>
}
</ul>`,
})
class ListWithSingleSelection {
Expand All @@ -530,7 +537,10 @@ class ListWithSingleSelection {
this._cdr.detectChanges();
}

constructor(private readonly _elementRef: ElementRef, private readonly _cdr: ChangeDetectorRef) {}
constructor(
private readonly _elementRef: ElementRef,
private readonly _cdr: ChangeDetectorRef,
) {}

getSelectionToggle(index: number) {
return this._elementRef.nativeElement.querySelectorAll('[cdkselectiontoggle]')[index];
Expand Down Expand Up @@ -585,7 +595,10 @@ class MultiSelectTableWithSelectionColumn {
this._cdr.detectChanges();
}

constructor(readonly elementRef: ElementRef, private readonly _cdr: ChangeDetectorRef) {}
constructor(
readonly elementRef: ElementRef,
private readonly _cdr: ChangeDetectorRef,
) {}

getSelectAll(): HTMLInputElement {
return this.elementRef.nativeElement.querySelector('input[cdkselectall]');
Expand Down Expand Up @@ -632,7 +645,10 @@ class SingleSelectTableWithSelectionColumn {
this._cdr.detectChanges();
}

constructor(readonly elementRef: ElementRef, private readonly _cdr: ChangeDetectorRef) {}
constructor(
readonly elementRef: ElementRef,
private readonly _cdr: ChangeDetectorRef,
) {}

getSelectionToggle(index: number): HTMLInputElement {
return this.elementRef.nativeElement.querySelectorAll('input[cdkselectiontoggle]')[index];
Expand Down
16 changes: 9 additions & 7 deletions src/cdk-experimental/table-scroll-container/table-scroll-container.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -247,13 +247,15 @@ class FakeDataSource extends DataSource<TestData> {
template: `
<div cdkTableScrollContainer>
<table cdk-table [dataSource]="dataSource">
<ng-container [cdkColumnDef]="column" *ngFor="let column of columns"
[sticky]="isStuck(stickyStartColumns, column)"
[stickyEnd]="isStuck(stickyEndColumns, column)">
<th cdk-header-cell *cdkHeaderCellDef> Header {{column}} </th>
<td cdk-cell *cdkCellDef="let row"> {{column}} </td>
<td cdk-footer-cell *cdkFooterCellDef> Footer {{column}} </td>
</ng-container>
@for (column of columns; track column) {
<ng-container [cdkColumnDef]="column"
[sticky]="isStuck(stickyStartColumns, column)"
[stickyEnd]="isStuck(stickyEndColumns, column)">
<th cdk-header-cell *cdkHeaderCellDef> Header {{column}} </th>
<td cdk-cell *cdkCellDef="let row"> {{column}} </td>
<td cdk-footer-cell *cdkFooterCellDef> Footer {{column}} </td>
</ng-container>
}
<tr cdk-header-row *cdkHeaderRowDef="columns; sticky: isStuck(stickyHeaders, 'header-1')">
</tr>
Expand Down
22 changes: 13 additions & 9 deletions src/cdk/a11y/focus-trap/focus-trap.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -339,10 +339,12 @@ class SimpleFocusTrap {

const AUTO_FOCUS_TEMPLATE = `
<button type="button">Toggle</button>
<div *ngIf="showTrappedRegion" cdkTrapFocus [cdkTrapFocusAutoCapture]="autoCaptureEnabled">
<input id="auto-capture-target">
<button>SAVE</button>
</div>
@if (showTrappedRegion) {
<div cdkTrapFocus [cdkTrapFocusAutoCapture]="autoCaptureEnabled">
<input id="auto-capture-target">
<button>SAVE</button>
</div>
}
`;

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

@Component({
template: `
<div *ngIf="renderFocusTrap" [cdkTrapFocus]="_isFocusTrapEnabled">
<input>
<button>SAVE</button>
</div>
`,
@if (renderFocusTrap) {
<div [cdkTrapFocus]="_isFocusTrapEnabled">
<input>
<button>SAVE</button>
</div>
}
`,
})
class FocusTrapWithBindings {
@ViewChild(CdkTrapFocus) focusTrapDirective: CdkTrapFocus;
Expand Down
Loading

0 comments on commit 894344d

Please sign in to comment.