Skip to content

Commit 7f1c2ca

Browse files
crisbetommalerba
authored andcommitted
fix(tree): not picking up indirect descendant node definitions (#17522)
Fixes the CDK tree not picking up definitions that aren't direct descendants. Also fixes some tests that won't fail if the tree doesn't render anything.
1 parent aadfcb5 commit 7f1c2ca

File tree

2 files changed

+41
-14
lines changed

2 files changed

+41
-14
lines changed

src/cdk/tree/tree.spec.ts

Lines changed: 36 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -95,9 +95,9 @@ describe('CdkTree', () => {
9595
it('with the right accessibility roles', () => {
9696
expect(treeElement.getAttribute('role')).toBe('tree');
9797

98-
getNodes(treeElement).forEach(node => {
99-
expect(node.getAttribute('role')).toBe('treeitem');
100-
});
98+
expect(getNodes(treeElement).every(node => {
99+
return node.getAttribute('role') === 'treeitem';
100+
})).toBe(true);
101101
});
102102

103103
it('with the right data', () => {
@@ -469,6 +469,15 @@ describe('CdkTree', () => {
469469
expect(changedNodes[2].getAttribute('initialIndex')).toBe(null);
470470
});
471471
});
472+
473+
it('should pick up indirect descendant node definitions', () => {
474+
configureCdkTreeTestingModule([SimpleCdkTreeAppWithIndirectNodes]);
475+
const fixture = TestBed.createComponent(SimpleCdkTreeAppWithIndirectNodes);
476+
fixture.detectChanges();
477+
treeElement = fixture.nativeElement.querySelector('cdk-tree');
478+
479+
expect(getNodes(treeElement).length).toBe(3);
480+
});
472481
});
473482

474483
describe('nested tree', () => {
@@ -502,9 +511,9 @@ describe('CdkTree', () => {
502511
it('with the right accessibility roles', () => {
503512
expect(treeElement.getAttribute('role')).toBe('tree');
504513

505-
getNodes(treeElement).forEach(node => {
506-
expect(node.getAttribute('role')).toBe('treeitem');
507-
});
514+
expect(getNodes(treeElement).every(node => {
515+
return node.getAttribute('role') === 'treeitem';
516+
})).toBe(true);
508517
});
509518

510519
it('with the right data', () => {
@@ -827,9 +836,9 @@ describe('CdkTree', () => {
827836
getNodes(initialNodes[0]).forEach((node: Element, index: number) => {
828837
node.setAttribute('initialIndex', `c${index}`);
829838
});
830-
getNodes(initialNodes[0]).forEach((node, index) => {
831-
expect(node.getAttribute('initialIndex')).toBe(`c${index}`);
832-
});
839+
expect(getNodes(initialNodes[0]).every((node, index) => {
840+
return node.getAttribute('initialIndex') === `c${index}`;
841+
})).toBe(true);
833842
}
834843

835844
function mutateChildren(parent: TestData) {
@@ -965,10 +974,8 @@ describe('CdkTree', () => {
965974

966975
const depthElements = Array.from(treeElement.querySelectorAll('.tree-test-level')!);
967976
const expectedLevels = ['0', '0', '1', '2', '0'];
968-
depthElements.forEach((element, index) => {
969-
const actualLevel = element.textContent!.trim();
970-
expect(actualLevel).toBe(expectedLevels[index]);
971-
});
977+
const actualLevels = depthElements.map(element => element.textContent!.trim());
978+
expect(actualLevels).toEqual(expectedLevels);
972979
expect(depthElements.length).toBe(5);
973980
});
974981
});
@@ -1158,6 +1165,22 @@ class SimpleCdkTreeApp {
11581165
@ViewChildren(CdkTreeNodePadding) paddingNodes: QueryList<CdkTreeNodePadding<TestData>>;
11591166
}
11601167

1168+
@Component({
1169+
template: `
1170+
<cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
1171+
<ng-container [ngSwitch]="true">
1172+
<cdk-tree-node *cdkTreeNodeDef="let node" class="customNodeClass"
1173+
cdkTreeNodePadding [cdkTreeNodePaddingIndent]="indent"
1174+
cdkTreeNodeToggle>
1175+
{{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
1176+
</cdk-tree-node>
1177+
</ng-container>
1178+
</cdk-tree>
1179+
`
1180+
})
1181+
class SimpleCdkTreeAppWithIndirectNodes extends SimpleCdkTreeApp {
1182+
}
1183+
11611184
@Component({
11621185
template: `
11631186
<cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">

src/cdk/tree/tree.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,11 @@ export class CdkTree<T> implements AfterContentChecked, CollectionViewer, OnDest
106106
@ViewChild(CdkTreeNodeOutlet, {static: true}) _nodeOutlet: CdkTreeNodeOutlet;
107107

108108
/** The tree node template for the tree */
109-
@ContentChildren(CdkTreeNodeDef) _nodeDefs: QueryList<CdkTreeNodeDef<T>>;
109+
@ContentChildren(CdkTreeNodeDef, {
110+
// We need to use `descendants: true`, because Ivy will no longer match
111+
// indirect descendants if it's left as false.
112+
descendants: true
113+
}) _nodeDefs: QueryList<CdkTreeNodeDef<T>>;
110114

111115
// TODO(tinayuangao): Setup a listener for scrolling, emit the calculated view to viewChange.
112116
// Remove the MAX_VALUE in viewChange

0 commit comments

Comments
 (0)