orgchart 6.0.0 → 7.0.0

package/test/cypress/e2e/demo-rendering.cy.js

@@ -17,6 +17,7 @@ describe('Demo Rendering and Configuration', () => {
 
   it('renders custom control icons', () => {
     visitChartDemo('custom-icons.html', 'Custom Icons Demo');
+    cy.get('#chart-container .nodes.vertical .node').filter(':has(.parentNodeSymbol)').first().trigger('mouseenter');
     cy.get('#chart-container .node .toggleBtn').should('have.class', 'fa-solid');
   });
 
@@ -32,7 +33,7 @@ describe('Demo Rendering and Configuration', () => {
 
   it('renders hybrid nodes from node data', () => {
     visitChartDemo('data-prop-hybrid.html', 'Hybrid Nodes Demo');
-    cy.get('#chart-container .verticalNodes, #chart-container .toggleBtn').should('exist');
+    cy.get('#chart-container .nodes.vertical').should('exist');
   });
 
   it('renders the PNG export control', () => {
@@ -85,6 +86,66 @@ describe('Demo Rendering and Configuration', () => {
     cy.get('#chart-container .orgchart').should('have.class', 'r2l');
   });
 
+  it('combines hybrid layout, initial depth and minimap navigation', () => {
+    visitChartDemo('options-hybrid-navigation.html');
+    cy.get('#chart-container .node').should('have.length', 14);
+    cy.get('#chart-container .nodes.vertical').should('exist');
+    cy.get('#api').should('not.be.visible');
+    cy.get('#chart-container .orgchart-minimap-node').should('have.length.at.least', 1);
+    cy.get('#services').trigger('mouseenter');
+    cy.get('#services .toggleBtn').click({ force: true });
+    cy.get('#api').should('be.visible');
+  });
+
+  it('combines compact layout with constrained team assignments', () => {
+    visitChartDemo('options-compact-drag.html');
+    cy.get('#chart-container .node.compact').should('exist');
+    cy.get('#studio').trigger('mouseenter');
+    cy.get('#studio > .backToLooseSymbol').click();
+    cy.get('#engineering-team').trigger('mouseenter');
+    cy.get('#engineering-team > .backToLooseSymbol').click();
+    cy.get('#member-tie').should('have.attr', 'draggable', 'true');
+    cy.window().then((win) => {
+      const dataTransfer = new win.DataTransfer();
+      cy.get('#member-tie').then(($node) => {
+        $node[0].dispatchEvent(new win.DragEvent('dragstart', { bubbles: true, dataTransfer }));
+      });
+      cy.get('#product-team').should('have.class', 'allowedDrop');
+      cy.get('#member-bo').should('not.have.class', 'allowedDrop');
+      cy.get('#studio').should('not.have.class', 'allowedDrop');
+      cy.get('#product-team').then(($node) => {
+        $node[0].dispatchEvent(new win.DragEvent('drop', { bubbles: true, dataTransfer }));
+      });
+    });
+    cy.get('#product-team #member-tie').should('exist');
+    cy.get('#engineering-team #member-tie').should('not.exist');
+    cy.get('#assignment-status').should('have.text', 'Tie Hua / Product');
+  });
+
+  it('combines horizontal layout, custom fields, avatars and icons', () => {
+    visitChartDemo('options-horizontal-template.html');
+    cy.get('#chart-container .orgchart').should('have.class', 'l2r');
+    cy.get('#design-director').should('have.attr', 'data-office', 'Shanghai');
+    cy.get('#design-director .title').should('contain.text', 'Lao Lao');
+    cy.get('#design-director .content').should('have.text', 'Design director');
+    cy.get('#chart-container .avatar').should('have.length', 7);
+    cy.get('#experience-lead').trigger('mouseenter');
+    cy.get('#experience-lead > .edge').should('have.class', 'fa-solid');
+  });
+
+  it('combines bottom-to-top layout, custom fields and PDF export', () => {
+    visitChartDemo('options-export-navigation.html');
+    cy.get('#chart-container .orgchart').should('have.class', 'b2t').and('have.class', 'delivery-chart');
+    cy.get('#delivery-director .title').should('have.text', 'Lao Lao');
+    cy.get('#west-manager').should('have.attr', 'data-region', 'west');
+    cy.get('#east-manager').should('have.attr', 'data-region', 'east');
+    cy.get('.oc-export-btn').should('be.visible').and('have.text', 'Export PDF');
+    cy.window().then((win) => {
+      expect(win.html2canvas).to.be.a('function');
+      expect(win.jspdf.jsPDF).to.be.a('function');
+    });
+  });
+
   it('parses the unordered-list datasource', () => {
     visitChartDemo('ul-datasource.html', 'UL Datasource Demo');
     cy.contains('#chart-container .node .title', 'Lao Lao').should('exist');

package/test/cypress/e2e/drag-drop-hybrid-chart.cy.js

@@ -15,8 +15,9 @@ describe('Hybrid Drag and Drop Chart', () => {
 
     cy.get(sanYue).should(($node) => {
       expect($node.siblings('.nodes').find('.node:contains("San Dan")')).to.exist;
-      expect($node.find('.toggleBtn')).to.exist;
     });
+    cy.get(sanYue).find('.toggleBtn').should('not.exist');
+    cy.get(sanYue).trigger('mouseenter').find('.toggleBtn').should('exist');
   });
 
 });

package/test/cypress/e2e/local-datasource.cy.js

@@ -14,67 +14,67 @@ describe('Local Datasource', () => {
   });
 
   it('bottomEdge of root node works well', () => {
-    cy.get(laolao).find('.bottomEdge').click();
+    cy.get(laolao).trigger('mouseenter').find('.bottomEdge').click();
     cy.get(bomiao).get(sumiao).get(hongmiao).should('not.be.visible');
 
-    cy.get(laolao).find('.bottomEdge').click();
+    cy.get(laolao).trigger('mouseenter').find('.bottomEdge').click();
     cy.get(bomiao).get(sumiao).get(hongmiao).should('be.visible');
   });
 
   it('topEdge of sumiao node works well', () => {
-    cy.get(sumiao).find('.topEdge').click();
+    cy.get(sumiao).trigger('mouseenter').find('.topEdge').click();
     cy.get(laolao).get(bomiao).get(hongmiao).should('not.be.visible');
 
-    cy.get(sumiao).find('.topEdge').click();
+    cy.get(sumiao).trigger('mouseenter').find('.topEdge').click();
     cy.get(laolao).should('be.visible');
     cy.get(bomiao).get(hongmiao).should('not.be.visible');
   });
 
   it('leftEdge of sumiao node works well', () => {
-    cy.get(sumiao).find('.leftEdge').click();
+    cy.get(sumiao).trigger('mouseenter').find('.leftEdge').click();
     cy.get(bomiao).get(hongmiao).should('not.be.visible');
 
-    cy.get(sumiao).find('.leftEdge').click();
+    cy.get(sumiao).trigger('mouseenter').find('.leftEdge').click();
     cy.get(bomiao).get(hongmiao).should('be.visible');
   });
 
   it('rightEdge of sumiao node works well', () => {
-    cy.get(sumiao).find('.rightEdge').click();
+    cy.get(sumiao).trigger('mouseenter').find('.rightEdge').click();
     cy.get(bomiao).get(hongmiao).should('not.be.visible');
 
-    cy.get(sumiao).find('.rightEdge').click();
+    cy.get(sumiao).trigger('mouseenter').find('.rightEdge').click();
     cy.get(bomiao).get(hongmiao).should('be.visible');
   });
 
   it('bottomEdge of sumiao node works well', () => {
-    cy.get(sumiao).find('.bottomEdge').click();
+    cy.get(sumiao).trigger('mouseenter').find('.bottomEdge').click();
     cy.get(tiehua).get(heihei).get(pangpang).get(dandan).should('not.be.visible');
 
-    cy.get(sumiao).find('.bottomEdge').click();
+    cy.get(sumiao).trigger('mouseenter').find('.bottomEdge').click();
     cy.get(tiehua).get(heihei).get(pangpang).should('be.visible');
   });
 
   it('topEdge of heihei node works well', () => {
-    cy.get(heihei).find('.topEdge').click();
+    cy.get(heihei).trigger('mouseenter').find('.topEdge').click();
     cy.get(laolao).get(bomiao).get(sumiao).get(hongmiao).get(tiehua).get(pangpang).should('not.be.visible');
 
-    cy.get(heihei).find('.topEdge').click();
+    cy.get(heihei).trigger('mouseenter').find('.topEdge').click();
     cy.get(sumiao).should('be.visible');
     cy.get(laolao).should('not.be.visible');
   });
 
   it('horizontalEdge of heihei node works well', () => {
-    cy.get(heihei).find('.topEdge').click();
-    cy.get(heihei).find('.leftEdge').click();
+    cy.get(heihei).trigger('mouseenter').find('.topEdge').click();
+    cy.get(heihei).trigger('mouseenter').find('.leftEdge').click();
     cy.get(sumiao).get(tiehua).get(pangpang).should('be.visible');
     cy.get(laolao).should('not.be.visible');
   });
 
   it('horizontalEdge of pangpang node works well', () => {
-      cy.get(pangpang).find('.leftEdge').click();
+      cy.get(pangpang).trigger('mouseenter').find('.leftEdge').click();
       cy.get(tiehua).get(heihei).get(dandan).should('not.be.visible');
 
-      cy.get(pangpang).find('.leftEdge').click();
+      cy.get(pangpang).trigger('mouseenter').find('.leftEdge').click();
       cy.get(tiehua).get(heihei).should('be.visible');
   });
 

package/test/cypress/e2e/ondemand-loading-data.cy.js

@@ -1,35 +1,59 @@
 describe('Load data on-demand', () => {
 
-  const sumiao = '.node:contains("Su Miao")';
-  const heihei = '.node:contains("Hei Hei")';
+  const sumiao = '#n1';
+  const heihei = '#n3';
 
   beforeEach(() => {
     cy.visit('demo/ondemand-loading-data.html');
   });
 
   it('load the descendants of hehei', () => {
-    cy.get(heihei).find('.bottomEdge').click();
+    cy.get(heihei).find('.bottomEdge, .request-control').should('not.exist');
+    cy.get(heihei).trigger('mouseenter').find('.request-children').click();
+    cy.get('#n5').should('exist');
+    cy.get(heihei).find('.request-control').should('not.exist');
     cy.get(heihei).should(($node) => {
       expect($node.siblings('.nodes').children('.hierarchy').length).to.equal(2);
       expect($node.siblings('.nodes').children('.hierarchy').eq(0).find('.node:contains("Er Dan")')).to.exist;
     });
+    cy.get(heihei).trigger('mouseenter').find('.bottomEdge').click();
+    cy.get('#n5').should('not.be.visible');
+    cy.get(heihei).find('.bottomEdge').click();
+    cy.get('#n5').should('be.visible');
   });
 
   it('load the ancestors of sumiao by expanding vertically', () => {
-    cy.get(sumiao).find('.topEdge').click();
+    cy.get(sumiao).trigger('mouseenter').find('.request-parent').click();
+    cy.get('#n0').should('exist');
     cy.get(sumiao).should(($node) => {
       expect($node.closest('.nodes').siblings('.node:contains("Lao Lao")')).to.exist;
       expect($node.closest('.hierarchy').siblings().length).to.equal(7);
     });
   });
 
-  it('load the ancestors of sumiao by expanding horizontally', () => {
-    cy.get(sumiao).find('.leftEdge').click();
-    cy.get(sumiao).should(($node) => {
-      expect($node.closest('.nodes').siblings('.node:contains("Lao Lao")')).to.exist;
-      expect($node.closest('.hierarchy').siblings().length).to.equal(7);
-    });
+  it('shows both sibling loading buttons on hover without duplicating them', () => {
+    cy.get(sumiao).find('.request-siblings').should('not.exist');
+    cy.get(sumiao).trigger('mouseenter').trigger('mouseenter');
+    cy.get(sumiao).find('.request-siblings').should('have.length', 2);
+    cy.get(sumiao).find('.request-siblings-left .oci-chevron-left').should('be.visible');
+    cy.get(sumiao).find('.request-siblings-right .oci-chevron-right').should('be.visible');
+    cy.get(sumiao).trigger('mouseleave').find('.request-siblings').should('not.exist');
+    cy.get(sumiao).trigger('mouseenter').find('.request-siblings').should('have.length', 2);
+  });
 
+  ['left', 'right'].forEach((side) => {
+    it('load the ancestors of sumiao by expanding horizontally from the ' + side, () => {
+      cy.clock();
+      cy.get(sumiao).trigger('mouseenter').find('.request-siblings-' + side).click();
+      cy.get(sumiao).find('.request-siblings').should('have.length', 2).and('be.disabled');
+      cy.tick(1000);
+      cy.get('#n0').should('exist');
+      cy.get(sumiao).find('.request-control').should('not.exist');
+      cy.get(sumiao).should(($node) => {
+        expect($node.closest('.nodes').siblings('.node:contains("Lao Lao")')).to.exist;
+        expect($node.closest('.hierarchy').siblings().length).to.equal(7);
+      });
+    });
   });
 
 });

package/test/cypress/e2e/toggle-sibs-resp.cy.js

@@ -13,19 +13,19 @@ describe('Toggle sibling nodes respectively', () => {
   });
 
   it('toggle the left side sibling nodes of sumiao', () => {
-    cy.get(sumiao).find('.leftEdge').click();
+    cy.get(sumiao).trigger('mouseenter').find('.leftEdge').click();
     cy.get(bomiao).get(renwu).get(lixin).should('not.be.visible');
 
-    cy.get(sumiao).find('.leftEdge').click();
+    cy.get(sumiao).trigger('mouseenter').find('.leftEdge').click();
     cy.get(bomiao).should('be.visible');
     cy.get(renwu).get(lixin).should('not.be.visible');
   });
 
   it('toggle the right side sibling nodes of sumiao', () => {
-    cy.get(sumiao).find('.rightEdge').click();
+    cy.get(sumiao).trigger('mouseenter').find('.rightEdge').click();
     cy.get(hongmiao).get(xingan).get(yidian).should('not.be.visible');
 
-    cy.get(sumiao).find('.rightEdge').click();
+    cy.get(sumiao).trigger('mouseenter').find('.rightEdge').click();
     cy.get(hongmiao).should('be.visible');
     cy.get(xingan).get(yidian).should('not.be.visible');
   });

package/test/cypress/e2e/vertical-vevel.cy.js

@@ -15,24 +15,24 @@ describe('Hybrid(horizontal + vertical) Chart', () => {
   const wudan = '.node:contains("Wu Dan")';
 
   it('toggle the vertical nodes', () => {
-    cy.get(dandan).find('.toggleBtn').click({ force: true });
+    cy.get(dandan).trigger('mouseenter').find('.toggleBtn').click({ force: true });
     cy.get(dandan).find('.toggleBtn').should('have.class', 'oci-minus-square');
     cy.get(erdan).get(sandan).should('be.visible');
     cy.get(sidan).get(wudan).should('not.be.visible');
   
-    cy.get(heihei).find('.toggleBtn').click({ force: true });
+    cy.get(heihei).trigger('mouseenter').find('.toggleBtn').click({ force: true });
     cy.get(heihei).find('.toggleBtn').should('have.class', 'oci-plus-square');
     cy.get(pangpang).get(dandan).get(erdan).get(sandan).should('not.be.visible');
   
-    cy.get(heihei).find('.toggleBtn').click({ force: true });
+    cy.get(heihei).trigger('mouseenter').find('.toggleBtn').click({ force: true });
     cy.get(pangpang).get(dandan).should('be.visible');
   });
 
   it('toggle the vertical nodes by cicking horizontal nodes', () => {
-    cy.get(sumiao).find('.bottomEdge').click();
+    cy.get(sumiao).trigger('mouseenter').find('.bottomEdge').click();
     cy.get(tiehua).get(heihei).get(pangpang).get(dandan).should('be.visible');
 
-    cy.get(sumiao).find('.bottomEdge').click();
+    cy.get(sumiao).trigger('mouseenter').find('.bottomEdge').click();
     cy.get(tiehua).get(heihei).should('be.visible');
     cy.get(pangpang).get(dandan).should('not.be.visible');
   });

package/test/integration/init-tests.js

@@ -33,16 +33,11 @@ describe('orgchart -- integration tests', function () {
     ]
   };
 
-  const fragment = '<div class="orgchart"><ul class="nodes"><li class="hierarchy">' +
-    '<div id="n1" class="node"><div class="title"><i class="oci oci-menu parentNodeSymbol">' +
-    '</i>Lao Lao</div><i class="edge verticalEdge bottomEdge oci"></i></div><ul class="nodes">' +
-    '<li class="hierarchy"><div id="n2" data-parent="n1" class="node">' +
-    '<div class="title">Bo Miao</div><i class="edge verticalEdge topEdge oci"></i>' +
-    '<i class="edge horizontalEdge rightEdge oci"></i><i class="edge horizontalEdge leftEdge oci">' +
-    '</i></div></li><li class="hierarchy"><div id="n3" data-parent="n1" class="node">' +
-    '<div class="title">Su Miao</div><i class="edge verticalEdge topEdge oci"></i>' +
-    '<i class="edge horizontalEdge rightEdge oci"></i><i class="edge horizontalEdge leftEdge oci">' +
-    '</i></div></li></ul></li></ul></div>';
+  const fragment = '<div class="orgchart"><ul class="nodes"><li class="hierarchy"><div id="n1" class="node" tabindex="0"><div clas' +
+    's="title"><i class="oci oci-menu parentNodeSymbol"></i>Lao Lao</div></div><ul class="nodes"><li class="hierarc' +
+    'hy"><div id="n2" data-parent="n1" class="node" tabindex="0"><div class="title">Bo Miao</div></div></li><li cla' +
+    'ss="hierarchy"><div id="n3" data-parent="n1" class="node" tabindex="0"><div class="title">Su Miao</div></div><' +
+    '/li></ul></li></ul></div>';
 
   let oc = {};
 
@@ -96,11 +91,10 @@ describe('orgchart -- integration tests', function () {
     });
 
     it('initialize chart with the given vertical level', function () {
-      const fragment = '<li class="hierarchy"><div id="n1" class="node"><div class="title">' +
-        '<i class="oci oci-menu parentNodeSymbol"></i>Lao Lao</div><i class="edge verticalEdge bottomEdge oci">' +
-        '</i></div><ul class="nodes vertical"><li class="hierarchy"><div id="n2" data-parent="n1" class="node">' +
-        '<div class="title">Bo Miao</div></div></li><li class="hierarchy"><div id="n3" data-parent="n1" class="node">' +
-        '<div class="title">Su Miao</div></div></li></ul></li>';
+      const fragment = '<li class="hierarchy"><div id="n1" class="node" tabindex="0"><div class="title"><i class="oci oci-menu parentN' +
+        'odeSymbol"></i>Lao Lao</div></div><ul class="nodes vertical"><li class="hierarchy"><div id="n2" data-parent="n' +
+        '1" class="node" tabindex="0"><div class="title">Bo Miao</div></div></li><li class="hierarchy"><div id="n3" dat' +
+        'a-parent="n1" class="node" tabindex="0"><div class="title">Su Miao</div></div></li></ul></li>';
       oc = new OrgChart({
         chartContainer: '#chart-container',
         'data': ds,
@@ -125,16 +119,13 @@ describe('orgchart -- integration tests', function () {
       };
 
       it('verticalLevel=2 and visibleLevel=1', function () {
-        const fragment = '<div class="orgchart"><ul class="nodes"><li class="hierarchy">' +
-          '<div class="node"><div class="title"><i class="oci oci-menu parentNodeSymbol">' +
-          '</i>Lao Lao</div><i class="edge verticalEdge bottomEdge oci"></i></div>' +
-          '<ul class="nodes hidden vertical"><li class="hierarchy"><div class="node slide-up">' +
-          '<div class="title">Bo Miao</div></div></li><li class="hierarchy">' +
-          '<div class="node slide-up"><div class="title"><i class="oci oci-menu parentNodeSymbol"></i>Su Miao</div>' +
-          '<i class="toggleBtn oci"></i></div><ul class="nodes hidden">' +
-          '<li class="hierarchy"><div class="node slide-up"><div class="title">Tie Hua</div>' +
-          '</div></li><li class="hierarchy"><div class="node slide-up">' +
-          '<div class="title">Hei Hei</div></div></li></ul></li></ul></li></ul></div>';
+        const fragment = '<div class="orgchart"><ul class="nodes"><li class="hierarchy"><div class="node" tabindex="0"><div class="title' +
+          '"><i class="oci oci-menu parentNodeSymbol"></i>Lao Lao</div></div><ul class="nodes hidden vertical"><li class=' +
+          '"hierarchy"><div class="node slide-up" tabindex="0"><div class="title">Bo Miao</div></div></li><li class="hier' +
+          'archy"><div class="node slide-up" tabindex="0"><div class="title"><i class="oci oci-menu parentNodeSymbol"></i' +
+          '>Su Miao</div></div><ul class="nodes hidden"><li class="hierarchy"><div class="node slide-up" tabindex="0"><di' +
+          'v class="title">Tie Hua</div></div></li><li class="hierarchy"><div class="node slide-up" tabindex="0"><div cla' +
+          'ss="title">Hei Hei</div></div></li></ul></li></ul></li></ul></div>';
         oc = new OrgChart({
           chartContainer: '#chart-container',
           'data': ds,
@@ -145,15 +136,13 @@ describe('orgchart -- integration tests', function () {
       });
 
       it('verticalLevel=2 and visibleLevel=2', function () {
-        const fragment = '<div class="orgchart"><ul class="nodes"><li class="hierarchy">' +
-          '<div class="node"><div class="title"><i class="oci oci-menu parentNodeSymbol"></i>Lao Lao</div>' +
-          '<i class="edge verticalEdge bottomEdge oci"></i></div><ul class="nodes vertical">' +
-          '<li class="hierarchy"><div class="node"><div class="title">Bo Miao</div></div></li>' +
-          '<li class="hierarchy"><div class="node"><div class="title"><i class="oci oci-menu parentNodeSymbol"></i>Su Miao</div>' +
-          '<i class="toggleBtn oci"></i></div><ul class="nodes hidden">' +
-          '<li class="hierarchy"><div class="node slide-up"><div class="title">Tie Hua</div></div>' +
-          '</li><li class="hierarchy"><div class="node slide-up"><div class="title">Hei Hei</div>' +
-          '</div></li></ul></li></ul></li></ul></div>';
+        const fragment = '<div class="orgchart"><ul class="nodes"><li class="hierarchy"><div class="node" tabindex="0"><div class="title' +
+          '"><i class="oci oci-menu parentNodeSymbol"></i>Lao Lao</div></div><ul class="nodes vertical"><li class="hierar' +
+          'chy"><div class="node" tabindex="0"><div class="title">Bo Miao</div></div></li><li class="hierarchy"><div clas' +
+          's="node" tabindex="0"><div class="title"><i class="oci oci-menu parentNodeSymbol"></i>Su Miao</div></div><ul c' +
+          'lass="nodes hidden"><li class="hierarchy"><div class="node slide-up" tabindex="0"><div class="title">Tie Hua</' +
+          'div></div></li><li class="hierarchy"><div class="node slide-up" tabindex="0"><div class="title">Hei Hei</div><' +
+          '/div></li></ul></li></ul></li></ul></div>';
         oc = new OrgChart({
           chartContainer: '#chart-container',
           'data': ds,
@@ -164,15 +153,13 @@ describe('orgchart -- integration tests', function () {
       });
 
       it('verticalLevel=2 and visibleLevel=3', function () {
-        const fragment = '<div class="orgchart"><ul class="nodes"><li class="hierarchy">' +
-          '<div class="node"><div class="title"><i class="oci oci-menu parentNodeSymbol"></i>Lao Lao</div>' +
-          '<i class="edge verticalEdge bottomEdge oci"></i></div><ul class="nodes vertical">' +
-          '<li class="hierarchy"><div class="node"><div class="title">Bo Miao</div></div></li>' +
-          '<li class="hierarchy"><div class="node"><div class="title"><i class="oci oci-menu parentNodeSymbol"></i>Su Miao</div>' +
-          '<i class="toggleBtn oci"></i></div><ul class="nodes">' +
-          '<li class="hierarchy"><div class="node"><div class="title">Tie Hua</div></div>' +
-          '</li><li class="hierarchy"><div class="node"><div class="title">Hei Hei</div></div>' +
-          '</li></ul></li></ul></li></ul></div>';
+        const fragment = '<div class="orgchart"><ul class="nodes"><li class="hierarchy"><div class="node" tabindex="0"><div class="title' +
+          '"><i class="oci oci-menu parentNodeSymbol"></i>Lao Lao</div></div><ul class="nodes vertical"><li class="hierar' +
+          'chy"><div class="node" tabindex="0"><div class="title">Bo Miao</div></div></li><li class="hierarchy"><div clas' +
+          's="node" tabindex="0"><div class="title"><i class="oci oci-menu parentNodeSymbol"></i>Su Miao</div></div><ul c' +
+          'lass="nodes"><li class="hierarchy"><div class="node" tabindex="0"><div class="title">Tie Hua</div></div></li><' +
+          'li class="hierarchy"><div class="node" tabindex="0"><div class="title">Hei Hei</div></div></li></ul></li></ul>' +
+          '</li></ul></div>';
         oc = new OrgChart({
           chartContainer: '#chart-container',
           'data': ds,

package/test/integration/tests.js

@@ -130,7 +130,7 @@ describe('orgchart -- integration tests', function () {
     $container = document.getElementById('chart-container');
     oc = new OrgChart({
       chartContainer: '#chart-container',
-      'data': ds
+      'data': cloneValue(ds)
     }),
     $laolao = document.getElementById('n1'),
     $bomiao = document.getElementById('n2'),
@@ -177,7 +177,7 @@ describe('orgchart -- integration tests', function () {
   });
 
   it('addAncestors()', function () {
-    oc.addAncestors({ 'name': 'Lao Ye', 'id': 'n0', 'relationship': '001' }, 'n0');
+    oc.addAncestors({ 'name': 'Lao Ye', 'id': 'n0' }, 'n0');
 
     should.exist(query('#n0'));
     query('#n0').closest('.hierarchy').should.not.equal(query('#n1').closest('.hierarchy'));
@@ -357,6 +357,7 @@ describe('orgchart -- integration tests', function () {
 
   describe('interaction flows', function () {
     it('dispatches hide/show children events through bottom-edge clicks', function () {
+      dispatchNativeEvent($sumiao, 'mouseenter', { bubbles: false });
       const bottomEdge = query('.bottomEdge', $sumiao);
       const firstChildNode = siblingElements($sumiao, '.nodes')[0].querySelector('.node');
       const events = [];
@@ -377,6 +378,7 @@ describe('orgchart -- integration tests', function () {
     });
 
     it('dispatches hide/show siblings events through horizontal-edge clicks', function () {
+      dispatchNativeEvent($sumiao, 'mouseenter', { bubbles: false });
       const leftEdge = query('.leftEdge', $sumiao);
       const firstSiblingNode = query('#n2');
       const events = [];
@@ -397,6 +399,7 @@ describe('orgchart -- integration tests', function () {
     });
 
     it('dispatches hide-parent and enters ancestor-collapsed state through top-edge click', function () {
+      dispatchNativeEvent($heihei, 'mouseenter', { bubbles: false });
       const topEdge = query('.topEdge', $heihei);
       const hideSpy = sinon.spy();
       const currentHierarchy = $heihei.closest('.hierarchy');
@@ -438,6 +441,7 @@ describe('orgchart -- integration tests', function () {
     });
 
     it('toggles children visibility through bottom-edge clicks and transition cleanup', function () {
+      dispatchNativeEvent($sumiao, 'mouseenter', { bubbles: false });
       const childNodesContainer = siblingElements($sumiao, '.nodes')[0];
       const bottomEdge = query('.bottomEdge', $sumiao);
       const childHierarchies = Array.from(childNodesContainer.children).filter(function (childEl) {
@@ -475,6 +479,7 @@ describe('orgchart -- integration tests', function () {
     });
 
     it('toggles sibling visibility through horizontal-edge clicks and transition cleanup', function () {
+      dispatchNativeEvent($sumiao, 'mouseenter', { bubbles: false });
       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');
@@ -508,27 +513,25 @@ describe('orgchart -- integration tests', function () {
       oc.getNodeState($sumiao, 'siblings').should.deep.equal({ exist: true, visible: true });
     });
 
-    it('shows directional edge icons on hover and clears them on mouseleave', function () {
+    it('creates directional controls on hover and removes them on mouseleave', function () {
+      queryAll('.edge', $sumiao).length.should.equal(0);
+      dispatchNativeEvent($sumiao, 'mouseenter', { bubbles: false });
       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;
+      queryAll('.edge', $sumiao).length.should.equal(0);
+      topEdge.isConnected.should.equal(false);
+      bottomEdge.isConnected.should.equal(false);
+      leftEdge.isConnected.should.equal(false);
+      rightEdge.isConnected.should.equal(false);
     });
   });
 
@@ -648,6 +651,7 @@ describe('orgchart -- integration tests', function () {
         visibleLevel: 2
       });
       hybridSumiao = query('#n3', hybridChart.chart);
+      dispatchNativeEvent(hybridSumiao, 'mouseenter', { bubbles: false });
       toggleBtn = query('.toggleBtn', hybridSumiao);
       descendantsWrapper = siblingElements(hybridSumiao, '.nodes')[0];
       childNodes = Array.from(descendantsWrapper.children).filter(function (childEl) {
@@ -852,7 +856,10 @@ describe('orgchart -- integration tests', function () {
           originalEvent: { currentTarget: dropNode }
         });
 
-        query('#n4', hybridChart.chart).querySelector(':scope > .toggleBtn').should.exist;
+        const updatedDropNode = query('#n4', hybridChart.chart);
+        should.not.exist(updatedDropNode.querySelector(':scope > .toggleBtn'));
+        dispatchNativeEvent(updatedDropNode, 'mouseenter', { bubbles: false });
+        should.exist(updatedDropNode.querySelector(':scope > .toggleBtn'));
         query('#n3', hybridChart.chart).closest('.hierarchy').parentElement.previousElementSibling.id.should.equal('n4');
       } finally {
         global.JSONDigger = originalJSONDigger;
@@ -887,6 +894,7 @@ describe('orgchart -- integration tests', function () {
         }
       });
       compactNode = query('#n2', compactChart.chart);
+      dispatchNativeEvent(compactNode, 'mouseenter', { bubbles: false });
       backToLooseSymbol = query('.backToLooseSymbol', compactNode);
       backToCompactSymbol = query('.backToCompactSymbol', compactNode);