orgchart 5.0.0 → 6.0.0

package/test/integration/tests.js

@@ -1,16 +1,63 @@
-var chai = require('chai');
-var sinon = require('sinon');
-var sinonChai = require('sinon-chai');
-var should = chai.should();
+const chai = require('chai');
+const sinon = require('sinon');
+const sinonChai = require('sinon-chai').default;
+const should = chai.should();
 chai.use(sinonChai);
 require('jsdom-global')();
-var $ = require('jquery');
-require('../../src/js/jquery.orgchart');
+process.env.ORGCHART_TEST = '1';
+const OrgChart = require('../../src/js/orgchart');
+const getState = OrgChart.__testing__.getState;
+const setState = OrgChart.__testing__.setState;
+
+function query(selector, root) {
+  return (root || document).querySelector(selector);
+}
+
+function queryAll(selector, root) {
+  return Array.from((root || document).querySelectorAll(selector));
+}
+
+function siblingElements(element, selector) {
+  if (!element || !element.parentElement) {
+    return [];
+  }
+  return Array.from(element.parentElement.children).filter(function (childEl) {
+    return childEl !== element && (!selector || childEl.matches(selector));
+  });
+}
+
+function cloneValue(value) {
+  return JSON.parse(JSON.stringify(value));
+}
+
+function dispatchNativeEvent(element, type, options) {
+  const eventOptions = Object.assign({ bubbles: true }, options);
+  let event;
+
+  if (/click|mouse/.test(type)) {
+    event = new window.MouseEvent(type, eventOptions);
+  } else {
+    event = new window.Event(type, eventOptions);
+  }
+  element.dispatchEvent(event);
+}
+
+function dispatchEventWithProperties(element, type, properties, options) {
+  const event = new window.Event(type, Object.assign({ bubbles: true }, options));
+
+  Object.keys(properties || {}).forEach(function (key) {
+    Object.defineProperty(event, key, {
+      configurable: true,
+      value: properties[key]
+    });
+  });
+  element.dispatchEvent(event);
+}
 
 describe('orgchart -- integration tests', function () {
-  document.body.innerHTML = '<div id="chart-container"></div>';
-  var $container = $('#chart-container'),
-  ds = {
+  let $container;
+
+  const ds = {
     'id': 'n1',
     'name': 'Lao Lao',
     'children': [
@@ -36,9 +83,11 @@ describe('orgchart -- integration tests', function () {
       },
       { 'id': 'n4', 'name': 'Hong Miao' },
     ]
-  },
-  oc = {},
-  hierarchy = {
+  };
+
+  let oc = {};
+
+  const hierarchy = {
     id: 'n1',
     children: [
       { id: 'n2' },
@@ -63,91 +112,1020 @@ describe('orgchart -- integration tests', function () {
       },
       { id: 'n4' }
     ]
-  },
-  $laolao,
-  $bomiao,
-  $sumiao,
-  $hongmiao,
-  $chunmiao,
-  $tiehua,
-  $heihei,
-  $pangpang,
-  $dandan,
-  $erdan;
+  };
+
+  let $laolao;
+  let $bomiao;
+  let $sumiao;
+  let $hongmiao;
+  let $chunmiao;
+  let $tiehua;
+  let $heihei;
+  let $pangpang;
+  let $dandan;
+  let $erdan;
 
   beforeEach(function () {
-    oc = $container.orgchart({
+    document.body.innerHTML = '<div id="chart-container"></div>';
+    $container = document.getElementById('chart-container');
+    oc = new OrgChart({
+      chartContainer: '#chart-container',
       'data': ds
     }),
-    $laolao = $('#n1'),
-    $bomiao = $('#n2'),
-    $sumiao = $('#n3'),
-    $hongmiao = $('#n4'),
-    $tiehua = $('#n5'),
-    $heihei = $('#n6'),
-    $pangpang = $('#n7'),
-    $dandan = $('#n8'),
-    $erdan = $('#n9'),
-    $sandan = $('#n10');
-  });
-    
+    $laolao = document.getElementById('n1'),
+    $bomiao = document.getElementById('n2'),
+    $sumiao = document.getElementById('n3'),
+    $hongmiao = document.getElementById('n4'),
+    $tiehua = document.getElementById('n5'),
+    $heihei = document.getElementById('n6'),
+    $pangpang = document.getElementById('n7'),
+    $dandan = document.getElementById('n8'),
+    $erdan = document.getElementById('n9'),
+    $sandan = document.getElementById('n10');
+  });
+
   afterEach(function () {
     $laolao = $bomiao = $sumiao = $hongmiao = $chunmiao = $tiehua = $heihei = $pangpang = $dandan = $erdan = $sandan = null;
-    $container.empty();
+    $container.innerHTML = '';
   });
 
   it('addParent()', function () {
+    const expectedHierarchy = {
+      id: 'n0',
+      children: [cloneValue(hierarchy)]
+    };
+
     oc.addParent($laolao, { 'name': 'Lao Ye', 'id': 'n0' });
-    $laolao.closest('.nodes').siblings('.node').should.lengthOf(1);
-    oc.$chart.find('.node:first').should.deep.equal($('#n0'));
+
+    siblingElements($laolao.closest('.nodes'), '.node').should.lengthOf(1);
+    query('.node', oc.chart).should.equal(query('#n0'));
+    oc.getHierarchy().should.deep.equal(expectedHierarchy);
+  });
+
+  it('inserts a parent between a non-root node and its existing parent', function () {
+    const expectedHierarchy = cloneValue(hierarchy);
+
+    expectedHierarchy.children[0] = {
+      id: 'n0',
+      children: [expectedHierarchy.children[0]]
+    };
+    oc.addParent($bomiao, { 'name': 'Lao Ye', 'id': 'n0' });
+
+    query('#n0').closest('.hierarchy').parentElement.parentElement.querySelector(':scope > .node').should.equal(query('#n1'));
+    query('#n2').closest('.hierarchy').parentElement.previousElementSibling.should.equal(query('#n0'));
+    oc.getHierarchy().should.deep.equal(expectedHierarchy);
+  });
+
+  it('addAncestors()', function () {
+    oc.addAncestors({ 'name': 'Lao Ye', 'id': 'n0', 'relationship': '001' }, 'n0');
+
+    should.exist(query('#n0'));
+    query('#n0').closest('.hierarchy').should.not.equal(query('#n1').closest('.hierarchy'));
+    oc.getHierarchy().should.deep.equal(hierarchy);
   });
 
   describe('addChildren()', function () {
     it('Add child nodes to the leaf node', function () {
+      let siblingNodesElement;
+      const expectedHierarchy = cloneValue(hierarchy);
+
+      expectedHierarchy.children[0].children = [{ id: 'n11' }];
+
       oc.addChildren($bomiao, [{'name': 'Li Xin', 'id': 'n11' }]);
-      $bomiao.siblings('.nodes').should.lengthOf(1);
-      $bomiao.siblings('.nodes').find('.hierarchy').should.lengthOf(1);
-      $bomiao.siblings('.nodes').find('.node').attr('id').should.equal('n11');
+      siblingNodesElement = siblingElements($bomiao, '.nodes')[0];
+      siblingElements($bomiao, '.nodes').should.lengthOf(1);
+      queryAll('.hierarchy', siblingNodesElement).should.lengthOf(1);
+      query('.node', siblingNodesElement).id.should.equal('n11');
+      oc.getHierarchy().should.deep.equal(expectedHierarchy);
     });
 
     it('Add child nodes to the un-leaf node', function () {
+      let siblingNodesElements;
+      let hierarchyElements;
+      const expectedHierarchy = cloneValue(hierarchy);
+
+      expectedHierarchy.children[1].children.push({ id: 'n11' });
+
       oc.addChildren($sumiao, [{'name': 'Li Xin', 'id': 'n11' }]);
-      $sumiao.siblings('.nodes').children('.hierarchy').should.lengthOf(4);
-      $sumiao.siblings('.nodes').children('.hierarchy:last').find('.node').attr('id').should.equal('n11');
+      siblingNodesElements = siblingElements($sumiao, '.nodes');
+      hierarchyElements = siblingNodesElements.flatMap(function (nodesElement) {
+        return Array.from(nodesElement.children).filter(function (childEl) {
+          return childEl.classList && childEl.classList.contains('hierarchy');
+        });
+      });
+      hierarchyElements.should.lengthOf(4);
+      query('.node', hierarchyElements[hierarchyElements.length - 1]).id.should.equal('n11');
+      oc.getHierarchy().should.deep.equal(expectedHierarchy);
+    });
+  });
+
+  describe('addDescendants()', function () {
+    it('Add descendant nodes from a native parent node', function () {
+      let siblingNodesElement;
+      const expectedHierarchy = cloneValue(hierarchy);
+
+      expectedHierarchy.children[0].children = [{ id: 'n11' }];
+
+      oc.addDescendants([{ 'name': 'Li Xin', 'id': 'n11' }], $bomiao);
+
+      siblingNodesElement = siblingElements($bomiao, '.nodes')[0];
+      siblingElements($bomiao, '.nodes').should.lengthOf(1);
+      queryAll('.hierarchy', siblingNodesElement).should.lengthOf(1);
+      query('.node', siblingNodesElement).id.should.equal('n11');
+      oc.getHierarchy().should.deep.equal(expectedHierarchy);
+    });
+
+    it('Preserves descendant insertion order and nested descendant structure', function () {
+      const expectedHierarchy = cloneValue(hierarchy);
+
+      expectedHierarchy.children[0].children = [
+        { id: 'n11', children: [{ id: 'n12' }] },
+        { id: 'n13' }
+      ];
+
+      oc.addDescendants([
+        {
+          'name': 'Li Xin',
+          'id': 'n11',
+          'children': [
+            { 'name': 'Xiao Xin', 'id': 'n12' }
+          ]
+        },
+        { 'name': 'Li Na', 'id': 'n13' }
+      ], $bomiao);
+
+      Array.from($bomiao.nextElementSibling.children).filter(function (childEl) {
+        return childEl.classList && childEl.classList.contains('hierarchy');
+      }).should.lengthOf(2);
+      queryAll('#n12', $bomiao.nextElementSibling).should.lengthOf(1);
+      oc.getHierarchy().should.deep.equal(expectedHierarchy);
     });
   });
 
   describe('addSiblings()', function () {
     it('Just add sibling nodes', function () {
+      const expectedHierarchy = cloneValue(hierarchy);
+      const rootHierarchyElement = $laolao.closest('.hierarchy');
+      const rootChildrenContainer = Array.from(rootHierarchyElement.children).find(function (childEl) {
+        return childEl.classList && childEl.classList.contains('nodes');
+      });
+
+      expectedHierarchy.children.push({ id: 'n11' });
+
       oc.addSiblings($sumiao, [{'name': 'Li Xin', 'id': 'n11' }]);
-      $laolao.siblings('.nodes').children('.hierarchy').should.lengthOf(4);
-      $laolao.siblings('.nodes').children('.hierarchy:last').find('.node').attr('id').should.equal('n11');
+      Array.from(rootChildrenContainer.children).filter(function (childEl) {
+        return childEl.classList && childEl.classList.contains('hierarchy');
+      }).should.lengthOf(4);
+      should.exist(query('#n11', rootChildrenContainer));
+      oc.getHierarchy().should.deep.equal(expectedHierarchy);
     });
 
     it('Add sibling nodes as well as parent node', function () {
+      let hierarchySiblings;
+      const expectedHierarchy = {
+        id: 'n0',
+        children: [{ id: 'n11' }, cloneValue(hierarchy)]
+      };
+
       oc.addSiblings($laolao, { 'name': 'Lao Ye', 'id': 'n0', 'children': [{'name': 'Li Xin', 'id': 'n11' }] });
-      $laolao.closest('.nodes').siblings('.node').should.lengthOf(1);
-      oc.$chart.find('.node:first').should.deep.equal($('#n0'));
-      $laolao.closest('.hierarchy').siblings().should.lengthOf(1);
-      $laolao.closest('.hierarchy').siblings().find('.node').attr('id').should.equal('n11');
+      siblingElements($laolao.closest('.nodes'), '.node').should.lengthOf(1);
+      query('.node', oc.chart).should.equal(query('#n0'));
+      hierarchySiblings = siblingElements($laolao.closest('.hierarchy'));
+      hierarchySiblings.should.lengthOf(1);
+      query('.node', hierarchySiblings[0]).id.should.equal('n11');
+      oc.getHierarchy().should.deep.equal(expectedHierarchy);
     });
   });
 
   describe('removeNodes()', function () {
     it('Remove leaf node', function () {
+      const expectedHierarchy = cloneValue(hierarchy);
+
+      delete expectedHierarchy.children[1].children[0].children;
+
       oc.removeNodes($dandan);
-      $tiehua.siblings('.nodes').should.lengthOf(0);
+      siblingElements($tiehua, '.nodes').should.lengthOf(0);
+      should.not.exist(query('.bottomEdge', $tiehua));
+      oc.getHierarchy().should.deep.equal(expectedHierarchy);
     });
+
     it('Remove parent node', function () {
+      const siblingNodesElement = siblingElements($sumiao, '.nodes')[0];
+      const expectedHierarchy = cloneValue(hierarchy);
+
+      expectedHierarchy.children[1].children.splice(0, 1);
+
       oc.removeNodes($tiehua);
-      $sumiao.siblings('.nodes').children('.hierarchy').should.lengthOf(2);
-      $('#n5').should.lengthOf(0);
-      $('#n8').should.lengthOf(0);
+      Array.from(siblingNodesElement.children).filter(function (childEl) {
+        return childEl.classList && childEl.classList.contains('hierarchy');
+      }).should.lengthOf(2);
+      should.not.exist(query('#n5'));
+      should.not.exist(query('#n8'));
+      oc.getHierarchy().should.deep.equal(expectedHierarchy);
+    });
+
+    it('Remove a root child node and preserve sibling order', function () {
+      const expectedHierarchy = cloneValue(hierarchy);
+      const rootHierarchyElement = $laolao.closest('.hierarchy');
+      const rootChildrenContainer = Array.from(rootHierarchyElement.children).find(function (childEl) {
+        return childEl.classList && childEl.classList.contains('nodes');
+      });
+
+      expectedHierarchy.children.splice(0, 1);
+
+      oc.removeNodes($bomiao);
+
+      should.not.exist(query('#n2'));
+      oc.getHierarchy().should.deep.equal(expectedHierarchy);
+      Array.from(query(':scope > .nodes', oc.chart).children).filter(function (childEl) {
+        return childEl.classList && childEl.classList.contains('hierarchy');
+      }).map(function (hierarchyEl) {
+        return query('.node', hierarchyEl).id;
+      }).should.deep.equal(['n1']);
+      Array.from(rootChildrenContainer.children).filter(function (childEl) {
+        return childEl.classList && childEl.classList.contains('hierarchy');
+      }).map(function (hierarchyEl) {
+        return query('.node', hierarchyEl).id;
+      }).should.deep.equal(['n3', 'n4']);
     });
+
     it('Remove root node', function () {
       oc.removeNodes($laolao);
-      oc.$chartContainer.is(':empty').should.be.true;
+      $container.children.length.should.equal(0);
     });
   });
 
-});
+  describe('interaction flows', function () {
+    it('dispatches hide/show children events through bottom-edge clicks', function () {
+      const bottomEdge = query('.bottomEdge', $sumiao);
+      const firstChildNode = siblingElements($sumiao, '.nodes')[0].querySelector('.node');
+      const events = [];
+
+      $sumiao.addEventListener('hide-children.orgchart', function (event) {
+        events.push(event.type);
+      });
+      $sumiao.addEventListener('show-children.orgchart', function (event) {
+        events.push(event.type);
+      });
+
+      dispatchNativeEvent(bottomEdge, 'click');
+      dispatchNativeEvent(firstChildNode, 'transitionend');
+      dispatchNativeEvent(bottomEdge, 'click');
+      dispatchNativeEvent(firstChildNode, 'transitionend');
+
+      events.should.deep.equal(['hide-children.orgchart', 'show-children.orgchart']);
+    });
+
+    it('dispatches hide/show siblings events through horizontal-edge clicks', function () {
+      const leftEdge = query('.leftEdge', $sumiao);
+      const firstSiblingNode = query('#n2');
+      const events = [];
+
+      $sumiao.addEventListener('hide-siblings.orgchart', function (event) {
+        events.push(event.type);
+      });
+      $sumiao.addEventListener('show-siblings.orgchart', function (event) {
+        events.push(event.type);
+      });
+
+      dispatchNativeEvent(leftEdge, 'click');
+      dispatchNativeEvent(firstSiblingNode, 'transitionend');
+      dispatchNativeEvent(leftEdge, 'click');
+      dispatchNativeEvent(firstSiblingNode, 'transitionend');
+
+      events.should.deep.equal(['hide-siblings.orgchart', 'show-siblings.orgchart']);
+    });
+
+    it('dispatches hide-parent and enters ancestor-collapsed state through top-edge click', function () {
+      const topEdge = query('.topEdge', $heihei);
+      const hideSpy = sinon.spy();
+      const currentHierarchy = $heihei.closest('.hierarchy');
+      const leftSiblingHierarchy = currentHierarchy.previousElementSibling;
+      const rightSiblingHierarchy = currentHierarchy.nextElementSibling;
+
+      $heihei.addEventListener('hide-parent.orgchart', hideSpy);
+
+      dispatchNativeEvent(topEdge, 'click');
+
+      hideSpy.should.have.been.calledOnce;
+      hideSpy.firstCall.args[0].type.should.equal('hide-parent.orgchart');
+      currentHierarchy.classList.contains('isAncestorsCollapsed').should.be.true;
+      currentHierarchy.classList.contains('isSiblingsCollapsed').should.be.true;
+      leftSiblingHierarchy.classList.contains('isCollapsedSibling').should.be.true;
+      rightSiblingHierarchy.classList.contains('isCollapsedSibling').should.be.true;
+      $sumiao.classList.contains('sliding').should.be.true;
+      $sumiao.classList.contains('slide-down').should.be.true;
+      $laolao.classList.contains('sliding').should.be.true;
+      $laolao.classList.contains('slide-down').should.be.true;
+
+      dispatchNativeEvent($sumiao, 'transitionend');
+      dispatchNativeEvent($laolao, 'transitionend');
+
+      $sumiao.classList.contains('sliding').should.be.false;
+      $laolao.classList.contains('sliding').should.be.false;
+    });
+
+    it('focuses the clicked node and clears focus when clicking chart background', function () {
+      dispatchNativeEvent($sumiao, 'click');
+      $sumiao.classList.contains('focused').should.be.true;
+
+      dispatchNativeEvent($hongmiao, 'click');
+      $sumiao.classList.contains('focused').should.be.false;
+      $hongmiao.classList.contains('focused').should.be.true;
+
+      dispatchNativeEvent(oc.chart, 'click');
+      queryAll('.node.focused', oc.chart).should.have.lengthOf(0);
+    });
+
+    it('toggles children visibility through bottom-edge clicks and transition cleanup', function () {
+      const childNodesContainer = siblingElements($sumiao, '.nodes')[0];
+      const bottomEdge = query('.bottomEdge', $sumiao);
+      const childHierarchies = Array.from(childNodesContainer.children).filter(function (childEl) {
+        return childEl.classList && childEl.classList.contains('hierarchy');
+      });
+      const visibleChildNodes = childHierarchies.map(function (hierarchyEl) {
+        return query('.node', hierarchyEl);
+      });
+
+      oc.getNodeState($sumiao, 'children').should.deep.equal({ exist: true, visible: true });
+
+      dispatchNativeEvent(bottomEdge, 'click');
+      childNodesContainer.classList.contains('hidden').should.be.false;
+      childHierarchies.forEach(function (hierarchyEl) {
+        hierarchyEl.classList.contains('isCollapsedDescendant').should.be.true;
+      });
+      visibleChildNodes.forEach(function (childNodeEl) {
+        childNodeEl.classList.contains('sliding').should.be.true;
+        childNodeEl.classList.contains('slide-up').should.be.true;
+      });
+
+      dispatchNativeEvent(visibleChildNodes[0], 'transitionend');
+      childNodesContainer.classList.contains('hidden').should.be.true;
+      oc.getNodeState($sumiao, 'children').should.deep.equal({ exist: true, visible: false });
+
+      dispatchNativeEvent(bottomEdge, 'click');
+      childNodesContainer.classList.contains('hidden').should.be.false;
+      visibleChildNodes.forEach(function (childNodeEl) {
+        childNodeEl.classList.contains('sliding').should.be.true;
+        childNodeEl.classList.contains('slide-up').should.be.false;
+      });
+
+      dispatchNativeEvent(visibleChildNodes[0], 'transitionend');
+      oc.getNodeState($sumiao, 'children').should.deep.equal({ exist: true, visible: true });
+    });
+
+    it('toggles sibling visibility through horizontal-edge clicks and transition cleanup', function () {
+      const leftEdge = query('.leftEdge', $sumiao);
+      const siblingHierarchies = Array.from($sumiao.closest('.hierarchy').parentElement.children).filter(function (childEl) {
+        return childEl !== $sumiao.closest('.hierarchy') && childEl.classList.contains('hierarchy');
+      });
+      const siblingNodes = siblingHierarchies.map(function (hierarchyEl) {
+        return query('.node', hierarchyEl);
+      });
+
+      oc.getNodeState($sumiao, 'siblings').should.deep.equal({ exist: true, visible: true });
+
+      dispatchNativeEvent(leftEdge, 'click');
+      siblingNodes.forEach(function (siblingNodeEl) {
+        siblingNodeEl.classList.contains('sliding').should.be.true;
+      });
+
+      dispatchNativeEvent(siblingNodes[0], 'transitionend');
+      siblingHierarchies.forEach(function (siblingHierarchyEl) {
+        siblingHierarchyEl.classList.contains('hidden').should.be.true;
+      });
+      oc.getNodeState($sumiao, 'siblings').should.deep.equal({ exist: true, visible: false });
+
+      dispatchNativeEvent(leftEdge, 'click');
+      siblingHierarchies.forEach(function (siblingHierarchyEl) {
+        siblingHierarchyEl.classList.contains('hidden').should.be.false;
+      });
+      siblingNodes.forEach(function (siblingNodeEl) {
+        siblingNodeEl.classList.contains('sliding').should.be.true;
+      });
+
+      dispatchNativeEvent(siblingNodes[0], 'transitionend');
+      oc.getNodeState($sumiao, 'siblings').should.deep.equal({ exist: true, visible: true });
+    });
+
+    it('shows directional edge icons on hover and clears them on mouseleave', function () {
+      const topEdge = query('.topEdge', $sumiao);
+      const bottomEdge = query('.bottomEdge', $sumiao);
+      const leftEdge = query('.leftEdge', $sumiao);
+      const rightEdge = query('.rightEdge', $sumiao);
+
+      dispatchNativeEvent($sumiao, 'mouseenter', { bubbles: false });
+      topEdge.classList.contains(oc.options.icons.collapseToDown).should.be.true;
+      bottomEdge.classList.contains(oc.options.icons.expandToUp).should.be.true;
+      leftEdge.classList.contains(oc.options.icons.expandToRight).should.be.true;
+      rightEdge.classList.contains(oc.options.icons.collapseToLeft).should.be.true;
+
+      dispatchNativeEvent($sumiao, 'mouseleave', { bubbles: false });
+      topEdge.classList.contains(oc.options.icons.expandToUp).should.be.false;
+      topEdge.classList.contains(oc.options.icons.collapseToDown).should.be.false;
+      bottomEdge.classList.contains(oc.options.icons.expandToUp).should.be.false;
+      bottomEdge.classList.contains(oc.options.icons.collapseToDown).should.be.false;
+      leftEdge.classList.contains(oc.options.icons.expandToRight).should.be.false;
+      leftEdge.classList.contains(oc.options.icons.collapseToLeft).should.be.false;
+      rightEdge.classList.contains(oc.options.icons.expandToRight).should.be.false;
+      rightEdge.classList.contains(oc.options.icons.collapseToLeft).should.be.false;
+    });
+  });
+
+  describe('query methods', function () {
+    it('returns current parent, children, and siblings as native nodes', function () {
+      oc.getParent($sumiao).should.equal($laolao);
+      oc.getChildren($sumiao).map(function (nodeEl) { return nodeEl.id; }).should.deep.equal(['n5', 'n6', 'n7']);
+      oc.getSiblings($sumiao).map(function (nodeEl) { return nodeEl.id; }).should.deep.equal(['n2', 'n4']);
+    });
+
+    it('updates relationship queries after tree mutations', function () {
+      oc.addChildren($bomiao, [{ name: 'Li Xin', id: 'n11' }]);
+      oc.addSiblings($sumiao, [{ name: 'Li Na', id: 'n12' }]);
+
+      should.exist(query('#n11'));
+      should.exist(query('#n12'));
+      oc.getChildren($bomiao).map(function (nodeEl) { return nodeEl.id; }).should.deep.equal(['n11']);
+      oc.getSiblings($sumiao).map(function (nodeEl) { return nodeEl.id; }).should.deep.equal(['n2', 'n4', 'n12']);
+      oc.getParent(query('#n11')).should.equal($bomiao);
+      oc.getParent(query('#n12')).should.equal($laolao);
+    });
+  });
+
+  describe('runtime option flows', function () {
+    it('rebuilds the rendered hierarchy through setOptions({ data })', function () {
+      const replacementData = {
+        id: 'r1',
+        name: 'Replacement Root',
+        children: [{ id: 'r2', name: 'Replacement Child' }]
+      };
+      const previousChart = oc.chart;
+
+      oc.setOptions({ data: replacementData });
+
+      oc.chart.should.not.equal(previousChart);
+      should.not.exist(query('#n1', $container));
+      query('#r1', oc.chart).querySelector('.title').textContent.should.equal('Replacement Root');
+      oc.getChildren(query('#r1', oc.chart)).map(function (nodeEl) { return nodeEl.id; }).should.deep.equal(['r2']);
+      oc.getHierarchy().should.deep.equal({ id: 'r1', children: [{ id: 'r2' }] });
+    });
+
+    it('moves the chart through the minimap viewport and cleans up when disabled', function () {
+      const minimapChart = new OrgChart({
+        chartContainer: '#chart-container',
+        data: ds,
+        minimap: true
+      });
+      const minimapElement = query('.orgchart-minimap', $container);
+      const minimapStage = query('.orgchart-minimap-stage', minimapElement);
+      const minimapViewport = query('.orgchart-minimap-viewport', minimapElement);
+      const containerRectStub = sinon.stub(minimapChart.chartContainer, 'getBoundingClientRect').returns({
+        left: 0, top: 0, right: 400, bottom: 240, width: 400, height: 240
+      });
+      const chartRectStub = sinon.stub(minimapChart.chart, 'getBoundingClientRect').returns({
+        left: -100, top: -50, right: 900, bottom: 550, width: 1000, height: 600
+      });
+      const stageRectStub = sinon.stub(minimapStage, 'getBoundingClientRect').returns({
+        left: 0, top: 0, right: 180, bottom: 104, width: 180, height: 104
+      });
+      const viewportRectStub = sinon.stub(minimapViewport, 'getBoundingClientRect').returns({
+        left: 20, top: 10, right: 89, bottom: 52, width: 69, height: 42
+      });
+
+      Object.defineProperty(minimapStage, 'clientWidth', { configurable: true, value: 180 });
+      Object.defineProperty(minimapStage, 'clientHeight', { configurable: true, value: 104 });
+      minimapChart.updateMinimap(true);
+
+      dispatchEventWithProperties(minimapViewport, 'mousedown', {
+        clientX: 20,
+        clientY: 10,
+        preventDefault: function () {}
+      });
+      dispatchEventWithProperties(document, 'mousemove', { clientX: 40, clientY: 30 });
+      dispatchNativeEvent(document, 'mouseup');
+
+      minimapChart.chart.style.transform.should.not.equal('');
+      should.equal(getState(minimapChart.chart, 'minimapDragState'), null);
+
+      minimapChart.setOptions('minimap', false);
+
+      should.not.exist(query('.orgchart-minimap', $container));
+      $container.style.position.should.equal('');
+      containerRectStub.restore();
+      chartRectStub.restore();
+      stageRectStub.restore();
+      viewportRectStub.restore();
+    });
+  });
+
+  describe('hybrid vertical flows', function () {
+    it('expands and collapses vertical descendants through toggle button clicks', function () {
+      let hybridChart;
+      let hybridSumiao;
+      let toggleBtn;
+      let descendantsWrapper;
+      let childNodes;
+
+      $container.innerHTML = '';
+      hybridChart = new OrgChart({
+        chartContainer: '#chart-container',
+        data: {
+          id: 'n1',
+          name: 'Lao Lao',
+          children: [
+            { id: 'n2', name: 'Bo Miao' },
+            {
+              id: 'n3',
+              name: 'Su Miao',
+              children: [
+                { id: 'n5', name: 'Tie Hua' },
+                { id: 'n6', name: 'Hei Hei' }
+              ]
+            }
+          ]
+        },
+        verticalLevel: 2,
+        visibleLevel: 2
+      });
+      hybridSumiao = query('#n3', hybridChart.chart);
+      toggleBtn = query('.toggleBtn', hybridSumiao);
+      descendantsWrapper = siblingElements(hybridSumiao, '.nodes')[0];
+      childNodes = Array.from(descendantsWrapper.children).filter(function (childEl) {
+        return childEl.classList && childEl.classList.contains('hierarchy');
+      }).map(function (hierarchyEl) {
+        return query('.node', hierarchyEl);
+      });
+
+      should.exist(toggleBtn);
+      descendantsWrapper.classList.contains('hidden').should.be.true;
+      childNodes.forEach(function (childNodeEl) {
+        childNodeEl.classList.contains('slide-up').should.be.true;
+      });
+
+      dispatchNativeEvent(toggleBtn, 'click');
+      descendantsWrapper.classList.contains('hidden').should.be.false;
+      childNodes.forEach(function (childNodeEl) {
+        childNodeEl.classList.contains('sliding').should.be.true;
+        childNodeEl.classList.contains('slide-up').should.be.false;
+      });
+
+      dispatchNativeEvent(childNodes[0], 'transitionend');
+      childNodes.forEach(function (childNodeEl) {
+        childNodeEl.classList.contains('sliding').should.be.false;
+      });
+
+      dispatchNativeEvent(toggleBtn, 'click');
+      descendantsWrapper.classList.contains('hidden').should.be.false;
+      childNodes.forEach(function (childNodeEl) {
+        childNodeEl.classList.contains('sliding').should.be.true;
+        childNodeEl.classList.contains('slide-up').should.be.true;
+      });
+
+      dispatchNativeEvent(childNodes[0], 'transitionend');
+      descendantsWrapper.classList.contains('hidden').should.be.true;
+      childNodes.forEach(function (childNodeEl) {
+        childNodeEl.classList.contains('sliding').should.be.false;
+      });
+    });
+  });
+
+  describe('drag and drop flows', function () {
+    it('filters allowed drop zones through the public dropCriteria option', function () {
+      const draggableChart = new OrgChart({
+        chartContainer: '#chart-container',
+        data: ds,
+        draggable: true,
+        dropCriteria: function (draggedNode, draggedParentNode, dropNode) {
+          return draggedNode.id === 'n2' && draggedParentNode.id === 'n1' && dropNode.id === 'n4';
+        }
+      });
+      const draggableBomiao = query('#n2', draggableChart.chart);
+
+      dispatchEventWithProperties(draggableBomiao, 'dragstart', {
+        dataTransfer: {
+          setData: function () {}
+        }
+      });
+
+      queryAll('.allowedDrop', draggableChart.chart).map(function (nodeEl) {
+        return nodeEl.id;
+      }).should.deep.equal(['n4']);
+
+      dispatchNativeEvent(draggableBomiao, 'dragend');
+      queryAll('.allowedDrop', draggableChart.chart).should.have.lengthOf(0);
+    });
+
+    it('dispatches otherdropped for an external dragged item', async function () {
+      const draggableChart = new OrgChart({
+        chartContainer: '#chart-container',
+        data: ds,
+        draggable: true
+      });
+      const draggableBomiao = query('#n2', draggableChart.chart);
+      const foreignItem = document.createElement('div');
+      const dropSpy = sinon.spy();
+
+      foreignItem.className = 'foreign-item';
+      draggableChart.chart.addEventListener('otherdropped.orgchart', dropSpy);
+
+      dispatchEventWithProperties(draggableBomiao, 'dragstart', {
+        dataTransfer: {
+          setData: function () {}
+        }
+      });
+      setState(draggableChart.chart, 'dragged', foreignItem);
+
+      await draggableChart.dropHandler({
+        dropZone: draggableBomiao,
+        originalEvent: {
+          currentTarget: draggableBomiao
+        }
+      });
+
+      dropSpy.should.have.been.calledOnce;
+      dropSpy.firstCall.args[0].type.should.equal('otherdropped.orgchart');
+      dropSpy.firstCall.args[0].detail.draggedItem.should.equal(foreignItem);
+      dropSpy.firstCall.args[0].detail.dropZone.should.equal(draggableBomiao);
+    });
+
+    it('marks allowed drop zones on native dragstart and clears them on dragend', function () {
+      const draggableChart = new OrgChart({
+        chartContainer: '#chart-container',
+        data: ds,
+        draggable: true
+      });
+      const draggableBomiao = query('#n2', draggableChart.chart);
+      const draggableHongmiao = query('#n4', draggableChart.chart);
+
+      dispatchEventWithProperties(draggableBomiao, 'dragstart', {
+        dataTransfer: {
+          setData: function () {}
+        }
+      });
+
+      draggableHongmiao.classList.contains('allowedDrop').should.be.true;
+      queryAll('.allowedDrop', draggableChart.chart).length.should.be.above(0);
+
+      dispatchNativeEvent(draggableBomiao, 'dragend');
+
+      queryAll('.allowedDrop', draggableChart.chart).should.have.lengthOf(0);
+    });
+
+    it('dispatches nodedrop and moves the dragged node through native drag/drop events', async function () {
+      const originalJSONDigger = global.JSONDigger;
+      const draggableChart = new OrgChart({
+        chartContainer: '#chart-container',
+        data: ds,
+        draggable: true
+      });
+      const draggableBomiao = query('#n2', draggableChart.chart);
+      const draggableHongmiao = query('#n4', draggableChart.chart);
+      const rootChildrenContainer = siblingElements(query('#n1', draggableChart.chart), '.nodes')[0];
+      const dropSpy = sinon.spy();
+
+      global.JSONDigger = function () {
+        return {
+          findOneNode: function () {
+            return null;
+          }
+        };
+      };
+      draggableChart.chart.addEventListener('nodedrop.orgchart', dropSpy);
+
+      dispatchEventWithProperties(draggableBomiao, 'dragstart', {
+        dataTransfer: {
+          setData: function () {}
+        }
+      });
+      draggableHongmiao.classList.add('allowedDrop');
+
+      await draggableChart.dropHandler({
+        dropZone: draggableHongmiao,
+        originalEvent: {
+          currentTarget: draggableHongmiao
+        }
+      });
+
+      dropSpy.should.have.been.calledOnce;
+      dropSpy.firstCall.args[0].type.should.equal('nodedrop.orgchart');
+      dropSpy.firstCall.args[0].detail.draggedNode.should.equal(draggableBomiao);
+      dropSpy.firstCall.args[0].detail.dropZone.should.equal(draggableHongmiao);
+      queryAll('#n2', siblingElements(draggableHongmiao, '.nodes')[0]).should.have.lengthOf(1);
+      Array.from(rootChildrenContainer.children).filter(function (childEl) {
+        return childEl.classList && childEl.classList.contains('hierarchy');
+      }).map(function (hierarchyEl) {
+        return query('.node', hierarchyEl).id;
+      }).should.deep.equal(['n3', 'n4']);
+
+      global.JSONDigger = originalJSONDigger;
+    });
+
+    it('adds a vertical toggle when hybrid drag and drop gives a leaf node children', async function () {
+      const originalJSONDigger = global.JSONDigger;
+      const hybridData = {
+        id: 'n1',
+        name: 'Root',
+        children: [
+          {
+            id: 'n2',
+            name: 'Source Parent',
+            children: [{ id: 'n3', name: 'Dragged Node' }]
+          },
+          { id: 'n4', name: 'Drop Node' }
+        ]
+      };
+      const hybridChart = new OrgChart({
+        chartContainer: '#chart-container',
+        data: hybridData,
+        draggable: true,
+        verticalLevel: 2
+      });
+      const draggedNode = query('#n3', hybridChart.chart);
+      const dropNode = query('#n4', hybridChart.chart);
+
+      global.JSONDigger = require('json-digger');
+      try {
+        setState(hybridChart.chart, 'dragged', draggedNode);
+        dropNode.classList.add('allowedDrop');
+        await hybridChart.dropHandler({
+          dropZone: dropNode,
+          originalEvent: { currentTarget: dropNode }
+        });
+
+        query('#n4', hybridChart.chart).querySelector(':scope > .toggleBtn').should.exist;
+        query('#n3', hybridChart.chart).closest('.hierarchy').parentElement.previousElementSibling.id.should.equal('n4');
+      } finally {
+        global.JSONDigger = originalJSONDigger;
+      }
+    });
+  });
+
+  describe('compact mode flows', function () {
+    it('toggles loose and compact modes through compact-node controls', function () {
+      let compactChart;
+      let compactNode;
+      let backToLooseSymbol;
+      let backToCompactSymbol;
+
+      $container.innerHTML = '';
+      compactChart = new OrgChart({
+        chartContainer: '#chart-container',
+        data: {
+          id: 'n1',
+          name: 'Lao Lao',
+          children: [
+            {
+              id: 'n2',
+              name: 'Bo Miao',
+              compact: true,
+              children: [
+                { id: 'n3', name: 'Su Miao' },
+                { id: 'n4', name: 'Hong Miao' }
+              ]
+            }
+          ]
+        }
+      });
+      compactNode = query('#n2', compactChart.chart);
+      backToLooseSymbol = query('.backToLooseSymbol', compactNode);
+      backToCompactSymbol = query('.backToCompactSymbol', compactNode);
+
+      should.exist(backToLooseSymbol);
+      should.exist(backToCompactSymbol);
+      compactNode.classList.contains('looseMode').should.be.false;
+      backToCompactSymbol.classList.contains('hidden').should.be.true;
+
+      dispatchNativeEvent(backToLooseSymbol, 'click');
+
+      compactNode.classList.contains('looseMode').should.be.true;
+      backToLooseSymbol.classList.contains('hidden').should.be.true;
+      backToCompactSymbol.classList.contains('hidden').should.be.false;
+
+      dispatchNativeEvent(backToCompactSymbol, 'click');
+
+      compactNode.classList.contains('looseMode').should.be.false;
+      backToLooseSymbol.classList.contains('hidden').should.be.false;
+      backToCompactSymbol.classList.contains('hidden').should.be.true;
+    });
+  });
+
+  describe('export flows', function () {
+    it('invokes export() through the rendered export button click', function () {
+      let exportChart;
+      let exportButton;
+      let exportStub;
+
+      $container.innerHTML = '';
+      Array.from(document.querySelectorAll('.oc-export-btn')).forEach(function (buttonEl) {
+        buttonEl.remove();
+      });
+      exportChart = new OrgChart({
+        chartContainer: '#chart-container',
+        data: ds,
+        exportButton: true
+      });
+      exportButton = document.querySelector('.oc-export-btn');
+      exportStub = sinon.stub(exportChart, 'export');
+
+      should.exist(exportButton);
+
+      dispatchNativeEvent(exportButton, 'click');
+
+      exportStub.should.have.been.calledOnce;
+      exportButton.remove();
+      exportStub.restore();
+    });
+  });
+
+  describe('pan and zoom binding flows', function () {
+    it('pans through native mousedown, mousemove, and mouseup bindings', function () {
+      let panChart;
+      let moveEvent;
+
+      $container.innerHTML = '';
+      panChart = new OrgChart({
+        chartContainer: '#chart-container',
+        data: ds,
+        pan: true
+      });
+
+      dispatchEventWithProperties(panChart.chart, 'mousedown', {
+        target: panChart.chart,
+        pageX: 10,
+        pageY: 20
+      });
+
+      getState(panChart.chart, 'panning').should.equal(true);
+      moveEvent = new window.Event('mousemove', { bubbles: true });
+      Object.defineProperty(moveEvent, 'pageX', { configurable: true, value: 30 });
+      Object.defineProperty(moveEvent, 'pageY', { configurable: true, value: 45 });
+      panChart.chart.dispatchEvent(moveEvent);
+      panChart.chart.style.transform.should.equal('matrix(1, 0, 0, 1, 20, 25)');
+
+      dispatchNativeEvent(document, 'mouseup');
+
+      getState(panChart.chart, 'panning').should.equal(false);
+      panChart.chart.style.cursor.should.equal('default');
+    });
+
+    it('zooms through the bound wheel listener on the chart container', function () {
+      let zoomChart;
+
+      $container.innerHTML = '';
+      zoomChart = new OrgChart({
+        chartContainer: '#chart-container',
+        data: ds,
+        zoom: true
+      });
+      zoomChart.chart.getBoundingClientRect = function () {
+        return { left: 0, top: 0 };
+      };
+      zoomChart.chartContainer.getBoundingClientRect = function () {
+        return {
+          left: 0,
+          top: 0,
+          right: 200,
+          bottom: 100,
+          width: 200,
+          height: 100
+        };
+      };
+
+      dispatchEventWithProperties(zoomChart.chartContainer, 'wheel', {
+        deltaY: -1,
+        clientX: 60,
+        clientY: 45,
+        preventDefault: function () {}
+      });
+
+      zoomChart.chart.style.transform.should.equal('matrix(1.2, 0, 0, 1.2, -12, -9)');
+    });
+
+    it('pinch-zooms through bound touchstart, touchmove, and touchend listeners', function () {
+      let zoomChart;
+
+      $container.innerHTML = '';
+      zoomChart = new OrgChart({
+        chartContainer: '#chart-container',
+        data: ds,
+        zoom: true
+      });
+      zoomChart.chart.getBoundingClientRect = function () {
+        return { left: 0, top: 0 };
+      };
+      zoomChart.chartContainer.getBoundingClientRect = function () {
+        return {
+          left: 0,
+          top: 0,
+          right: 200,
+          bottom: 100,
+          width: 200,
+          height: 100
+        };
+      };
+
+      dispatchEventWithProperties(zoomChart.chartContainer, 'touchstart', {
+        touches: [
+          { clientX: 40, clientY: 40 },
+          { clientX: 80, clientY: 40 }
+        ]
+      });
+      dispatchEventWithProperties(document, 'touchmove', {
+        touches: [
+          { clientX: 30, clientY: 40 },
+          { clientX: 90, clientY: 40 }
+        ]
+      });
+      dispatchNativeEvent(document, 'touchend');
+
+      zoomChart.chart.style.transform.should.equal('matrix(1.2, 0, 0, 1.2, -12, -8)');
+    });
+
+    it('toggles pan bindings through setOptions()', function () {
+      let panChart;
+
+      $container.innerHTML = '';
+      panChart = new OrgChart({
+        chartContainer: '#chart-container',
+        data: ds
+      });
+      setState(panChart.chart, 'panning', false);
+
+      dispatchEventWithProperties(panChart.chart, 'mousedown', {
+        target: panChart.chart,
+        pageX: 10,
+        pageY: 20
+      });
+      getState(panChart.chart, 'panning').should.equal(false);
+
+      panChart.setOptions({ pan: true });
+      dispatchEventWithProperties(panChart.chart, 'mousedown', {
+        target: panChart.chart,
+        pageX: 10,
+        pageY: 20
+      });
+      getState(panChart.chart, 'panning').should.equal(true);
+
+      dispatchNativeEvent(document, 'mouseup');
+      panChart.setOptions({ pan: false });
+      setState(panChart.chart, 'panning', false);
+
+      dispatchEventWithProperties(panChart.chart, 'mousedown', {
+        target: panChart.chart,
+        pageX: 30,
+        pageY: 40
+      });
+      getState(panChart.chart, 'panning').should.equal(false);
+    });
+
+    it('toggles zoom bindings through setOptions()', function () {
+      let zoomChart;
+
+      $container.innerHTML = '';
+      zoomChart = new OrgChart({
+        chartContainer: '#chart-container',
+        data: ds
+      });
+      zoomChart.chart.getBoundingClientRect = function () {
+        return { left: 0, top: 0 };
+      };
+      zoomChart.chartContainer.getBoundingClientRect = function () {
+        return {
+          left: 0,
+          top: 0,
+          right: 200,
+          bottom: 100,
+          width: 200,
+          height: 100
+        };
+      };
+
+      dispatchEventWithProperties(zoomChart.chartContainer, 'wheel', {
+        deltaY: -1,
+        clientX: 60,
+        clientY: 45,
+        preventDefault: function () {}
+      });
+      zoomChart.chart.style.transform.should.equal('');
+
+      zoomChart.setOptions({ zoom: true });
+      dispatchEventWithProperties(zoomChart.chartContainer, 'wheel', {
+        deltaY: -1,
+        clientX: 60,
+        clientY: 45,
+        preventDefault: function () {}
+      });
+      zoomChart.chart.style.transform.should.equal('matrix(1.2, 0, 0, 1.2, -12, -9)');
+
+      zoomChart.setOptions({ zoom: false });
+      zoomChart.chart.style.transform = 'none';
+      dispatchEventWithProperties(zoomChart.chartContainer, 'wheel', {
+        deltaY: -1,
+        clientX: 60,
+        clientY: 45,
+        preventDefault: function () {}
+      });
+      zoomChart.chart.style.transform.should.equal('none');
+    });
+  });
+});