diff --git a/src/cdk/tree/tree.spec.ts b/src/cdk/tree/tree.spec.ts index 24e40195ec6c..06320ceb9bcf 100644 --- a/src/cdk/tree/tree.spec.ts +++ b/src/cdk/tree/tree.spec.ts @@ -58,12 +58,12 @@ describe('CdkTree', () => { configureCdkTreeTestingModule([SimpleCdkTreeApp]); fixture = TestBed.createComponent(SimpleCdkTreeApp); + fixture.detectChanges(); + component = fixture.componentInstance; dataSource = component.dataSource as FakeDataSource; tree = component.tree; treeElement = fixture.nativeElement.querySelector('cdk-tree'); - - fixture.detectChanges(); }); it('with a connected data source', () => { @@ -141,12 +141,12 @@ describe('CdkTree', () => { configureCdkTreeTestingModule([CdkTreeAppWithToggle]); fixture = TestBed.createComponent(CdkTreeAppWithToggle); + fixture.detectChanges(); + component = fixture.componentInstance; dataSource = component.dataSource as FakeDataSource; tree = component.tree; treeElement = fixture.nativeElement.querySelector('cdk-tree'); - - fixture.detectChanges(); }); it('should expand/collapse the node', () => { @@ -227,12 +227,12 @@ describe('CdkTree', () => { configureCdkTreeTestingModule([WhenNodeCdkTreeApp]); fixture = TestBed.createComponent(WhenNodeCdkTreeApp); + fixture.detectChanges(); + component = fixture.componentInstance; dataSource = component.dataSource as FakeDataSource; tree = component.tree; treeElement = fixture.nativeElement.querySelector('cdk-tree'); - - fixture.detectChanges(); }); it('with the right data', () => { @@ -265,13 +265,13 @@ describe('CdkTree', () => { beforeEach(() => { configureCdkTreeTestingModule([ArrayDataSourceCdkTreeApp]); fixture = TestBed.createComponent(ArrayDataSourceCdkTreeApp); + fixture.detectChanges(); + component = fixture.componentInstance; dataSource = component.dataSource as FakeDataSource; tree = component.tree; treeElement = fixture.nativeElement.querySelector('cdk-tree'); - - fixture.detectChanges(); }); it('with the right data', () => { @@ -305,12 +305,12 @@ describe('CdkTree', () => { configureCdkTreeTestingModule([ObservableDataSourceCdkTreeApp]); fixture = TestBed.createComponent(ObservableDataSourceCdkTreeApp); + fixture.detectChanges(); + component = fixture.componentInstance; dataSource = component.dataSource as FakeDataSource; tree = component.tree; treeElement = fixture.nativeElement.querySelector('cdk-tree'); - - fixture.detectChanges(); }); it('with the right data', () => { @@ -343,13 +343,14 @@ describe('CdkTree', () => { function createTrackByTestComponent(trackByStrategy: 'reference' | 'property' | 'index') { configureCdkTreeTestingModule([CdkTreeAppWithTrackBy]); fixture = TestBed.createComponent(CdkTreeAppWithTrackBy); + fixture.detectChanges(); + component = fixture.componentInstance; component.trackByStrategy = trackByStrategy; dataSource = component.dataSource as FakeDataSource; tree = component.tree; treeElement = fixture.nativeElement.querySelector('cdk-tree'); - fixture.detectChanges(); // Each node receives an attribute 'initialIndex' the element's original place getNodes(treeElement).forEach((node: Element, index: number) => { @@ -436,13 +437,12 @@ describe('CdkTree', () => { beforeEach(() => { configureCdkTreeTestingModule([NestedCdkTreeApp]); fixture = TestBed.createComponent(NestedCdkTreeApp); + fixture.detectChanges(); component = fixture.componentInstance; dataSource = component.dataSource as FakeDataSource; tree = component.tree; treeElement = fixture.nativeElement.querySelector('cdk-tree'); - - fixture.detectChanges(); }); it('with a connected data source', () => { @@ -524,13 +524,12 @@ describe('CdkTree', () => { beforeEach(() => { configureCdkTreeTestingModule([StaticNestedCdkTreeApp]); fixture = TestBed.createComponent(StaticNestedCdkTreeApp); + fixture.detectChanges(); component = fixture.componentInstance; dataSource = component.dataSource as FakeDataSource; tree = component.tree; treeElement = fixture.nativeElement.querySelector('cdk-tree'); - - fixture.detectChanges(); }); it('with the right data', () => { @@ -551,13 +550,12 @@ describe('CdkTree', () => { beforeEach(() => { configureCdkTreeTestingModule([WhenNodeNestedCdkTreeApp]); fixture = TestBed.createComponent(WhenNodeNestedCdkTreeApp); + fixture.detectChanges(); component = fixture.componentInstance; dataSource = component.dataSource as FakeDataSource; tree = component.tree; treeElement = fixture.nativeElement.querySelector('cdk-tree'); - - fixture.detectChanges(); }); it('with the right data', () => { @@ -590,13 +588,12 @@ describe('CdkTree', () => { beforeEach(() => { configureCdkTreeTestingModule([NestedCdkTreeAppWithToggle]); fixture = TestBed.createComponent(NestedCdkTreeAppWithToggle); + fixture.detectChanges(); component = fixture.componentInstance; dataSource = component.dataSource as FakeDataSource; tree = component.tree; treeElement = fixture.nativeElement.querySelector('cdk-tree'); - - fixture.detectChanges(); }); it('should expand/collapse the node multiple times', () => { @@ -689,13 +686,12 @@ describe('CdkTree', () => { beforeEach(() => { configureCdkTreeTestingModule([ArrayDataSourceNestedCdkTreeApp]); fixture = TestBed.createComponent(ArrayDataSourceNestedCdkTreeApp); + fixture.detectChanges(); component = fixture.componentInstance; dataSource = component.dataSource as FakeDataSource; tree = component.tree; treeElement = fixture.nativeElement.querySelector('cdk-tree'); - - fixture.detectChanges(); }); it('with the right data', () => { @@ -726,13 +722,12 @@ describe('CdkTree', () => { beforeEach(() => { configureCdkTreeTestingModule([ObservableDataSourceNestedCdkTreeApp]); fixture = TestBed.createComponent(ObservableDataSourceNestedCdkTreeApp); + fixture.detectChanges(); component = fixture.componentInstance; dataSource = component.dataSource as FakeDataSource; tree = component.tree; treeElement = fixture.nativeElement.querySelector('cdk-tree'); - - fixture.detectChanges(); }); it('with the right data', () => { @@ -763,6 +758,8 @@ describe('CdkTree', () => { function createTrackByTestComponent(trackByStrategy: 'reference' | 'property' | 'index') { configureCdkTreeTestingModule([NestedCdkTreeAppWithTrackBy]); fixture = TestBed.createComponent(NestedCdkTreeAppWithTrackBy); + fixture.detectChanges(); + component = fixture.componentInstance; component.trackByStrategy = trackByStrategy; dataSource = component.dataSource as FakeDataSource; @@ -770,8 +767,6 @@ describe('CdkTree', () => { tree = component.tree; treeElement = fixture.nativeElement.querySelector('cdk-tree'); - fixture.detectChanges(); - // Each node receives an attribute 'initialIndex' the element's original place getNodes(treeElement).forEach((node: Element, index: number) => { node.setAttribute('initialIndex', index.toString()); @@ -912,13 +907,12 @@ describe('CdkTree', () => { beforeEach(() => { configureCdkTreeTestingModule([DepthNestedCdkTreeApp]); fixture = TestBed.createComponent(DepthNestedCdkTreeApp); + fixture.detectChanges(); component = fixture.componentInstance; dataSource = component.dataSource as FakeDataSource; tree = component.tree; treeElement = fixture.nativeElement.querySelector('cdk-tree'); - - fixture.detectChanges(); }); it('should have correct depth for nested tree', () => { diff --git a/src/cdk/tree/tree.ts b/src/cdk/tree/tree.ts index 002d583ea569..28dcf9b0a21e 100644 --- a/src/cdk/tree/tree.ts +++ b/src/cdk/tree/tree.ts @@ -99,7 +99,7 @@ export class CdkTree @Input() trackBy: TrackByFunction; // Outlets within the tree's template where the dataNodes will be inserted. - @ViewChild(CdkTreeNodeOutlet) _nodeOutlet: CdkTreeNodeOutlet; + @ViewChild(CdkTreeNodeOutlet, {static: true}) _nodeOutlet: CdkTreeNodeOutlet; /** The tree node template for the tree */ @ContentChildren(CdkTreeNodeDef) _nodeDefs: QueryList>; diff --git a/src/lib/tree/tree.ts b/src/lib/tree/tree.ts index 19458ab8451a..e7a672642494 100644 --- a/src/lib/tree/tree.ts +++ b/src/lib/tree/tree.ts @@ -29,5 +29,5 @@ import {MatTreeNodeOutlet} from './outlet'; }) export class MatTree extends CdkTree { // Outlets within the tree's template where the dataNodes will be inserted. - @ViewChild(MatTreeNodeOutlet) _nodeOutlet: MatTreeNodeOutlet; + @ViewChild(MatTreeNodeOutlet, {static: true}) _nodeOutlet: MatTreeNodeOutlet; }