/**
 * @license
 * Copyright Google LLC All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.dev/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} from 'rxjs';
import {map} from 'rxjs/operators';
import {
  MatTree,
  MatTreeFlatDataSource,
  MatTreeFlattener,
  MatTreeModule,
  MatTreeNestedDataSource,
} from './index';

describe('MatTree', () => {
  /** Represents an indent for expectNestedTreeToMatch */
  const _ = {};

  let treeElement: HTMLElement;
  let underlyingDataSource: FakeDataSource;

  function configureMatTreeTestingModule(declarations: Type<any>[]) {
    TestBed.configureTestingModule({
      imports: [MatTreeModule],
      declarations: declarations,
    });
  }

  describe('flat tree', () => {
    describe('should initialize', () => {
      let fixture: ComponentFixture<SimpleMatTreeApp>;
      let component: SimpleMatTreeApp;

      beforeEach(() => {
        configureMatTreeTestingModule([SimpleMatTreeApp]);
        fixture = TestBed.createComponent(SimpleMatTreeApp);

        component = fixture.componentInstance;
        underlyingDataSource = component.underlyingDataSource;
        treeElement = fixture.nativeElement.querySelector('mat-tree');

        fixture.detectChanges();
      });

      it('with rendered dataNodes', () => {
        const nodes = getNodes(treeElement);

        expect(nodes).withContext('Expect nodes to be defined').toBeDefined();
        expect(nodes[0].classList).toContain('customNodeClass');
      });

      it('with the right accessibility roles', () => {
        expect(treeElement.getAttribute('role')).toBe('tree');

        getNodes(treeElement).forEach(node => {
          expect(node.getAttribute('role')).toBe('treeitem');
        });
      });

      it('with the right aria-level attrs', () => {
        // add a child to the first node
        const data = underlyingDataSource.data;
        underlyingDataSource.addChild(data[2]);
        component.treeControl.expandAll();
        fixture.detectChanges();

        const ariaLevels = getNodes(treeElement).map(n => n.getAttribute('aria-level'));
        expect(ariaLevels).toEqual(['1', '1', '1', '2']);
      });

      it('with the right aria-expanded attrs', () => {
        // add a child to the first node
        const data = underlyingDataSource.data;
        underlyingDataSource.addChild(data[2]);
        fixture.detectChanges();
        let ariaExpandedStates = getNodes(treeElement).map(n => n.getAttribute('aria-expanded'));
        expect(ariaExpandedStates).toEqual([null, null, 'false']);

        component.treeControl.expandAll();
        fixture.detectChanges();

        ariaExpandedStates = getNodes(treeElement).map(n => n.getAttribute('aria-expanded'));
        expect(ariaExpandedStates).toEqual([null, null, 'true', null]);
      });

      it('with the right data', () => {
        expect(underlyingDataSource.data.length).toBe(3);

        const data = underlyingDataSource.data;
        expectFlatTreeToMatch(
          treeElement,
          28,
          [`topping_1 - cheese_1 + base_1`],
          [`topping_2 - cheese_2 + base_2`],
          [`topping_3 - cheese_3 + base_3`],
        );

        underlyingDataSource.addChild(data[2]);
        fixture.detectChanges();

        expectFlatTreeToMatch(
          treeElement,
          28,
          [`topping_1 - cheese_1 + base_1`],
          [`topping_2 - cheese_2 + base_2`],
          [`topping_3 - cheese_3 + base_3`],
          [`_, topping_4 - cheese_4 + base_4`],
        );
      });
    });

    describe('with toggle', () => {
      let fixture: ComponentFixture<MatTreeAppWithToggle>;
      let component: MatTreeAppWithToggle;

      beforeEach(() => {
        configureMatTreeTestingModule([MatTreeAppWithToggle]);
        fixture = TestBed.createComponent(MatTreeAppWithToggle);

        component = fixture.componentInstance;
        underlyingDataSource = component.underlyingDataSource;
        treeElement = fixture.nativeElement.querySelector('mat-tree');

        fixture.detectChanges();
      });

      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);

        component.toggleRecursively = false;
        const data = underlyingDataSource.data;
        const child = underlyingDataSource.addChild(data[2]);
        underlyingDataSource.addChild(child);
        fixture.detectChanges();

        expectFlatTreeToMatch(
          treeElement,
          40,
          [`topping_1 - cheese_1 + base_1`],
          [`topping_2 - cheese_2 + base_2`],
          [`topping_3 - cheese_3 + base_3`],
        );

        (getNodes(treeElement)[2] as HTMLElement).click();
        fixture.detectChanges();

        expect(component.treeControl.expansionModel.selected.length)
          .withContext(`Expect node expanded one level`)
          .toBe(1);
        expectFlatTreeToMatch(
          treeElement,
          40,
          [`topping_1 - cheese_1 + base_1`],
          [`topping_2 - cheese_2 + base_2`],
          [`topping_3 - cheese_3 + base_3`],
          [_, `topping_4 - cheese_4 + base_4`],
        );

        (getNodes(treeElement)[3] as HTMLElement).click();
        fixture.detectChanges();

        expect(component.treeControl.expansionModel.selected.length)
          .withContext(`Expect node expanded`)
          .toBe(2);
        expectFlatTreeToMatch(
          treeElement,
          40,
          [`topping_1 - cheese_1 + base_1`],
          [`topping_2 - cheese_2 + base_2`],
          [`topping_3 - cheese_3 + base_3`],
          [_, `topping_4 - cheese_4 + base_4`],
          [_, _, `topping_5 - cheese_5 + base_5`],
        );

        (getNodes(treeElement)[2] as HTMLElement).click();
        fixture.detectChanges();

        expectFlatTreeToMatch(
          treeElement,
          40,
          [`topping_1 - cheese_1 + base_1`],
          [`topping_2 - cheese_2 + base_2`],
          [`topping_3 - cheese_3 + base_3`],
        );
      });

      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);

        const data = underlyingDataSource.data;
        const child = underlyingDataSource.addChild(data[2]);
        underlyingDataSource.addChild(child);
        fixture.detectChanges();

        expectFlatTreeToMatch(
          treeElement,
          40,
          [`topping_1 - cheese_1 + base_1`],
          [`topping_2 - cheese_2 + base_2`],
          [`topping_3 - cheese_3 + base_3`],
        );

        (getNodes(treeElement)[2] as HTMLElement).click();
        fixture.detectChanges();

        expect(component.treeControl.expansionModel.selected.length)
          .withContext(`Expect nodes expanded`)
          .toBe(3);
        expectFlatTreeToMatch(
          treeElement,
          40,
          [`topping_1 - cheese_1 + base_1`],
          [`topping_2 - cheese_2 + base_2`],
          [`topping_3 - cheese_3 + base_3`],
          [_, `topping_4 - cheese_4 + base_4`],
          [_, _, `topping_5 - cheese_5 + base_5`],
        );

        (getNodes(treeElement)[2] as HTMLElement).click();
        fixture.detectChanges();

        expect(component.treeControl.expansionModel.selected.length)
          .withContext(`Expect node collapsed`)
          .toBe(0);

        expectFlatTreeToMatch(
          treeElement,
          40,
          [`topping_1 - cheese_1 + base_1`],
          [`topping_2 - cheese_2 + base_2`],
          [`topping_3 - cheese_3 + base_3`],
        );
      });
    });

    describe('with when node template', () => {
      let fixture: ComponentFixture<WhenNodeMatTreeApp>;
      let component: WhenNodeMatTreeApp;

      beforeEach(() => {
        configureMatTreeTestingModule([WhenNodeMatTreeApp]);
        fixture = TestBed.createComponent(WhenNodeMatTreeApp);

        component = fixture.componentInstance;
        underlyingDataSource = component.underlyingDataSource;
        treeElement = fixture.nativeElement.querySelector('mat-tree');

        fixture.detectChanges();
      });

      it('with the right data', () => {
        expectFlatTreeToMatch(
          treeElement,
          28,
          [`topping_1 - cheese_1 + base_1`],
          [`topping_2 - cheese_2 + base_2`],
          [`topping_3 - cheese_3 + base_3`],
          [`>>> topping_4 - cheese_4 + base_4`],
        );
      });
    });
  });

  describe('flat tree with undefined or null children', () => {
    describe('should initialize', () => {
      let fixture: ComponentFixture<MatTreeWithNullOrUndefinedChild>;

      beforeEach(() => {
        configureMatTreeTestingModule([MatTreeWithNullOrUndefinedChild]);
        fixture = TestBed.createComponent(MatTreeWithNullOrUndefinedChild);
        treeElement = fixture.nativeElement.querySelector('mat-tree');

        fixture.detectChanges();
      });

      it('with rendered dataNodes', () => {
        const nodes = getNodes(treeElement);

        expect(nodes).withContext('Expect nodes to be defined').toBeDefined();
        expect(nodes[0].classList).toContain('customNodeClass');
      });
    });
  });

  describe('nested tree with undefined or null children', () => {
    describe('should initialize', () => {
      let fixture: ComponentFixture<MatNestedTreeWithNullOrUndefinedChild>;

      beforeEach(() => {
        configureMatTreeTestingModule([MatNestedTreeWithNullOrUndefinedChild]);
        fixture = TestBed.createComponent(MatNestedTreeWithNullOrUndefinedChild);
        treeElement = fixture.nativeElement.querySelector('mat-tree');

        fixture.detectChanges();
      });

      it('with rendered dataNodes', () => {
        const nodes = getNodes(treeElement);

        expect(nodes).withContext('Expect nodes to be defined').toBeDefined();
        expect(nodes[0].classList).toContain('customNodeClass');
      });
    });
  });
  describe('nested tree', () => {
    describe('should initialize', () => {
      let fixture: ComponentFixture<NestedMatTreeApp>;
      let component: NestedMatTreeApp;

      beforeEach(() => {
        configureMatTreeTestingModule([NestedMatTreeApp]);
        fixture = TestBed.createComponent(NestedMatTreeApp);

        component = fixture.componentInstance;
        underlyingDataSource = component.underlyingDataSource;
        treeElement = fixture.nativeElement.querySelector('mat-tree');

        fixture.detectChanges();
      });

      it('with rendered dataNodes', () => {
        const nodes = getNodes(treeElement);

        expect(nodes).withContext('Expect nodes to be defined').toBeDefined();
        expect(nodes[0].classList).toContain('customNodeClass');
      });

      it('with the right accessibility roles', () => {
        expect(treeElement.getAttribute('role')).toBe('tree');

        getNodes(treeElement).forEach(node => {
          expect(node.getAttribute('role')).toBe('treeitem');
        });
      });

      it('with the right data', () => {
        expect(underlyingDataSource.data.length).toBe(3);

        let data = underlyingDataSource.data;
        expectNestedTreeToMatch(
          treeElement,
          [`${data[0].pizzaTopping} - ${data[0].pizzaCheese} + ${data[0].pizzaBase}`],
          [`${data[1].pizzaTopping} - ${data[1].pizzaCheese} + ${data[1].pizzaBase}`],
          [`${data[2].pizzaTopping} - ${data[2].pizzaCheese} + ${data[2].pizzaBase}`],
        );

        underlyingDataSource.addChild(data[1]);
        fixture.detectChanges();

        treeElement = fixture.nativeElement.querySelector('mat-tree');
        data = underlyingDataSource.data;
        expect(data.length).toBe(3);
        expectNestedTreeToMatch(
          treeElement,
          [`topping_1 - cheese_1 + base_1`],
          [`topping_2 - cheese_2 + base_2`],
          [_, `topping_4 - cheese_4 + base_4`],
          [`topping_3 - cheese_3 + base_3`],
        );
      });

      it('with nested child data', () => {
        expect(underlyingDataSource.data.length).toBe(3);

        const data = underlyingDataSource.data;
        const child = underlyingDataSource.addChild(data[1]);
        underlyingDataSource.addChild(child);
        fixture.detectChanges();

        expect(data.length).toBe(3);
        expectNestedTreeToMatch(
          treeElement,
          [`topping_1 - cheese_1 + base_1`],
          [`topping_2 - cheese_2 + base_2`],
          [_, `topping_4 - cheese_4 + base_4`],
          [_, _, `topping_5 - cheese_5 + base_5`],
          [`topping_3 - cheese_3 + base_3`],
        );

        underlyingDataSource.addChild(child);
        fixture.detectChanges();

        expect(data.length).toBe(3);
        expectNestedTreeToMatch(
          treeElement,
          [`topping_1 - cheese_1 + base_1`],
          [`topping_2 - cheese_2 + base_2`],
          [_, `topping_4 - cheese_4 + base_4`],
          [_, _, `topping_5 - cheese_5 + base_5`],
          [_, _, `topping_6 - cheese_6 + base_6`],
          [`topping_3 - cheese_3 + base_3`],
        );
      });

      it('with correct aria-level on nodes', () => {
        expect(
          getNodes(treeElement).every(node => {
            return node.getAttribute('aria-level') === '1';
          }),
        ).toBe(true);

        const data = underlyingDataSource.data;
        const child = underlyingDataSource.addChild(data[1]);
        underlyingDataSource.addChild(child);
        fixture.detectChanges();

        const ariaLevels = getNodes(treeElement).map(n => n.getAttribute('aria-level'));
        expect(ariaLevels).toEqual(['1', '1', '2', '3', '1']);
      });
    });

    describe('with when node', () => {
      let fixture: ComponentFixture<WhenNodeNestedMatTreeApp>;
      let component: WhenNodeNestedMatTreeApp;

      beforeEach(() => {
        configureMatTreeTestingModule([WhenNodeNestedMatTreeApp]);
        fixture = TestBed.createComponent(WhenNodeNestedMatTreeApp);

        component = fixture.componentInstance;
        underlyingDataSource = component.underlyingDataSource;
        treeElement = fixture.nativeElement.querySelector('mat-tree');

        fixture.detectChanges();
      });

      it('with the right data', () => {
        expectNestedTreeToMatch(
          treeElement,
          [`topping_1 - cheese_1 + base_1`],
          [`topping_2 - cheese_2 + base_2`],
          [`topping_3 - cheese_3 + base_3`],
          [`>>> topping_4 - cheese_4 + base_4`],
        );
      });
    });

    describe('with toggle', () => {
      let fixture: ComponentFixture<NestedMatTreeAppWithToggle>;
      let component: NestedMatTreeAppWithToggle;

      beforeEach(() => {
        configureMatTreeTestingModule([NestedMatTreeAppWithToggle]);
        fixture = TestBed.createComponent(NestedMatTreeAppWithToggle);

        component = fixture.componentInstance;
        underlyingDataSource = component.underlyingDataSource;
        treeElement = fixture.nativeElement.querySelector('mat-tree');

        fixture.detectChanges();
      });

      it('with the right aria-expanded attrs', () => {
        let ariaExpandedStates = getNodes(treeElement).map(n => n.getAttribute('aria-expanded'));
        expect(ariaExpandedStates).toEqual([null, null, null]);

        component.toggleRecursively = false;
        const data = underlyingDataSource.data;
        const child = underlyingDataSource.addChild(data[1]);
        underlyingDataSource.addChild(child);
        fixture.detectChanges();

        (getNodes(treeElement)[1] as HTMLElement).click();
        fixture.detectChanges();

        // Note: only four elements are present here; children are not present
        // in DOM unless the parent node is expanded.
        const ariaExpanded = getNodes(treeElement).map(n => n.getAttribute('aria-expanded'));
        expect(ariaExpanded).toEqual([null, 'true', 'false', null]);
      });

      it('should expand/collapse the node', () => {
        component.toggleRecursively = false;
        const data = underlyingDataSource.data;
        const child = underlyingDataSource.addChild(data[1]);
        underlyingDataSource.addChild(child);

        fixture.detectChanges();

        expectNestedTreeToMatch(
          treeElement,
          [`topping_1 - cheese_1 + base_1`],
          [`topping_2 - cheese_2 + base_2`],
          [`topping_3 - cheese_3 + base_3`],
        );

        fixture.detectChanges();

        (getNodes(treeElement)[1] as HTMLElement).click();
        fixture.detectChanges();

        expect(component.treeControl.expansionModel.selected.length)
          .withContext(`Expect node expanded`)
          .toBe(1);
        expectNestedTreeToMatch(
          treeElement,
          [`topping_1 - cheese_1 + base_1`],
          [`topping_2 - cheese_2 + base_2`],
          [_, `topping_4 - cheese_4 + base_4`],
          [`topping_3 - cheese_3 + base_3`],
        );

        (getNodes(treeElement)[1] as HTMLElement).click();
        fixture.detectChanges();

        expectNestedTreeToMatch(
          treeElement,
          [`topping_1 - cheese_1 + base_1`],
          [`topping_2 - cheese_2 + base_2`],
          [`topping_3 - cheese_3 + base_3`],
        );
        expect(component.treeControl.expansionModel.selected.length)
          .withContext(`Expect node collapsed`)
          .toBe(0);
      });

      it('should expand/collapse the node recursively', () => {
        const data = underlyingDataSource.data;
        const child = underlyingDataSource.addChild(data[1]);
        underlyingDataSource.addChild(child);
        fixture.detectChanges();

        expectNestedTreeToMatch(
          treeElement,
          [`topping_1 - cheese_1 + base_1`],
          [`topping_2 - cheese_2 + base_2`],
          [`topping_3 - cheese_3 + base_3`],
        );

        (getNodes(treeElement)[1] as HTMLElement).click();
        fixture.detectChanges();

        expect(component.treeControl.expansionModel.selected.length)
          .withContext(`Expect node expanded`)
          .toBe(3);
        expectNestedTreeToMatch(
          treeElement,
          [`topping_1 - cheese_1 + base_1`],
          [`topping_2 - cheese_2 + base_2`],
          [_, `topping_4 - cheese_4 + base_4`],
          [_, _, `topping_5 - cheese_5 + base_5`],
          [`topping_3 - cheese_3 + base_3`],
        );

        (getNodes(treeElement)[1] as HTMLElement).click();
        fixture.detectChanges();

        expect(component.treeControl.expansionModel.selected.length)
          .withContext(`Expect node collapsed`)
          .toBe(0);
        expectNestedTreeToMatch(
          treeElement,
          [`topping_1 - cheese_1 + base_1`],
          [`topping_2 - cheese_2 + base_2`],
          [`topping_3 - cheese_3 + base_3`],
        );
      });
    });
  });

  describe('accessibility', () => {
    let fixture: ComponentFixture<NestedMatTreeApp>;
    let component: NestedMatTreeApp;
    let nodes: HTMLElement[];
    let tree: MatTree<TestData>;

    beforeEach(() => {
      configureMatTreeTestingModule([NestedMatTreeApp]);
      fixture = TestBed.createComponent(NestedMatTreeApp);
      fixture.detectChanges();

      component = fixture.componentInstance;
      underlyingDataSource = component.underlyingDataSource as FakeDataSource;
      const data = underlyingDataSource.data;
      const child = underlyingDataSource.addChild(data[1], false);
      underlyingDataSource.addChild(child, false);
      underlyingDataSource.addChild(child, false);
      fixture.detectChanges();

      tree = component.tree;
      treeElement = fixture.nativeElement.querySelector('mat-tree');
      nodes = getNodes(treeElement);
    });

    describe('focus management', () => {
      it('sets tabindex on the latest activated item, with all others "-1"', () => {
        // activate the second child by clicking on it
        nodes[1].click();
        fixture.detectChanges();

        expect(nodes.map(x => x.getAttribute('tabindex')).join(', ')).toEqual(
          '-1, 0, -1, -1, -1, -1',
        );

        // activate the first child by clicking on it
        nodes[0].click();
        fixture.detectChanges();

        expect(nodes.map(x => x.getAttribute('tabindex')).join(', ')).toEqual(
          '0, -1, -1, -1, -1, -1',
        );
      });

      it('maintains tabindex when component is blurred', () => {
        // activate the second child by clicking on it
        nodes[1].click();
        nodes[1].focus();
        fixture.detectChanges();

        expect(document.activeElement).toBe(nodes[1]);
        // blur the currently active element (which we just checked is the above node)
        nodes[1].blur();
        fixture.detectChanges();

        expect(nodes.map(x => x.getAttribute('tabindex')).join(', ')).toEqual(
          '-1, 0, -1, -1, -1, -1',
        );
      });

      it('ignores clicks on disabled items', () => {
        underlyingDataSource.data[1].isDisabled = true;
        fixture.changeDetectorRef.markForCheck();
        fixture.detectChanges();

        // attempt to click on the first child
        nodes[1].click();
        fixture.detectChanges();

        expect(nodes.map(x => x.getAttribute('tabindex')).join(', ')).toEqual(
          '0, -1, -1, -1, -1, -1',
        );
      });
    });

    describe('tree role & attributes', () => {
      it('sets the tree role on the tree element', () => {
        expect(treeElement.getAttribute('role')).toBe('tree');
      });

      it('sets the treeitem role on all nodes', () => {
        expect(nodes.map(x => x.getAttribute('role')).join(', ')).toEqual(
          'treeitem, treeitem, treeitem, treeitem, treeitem, treeitem',
        );
      });

      it('sets aria attributes for tree nodes', () => {
        expect(nodes.map(x => `${x.getAttribute('aria-expanded')}`).join(', '))
          .withContext('aria-expanded attributes')
          .toEqual('null, false, false, null, null, null');
        expect(nodes.map(x => `${x.getAttribute('aria-level')}`).join(', '))
          .withContext('aria-level attributes')
          .toEqual('1, 1, 2, 3, 3, 1');
        expect(nodes.map(x => `${x.getAttribute('aria-posinset')}`).join(', '))
          .withContext('aria-posinset attributes')
          .toEqual('1, 2, 1, 1, 2, 3');
        expect(nodes.map(x => `${x.getAttribute('aria-setsize')}`).join(', '))
          .withContext('aria-setsize attributes')
          .toEqual('3, 3, 1, 2, 2, 3');
      });

      it('changes aria-expanded status when expanded or collapsed', () => {
        tree.expand(underlyingDataSource.data[1]);
        fixture.detectChanges();
        expect(nodes.map(x => `${x.getAttribute('aria-expanded')}`).join(', '))
          .withContext('aria-expanded attributes')
          .toEqual('null, true, false, null, null, null');

        tree.collapse(underlyingDataSource.data[1]);
        fixture.detectChanges();
        expect(nodes.map(x => `${x.getAttribute('aria-expanded')}`).join(', '))
          .withContext('aria-expanded attributes')
          .toEqual('null, false, false, null, null, null');
      });
    });
  });
});

export class TestData {
  pizzaTopping: string;
  pizzaCheese: string;
  pizzaBase: string;
  level: number;
  children: TestData[];
  observableChildren: BehaviorSubject<TestData[]>;
  isSpecial: boolean;
  isDisabled?: boolean;

  constructor(
    pizzaTopping: string,
    pizzaCheese: string,
    pizzaBase: string,
    children: TestData[] = [],
    isSpecial: boolean = false,
  ) {
    this.pizzaTopping = pizzaTopping;
    this.pizzaCheese = pizzaCheese;
    this.pizzaBase = pizzaBase;
    this.isSpecial = isSpecial;
    this.children = children;
    this.observableChildren = new BehaviorSubject<TestData[]>(this.children);
  }
}

class FakeDataSource {
  dataIndex = 0;
  _dataChange = new BehaviorSubject<TestData[]>([]);
  get data() {
    return this._dataChange.getValue();
  }
  set data(data: TestData[]) {
    this._dataChange.next(data);
  }

  connect(): Observable<TestData[]> {
    return this._dataChange;
  }

  disconnect() {}

  constructor() {
    for (let i = 0; i < 3; i++) {
      this.addData();
    }
  }

  addChild(parent: TestData, isSpecial: boolean = false) {
    const nextIndex = ++this.dataIndex;
    const child = new TestData(`topping_${nextIndex}`, `cheese_${nextIndex}`, `base_${nextIndex}`);

    const index = this.data.indexOf(parent);
    if (index > -1) {
      parent = new TestData(
        parent.pizzaTopping,
        parent.pizzaCheese,
        parent.pizzaBase,
        parent.children,
        isSpecial,
      );
    }
    parent.children.push(child);
    parent.observableChildren.next(parent.children);

    let copiedData = this.data.slice();
    if (index > -1) {
      copiedData.splice(index, 1, parent);
    }
    this.data = copiedData;
    return child;
  }

  addData(isSpecial: boolean = false) {
    const nextIndex = ++this.dataIndex;
    let copiedData = this.data.slice();
    copiedData.push(
      new TestData(
        `topping_${nextIndex}`,
        `cheese_${nextIndex}`,
        `base_${nextIndex}`,
        [],
        isSpecial,
      ),
    );

    this.data = copiedData;
  }
}

function getNodes(treeElement: Element): HTMLElement[] {
  return [].slice.call(treeElement.querySelectorAll('.mat-tree-node, .mat-nested-tree-node'))!;
}

function expectFlatTreeToMatch(
  treeElement: Element,
  expectedPaddingIndent: number = 28,
  ...expectedTree: any[]
) {
  const missedExpectations: string[] = [];

  function checkNode(node: Element, expectedNode: any[]) {
    const actualTextContent = node.textContent!.trim();
    const expectedTextContent = expectedNode[expectedNode.length - 1];
    if (actualTextContent !== expectedTextContent) {
      missedExpectations.push(
        `Expected node contents to be ${expectedTextContent} but was ${actualTextContent}`,
      );
    }
  }

  function checkLevel(node: Element, expectedNode: any[]) {
    const rawLevel = (node as HTMLElement).style.paddingLeft;

    // Some browsers return 0, while others return 0px.
    const actualLevel = rawLevel === '0' ? '0px' : rawLevel;
    if (expectedNode.length === 1) {
      if (actualLevel !== `` && actualLevel !== '0px') {
        missedExpectations.push(`Expected node level to be 0px but was ${actualLevel}`);
      }
    } else {
      const expectedLevel = `${(expectedNode.length - 1) * expectedPaddingIndent}px`;
      if (actualLevel != expectedLevel) {
        missedExpectations.push(
          `Expected node level to be ${expectedLevel} but was ${actualLevel}`,
        );
      }
    }
  }

  getNodes(treeElement).forEach((node, index) => {
    const expected = expectedTree ? expectedTree[index] : null;

    checkLevel(node, expected);
    checkNode(node, expected);
  });

  if (missedExpectations.length) {
    fail(missedExpectations.join('\n'));
  }
}

function expectNestedTreeToMatch(treeElement: Element, ...expectedTree: any[]) {
  const missedExpectations: string[] = [];
  function checkNodeContent(node: Element, expectedNode: any[]) {
    const expectedTextContent = expectedNode[expectedNode.length - 1];
    const actualTextContent = node.childNodes.item(0).textContent!.trim();
    if (actualTextContent !== expectedTextContent) {
      missedExpectations.push(
        `Expected node contents to be ${expectedTextContent} but was ${actualTextContent}`,
      );
    }
  }

  function checkNodeDescendants(node: Element, expectedNode: any[], currentIndex: number) {
    let expectedDescendant = 0;

    for (let i = currentIndex + 1; i < expectedTree.length; ++i) {
      if (expectedTree[i].length > expectedNode.length) {
        ++expectedDescendant;
      } else if (expectedTree[i].length === expectedNode.length) {
        break;
      }
    }

    const actualDescendant = getNodes(node).length;
    if (actualDescendant !== expectedDescendant) {
      missedExpectations.push(
        `Expected node descendant num to be ${expectedDescendant} but was ${actualDescendant}`,
      );
    }
  }

  getNodes(treeElement).forEach((node, index) => {
    const expected = expectedTree ? expectedTree[index] : null;

    checkNodeDescendants(node, expected, index);
    checkNodeContent(node, expected);
  });

  if (missedExpectations.length) {
    fail(missedExpectations.join('\n'));
  }
}

@Component({
  template: `
    <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
      <mat-tree-node *matTreeNodeDef="let node" class="customNodeClass"
                     matTreeNodePadding [matTreeNodePaddingIndent]="28"
                     matTreeNodeToggle>
                     {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
      </mat-tree-node>
    </mat-tree>
  `,
  standalone: false,
})
class SimpleMatTreeApp {
  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,
  );

  treeControl = new FlatTreeControl(this.getLevel, this.isExpandable);

  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);

  underlyingDataSource = new FakeDataSource();

  @ViewChild(MatTree) tree: MatTree<TestData>;

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

interface FoodNode {
  name: string;
  children?: FoodNode[] | null;
}

/** Flat node with expandable and level information */
interface ExampleFlatNode {
  expandable: boolean;
  name: string;
  level: number;
}

/**
 * Food data with nested structure.
 * Each node has a name and an optiona list of children.
 */
const TREE_DATA: FoodNode[] = [
  {
    name: 'Fruit',
    children: [{name: 'Apple'}, {name: 'Banana'}, {name: 'Fruit loops', children: null}],
  },
  {
    name: 'Vegetables',
    children: [
      {
        name: 'Green',
        children: [{name: 'Broccoli'}, {name: 'Brussels sprouts'}],
      },
      {
        name: 'Orange',
        children: [{name: 'Pumpkins'}, {name: 'Carrots'}],
      },
    ],
  },
];

@Component({
  template: `
    <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
      <mat-tree-node *matTreeNodeDef="let node" class="customNodeClass"
                     matTreeNodePadding matTreeNodeToggle>
        {{node.name}}
      </mat-tree-node>
    </mat-tree>
  `,
  standalone: false,
})
class MatTreeWithNullOrUndefinedChild {
  private _transformer = (node: FoodNode, level: number) => {
    return {
      expandable: !!node.children,
      name: node.name,
      level: level,
    };
  };

  treeControl = new FlatTreeControl<ExampleFlatNode>(
    node => node.level,
    node => node.expandable,
  );

  treeFlattener = new MatTreeFlattener(
    this._transformer,
    node => node.level,
    node => node.expandable,
    node => node.children,
  );

  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener, TREE_DATA);

  hasChild = (_: number, node: ExampleFlatNode) => node.expandable;
}

@Component({
  template: `
    <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
      <mat-nested-tree-node *matTreeNodeDef="let node" class="customNodeClass">
        {{node.name}}
        <ng-template matTreeNodeOutlet></ng-template>
      </mat-nested-tree-node>
    </mat-tree>
  `,
  standalone: false,
})
class MatNestedTreeWithNullOrUndefinedChild {
  treeControl: NestedTreeControl<FoodNode>;
  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-nested-tree-node *matTreeNodeDef="let node" class="customNodeClass"
                            [isExpandable]="isExpandable(node) | async"
                            [isDisabled]="node.isDisabled">
                     {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
         <ng-template matTreeNodeOutlet></ng-template>
      </mat-nested-tree-node>
    </mat-tree>
  `,
  standalone: false,
})
class NestedMatTreeApp {
  getChildren = (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();

  @ViewChild(MatTree) tree: MatTree<TestData>;

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

@Component({
  template: `
    <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
      <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)">
            <ng-template matTreeNodeOutlet></ng-template>
         </div>
      </mat-nested-tree-node>
    </mat-tree>
  `,
  standalone: false,
})
class WhenNodeNestedMatTreeApp {
  isSpecial = (_: number, node: TestData) => node.isSpecial;

  getChildren = (node: TestData) => node.observableChildren;

  treeControl: TreeControl<TestData> = new NestedTreeControl(this.getChildren);

  dataSource = new MatTreeNestedDataSource();
  underlyingDataSource = 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-node *matTreeNodeDef="let node" class="customNodeClass"
                     [isExpandable]="isExpandable(node)"
                     [isDisabled]="node.isDisabled"
                     matTreeNodePadding
                     matTreeNodeToggle [matTreeNodeToggleRecursive]="toggleRecursively">
                     {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
      </mat-tree-node>
    </mat-tree>
  `,
  standalone: false,
})
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,
  );

  treeControl = new FlatTreeControl(this.getLevel, this.isExpandable);

  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
  underlyingDataSource = 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-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)">
          <ng-template matTreeNodeOutlet></ng-template>
        </div>
      </mat-nested-tree-node>
    </mat-tree>
  `,
  standalone: false,
})
class NestedMatTreeAppWithToggle {
  toggleRecursively: boolean = true;

  getChildren = (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();

  @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-node *matTreeNodeDef="let node" class="customNodeClass"
                     matTreeNodePadding [matTreeNodePaddingIndent]="28"
                     matTreeNodeToggle>
                     {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
      </mat-tree-node>
       <mat-tree-node *matTreeNodeDef="let node; when: isSpecial" class="customNodeClass"
                     matTreeNodePadding [matTreeNodePaddingIndent]="28"
                     matTreeNodeToggle>
                     >>> {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
      </mat-tree-node>
    </mat-tree>
  `,
  standalone: false,
})
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,
  );

  treeControl = new FlatTreeControl(this.getLevel, this.isExpandable);

  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
  underlyingDataSource = new FakeDataSource();

  @ViewChild(MatTree) tree: MatTree<TestData>;

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