From 868b546de11b19a7a1d3780d306c0d1fc68a9d51 Mon Sep 17 00:00:00 2001
From: dabeng <dabeng413@gmail.com>
Date: Sun, 14 Jan 2018 22:14:33 +0800
Subject: [PATCH] refactor the core methods

---
 README.md                                     |  21 +-
 demo/center-on-selected-node.html             |   2 +-
 demo/edit-chart.html                          |  36 +-
 demo/expand-to-given-depth.html               |   8 +-
 demo/export-chart.html                        |   2 +-
 demo/index.html                               |   6 +-
 demo/local-datasource.html                    |   2 +-
 demo/option-createNode.html                   |   2 +-
 ...ertical-depth.html => vertical-level.html} |   4 +-
 src/js/jquery.orgchart.js                     | 316 ++++++++----------
 test/e2e/pan-zoom/page-model.js               |   9 +
 test/e2e/pan-zoom/test.js                     |  33 ++
 .../page-model.js                             |   0
 .../test.js                                   |   2 +-
 test/integration/init-tests.js                | 218 ++++++++++++
 test/integration/tests.js                     |  23 +-
 test/unit/tests.js                            |   8 +-
 17 files changed, 452 insertions(+), 240 deletions(-)
 rename demo/{vertical-depth.html => vertical-level.html} (97%)
 create mode 100644 test/e2e/pan-zoom/page-model.js
 create mode 100644 test/e2e/pan-zoom/test.js
 rename test/e2e/{vertical-depth => vertical-level}/page-model.js (100%)
 rename test/e2e/{vertical-depth => vertical-level}/test.js (96%)
 create mode 100644 test/integration/init-tests.js

diff --git a/README.md b/README.md
index 0ded2064..8f2859b9 100644
--- a/README.md
+++ b/README.md
@@ -100,11 +100,11 @@ It's a so easy task, we just need to append id or className property to node dat
 
 In fact, this is a wonderful solution to display a orgchart which includes a huge number of node data.
 
-- [I want a hybrid(horizontal + vertical) chart](https://rawgit.com/dabeng/OrgChart/master/demo/vertical-depth.html)
+- [I want a hybrid(horizontal + vertical) chart](https://rawgit.com/dabeng/OrgChart/master/demo/vertical-level.html)
 
 This feature is inspired by the issues([Aligning Children Vertical](https://github.com/dabeng/OrgChart/issues/46), [Hybrid(horizontal + vertical) OrgChart](https://github.com/dabeng/OrgChart/issues/61)). Thank [mfahadi](https://github.com/mfahadi) and [Destructrix](https://github.com/Destructrix) for their constructive suggestions:blush: Special thanks to [tedliang](https://github.com/tedliang) for his wonderful hybrid mode solution.
 
-From now on, users never have to worry about how to align a huge of nodes in one screen of browser. The option "verticalDepth" allows users to align child nodes vertically from the given depth.
+From now on, users never have to worry about how to align a huge of nodes in one screen of browser. The option "verticalLevel" allows users to align child nodes vertically from the given level.
 
 **Note**: currently, this option is incompatible with many other options or methods, like direction, drag&drop, addChildren(), removeNodes(), getHierarchy() and so on. These conflicts will be solved one by one in the later versions.
 
@@ -191,7 +191,7 @@ var oc = $('#chartContainerId').orgchart(options);
       <td>direction</td><td>string</td><td>no</td><td>"t2b"</td><td>The available values are t2b(implies "top to bottom", it's default value), b2t(implies "bottom to top"), l2r(implies "left to right"), r2l(implies "right to left").</td>
     </tr>
     <tr>
-      <td>verticalDepth</td><td>integer</td><td>no</td><td></td><td>Users can make use of this option to align the nodes vertically from the specified depth.</td>
+      <td>verticalLevel</td><td>integer(>=2)</td><td>no</td><td></td><td>Users can make use of this option to align the nodes vertically from the specified level.</td>
     </tr>
     <tr>
       <td>toggleSiblingsResp</td><td>boolean</td><td>no</td><td>false</td><td>Once enable this option, users can show/hide left/right sibling nodes respectively by clicking left/right arrow.</td>
@@ -200,7 +200,7 @@ var oc = $('#chartContainerId').orgchart(options);
       <td>ajaxURL</td><td>json</td><td>no</td><td></td><td>It inclueds four properites -- parent, children, siblings, families(ask for parent node and siblings nodes). As their names imply, different propety provides the URL to which ajax request for different nodes is sent.</td>
     </tr>
     <tr>
-      <td>depth</td><td>positive integer</td><td>no</td><td>999</td><td>It indicates the level that at the very beginning orgchart is expanded to.</td>
+      <td>visibleLevel</td><td>positive integer</td><td>no</td><td>999</td><td>It indicates the level that at the very beginning orgchart is expanded to.</td>
     </tr>
     <tr>
       <td>nodeTitle</td><td>string</td><td>no</td><td>"name"</td><td>It sets one property of datasource as text content of title section of orgchart node. In fact, users can create a simple orghcart with only nodeTitle option.</td>
@@ -251,7 +251,7 @@ I'm sure that you can grasp the key points of the methods below after you try ou
 Embeds an organization chart in designated container. Accepts an options object and you can go through the "options" section to find which options are required. Variable oc is the instance of class OrgChart.
 #### init(newOptions)
 It's the useful way when users want to re-initialize or refresh orgchart based on new options or reload new data.
-#### addParent(data, opts)
+#### addParent(data)
 Adds parent node(actullay it's always root node) for current orgchart.
 <table>
   <thead>
@@ -259,11 +259,10 @@ Adds parent node(actullay it's always root node) for current orgchart.
   </thead>
   <tbody>
     <tr><td>data</td><td>json object</td><td>yes</td><td></td><td>datasource for building root node</td></tr>
-    <tr><td>opts</td><td>json object</td><td>no</td><td>initial options of current orgchart</td><td>options used for overriding initial options</td></tr>
   </tbody>
 </table>
 
-#### addSiblings($node, data, opts)
+#### addSiblings($node, data)
 Adds sibling nodes for designated node.
 <table>
   <thead>
@@ -271,12 +270,11 @@ Adds sibling nodes for designated node.
   </thead>
   <tbody>
     <tr><td>$node</td><td>jquery object</td><td>yes</td><td></td><td>we'll add sibling nodes based on this node</td></tr>
-    <tr><td>data</td><td>json object</td><td>yes</td><td></td><td>datasource for building sibling nodes</td></tr>
-    <tr><td>opts</td><td>json object</td><td>no</td><td>initial options of current orgchart</td><td>options used for overriding initial options</td></tr>
+    <tr><td>data</td><td>array</td><td>yes</td><td></td><td>datasource for building sibling nodes</td></tr>
   </tbody>
 </table>
 
-#### addChildren($node, data, opts）
+#### addChildren($node, data)
 Adds child nodes for designed node.
 <table>
   <thead>
@@ -284,8 +282,7 @@ Adds child nodes for designed node.
   </thead>
   <tbody>
     <tr><td>$node</td><td>jquery object</td><td>yes</td><td></td><td>we'll add child nodes based on this node</td></tr>
-    <tr><td>data</td><td>json object</td><td>yes</td><td></td><td>datasource for building child nodes</td></tr>
-    <tr><td>opts</td><td>json object</td><td>no</td><td>initial options of current orgchart</td><td>options used for overriding initial options</td></tr>
+    <tr><td>data</td><td>array</td><td>yes</td><td></td><td>datasource for building child nodes</td></tr>
   </tbody>
 </table>
 
diff --git a/demo/center-on-selected-node.html b/demo/center-on-selected-node.html
index 86229938..a6503cdf 100644
--- a/demo/center-on-selected-node.html
+++ b/demo/center-on-selected-node.html
@@ -47,7 +47,7 @@
       };
 
       $('#chart-container').orgchart({
-        'depth': 2,
+        'visibleLevel': 2,
         'pan': true,
         'data' : datascource,
         'nodeContent': 'title',
diff --git a/demo/edit-chart.html b/demo/edit-chart.html
index febebba4..854ee59b 100755
--- a/demo/edit-chart.html
+++ b/demo/edit-chart.html
@@ -8,10 +8,11 @@
   <link rel="stylesheet" href="css/jquery.orgchart.css">
   <link rel="stylesheet" href="css/style.css">
   <style type="text/css">
-    #chart-container { background-color: #eee; height: 300px; }
+    #chart-container { background-color: #eee; height: 500px; }
     .orgchart { background: #fff; }
-    .orgchart.view-state .edge { display: none; }
+    .orgchart.edit-state .edge { display: none; }
     .orgchart .node { width: 150px; }
+    .orgchart .node .title { height: 30px; line-height: 30px; }
     .orgchart .node .title .symbol { margin-top: 1px; }
     #edit-panel {
       position: relative;
@@ -25,7 +26,7 @@
       background-color: #449d44;
     }
     #edit-panel .btn-inputs { font-size: 24px; }
-    #edit-panel.view-state>:not(#chart-state-panel) { display: none; }
+    #edit-panel.edit-state>:not(#chart-state-panel) { display: none; }
     #edit-panel label { font-weight: bold; }
     #edit-panel.edit-parent-node .selected-node-group { display: none; }
     #chart-state-panel, #selected-node, #btn-remove-input { margin-right: 20px; }
@@ -116,6 +117,7 @@
 
     var oc = $('#chart-container').orgchart({
       'data' : datascource,
+      'chartClass': 'edit-state',
       'exportButton': true,
       'exportFilename': 'SportsChart',
       'parentNodeSymbol': 'fa-th-large',
@@ -136,8 +138,8 @@
     });
 
     $('input[name="chart-state"]').on('click', function() {
-      $('.orgchart').toggleClass('view-state', this.value !== 'view');
-      $('#edit-panel').toggleClass('view-state', this.value === 'view');
+      $('.orgchart').toggleClass('edit-state', this.value !== 'view');
+      $('#edit-panel').toggleClass('edit-state', this.value === 'view');
       if ($(this).val() === 'edit') {
         $('.orgchart').find('tr').removeClass('hidden')
           .find('td').removeClass('hidden')
@@ -211,22 +213,24 @@
           oc.addParent($chartContainer.find('.node:first'), { 'name': nodeVals[0], 'id': getId() });
         }
       } else if (nodeType.val() === 'siblings') {
-        oc.addSiblings($node,
-          { 'siblings': nodeVals.map(function(item) { return { 'name': item, 'relationship': '110', 'id': getId() }; })
-        });
+        if ($node[0].id === oc.$chart.find('.node:first')[0].id) {
+          alert('You are not allowed to directly add sibling nodes to root node');
+          return;
+        }
+        oc.addSiblings($node, nodeVals.map(function (item) {
+            return { 'name': item, 'relationship': '110', 'id': getId() };
+          }));
       } else {
         var hasChild = $node.parent().attr('colspan') > 0 ? true : false;
         if (!hasChild) {
           var rel = nodeVals.length > 1 ? '110' : '100';
-          oc.addChildren($node, {
-              'children': nodeVals.map(function(item) {
-                return { 'name': item, 'relationship': rel, 'id': getId() };
-              })
-            }, $.extend({}, $chartContainer.find('.orgchart').data('options'), { depth: 0 }));
+          oc.addChildren($node, nodeVals.map(function (item) {
+              return { 'name': item, 'relationship': rel, 'id': getId() };
+            }));
         } else {
-          oc.addSiblings($node.closest('tr').siblings('.nodes').find('.node:first'),
-            { 'siblings': nodeVals.map(function(item) { return { 'name': item, 'relationship': '110', 'id': getId() }; })
-          });
+          oc.addSiblings($node.closest('tr').siblings('.nodes').find('.node:first'), nodeVals.map(function (item) {
+              return { 'name': item, 'relationship': '110', 'id': getId() };
+            }));
         }
       }
     });
diff --git a/demo/expand-to-given-depth.html b/demo/expand-to-given-depth.html
index 8b6e3334..62e11d04 100644
--- a/demo/expand-to-given-depth.html
+++ b/demo/expand-to-given-depth.html
@@ -49,8 +49,8 @@
       ]
     };
 
-    var showDescendents = function(node, depth) {
-      if (depth === 1) {
+    var showDescendents = function(node, visibleLevel) {
+      if (visibleLevel === 1) {
         return false;
       }
       $(node).closest('tr').siblings(':last').children().find('.node:first').each(function(index, node) {
@@ -60,12 +60,12 @@
           $children[0].style.offsetWidth = $children[0].offsetWidth;
         }
         $children.removeClass('slide-up');
-        showDescendents(node, depth--);
+        showDescendents(node, visibleLevel--);
       });
     };
 
     $('#chart-container').orgchart({
-      'depth': 2,
+      'visibleLevel': 2,
       'data' : datascource,
       'nodeContent': 'title',
       'createNode': function($node, data) {
diff --git a/demo/export-chart.html b/demo/export-chart.html
index 3ac1e7c0..5b6beaf6 100644
--- a/demo/export-chart.html
+++ b/demo/export-chart.html
@@ -51,7 +51,7 @@
 
     $('#chart-container').orgchart({
       'data' : datascource,
-      'depth': 2,
+      'visibleLevel': 2,
       'nodeContent': 'title',
       'exportButton': true,
       'exportFilename': 'MyOrgChart'
diff --git a/demo/index.html b/demo/index.html
index 4f947ab5..8bd289e4 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -134,9 +134,9 @@
     <li><a href="reload-data.html" target="_blank">refresh orgchart with new options</a></li>
     <li><a href="report-path.html" target="_blank">report path</a></li>
     <li><a href="toggle-sibs-resp.html" target="_blank">toggle sibling nodes respectively</a></li>
-    <li><a href="ul-datasource.html">ul datasource</a></li>
-    <li><a href="vertical-depth.html">hybrid(horizontal + vertical) chart</a></li>
-    <li><a href="custom-template.html">template for internal structure of node</a></li>
+    <li><a href="ul-datasource.html" target="_blank">ul datasource</a></li>
+    <li><a href="vertical-level.html" target="_blank">hybrid(horizontal + vertical) chart</a></li>
+    <li><a href="custom-template.html" target="_blank">template for internal structure of node</a></li>
   </ol>
   </section>
 </body>
diff --git a/demo/local-datasource.html b/demo/local-datasource.html
index 4eb1d471..60a81f06 100644
--- a/demo/local-datasource.html
+++ b/demo/local-datasource.html
@@ -34,7 +34,7 @@
         },
         { 'name': 'Hong Miao', 'title': 'department manager' }
       ]
-    }
+    };
 
     $('#chart-container').orgchart({
       'data' : datasource,
diff --git a/demo/option-createNode.html b/demo/option-createNode.html
index aab24de5..5e14fd11 100644
--- a/demo/option-createNode.html
+++ b/demo/option-createNode.html
@@ -75,7 +75,7 @@
 
     $('#chart-container').orgchart({
       'data' : datascource,
-      'depth': 2,
+      'visibleLevel': 2,
       'nodeContent': 'title',
       'nodeID': 'id',
       'createNode': function($node, data) {
diff --git a/demo/vertical-depth.html b/demo/vertical-level.html
similarity index 97%
rename from demo/vertical-depth.html
rename to demo/vertical-level.html
index 0873c577..cc16648e 100644
--- a/demo/vertical-depth.html
+++ b/demo/vertical-level.html
@@ -63,8 +63,8 @@
     $('#chart-container').orgchart({
       'data' : datascource,
       'nodeContent': 'title',
-      'verticalDepth': 3,
-      'depth': 4
+      'verticalLevel': 3,
+      'visibleLevel': 4
     });
 
   });
diff --git a/src/js/jquery.orgchart.js b/src/js/jquery.orgchart.js
index 087a5a10..5748f99d 100644
--- a/src/js/jquery.orgchart.js
+++ b/src/js/jquery.orgchart.js
@@ -24,7 +24,7 @@
       'nodeTitle': 'name',
       'nodeId': 'id',
       'toggleSiblingsResp': false,
-      'depth': 999,
+      'visibleLevel': 999,
       'chartClass': '',
       'exportButton': false,
       'exportFilename': 'OrgChart',
@@ -66,7 +66,7 @@
         if (data instanceof $) { // ul datasource
           this.buildHierarchy($chart, this.buildJsonDS(data.children()), 0, this.options);
         } else { // local json datasource
-          this.buildHierarchy($chart, this.options.ajaxURL ? data : this.attachRel(data, '00'), 0, this.options);
+          this.buildHierarchy($chart, this.options.ajaxURL ? data : this.attachRel(data, '00'));
         }
       } else {
         $chart.append('<i class="fa fa-circle-o-notch fa-spin spinner"></i>');
@@ -509,6 +509,7 @@
     },
     //
     hideChildrenEnd: function (event) {
+      var $node = event.data.node;
       event.data.animatedNodes.removeClass('sliding');
       if (event.data.isVerticalDesc) {
         event.data.lowerLevel.addClass('hidden');
@@ -516,8 +517,8 @@
         event.data.animatedNodes.closest('.nodes').prevAll('.lines').removeAttr('style').addBack().addClass('hidden');
         event.data.lowerLevel.last().find('.verticalNodes').addClass('hidden');
       }
-      if (this.isInAction(event.data.node)) {
-        this.switchVerticalArrow(event.data.node.children('.bottomEdge'));
+      if (this.isInAction($node)) {
+        this.switchVerticalArrow($node.children('.bottomEdge'));
       }
     },
     // recursively hide the descendant nodes of the specified node
@@ -672,7 +673,7 @@
     },
     //
     switchHorizontalArrow: function ($node) {
-      var opts = $node.closest('.orgchart').data('options');
+      var opts = this.options;
       if (opts.toggleSiblingsResp && (typeof opts.ajaxURL === 'undefined' || $node.closest('.nodes').data('siblingsLoaded'))) {
         var $prevSib = $node.closest('table').parent().prev();
         if ($prevSib.length) {
@@ -740,16 +741,14 @@
         if (that.$chart.data('inAjax')) {
           if (rel === 'parent') {
             if (!$.isEmptyObject(data)) {
-              that.addParent($edge.parent(), data, opts);
+              that.addParent($edge.parent(), data);
             }
           } else if (rel === 'children') {
             if (data.children.length) {
-              that.addChildren($edge.parent(), data, $.extend({}, opts, { depth: 0 }));
+              that.addChildren($edge.parent(), data[rel]);
             }
           } else {
-            if (data.siblings || data.children) {
-              that.addSiblings($edge.parent(), data, opts);
-            }
+            that.addSiblings($edge.parent(), data.siblings ? data.siblings : data);
           }
         }
       })
@@ -1117,29 +1116,40 @@
       // Dispatch the simulated event to the target element
       event.target.dispatchEvent(simulatedEvent);
     },
+    //
+    bindDragDrop: function ($node) {
+      $node.on('dragstart', this.dragstartHandler.bind(this))
+        .on('dragover', this.dragoverHandler.bind(this))
+        .on('dragend', this.dragendHandler.bind(this))
+        .on('drop', this.dropHandler.bind(this))
+        .on('touchstart', this.touchstartHandler.bind(this))
+        .on('touchmove', this.touchmoveHandler.bind(this))
+        .on('touchend', this.touchendHandler.bind(this));
+    },
     // create node
-    createNode: function (nodeData, level, opts) {
+    createNode: function (data) {
       var that = this;
-      if (nodeData.children) {
-        $.each(nodeData.children, function (index, child) {
-          child.parentId = nodeData.id;
+      var opts = this.options;
+      var level = data.level;
+      if (data.children) {
+        $.each(data.children, function (index, child) {
+          child.parentId = data.id;
         });
       }
-      var dtd = $.Deferred();
       // construct the content of node
-      var $nodeDiv = $('<div' + (opts.draggable ? ' draggable="true"' : '') + (nodeData[opts.nodeId] ? ' id="' + nodeData[opts.nodeId] + '"' : '') + (nodeData.parentId ? ' data-parent="' + nodeData.parentId + '"' : '') + '>')
-        .addClass('node ' + (nodeData.className || '') +  (level >= opts.depth ? ' slide-up' : ''));
+      var $nodeDiv = $('<div' + (opts.draggable ? ' draggable="true"' : '') + (data[opts.nodeId] ? ' id="' + data[opts.nodeId] + '"' : '') + (data.parentId ? ' data-parent="' + data.parentId + '"' : '') + '>')
+        .addClass('node ' + (data.className || '') +  (level > opts.visibleLevel ? ' slide-up' : ''));
       if (opts.nodeTemplate) {
-        $nodeDiv.append(opts.nodeTemplate(nodeData));
+        $nodeDiv.append(opts.nodeTemplate(data));
       } else {
-        $nodeDiv.append('<div class="title">' + nodeData[opts.nodeTitle] + '</div>')
-          .append(typeof opts.nodeContent !== 'undefined' ? '<div class="content">' + (nodeData[opts.nodeContent] || '') + '</div>' : '');
+        $nodeDiv.append('<div class="title">' + data[opts.nodeTitle] + '</div>')
+          .append(typeof opts.nodeContent !== 'undefined' ? '<div class="content">' + (data[opts.nodeContent] || '') + '</div>' : '');
       }
       // append 4 direction arrows or expand/collapse buttons
-      var flags = nodeData.relationship || '';
-      if (opts.verticalDepth && (level + 2) > opts.verticalDepth) {
-        if ((level + 1) >= opts.verticalDepth && Number(flags.substr(2,1))) {
-          var icon = level + 1  >= opts.depth ? 'plus' : 'minus';
+      var flags = data.relationship || '';
+      if (opts.verticalLevel && level >= opts.verticalLevel) {
+        if ((level + 1) > opts.verticalLevel && Number(flags.substr(2,1))) {
+          var icon = level + 1 > opts.visibleLevel ? 'plus' : 'minus';
           $nodeDiv.append('<i class="toggleBtn fa fa-' + icon + '-square"></i>');
         }
       } else {
@@ -1158,154 +1168,124 @@
 
       $nodeDiv.on('mouseenter mouseleave', this.nodeEnterLeaveHandler.bind(this));
       $nodeDiv.on('click', this.nodeClickHandler.bind(this));
-      $nodeDiv.on('click', '.topEdge', { 'nodeData': nodeData }, this.topEdgeClickHandler.bind(this));
-      $nodeDiv.on('click', '.bottomEdge', { 'nodeData': nodeData }, this.bottomEdgeClickHandler.bind(this));
-      $nodeDiv.on('click', '.leftEdge, .rightEdge', { 'nodeData': nodeData }, this.hEdgeClickHandler.bind(this));
+      $nodeDiv.on('click', '.topEdge', { 'nodeData': data }, this.topEdgeClickHandler.bind(this));
+      $nodeDiv.on('click', '.bottomEdge', { 'nodeData': data }, this.bottomEdgeClickHandler.bind(this));
+      $nodeDiv.on('click', '.leftEdge, .rightEdge', { 'nodeData': data }, this.hEdgeClickHandler.bind(this));
       $nodeDiv.on('click', '.toggleBtn', this.toggleVNodes.bind(this));
 
       if (opts.draggable) {
-        $nodeDiv.on('dragstart', this.dragstartHandler.bind(this))
-        .on('dragover', this.dragoverHandler.bind(this))
-        .on('dragend', this.dragendHandler.bind(this))
-        .on('drop', this.dropHandler.bind(this))
-        .on('touchstart', this.touchstartHandler.bind(this))
-        .on('touchmove', this.touchmoveHandler.bind(this))
-        .on('touchend', this.touchendHandler.bind(this));
+        this.bindDragDrop($nodeDiv);
         this.touchHandled = false;
         this.touchMoved = false;
         this.touchTargetNode = null;
       }
       // allow user to append dom modification after finishing node create of orgchart
       if (opts.createNode) {
-        opts.createNode($nodeDiv, nodeData);
+        opts.createNode($nodeDiv, data);
       }
-      dtd.resolve($nodeDiv);
-      return dtd.promise();
+
+      return $nodeDiv;
     },
     // recursively build the tree
-    buildHierarchy: function ($appendTo, nodeData, level, opts, callback) {
+    buildHierarchy: function ($appendTo, data) {
       var that = this;
-      var $nodeWrapper;
+      var opts = this.options;
+      var level = 0;
+      if (data.level) {
+        level = data.level;
+      } else {
+        level = data.level = $appendTo.parentsUntil('.orgchart', '.nodes').length + 1;
+      }
       // Construct the node
-      var $childNodes = nodeData.children;
-      var hasChildren = $childNodes ? $childNodes.length : false;
-      var isVerticalNode = (opts.verticalDepth && (level + 1) >= opts.verticalDepth) ? true : false;
-      if (Object.keys(nodeData).length > 1) { // if nodeData has nested structure
-        $nodeWrapper = isVerticalNode ? $appendTo : $('<table>');
-        if (!isVerticalNode) {
-          $appendTo.append($nodeWrapper);
+      var childrenData = data.children;
+      var hasChildren = childrenData ? childrenData.length : false;
+      var $nodeWrapper;
+      if (Object.keys(data).length > 2) {
+        var $nodeDiv = this.createNode(data);
+        if (opts.verticalLevel && level >= opts.verticalLevel) {
+          $appendTo.append($nodeDiv);
+        }else {
+          $nodeWrapper = $('<table>');
+          $appendTo.append($nodeWrapper.append($('<tr/>').append($('<td' + (hasChildren ? ' colspan="' + childrenData.length * 2 + '"' : '') + '></td>').append($nodeDiv))));
         }
-        $.when(this.createNode(nodeData, level, opts))
-        .done(function($nodeDiv) {
-          if (isVerticalNode) {
-            $nodeWrapper.append($nodeDiv);
-          }else {
-            $nodeWrapper.append($('<tr/>').append($('<td' + (hasChildren ? ' colspan="' + $childNodes.length * 2 + '"' : '') + '></td>').append($nodeDiv)));
-          }
-          if (callback) {
-            callback();
-          }
-        })
-        .fail(function() {
-          console.log('Failed to creat node')
-        });
       }
-      // Construct the inferior nodes and connectiong lines
+      // Construct the lower level(two "connectiong lines" rows and "inferior nodes" row)
       if (hasChildren) {
-        if (Object.keys(nodeData).length === 1) { // if nodeData is just an array
-          $nodeWrapper = $appendTo;
-        }
-        var isHidden = (level + 1 >= opts.depth || nodeData.collapsed) ? ' hidden' : '';
-        var isVerticalLayer = (opts.verticalDepth && (level + 2) >= opts.verticalDepth) ? true : false;
-
-        // draw the line close to parent node
-        if (!isVerticalLayer) {
-          $nodeWrapper.append('<tr class="lines' + isHidden + '"><td colspan="' + $childNodes.length * 2 + '"><div class="downLine"></div></td></tr>');
-        }
-        // draw the lines close to children nodes
-        var lineLayer = '<tr class="lines' + isHidden + '"><td class="rightLine"></td>';
-        for (var i=1; i<$childNodes.length; i++) {
-          lineLayer += '<td class="leftLine topLine"></td><td class="rightLine topLine"></td>';
-        }
-        lineLayer += '<td class="leftLine"></td></tr>';
-        var $nodeLayer;
+        var isHidden = (level + 1 > opts.visibleLevel || data.collapsed) ? ' hidden' : '';
+        var isVerticalLayer = (opts.verticalLevel && (level + 1) >= opts.verticalLevel) ? true : false;
+        var $nodesLayer;
         if (isVerticalLayer) {
-          $nodeLayer = $('<ul>');
-          if (isHidden && opts.depth + 1 !== opts.verticalDepth) {
-            $nodeLayer.addClass(isHidden);
+          $nodesLayer = $('<ul>');
+          if (isHidden && level + 1 > opts.verticalLevel) {
+            $nodesLayer.addClass(isHidden);
           }
-          if (level + 2 === opts.verticalDepth) {
-            $nodeWrapper.append('<tr class="verticalNodes' + isHidden + '"><td></td></tr>')
-              .find('.verticalNodes').children().append($nodeLayer);
+          if (level + 1 === opts.verticalLevel) {
+            $appendTo.children('table').append('<tr class="verticalNodes' + isHidden + '"><td></td></tr>')
+              .find('.verticalNodes').children().append($nodesLayer);
           } else {
-            $nodeWrapper.append($nodeLayer);
+            $appendTo.append($nodesLayer);
           }
         } else {
-          $nodeLayer = $('<tr class="nodes' + isHidden + '">');
-          $nodeWrapper.append(lineLayer).append($nodeLayer);
+          var $upperLines = $('<tr class="lines' + isHidden + '"><td colspan="' + childrenData.length * 2 + '"><div class="downLine"></div></td></tr>');
+          var lowerLines = '<tr class="lines' + isHidden + '"><td class="rightLine"></td>';
+          for (var i=1; i<childrenData.length; i++) {
+            lowerLines += '<td class="leftLine topLine"></td><td class="rightLine topLine"></td>';
+          }
+          lowerLines += '<td class="leftLine"></td></tr>';
+          $nodesLayer = $('<tr class="nodes' + isHidden + '">');
+          if (Object.keys(data).length === 2) {
+            $appendTo.append($upperLines).append(lowerLines).append($nodesLayer);
+          } else {
+            $nodeWrapper.append($upperLines).append(lowerLines).append($nodesLayer);
+          }
         }
         // recurse through children nodes
-        $.each($childNodes, function() {
+        $.each(childrenData, function () {
           var $nodeCell = isVerticalLayer ? $('<li>') : $('<td colspan="2">');
-          $nodeLayer.append($nodeCell);
-          that.buildHierarchy($nodeCell, this, level + 1, opts, callback);
+          $nodesLayer.append($nodeCell);
+          this.level = level + 1;
+          that.buildHierarchy($nodeCell, this);
         });
       }
     },
     // build the child nodes of specific node
-    buildChildNode: function ($appendTo, nodeData, opts, callback) {
-      var opts = opts || $appendTo.closest('.orgchart').data('options');
-      var data = nodeData.children || nodeData.siblings;
+    buildChildNode: function ($appendTo, data) {
       $appendTo.find('td:first').attr('colspan', data.length * 2);
-      this.buildHierarchy($appendTo, { 'children': data }, 0, opts, callback);
+      this.buildHierarchy($appendTo, { 'children': data });
     },
     // exposed method
-    addChildren: function ($node, data, opts) {
-      var that = this;
-      var opts = opts || $node.closest('.orgchart').data('options');
-      var count = 0;
-      this.buildChildNode($node.closest('table'), data, opts, function() {
-        if (++count === data.children.length) {
-          if (!$node.children('.bottomEdge').length) {
-            $node.append('<i class="edge verticalEdge bottomEdge fa"></i>');
-          }
-          if (!$node.find('.symbol').length) {
-            $node.children('.title').prepend('<i class="fa '+ opts.parentNodeSymbol + ' symbol"></i>');
-          }
-          that.showChildren($node);
-        }
-      });
+    addChildren: function ($node, data) {
+      this.buildChildNode($node.closest('table'), data);
+      if (!$node.children('.bottomEdge').length) {
+        $node.append('<i class="edge verticalEdge bottomEdge fa"></i>');
+      }
+      if (!$node.find('.symbol').length) {
+        $node.children('.title').prepend('<i class="fa '+ this.options.parentNodeSymbol + ' symbol"></i>');
+      }
+      if (this.isInAction($node)) {
+        this.switchVerticalArrow($node.children('.bottomEdge'));
+      }
     },
     // build the parent node of specific node
-    buildParentNode: function ($currentRoot, nodeData, opts, callback) {
-      var that = this;
-      var $table = $('<table>');
-      nodeData.relationship = nodeData.relationship || '001';
-      $.when(this.createNode(nodeData, 0, opts || $currentRoot.closest('.orgchart').data('options')))
-        .done(function($nodeDiv) {
-          $table.append($('<tr class="hidden">').append($('<td colspan="2">').append($nodeDiv.removeClass('slide-up').addClass('slide-down'))));
-          $table.append('<tr class="lines hidden"><td colspan="2"><div class="downLine"></div></td></tr>');
-          var linesRow = '<td class="rightLine"></td><td class="leftLine"></td>';
-          $table.append('<tr class="lines hidden">' + linesRow + '</tr>');
-          var $chart = that.$chart;
-          $chart.prepend($table)
-            .children('table:first').append('<tr class="nodes"><td colspan="2"></td></tr>')
-            .children('tr:last').children().append($chart.children('table').last());
-          callback();
-        })
-        .fail(function() {
-          console.log('Failed to create parent node');
-        });
+    buildParentNode: function ($currentRoot, data) {
+      data.relationship = data.relationship || '001';
+      var $table = $('<table>')
+        .append($('<tr>').append($('<td colspan="2">').append(this.createNode(data))))
+        .append('<tr class="lines"><td colspan="2"><div class="downLine"></div></td></tr>')
+        .append('<tr class="lines"><td class="rightLine"></td><td class="leftLine"></td></tr>');
+      this.$chart.prepend($table)
+        .children('table:first').append('<tr class="nodes"><td colspan="2"></td></tr>')
+        .children('tr:last').children().append(this.$chart.children('table').last());
     },
     // exposed method
-    addParent: function ($currentRoot, data, opts) {
-      var that = this;
-      this.buildParentNode($currentRoot, data, opts, function() {
-        if (!$currentRoot.children('.topEdge').length) {
-          $currentRoot.children('.title').after('<i class="edge verticalEdge topEdge fa"></i>');
-        }
-        that.showParent($currentRoot);
-      });
+    addParent: function ($currentRoot, data) {
+      this.buildParentNode($currentRoot, data);
+      if (!$currentRoot.children('.topEdge').length) {
+        $currentRoot.children('.title').after('<i class="edge verticalEdge topEdge fa"></i>');
+      }
+      if (this.isInAction($currentRoot)) {
+        this.switchVerticalArrow($currentRoot.children('.topEdge'));
+      }
     },
     // subsequent processing of build sibling nodes
     complementLine: function ($oneSibling, siblingCount, existingSibligCount) {
@@ -1317,10 +1297,8 @@
         .end().next().children(':first').after(lines);
     },
     // build the sibling nodes of specific node
-    buildSiblingNode: function ($nodeChart, nodeData, opts, callback) {
-      var that = this;
-      var opts = opts || $nodeChart.closest('.orgchart').data('options');
-      var newSiblingCount = nodeData.siblings ? nodeData.siblings.length : nodeData.children.length;
+    buildSiblingNode: function ($nodeChart, data) {
+      var newSiblingCount = $.isArray(data) ? data.length : data.children.length;
       var existingSibligCount = $nodeChart.parent().is('td') ? $nodeChart.closest('tr').children().length : 1;
       var siblingCount = existingSibligCount + newSiblingCount;
       var insertPostion = (siblingCount > 1) ? Math.floor(siblingCount/2 - 1) : 0;
@@ -1328,48 +1306,30 @@
       if ($nodeChart.parent().is('td')) {
         var $parent = $nodeChart.closest('tr').prevAll('tr:last');
         $nodeChart.closest('tr').prevAll('tr:lt(2)').remove();
-        var childCount = 0;
-        this.buildChildNode($nodeChart.parent().closest('table'), nodeData, opts, function() {
-          if (++childCount === newSiblingCount) {
-            var $siblingTds = $nodeChart.parent().closest('table').children('tr:last').children('td');
-            if (existingSibligCount > 1) {
-              that.complementLine($siblingTds.eq(0).before($nodeChart.closest('td').siblings().addBack().unwrap()), siblingCount, existingSibligCount);
-              $siblingTds.addClass('hidden').find('.node').addClass('slide-left');
-            } else {
-              that.complementLine($siblingTds.eq(insertPostion).after($nodeChart.closest('td').unwrap()), siblingCount, 1);
-              $siblingTds.not(':eq(' + insertPostion + 1 + ')').addClass('hidden')
-                .slice(0, insertPostion).find('.node').addClass('slide-right')
-                .end().end().slice(insertPostion).find('.node').addClass('slide-left');
-            }
-            callback();
-          }
-        });
+        this.buildChildNode($nodeChart.parent().closest('table'), data);
+        var $siblingTds = $nodeChart.parent().closest('table').children('tr:last').children('td');
+        if (existingSibligCount > 1) {
+          this.complementLine($siblingTds.eq(0).before($nodeChart.closest('td').siblings().addBack().unwrap()), siblingCount, existingSibligCount);
+        } else {
+          this.complementLine($siblingTds.eq(insertPostion).after($nodeChart.closest('td').unwrap()), siblingCount, 1);
+        }
       } else { // build the sibling nodes and parent node for the specific ndoe
-        var nodeCount = 0;
-        this.buildHierarchy($nodeChart.closest('.orgchart'), nodeData, 0, opts, function() {
-          if (++nodeCount === siblingCount) {
-            that.complementLine($nodeChart.next().children('tr:last')
-              .children().eq(insertPostion).after($('<td colspan="2">')
-              .append($nodeChart)), siblingCount, 1);
-            $nodeChart.closest('tr').siblings().eq(0).addClass('hidden').find('.node').addClass('slide-down');
-            $nodeChart.parent().siblings().addClass('hidden')
-              .slice(0, insertPostion).find('.node').addClass('slide-right')
-              .end().end().slice(insertPostion).find('.node').addClass('slide-left');
-            callback();
-          }
-        });
+        this.buildHierarchy($nodeChart.closest('.orgchart'), data);
+        this.complementLine($nodeChart.next().children('tr:last').children().eq(insertPostion).after($('<td colspan="2">').append($nodeChart)),
+          siblingCount, 1);
       }
     },
     //
-    addSiblings: function ($node, data, opts) {
-      var that = this;
-      this.buildSiblingNode($node.closest('table'), data, opts, function() {
-        $node.closest('.nodes').data('siblingsLoaded', true);
-        if (!$node.children('.leftEdge').length) {
-          $node.children('.topEdge').after('<i class="edge horizontalEdge rightEdge fa"></i><i class="edge horizontalEdge leftEdge fa"></i>');
-        }
-        that.showSiblings($node);
-      });
+    addSiblings: function ($node, data) {
+      this.buildSiblingNode($node.closest('table'), data);
+      $node.closest('.nodes').data('siblingsLoaded', true);
+      if (!$node.children('.leftEdge').length) {
+        $node.children('.topEdge').after('<i class="edge horizontalEdge rightEdge fa"></i><i class="edge horizontalEdge leftEdge fa"></i>');
+      }
+      if (this.isInAction($node)) {
+        this.switchHorizontalArrow($node);
+        $node.children('.topEdge').removeClass('fa-chevron-up').addClass('fa-chevron-down');
+      }
     },
     //
     removeNodes: function ($node) {
diff --git a/test/e2e/pan-zoom/page-model.js b/test/e2e/pan-zoom/page-model.js
new file mode 100644
index 00000000..e823f375
--- /dev/null
+++ b/test/e2e/pan-zoom/page-model.js
@@ -0,0 +1,9 @@
+import { Selector } from 'testcafe';
+
+const orgchart = Selector('.orgchart');
+
+export default class Page {
+  constructor () {
+    this.chart = orgchart;
+  }
+}
\ No newline at end of file
diff --git a/test/e2e/pan-zoom/test.js b/test/e2e/pan-zoom/test.js
new file mode 100644
index 00000000..f83b179c
--- /dev/null
+++ b/test/e2e/pan-zoom/test.js
@@ -0,0 +1,33 @@
+import { Selector } from 'testcafe';
+import Page from './page-model';
+
+fixture `Pan & Zoom`
+  .page `../../../demo/pan-zoom.html`;
+
+const page = new Page();
+const chart = page.chart;
+
+test('drag the chart to the top', async t => {
+  await t
+      .drag(chart, 0, -200, { offsetX: 10, offsetY: 300 })
+      // .expect(chart.style).contains({transform: 'matrix(1, 0, 0, 1, 0, -200)'});
+      .expect(chart.getAttribute('style')).contains('transform: matrix(1, 0, 0, 1, 0, -200)');
+});
+
+test('drag the chart to the bottom', async t => {
+  await t
+      .drag(chart, 0, 200, { offsetX: 10, offsetY: 10 })
+      .expect(chart.getAttribute('style')).contains('transform: matrix(1, 0, 0, 1, 0, 200)');
+});
+
+test('drag the chart to the left', async t => {
+  await t
+      .drag(chart, -200, 0, { offsetX: 300, offsetY: 10 })
+      .expect(chart.getAttribute('style')).contains('transform: matrix(1, 0, 0, 1, -200, 0)');
+});
+
+test('drag the chart to the right', async t => {
+  await t
+      .drag(chart, 200, 0, { offsetX: 10, offsetY: 10 })
+      .expect(chart.getAttribute('style')).contains('transform: matrix(1, 0, 0, 1, 200, 0)');
+});
\ No newline at end of file
diff --git a/test/e2e/vertical-depth/page-model.js b/test/e2e/vertical-level/page-model.js
similarity index 100%
rename from test/e2e/vertical-depth/page-model.js
rename to test/e2e/vertical-level/page-model.js
diff --git a/test/e2e/vertical-depth/test.js b/test/e2e/vertical-level/test.js
similarity index 96%
rename from test/e2e/vertical-depth/test.js
rename to test/e2e/vertical-level/test.js
index cd937627..718cb808 100644
--- a/test/e2e/vertical-depth/test.js
+++ b/test/e2e/vertical-level/test.js
@@ -1,7 +1,7 @@
 import Page from './page-model';
 
 fixture `Hybrid(horizontal + vertical) Chart`
-  .page `../../../demo/vertical-depth.html`;
+  .page `../../../demo/vertical-level.html`;
 
 const page = new Page();
 const sumiao = page.sumiao;
diff --git a/test/integration/init-tests.js b/test/integration/init-tests.js
new file mode 100644
index 00000000..d2fa74b8
--- /dev/null
+++ b/test/integration/init-tests.js
@@ -0,0 +1,218 @@
+var chai = require('chai');
+var sinon = require('sinon');
+var sinonChai = require('sinon-chai');
+var should = chai.should();
+chai.use(sinonChai);
+require('jsdom-global')();
+var $ = require('jquery');
+require('../../src/js/jquery.orgchart');
+
+describe('orgchart -- integration tests', function () {
+  document.body.innerHTML = '<div id="chart-container"></div>';
+  var $container = $('#chart-container'),
+  ds = {
+    'id': 'n1',
+    'name': 'Lao Lao',
+    'children': [
+      { 'id': 'n2', 'name': 'Bo Miao' },
+      { 'id': 'n3', 'name': 'Su Miao' }
+    ]
+  },
+  fragment = '<div class="orgchart"><table><tr><td colspan="4"><div id="n1" class="node">' +
+    '<div class="title"><i class="fa fa-users symbol"></i>Lao Lao</div><i class="edge verticalEdge bottomEdge fa"></i></div>' +
+    '</td></tr><tr class="lines"><td colspan="4"><div class="downLine"></div></td></tr>' +
+    '<tr class="lines"><td class="rightLine"></td><td class="leftLine topLine"></td>' +
+    '<td class="rightLine topLine"></td><td class="leftLine"></td></tr><tr class="nodes"><td colspan="2"><table><tr><td>' +
+    '<div id="n2" data-parent="n1" class="node"><div class="title">Bo Miao</div><i class="edge verticalEdge topEdge fa"></i>' +
+    '<i class="edge horizontalEdge rightEdge fa"></i><i class="edge horizontalEdge leftEdge fa"></i></div></td></tr></table></td>' +
+    '<td colspan="2"><table><tr><td><div id="n3" data-parent="n1" class="node"><div class="title">Su Miao</div>' +
+    '<i class="edge verticalEdge topEdge fa"></i><i class="edge horizontalEdge rightEdge fa"></i>' +
+    '<i class="edge horizontalEdge leftEdge fa"></i></div></td></tr></table></td></tr></table></div>',
+  oc = {};
+    
+  afterEach(function () {
+    $container.empty();
+  });
+
+  describe('init()', function () {
+    it('initialize chart with json datasource', function () {
+      oc = $container.orgchart({
+        'data': ds
+      });
+      $container.html().should.equal(fragment);
+    });
+
+    it('initialize chart with <ul> datasource', function () {
+      var $ul = $(
+        '<ul id="ul-data">' +
+          '<li data-id="n1">Lao Lao' +
+            '<ul>' +
+              '<li data-id="n2">Bo Miao</li>' +
+              '<li data-id="n3">Su Miao</li>' +
+              '</ul>' +
+          '</li>' +
+        '</ul>'
+      );
+      $('body').append($ul);
+      oc = $container.orgchart({
+        'data': $('#ul-data')
+      });
+      $container.html().should.equal(fragment);
+      $ul.remove();
+    });
+
+    it('initialize chart with the given visible level', function () {
+      oc = $container.orgchart({
+        'data': ds,
+        'visibleLevel': 1
+      });
+      oc.$chart.find('tr').eq(0).is('.hidden').should.be.false;
+      oc.$chart.find('tr').eq(1).is('.hidden').should.be.true;
+      oc.$chart.find('tr').eq(2).is('.hidden').should.be.true;
+      oc.$chart.find('tr').eq(3).is('.hidden').should.be.true;
+    });
+
+    it('initialize chart with the given vertical level', function () {
+      var fragment = 
+        '<tr class="verticalNodes">' +
+         '<td>' +
+           '<ul>' +
+             '<li><div id="n2" data-parent="n1" class="node"><div class="title">Bo Miao</div></div></li>' +
+             '<li><div id="n3" data-parent="n1" class="node"><div class="title">Su Miao</div></div></li>' +
+            '</ul>'+
+          '</td>'+
+        '</tr>';
+      oc = $container.orgchart({
+        'data': ds,
+        'verticalLevel': 2
+      });
+      oc.$chart.find('tr').eq(1).prop('outerHTML').should.equal(fragment);
+    });
+
+    context('initialize chart with various combinations of "visibleLevel" and "verticalLevel" ', function () {
+      var ds = {
+        'name': 'Lao Lao',
+        'children': [
+          { 'name': 'Bo Miao'
+          },
+          { 'name': 'Su Miao',
+            'children': [
+              { 'name': 'Tie Hua' },
+              { 'name': 'Hei Hei' }
+            ]
+          }
+        ]
+      };
+
+      it('verticalLevel=2 and visibleLevel=1', function () {
+        var fragment = '<div class="orgchart"><table><tr><td colspan="4"><div class="node"><div class="title"><i class="fa fa-users symbol"></i>Lao Lao</div>' +
+          '<i class="edge verticalEdge bottomEdge fa"></i></div></td></tr><tr class="verticalNodes hidden"><td><ul><li><div class="node slide-up">' +
+          '<div class="title">Bo Miao</div></div></li><li><div class="node slide-up"><div class="title">Su Miao</div>' +
+          '<i class="toggleBtn fa fa-plus-square"></i></div><ul class="hidden"><li><div class="node slide-up"><div class="title">Tie Hua</div></div></li>' +
+          '<li><div class="node slide-up"><div class="title">Hei Hei</div></div></li></ul></li></ul></td></tr></table></div>';
+        oc = $container.orgchart({
+          'data': ds,
+          'verticalLevel': 2,
+          'visibleLevel': 1
+        });
+        $container.html().should.equal(fragment);
+      });
+
+      it('verticalLevel=2 and visibleLevel=2', function () {
+        var fragment = '<div class="orgchart"><table><tr><td colspan="4"><div class="node"><div class="title"><i class="fa fa-users symbol"></i>Lao Lao</div>' +
+          '<i class="edge verticalEdge bottomEdge fa"></i></div></td></tr><tr class="verticalNodes"><td><ul><li><div class="node">' +
+          '<div class="title">Bo Miao</div></div></li><li><div class="node"><div class="title">Su Miao</div><i class="toggleBtn fa fa-plus-square"></i></div>' +
+          '<ul class="hidden"><li><div class="node slide-up"><div class="title">Tie Hua</div></div></li><li><div class="node slide-up">' +
+          '<div class="title">Hei Hei</div></div></li></ul></li></ul></td></tr></table></div>';
+        oc = $container.orgchart({
+          'data': ds,
+          'verticalLevel': 2,
+          'visibleLevel': 2
+        });
+        $container.html().should.equal(fragment);
+      });
+
+      it('verticalLevel=2 and visibleLevel=3', function () {
+        var fragment = '<div class="orgchart"><table><tr><td colspan="4"><div class="node"><div class="title"><i class="fa fa-users symbol"></i>Lao Lao</div>' +
+          '<i class="edge verticalEdge bottomEdge fa"></i></div></td></tr><tr class="verticalNodes"><td><ul><li><div class="node">' +
+          '<div class="title">Bo Miao</div></div></li><li><div class="node"><div class="title">Su Miao</div><i class="toggleBtn fa fa-minus-square"></i></div>' +
+          '<ul><li><div class="node"><div class="title">Tie Hua</div></div></li><li><div class="node"><div class="title">Hei Hei</div></div>' +
+          '</li></ul></li></ul></td></tr></table></div>';
+        oc = $container.orgchart({
+          'data': ds,
+          'verticalLevel': 2,
+          'visibleLevel': 3
+        });
+        $container.html().should.equal(fragment);
+      });
+    });
+
+    it('initCompleted should be invoked immediately after construting one node', function () {
+      var spy = sinon.spy();
+      oc = $container.orgchart({
+        'data': ds,
+        'createNode': spy
+      });
+      spy.should.have.been.callCount(3);
+      spy.should.have.been.calledWithMatch($('#n1'),{ 'id': 'n1', 'name': 'Lao Lao' });
+      spy.should.have.been.calledWithMatch($('#n2'),{ 'id': 'n2', 'name': 'Bo Miao' });
+      spy.should.have.been.calledWithMatch($('#n3'),{ 'id': 'n3', 'name': 'Su Miao' });
+      // spy.should.always.have.been.calledOn(oc);
+    });
+
+    it('initialize chart with default className', function () {
+      oc = $container.orgchart({
+        'data': ds,
+        'chartClass': 'demo'
+      });
+      oc.$chart.is('.demo').should.be.true;
+    });
+
+    it('initialize chart with export button', function () {
+      oc = $container.orgchart({
+        'data': ds,
+        'exportButton': true
+      });
+      $container.children('button').prop('outerHTML').should.equal('<button class="oc-export-btn">Export</button>');
+    });
+
+    it('initialize chart with "bottom to top" direction', function () {
+      oc = $container.orgchart({
+        'data': ds,
+        'direction': 'b2t'
+      });
+      oc.$chart.is('.b2t').should.be.true;
+    });
+
+    it('reinitialize chart with drggable feature', function () {
+      oc = $container.orgchart({
+        'data': ds
+      });
+      var spy = sinon.spy(oc, 'bindDragDrop');
+      oc.init({ 'draggable': true });
+      spy.should.have.been.callCount(3);
+      spy.should.have.been.calledWith($('#n1'));
+      spy.should.have.been.calledWithMatch($('#n2'));
+      spy.should.have.been.calledWithMatch($('#n3'));
+    });
+
+    it('reinitialize chart with pan feature', function () {
+      oc = $container.orgchart({
+        'data': ds
+      });
+      var spy = sinon.spy(oc, 'bindPan');
+      oc.init({ 'pan': true });
+      spy.should.have.been.callCount(1);
+    });
+
+    it('reinitialize chart with zoom feature', function () {
+      oc = $container.orgchart({
+        'data': ds
+      });
+      var spy = sinon.spy(oc, 'bindZoom');
+      oc.init({ 'zoom': true });
+      spy.should.have.been.callCount(1);
+    });
+  });
+
+});
\ No newline at end of file
diff --git a/test/integration/tests.js b/test/integration/tests.js
index dec5fd90..5e7febb3 100644
--- a/test/integration/tests.js
+++ b/test/integration/tests.js
@@ -1,23 +1,18 @@
-var chai = require("chai");
-var sinon = require("sinon");
-var sinonChai = require("sinon-chai");
+var chai = require('chai');
+var sinon = require('sinon');
+var sinonChai = require('sinon-chai');
 var should = chai.should();
 chai.use(sinonChai);
-var jsdom = require("jsdom");
-var { JSDOM } = jsdom;
-var dom = new JSDOM('<!doctype html><html><body><div id="chart-container"></div></body></html>');
-global.window = dom.window;
-global.document = dom.window.document;
+require('jsdom-global')();
 var $ = require('jquery');
 require('../../src/js/jquery.orgchart');
 
 describe('orgchart -- integration tests', function () {
-
+  document.body.innerHTML = '<div id="chart-container"></div>';
   var $container = $('#chart-container'),
   ds = {
     'id': 'n1',
     'name': 'Lao Lao',
-    'title': 'general manager',
     'children': [
       { 'id': 'n2', 'name': 'Bo Miao' },
       { 'id': 'n3', 'name': 'Su Miao',
@@ -81,7 +76,7 @@ describe('orgchart -- integration tests', function () {
   $erdan;
 
   beforeEach(function () {
-    oc = $('#chart-container').orgchart({
+    oc = $container.orgchart({
       'data': ds
     }),
     $laolao = $('#n1'),
@@ -109,13 +104,13 @@ describe('orgchart -- integration tests', function () {
 
   describe('addChildren()', function () {
     it('Add child nodes to the leaf node', function () {
-      oc.addChildren($bomiao, { 'children': [{'name': 'Li Xin', 'id': 'n11' }] });
+      oc.addChildren($bomiao, [{'name': 'Li Xin', 'id': 'n11' }]);
       $bomiao.closest('tr').siblings().should.lengthOf(3);
       $bomiao.closest('tr').siblings('.nodes').find('.node').attr('id').should.equal('n11');
     });
 
     it('Add child nodes to the un-leaf node', function () {
-      oc.addChildren($sumiao, { 'children': [{'name': 'Li Xin', 'id': 'n11' }] });
+      oc.addChildren($sumiao, [{'name': 'Li Xin', 'id': 'n11' }]);
       $sumiao.closest('tr').siblings('.nodes').children().should.lengthOf(4);
       $sumiao.closest('tr').siblings('.nodes').children(':last').find('.node').attr('id').should.equal('n11');
     });
@@ -123,7 +118,7 @@ describe('orgchart -- integration tests', function () {
 
   describe('addSiblings()', function () {
     it('Just add sibling nodes', function () {
-      oc.addSiblings($sumiao, { 'siblings': [{'name': 'Li Xin', 'id': 'n11' }] });
+      oc.addSiblings($sumiao, [{'name': 'Li Xin', 'id': 'n11' }]);
       $laolao.closest('tr').siblings('.nodes').children().should.lengthOf(4);
       $laolao.closest('tr').siblings('.nodes').children(':last').find('.node').attr('id').should.equal('n11');
     });
diff --git a/test/unit/tests.js b/test/unit/tests.js
index 40e08bcd..7e57f635 100644
--- a/test/unit/tests.js
+++ b/test/unit/tests.js
@@ -3,16 +3,12 @@ var sinon = require("sinon");
 var sinonChai = require("sinon-chai");
 var should = chai.should();
 chai.use(sinonChai);
-var jsdom = require("jsdom");
-var { JSDOM } = jsdom;
-var dom = new JSDOM('<!doctype html><html><body><div id="chart-container"></div></body></html>');
-global.window = dom.window;
-global.document = dom.window.document;
+require('jsdom-global')();
 var $ = require('jquery');
 require('../../src/js/jquery.orgchart');
 
 describe('orgchart -- unit tests', function () {
-
+  document.body.innerHTML = '<div id="chart-container"></div>';
   var $container = $('#chart-container'),
   ds = {
     'id': 'n1',