Fixed tree-node and tree-node-level-X classes.

Removed redundant div in children

.gitignore

@@ -58,3 +58,9 @@ npm-debug.log
 /dist
 
 compiled
+
+testScreenshots
+testResults
+e2eResults
+
+e2e/dist

.npmignore

@@ -7,3 +7,7 @@ example
 *karma*.js
 *.ts
 !*.d.ts
+testScreenshots
+testResults
+e2eResults
+e2e

CHANGELOG.md

@@ -1,3 +1,9 @@
+<a name="3.2.4"></a>
+# 3.2.4 (2017-XX-XX)
+* Fixed tree-node and tree-node-level-X classes.
+* Removed redundant div in children
+* Added integration tests
+
 <a name="3.2.3"></a>
 # 3.2.3 (2017-03-08)
 * Fixed bug when actionMapping is undefined

e2e/basic.spec.ts

@@ -0,0 +1,76 @@
+import { browser, element, by } from 'protractor';
+import { TreeDriver } from './helpers/tree.driver';
+
+describe('Basic Configuration', () => {
+  beforeEach(() => {
+    browser.get('http://localhost:4200/#/basic');
+
+    this.tree = new TreeDriver('tree-root');
+    this.root1 = this.tree.getNode(0);
+    this.root2 = this.tree.getNode(1);
+    this.root3 = this.tree.getNode(2);
+    this.root4 = this.tree.getNode(3);
+    this.root5 = this.tree.getNode(4);
+  });
+
+  it('should show the tree', () => {
+    expect(this.tree.isPresent()).toBe(true);
+  });
+
+  it('should have 5 nodes', () => {
+    expect(this.tree.getNodes().count()).toEqual(5);
+  });
+
+  it('should have a node named root1');
+
+  it('roots with children should have an expander icon', () => {
+    expect(this.root1.getExpander().isPresent()).toBe(true);
+    expect(this.root2.getExpander().isPresent()).toBe(true);
+  });
+
+  it('roots with children should not have an expander icon', () => {
+    expect(this.root3.getExpander().isPresent()).toBe(false);
+    expect(this.root4.getExpander().isPresent()).toBe(false);
+    expect(this.root5.getExpander().isPresent()).toBe(false);
+  });
+
+  it('roots with children should start collapsed', () => {
+    expect(this.root1.getChildren().isPresent()).toBe(false);
+    expect(this.root1.isExpanded()).toBe(false);
+  });
+
+  it('should expand & collapse children on click expander', () => {
+    this.root1.clickExpander();
+    expect(this.root1.getChildren().isPresent()).toBe(true);
+    expect(this.root1.isExpanded()).toBe(true);
+    this.root1.clickExpander();
+    expect(this.root1.getChildren().isPresent()).toBe(false);
+    expect(this.root1.isExpanded()).toBe(false);
+  });
+
+  it('should start inactive', () => {
+    expect(this.root1.isActive()).toBe(false);
+  });
+
+  it('should activate & deactivate nodes on click', () => {
+    this.root1.click();
+    expect(this.root1.isActive()).toBe(true);
+    expect(this.root2.isActive()).toBe(false);
+    this.root2.click();
+    expect(this.root1.isActive()).toBe(false);
+    expect(this.root2.isActive()).toBe(true);
+  });
+
+  it('should start without focus', () => {
+    expect(this.root1.isFocused()).toBe(false);
+  });
+
+  it('should focus on a node on click', () => {
+    this.root1.click();
+    expect(this.root1.isFocused()).toBe(true);
+    expect(this.root2.isFocused()).toBe(false);
+    this.root2.click();
+    expect(this.root1.isFocused()).toBe(false);
+    expect(this.root2.isFocused()).toBe(true);
+  });
+});

e2e/helpers/tree.driver.ts

@@ -0,0 +1,108 @@
+import { browser, ElementArrayFinder, ElementFinder, WebElement, by, element, $, $$, promise } from 'protractor';
+
+function hasClass(element, cls) {
+    return element.getAttribute('class').then(function (classes) {
+        return classes.split(' ').indexOf(cls) !== -1;
+    });
+};
+
+export class NodeDriver {
+  constructor(private element: ElementFinder) {}
+
+  isPresent(): promise.Promise<boolean> {
+    return this.element.isPresent();
+  }
+
+  isActive(): promise.Promise<boolean> {
+    return hasClass(this.getTreeNodeElement(), 'tree-node-active');
+  }
+
+  isFocused(): promise.Promise<boolean> {
+    return hasClass(this.getTreeNodeElement(), 'tree-node-focused');
+  }
+
+  isExpanded(): promise.Promise<boolean> {
+    return hasClass(this.getTreeNodeElement(), 'tree-node-expanded');
+  }
+
+  getTreeNodeElement(): ElementFinder {
+    return this.element.$('.tree-node');
+  }
+
+  getNodeContentWrapper(): ElementFinder {
+    return this.element.$('.node-content-wrapper');
+  }
+
+  getExpander(): ElementFinder {
+    return this.element.$('.toggle-children-wrapper');
+  }
+
+  getChildren(): ElementFinder {
+    return this.element.$('.tree-children');
+  }
+
+  clickExpander(): promise.Promise<void> {
+    return this.getExpander().click();
+  }
+
+  click(): promise.Promise<void> {
+    return this.getNodeContentWrapper().click();
+  }
+}
+
+export class TreeDriver {
+  element: ElementFinder;
+
+  constructor(elementCss) {
+    this.element = $(elementCss);
+  }
+
+  isPresent(): promise.Promise<boolean> {
+    return this.element.isPresent();
+  }
+
+  getNodes(): ElementArrayFinder {
+    return this.element.$$('tree-node');
+  }
+
+  getNode(index): NodeDriver {
+    const element = this.getNodes().get(index);;
+
+    return new NodeDriver(element);
+  }
+
+  keyDown() {
+  }
+  keyUp() {
+  }
+  keyLeft() {
+  }
+  keyRight() {
+  }
+  keyEnter() {
+  }
+  keySpace() {
+  }
+
+  click(node) {
+
+  }
+  expand(node) {
+
+  }
+  dblclick(node) {
+
+  }
+  contextMenu(node) {
+
+  }
+  drag(node, element) {
+
+  }
+}
+
+export class InputDriver {
+  constructor(private element) {
+
+  }
+}

e2e/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": false,
+    "declaration": false,
+    "noImplicitAny": false,
+    "outDir": "dist"
+  },
+  "include": [
+      "**/*.ts"
+  ]
+}

example/cli/.angular-cli.json

@@ -52,6 +52,10 @@
   },
   "defaults": {
     "styleExt": "css",
-    "component": {}
+    "component": {
+      "inlineTemplate": true,
+      "inlineStyle": true,
+      "spec": false
+    }
   }
 }