diff --git a/src/material/tree/tree.spec.ts b/src/material/tree/tree.spec.ts index b2c84b6ea6bd..83010628355d 100644 --- a/src/material/tree/tree.spec.ts +++ b/src/material/tree/tree.spec.ts @@ -5,18 +5,11 @@ * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ -import {FlatTreeControl, NestedTreeControl, TreeControl} from '@angular/cdk/tree'; import {Component, ViewChild, Type} from '@angular/core'; import {ComponentFixture, TestBed} from '@angular/core/testing'; import {BehaviorSubject, Observable, of} from 'rxjs'; import {map} from 'rxjs/operators'; -import { - MatTree, - MatTreeFlatDataSource, - MatTreeFlattener, - MatTreeModule, - MatTreeNestedDataSource, -} from './index'; +import {MatTree, MatTreeModule, MatTreeNestedDataSource} from './index'; describe('MatTree', () => { /** Represents an indent for expectNestedTreeToMatch */ @@ -98,7 +91,7 @@ describe('MatTree', () => { fixture = TestBed.createComponent(MatTreeAppWithToggle); component = fixture.componentInstance; - underlyingDataSource = component.underlyingDataSource; + underlyingDataSource = component.dataSource; treeElement = fixture.nativeElement.querySelector('mat-tree'); fixture.detectChanges(); @@ -107,9 +100,9 @@ describe('MatTree', () => { it('should expand/collapse the node', () => { expect(underlyingDataSource.data.length).toBe(3); - expect(component.treeControl.expansionModel.selected.length) - .withContext(`Expect no expanded node`) - .toBe(0); + let numExpandedNodes = + fixture.nativeElement.querySelectorAll('[aria-expanded="true"]').length; + expect(numExpandedNodes).withContext(`Expect no expanded node`).toBe(0); component.toggleRecursively = false; const data = underlyingDataSource.data; @@ -128,9 +121,8 @@ describe('MatTree', () => { (getNodes(treeElement)[2] as HTMLElement).click(); fixture.detectChanges(); - expect(component.treeControl.expansionModel.selected.length) - .withContext(`Expect node expanded one level`) - .toBe(1); + numExpandedNodes = fixture.nativeElement.querySelectorAll('[aria-expanded="true"]').length; + expect(numExpandedNodes).toBe(1); expectFlatTreeToMatch( treeElement, 40, @@ -143,9 +135,8 @@ describe('MatTree', () => { (getNodes(treeElement)[3] as HTMLElement).click(); fixture.detectChanges(); - expect(component.treeControl.expansionModel.selected.length) - .withContext(`Expect node expanded`) - .toBe(2); + numExpandedNodes = fixture.nativeElement.querySelectorAll('[aria-expanded="true"]').length; + expect(numExpandedNodes).withContext(`Expect node expanded`).toBe(2); expectFlatTreeToMatch( treeElement, 40, @@ -171,9 +162,9 @@ describe('MatTree', () => { it('should expand/collapse the node recursively', () => { expect(underlyingDataSource.data.length).toBe(3); - expect(component.treeControl.expansionModel.selected.length) - .withContext(`Expect no expanded node`) - .toBe(0); + let numExpandedNodes = + fixture.nativeElement.querySelectorAll('[aria-expanded="true"]').length; + expect(numExpandedNodes).withContext(`Expect no expanded node`).toBe(0); const data = underlyingDataSource.data; const child = underlyingDataSource.addChild(data[2]); @@ -191,9 +182,8 @@ describe('MatTree', () => { (getNodes(treeElement)[2] as HTMLElement).click(); fixture.detectChanges(); - expect(component.treeControl.expansionModel.selected.length) - .withContext(`Expect nodes expanded`) - .toBe(3); + numExpandedNodes = fixture.nativeElement.querySelectorAll('[aria-expanded="true"]').length; + expect(numExpandedNodes).withContext(`Expect nodes expanded`).toBe(2); expectFlatTreeToMatch( treeElement, 40, @@ -207,9 +197,8 @@ describe('MatTree', () => { (getNodes(treeElement)[2] as HTMLElement).click(); fixture.detectChanges(); - expect(component.treeControl.expansionModel.selected.length) - .withContext(`Expect node collapsed`) - .toBe(0); + numExpandedNodes = fixture.nativeElement.querySelectorAll('[aria-expanded="true"]').length; + expect(numExpandedNodes).withContext(`Expect node collapsed`).toBe(0); expectFlatTreeToMatch( treeElement, @@ -230,7 +219,7 @@ describe('MatTree', () => { fixture = TestBed.createComponent(WhenNodeMatTreeApp); component = fixture.componentInstance; - underlyingDataSource = component.underlyingDataSource; + underlyingDataSource = component.dataSource; treeElement = fixture.nativeElement.querySelector('mat-tree'); fixture.detectChanges(); @@ -432,7 +421,7 @@ describe('MatTree', () => { fixture = TestBed.createComponent(NestedMatTreeAppWithToggle); component = fixture.componentInstance; - underlyingDataSource = component.underlyingDataSource; + underlyingDataSource = component.dataSource; treeElement = fixture.nativeElement.querySelector('mat-tree'); fixture.detectChanges(); @@ -479,9 +468,9 @@ describe('MatTree', () => { (getNodes(treeElement)[1] as HTMLElement).click(); fixture.detectChanges(); - expect(component.treeControl.expansionModel.selected.length) - .withContext(`Expect node expanded`) - .toBe(1); + let numExpandedNodes = + fixture.nativeElement.querySelectorAll('[aria-expanded="true"]').length; + expect(numExpandedNodes).withContext(`Expect node expanded`).toBe(1); expectNestedTreeToMatch( treeElement, [`topping_1 - cheese_1 + base_1`], @@ -499,9 +488,8 @@ describe('MatTree', () => { [`topping_2 - cheese_2 + base_2`], [`topping_3 - cheese_3 + base_3`], ); - expect(component.treeControl.expansionModel.selected.length) - .withContext(`Expect node collapsed`) - .toBe(0); + numExpandedNodes = fixture.nativeElement.querySelectorAll('[aria-expanded="true"]').length; + expect(numExpandedNodes).withContext(`Expect node collapsed`).toBe(0); }); it('should expand/collapse the node recursively', () => { @@ -520,9 +508,9 @@ describe('MatTree', () => { (getNodes(treeElement)[1] as HTMLElement).click(); fixture.detectChanges(); - expect(component.treeControl.expansionModel.selected.length) - .withContext(`Expect node expanded`) - .toBe(3); + let numExpandedNodes = + fixture.nativeElement.querySelectorAll('[aria-expanded="true"]').length; + expect(numExpandedNodes).withContext(`Expect node expanded`).toBe(2); expectNestedTreeToMatch( treeElement, [`topping_1 - cheese_1 + base_1`], @@ -535,9 +523,8 @@ describe('MatTree', () => { (getNodes(treeElement)[1] as HTMLElement).click(); fixture.detectChanges(); - expect(component.treeControl.expansionModel.selected.length) - .withContext(`Expect node collapsed`) - .toBe(0); + numExpandedNodes = fixture.nativeElement.querySelectorAll('[aria-expanded="true"]').length; + expect(numExpandedNodes).withContext(`Expect node collapsed`).toBe(0); expectNestedTreeToMatch( treeElement, [`topping_1 - cheese_1 + base_1`], @@ -946,12 +933,17 @@ const TREE_DATA: FoodNode[] = [ }) class MatTreeWithNullOrUndefinedChild { childrenAccessor = (node: FoodNode): FoodNode[] => node.children || []; - dataSource: Observable = of(TREE_DATA); + dataSource: MatTreeNestedDataSource; + + constructor() { + this.dataSource = new MatTreeNestedDataSource(); + this.dataSource.data = TREE_DATA; + } } @Component({ template: ` - + {{node.name}} @@ -960,21 +952,18 @@ class MatTreeWithNullOrUndefinedChild { `, }) class MatNestedTreeWithNullOrUndefinedChild { - treeControl: NestedTreeControl; + childrenAccessor = (node: FoodNode): FoodNode[] => node.children || []; dataSource: MatTreeNestedDataSource; constructor() { - this.treeControl = new NestedTreeControl(this._getChildren); this.dataSource = new MatTreeNestedDataSource(); this.dataSource.data = TREE_DATA; } - - private _getChildren = (node: FoodNode) => node.children; } @Component({ template: ` - + @@ -985,12 +974,10 @@ class MatNestedTreeWithNullOrUndefinedChild { `, }) class NestedMatTreeApp { - getChildren = (node: TestData) => node.observableChildren; + childrenAccessor = (node: TestData) => node.observableChildren; isExpandable = (node: TestData) => node.observableChildren.pipe(map(children => children.length > 0)); - treeControl = new NestedTreeControl(this.getChildren); - dataSource = new MatTreeNestedDataSource(); underlyingDataSource = new FakeDataSource(); @@ -1005,7 +992,7 @@ class NestedMatTreeApp { @Component({ template: ` - + {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}} @@ -1013,7 +1000,7 @@ class NestedMatTreeApp { >>> {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}} -
+
@@ -1023,9 +1010,11 @@ class NestedMatTreeApp { class WhenNodeNestedMatTreeApp { isSpecial = (_: number, node: TestData) => node.isSpecial; - getChildren = (node: TestData) => node.observableChildren; + childrenAccessor = (node: TestData) => node.observableChildren; - treeControl: TreeControl = new NestedTreeControl(this.getChildren); + isExpanded = (node: TestData) => { + return !!this.tree && this.tree.isExpanded(node); + }; dataSource = new MatTreeNestedDataSource(); underlyingDataSource = new FakeDataSource(); @@ -1041,7 +1030,7 @@ class WhenNodeNestedMatTreeApp { @Component({ template: ` - + node.level; isExpandable = (node: TestData) => node.children.length > 0; - getChildren = (node: TestData) => node.observableChildren; - transformer = (node: TestData, level: number) => { - node.level = level; - return node; - }; - - treeFlattener = new MatTreeFlattener( - this.transformer, - this.getLevel, - this.isExpandable, - this.getChildren, - ); + childrenAccessor = (node: TestData) => node.observableChildren; - treeControl = new FlatTreeControl(this.getLevel, this.isExpandable); - - dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); - underlyingDataSource = new FakeDataSource(); + dataSource: FakeDataSource = new FakeDataSource(); @ViewChild(MatTree) tree: MatTree; - - constructor() { - this.underlyingDataSource.connect().subscribe(data => { - this.dataSource.data = data; - }); - } } @Component({ template: ` - + {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}} -
+
@@ -1102,26 +1070,22 @@ class MatTreeAppWithToggle { class NestedMatTreeAppWithToggle { toggleRecursively: boolean = true; - getChildren = (node: TestData) => node.observableChildren; + childrenAccessor = (node: TestData) => node.observableChildren; isExpandable = (node: TestData) => node.observableChildren.pipe(map(children => children.length > 0)); - treeControl = new NestedTreeControl(this.getChildren); - dataSource = new MatTreeNestedDataSource(); - underlyingDataSource = new FakeDataSource(); + isExpanded = (node: TestData) => { + return !!this.tree && this.tree.isExpanded(node); + }; - @ViewChild(MatTree) tree: MatTree; + dataSource = new FakeDataSource(); - constructor() { - this.underlyingDataSource.connect().subscribe(data => { - this.dataSource.data = data; - }); - } + @ViewChild(MatTree) tree: MatTree; } @Component({ template: ` - + @@ -1138,31 +1102,10 @@ class NestedMatTreeAppWithToggle { class WhenNodeMatTreeApp { isSpecial = (_: number, node: TestData) => node.isSpecial; - getLevel = (node: TestData) => node.level; isExpandable = (node: TestData) => node.children.length > 0; - getChildren = (node: TestData) => node.observableChildren; - transformer = (node: TestData, level: number) => { - node.level = level; - return node; - }; - - treeFlattener = new MatTreeFlattener( - this.transformer, - this.getLevel, - this.isExpandable, - this.getChildren, - ); + childrenAccessor = (node: TestData) => node.observableChildren; - treeControl = new FlatTreeControl(this.getLevel, this.isExpandable); - - dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); - underlyingDataSource = new FakeDataSource(); + dataSource = new FakeDataSource(); @ViewChild(MatTree) tree: MatTree; - - constructor() { - this.underlyingDataSource.connect().subscribe(data => { - this.dataSource.data = data; - }); - } }