Update E2E test, fix last smal problems with anim.

Author: qjon

.travis.yml

@@ -3,17 +3,17 @@ dist: trusty
 addons:
   apt:
     sources:
-      - google-chrome
+    - google-chrome
     packages:
-      - google-chrome-stable
+    - google-chrome-stable
 language: node_js
 node_js:
-  - 6
+- 6
 before_script:
-  - export DISPLAY=:99.0
-  - sh -e /etc/init.d/xvfb start
+- export DISPLAY=:99.0
+- sh -e /etc/init.d/xvfb start
 install:
-  - npm install
+- npm install
 script:
-  - ./node_modules/.bin/webdriver-manager update
-  - npm run ci
+- ./node_modules/.bin/webdriver-manager update
+- npm run ci

README.md

@@ -159,22 +159,22 @@ and _newItem.component.html_
       </div>
     </div>
     <div class="tree" *ngIf="isExpanded" [@expand]>
-      <ri-tree-item *ngFor="let child of children$ | async" [node]="child"
+      <ri-tree-item *ngFor="let child of children$ | async" [node]="child; trackBy: trackByFn"
                     [treeModel]="treeModel"
-                    [isExpanded]="treeModel.isExpanded(child.id)"
-                    [isSelected]="treeModel.isSelected(child.id)"
+                    [isExpanded]="treeModel.isExpanded(child)"
+                    [isSelected]="treeModel.isSelected(child)"
                     [contextMenu]="contextMenu"></ri-tree-item>
     </div>
 
 
 Then when you create tree component in your application use such construction
 
     <rign-tree [treeModel]="treeModel">
-      <new-tree-item *ngFor="let node of treeModel.getRootNodes() | async" 
+      <new-tree-item *ngFor="let node of treeModel.getRootNodes() | async; trackBy: trackByFn" 
                       [node]="node" 
                       [treeModel]="treeModel" 
-                      [isSelected]="treeModel.isSelected(node.id)"
-                      [isExpanded]="treeModel.isExpanded(node.id)"
+                      [isSelected]="treeModel.isSelected(node)"
+                      [isExpanded]="treeModel.isExpanded(node)"
                       [contextMenu]="contextMenu"></new-tree-item>
     </rign-tree>
 

demo/src/app/treeTwo/newItem.component.html

@@ -28,10 +28,10 @@
   </div>
 </div>
 <div class="tree" *ngIf="isExpanded">
-  <new-tree-item *ngFor="let child of children$ | async"
+  <new-tree-item *ngFor="let child of children$ | async; trackBy: trackByFn"
                  [node]="child"
                  [treeModel]="treeModel"
-                 [isExpanded]="treeModel.isExpanded(child.id)"
-                 [isSelected]="treeModel.isSelected(child.id)"
+                 [isExpanded]="treeModel.isExpanded(child)"
+                 [isSelected]="treeModel.isSelected(child)"
                  [contextMenu]="contextMenu"></new-tree-item>
 </div>

demo/src/app/treeTwo/treeTwo.component.html

@@ -1,8 +1,9 @@
 <ri-tree [treeModel]="treeModel">
   <new-tree-item class="root-node"
-                 *ngFor="let node of treeModel.rootNodes$ | async" [node]="node"
+                 *ngFor="let node of treeModel.rootNodes$ | async; trackBy: trackByFn"
+                 [node]="node"
                  [treeModel]="treeModel"
-                 [isExpanded]="treeModel.isExpanded(node.id)"
-                 [isSelected]="treeModel.isSelected(node.id)"
+                 [isExpanded]="treeModel.isExpanded(node)"
+                 [isSelected]="treeModel.isSelected(node)"
                  [contextMenu]="contextMenu"></new-tree-item>
 </ri-tree>

demo/src/app/treeTwo/treeTwo.component.ts

@@ -1,8 +1,8 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
-import {IConfiguration, IContextMenu, ITreeData, TreeModel} from '../../../../main';
+import {IConfiguration, IContextMenu, IOuterNode, ITreeData, TreeModel} from '../../../../main';
 import {Observable} from 'rxjs/Observable';
 import {TreeInitializerService} from '../../../../src/service/initializer.service';
-import {TreeTwoNodeBackendService} from './treeTwoNodeBackend.service';
+import {TreeTwoNodeService} from './treeTwoNode.service';
 
 @Component({
   selector: 'app-tree-two',
@@ -24,7 +24,7 @@ export class TreeTwoComponent implements OnInit, OnDestroy {
   public treeModel: TreeModel;
 
   public constructor(private treeInitializerService: TreeInitializerService,
-                     private treeTwoNodeService: TreeTwoNodeBackendService) {
+                     private treeTwoNodeService: TreeTwoNodeService) {
   }
 
   public ngOnInit(): void {
@@ -34,4 +34,8 @@ export class TreeTwoComponent implements OnInit, OnDestroy {
   public ngOnDestroy(): void {
     this.treeModel.destroy();
   }
+
+  public trackByFn(item: IOuterNode): string {
+    return item.id;
+  }
 }

package.json

@@ -19,10 +19,10 @@
     "clean:all": "rimraf dist/ && npm run clean:tmp",
     "clean:tmp": "rimraf tmp/",
     "lint": "ng lint",
-    "e2e": "rm -rf e2e/screenshots/* && ng e2e -wu false -s false",
+    "e2e": "rm -rf e2e/screenshots/* && ng e2e -wu false",
     "test": "./node_modules/.bin/karma --config karma.conf.js start",
     "gh-pages": "ng build --prod --base-href \"https://qjon.github.io/angular2-tree/\" &&  ./node_modules/.bin/angular-cli-ghpages -b gh-pages  --name=\"Rafał Ignaszewski\" --email=\"[email protected]\" --no-silent",
-    "ci": "npm run test && ng e2e -wu false"
+    "ci": "npm run test && ng e2e"
   },
   "repository": {
     "type": "git",

src/item/item.component.html

@@ -17,9 +17,10 @@
   </form>
 </div>
 <div class="tree" *ngIf="isExpanded" [@expand]>
-  <ri-tree-item *ngFor="let child of children$ | async" [node]="child"
+  <ri-tree-item *ngFor="let child of children$ | async; trackBy: trackByFn"
+                [node]="child"
                 [treeModel]="treeModel"
-                [isExpanded]="treeModel.isExpanded(child.id)"
-                [isSelected]="treeModel.isSelected(child.id)"
+                [isExpanded]="treeModel.isExpanded(child)"
+                [isSelected]="treeModel.isSelected(child)"
                 [contextMenu]="contextMenu"></ri-tree-item>
 </div>

src/item/item.component.ts

@@ -216,6 +216,10 @@ export class ItemComponent implements OnInit, OnDestroy, OnChanges {
     }
   }
 
+  public trackByFn(item: IOuterNode): string {
+    return item.id;
+  }
+
   protected getChildren(): Observable<IOuterNode[]> {
     return this.treeModel.getChildren(this.node.id);
   }

src/models/TreeModel.ts

@@ -112,12 +112,20 @@ export class TreeModel {
     this.store.dispatch(new TreeLoadPathAction({treeId: this.configuration.treeId, ids: path}));
   }
 
-  public isExpanded(nodeId: string): boolean {
-    return this.expanded.has(nodeId);
+  public isExpanded(node: IOuterNode): boolean {
+    if (!node) {
+      return false;
+    }
+
+    return this.expanded.has(node.id);
   }
 
-  public isSelected(nodeId: string): boolean {
-    return this.selected === nodeId;
+  public isSelected(node: IOuterNode): boolean {
+    if (!node) {
+      return false;
+    }
+
+    return this.selected === node.id;
   }
 
   public wasPreviouslySelected(nodeId: string): boolean {

src/store/treeEffects.service.ts

@@ -179,6 +179,7 @@ export class TreeEffectsService {
   public insert$ = this.actions$
     .ofType(TreeActionTypes.TREE_INSERT_NODE)
     .pipe(
+      filter((action: TreeInsertNodeAction) => !!action.payload.parentId),
       map((action: TreeInsertNodeAction) => {
         return new TreeExpandNodeAction({treeId: action.payload.treeId, id: action.payload.parentId});
       })

src/tree.component.html

@@ -8,11 +8,11 @@
   <div *ngIf="customTemplate.childNodes.length === 0">
     <ri-tree-item
       class="root-node"
-      *ngFor="let node of rootNodes$ | async"
+      *ngFor="let node of rootNodes$ | async; trackBy: trackByFn"
       [node]="node"
       [treeModel]="treeModel"
-      [isSelected]="treeModel.isSelected(node.id)"
-      [isExpanded]="treeModel.isExpanded(node.id)"
+      [isSelected]="treeModel.isSelected(node)"
+      [isExpanded]="treeModel.isExpanded(node)"
       [contextMenu]="contextMenu"></ri-tree-item>
   </div>
   <ri-dropzone [treeModel]="treeModel"></ri-dropzone>

src/tree.component.ts

@@ -103,6 +103,10 @@ export class TreeComponent implements OnInit, OnChanges {
     }
   }
 
+  public trackByFn(item: IOuterNode): string {
+    return item.id;
+  }
+
   /**
    * Register data "move event"
    */