Skip to content

Commit

Permalink
refactor(material/tree): remove deprecated classes from mat-tree tests.
Browse files Browse the repository at this point in the history 
Fork mat-tree tests to mat-tree-using-tree-control.Remove uses of deprecated members from mat-tree tests.
  • Loading branch information
@zarend
zarend committed Oct 10, 2023
1 parent 73f8c72 commit bc56d8d
Showing 1 changed file with 58 additions and 115 deletions.
173 changes: 58 additions & 115 deletions src/material/tree/tree.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -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();
Expand All @@ -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;
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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]);
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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();
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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`],
Expand All @@ -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', () => {
Expand All @@ -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`],
Expand All @@ -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`],
Expand Down Expand Up @@ -946,12 +933,17 @@ const TREE_DATA: FoodNode[] = [
})
class MatTreeWithNullOrUndefinedChild {
childrenAccessor = (node: FoodNode): FoodNode[] => node.children || [];
dataSource: Observable<FoodNode[]> = of(TREE_DATA);
dataSource: MatTreeNestedDataSource<FoodNode>;

constructor() {
this.dataSource = new MatTreeNestedDataSource();
this.dataSource.data = TREE_DATA;
}
}

@Component({
template: `
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<mat-tree [dataSource]="dataSource" [childrenAccessor]="childrenAccessor">
<mat-nested-tree-node *matTreeNodeDef="let node" class="customNodeClass">
{{node.name}}
<ng-template matTreeNodeOutlet></ng-template>
Expand All @@ -960,21 +952,18 @@ class MatTreeWithNullOrUndefinedChild {
`,
})
class MatNestedTreeWithNullOrUndefinedChild {
treeControl: NestedTreeControl<FoodNode>;
childrenAccessor = (node: FoodNode): FoodNode[] => node.children || [];
dataSource: MatTreeNestedDataSource<FoodNode>;

constructor() {
this.treeControl = new NestedTreeControl<FoodNode>(this._getChildren);
this.dataSource = new MatTreeNestedDataSource();
this.dataSource.data = TREE_DATA;
}

private _getChildren = (node: FoodNode) => node.children;
}

@Component({
template: `
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<mat-tree [dataSource]="dataSource" [childrenAccessor]="childrenAccessor">
<mat-nested-tree-node *matTreeNodeDef="let node" class="customNodeClass"
[isExpandable]="isExpandable(node) | async"
[isDisabled]="node.isDisabled">
Expand All @@ -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();

Expand All @@ -1005,15 +992,15 @@ class NestedMatTreeApp {

@Component({
template: `
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<mat-tree [dataSource]="dataSource" [childrenAccessor]="childrenAccessor">
<mat-nested-tree-node *matTreeNodeDef="let node">
{{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
<ng-template matTreeNodeOutlet></ng-template>
</mat-nested-tree-node>
<mat-nested-tree-node *matTreeNodeDef="let node; when: isSpecial"
matTreeNodeToggle>
>>> {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
<div *ngIf="treeControl.isExpanded(node)">
<div *ngIf="isExpanded(node)">
<ng-template matTreeNodeOutlet></ng-template>
</div>
</mat-nested-tree-node>
Expand All @@ -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<TestData> = new NestedTreeControl(this.getChildren);
isExpanded = (node: TestData) => {
return !!this.tree && this.tree.isExpanded(node);
};

dataSource = new MatTreeNestedDataSource();
underlyingDataSource = new FakeDataSource();
Expand All @@ -1041,7 +1030,7 @@ class WhenNodeNestedMatTreeApp {

@Component({
template: `
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<mat-tree [dataSource]="dataSource" [childrenAccessor]="childrenAccessor">
<mat-tree-node *matTreeNodeDef="let node" class="customNodeClass"
[isExpandable]="isExpandable(node)"
[isDisabled]="node.isDisabled"
Expand All @@ -1055,44 +1044,23 @@ class WhenNodeNestedMatTreeApp {
class MatTreeAppWithToggle {
toggleRecursively: boolean = true;

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<TestData, TestData>(
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<TestData>;

constructor() {
this.underlyingDataSource.connect().subscribe(data => {
this.dataSource.data = data;
});
}
}

@Component({
template: `
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<mat-tree [dataSource]="dataSource" [childrenAccessor]="childrenAccessor">
<mat-nested-tree-node *matTreeNodeDef="let node" class="customNodeClass"
[isExpandable]="isExpandable(node) | async"
matTreeNodeToggle
[matTreeNodeToggleRecursive]="toggleRecursively">
{{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
<div *ngIf="treeControl.isExpanded(node)">
<div *ngIf="isExpanded(node)">
<ng-template matTreeNodeOutlet></ng-template>
</div>
</mat-nested-tree-node>
Expand All @@ -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<TestData>;
dataSource = new FakeDataSource();

constructor() {
this.underlyingDataSource.connect().subscribe(data => {
this.dataSource.data = data;
});
}
@ViewChild(MatTree) tree: MatTree<TestData>;
}

@Component({
template: `
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<mat-tree [dataSource]="dataSource" [childrenAccessor]="childrenAccessor">
<mat-tree-node *matTreeNodeDef="let node" class="customNodeClass"
matTreeNodePadding [matTreeNodePaddingIndent]="28"
matTreeNodeToggle>
Expand All @@ -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<TestData, TestData>(
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<TestData>;

constructor() {
this.underlyingDataSource.connect().subscribe(data => {
this.dataSource.data = data;
});
}
}

0 comments on commit bc56d8d

Please sign in to comment.