orgchart 5.0.0 → 7.0.0

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

@@ -0,0 +1,91 @@
+describe('Demo Interactions', () => {
+
+  it('loads the ajax datasource after showing its loading state', () => {
+    cy.visit('demo/ajax-datasource.html');
+    cy.get('#chart-container .spinner').should('exist');
+    cy.get('#chart-container .node .title', { timeout: 6000 }).should('contain.text', 'Lao Lao');
+    cy.get('#chart-container .spinner').should('not.exist');
+  });
+
+  it('centers the selected node', () => {
+    cy.visit('demo/center-on-selected-node.html');
+    cy.get('#chart-container .orgchart').invoke('css', 'transform').then((beforeTransform) => {
+      cy.contains('#chart-container .node .title', 'Su Miao').closest('.node').click();
+      cy.get('#chart-container .orgchart').should('not.have.css', 'transform', beforeTransform);
+    });
+  });
+
+  it('starts configured branches collapsed and expands them', () => {
+    cy.visit('demo/default-collapsed.html');
+    cy.contains('#chart-container .node .title', 'Hei Hei').closest('.node').then(($node) => {
+      expect($node[0].nextElementSibling).to.have.class('hidden');
+    });
+
+    cy.contains('#chart-container .node .title', 'Hei Hei').closest('.node').trigger('mouseenter').find('.bottomEdge').click();
+    cy.contains('#chart-container .node .title', 'Dan Dan').should('be.visible');
+  });
+
+  it('adds a sibling in the editable hybrid chart', () => {
+    cy.visit('demo/edit-hybrid-chart.html');
+    cy.contains('#chart-container .node .title', 'Football').closest('.node').click();
+    cy.get('#new-nodelist .new-node').type('Futsal');
+    cy.get('#rd-sibling').click();
+    cy.get('#btn-add-nodes').click();
+    cy.contains('#chart-container .node .title', 'Futsal').should('exist');
+  });
+
+  it('expands a selected branch to the configured depth', () => {
+    cy.visit('demo/expand-to-given-depth.html');
+    cy.contains('#chart-container .node .title', 'Su Miao').closest('.node').trigger('mouseenter').find('.bottomEdge').click();
+    cy.contains('#chart-container .node .title', 'Dan Zai').should('be.visible');
+    cy.contains('#chart-container .node .title', 'Er Dan Zai').should('not.be.visible');
+    cy.contains('#chart-container .node .title', 'AAA').should('not.be.visible');
+  });
+
+  it('filters matching nodes and clears the filter result', () => {
+    cy.visit('demo/filter-node.html');
+    cy.get('#key-word').type('dan');
+    cy.get('#btn-filter-node').click();
+    cy.get('#chart-container .node.matched').should('have.length.at.least', 1);
+    cy.get('#chart-container .orgchart').should('have.class', 'noncollapsable');
+    cy.get('#btn-cancel').click();
+    cy.get('#chart-container .node.matched').should('not.exist');
+    cy.get('#chart-container .orgchart').should('not.have.class', 'noncollapsable');
+  });
+
+  it('exports the current unordered-list hierarchy as JSON', () => {
+    cy.visit('demo/get-hierarchy.html');
+    cy.get('#btn-export-hier').click();
+    cy.get('pre').should('contain.text', 'n1').and('contain.text', 'n7');
+  });
+
+  it('highlights and clears related nodes on hover', () => {
+    cy.visit('demo/get-related-nodes.html');
+    cy.contains('#chart-container .node .title', 'Hei Hei').closest('.node').trigger('mouseenter');
+    cy.get('#chart-container .highlight-parent').should('exist');
+    cy.get('#chart-container .highlight-siblings').should('exist');
+    cy.get('#chart-container .highlight-children').should('exist');
+    cy.contains('#chart-container .node .title', 'Hei Hei').closest('.node').trigger('mouseleave');
+    cy.get('#chart-container .highlight-parent, #chart-container .highlight-siblings, #chart-container .highlight-children').should('not.exist');
+  });
+
+  it('toggles the custom secondary menu created for each node', () => {
+    cy.visit('demo/option-createNode.html');
+    cy.contains('#chart-container .node .title', 'Lao Lao').closest('.node').find('.second-menu-icon').click({ force: true });
+    cy.contains('#chart-container .node .title', 'Lao Lao').closest('.node').find('.second-menu').should('have.css', 'display', 'block');
+  });
+
+  it('switches to a hybrid layout on a narrow viewport', () => {
+    cy.viewport(500, 720);
+    cy.visit('demo/responsive-design.html');
+    cy.window().trigger('resize');
+    cy.get('#chart-container .nodes.vertical').should('exist');
+  });
+
+  it('renders all 10,000 generated nodes', () => {
+    cy.visit('demo/10000-nodes.html');
+    cy.get('#status', { timeout: 30000 }).should('contain.text', 'Initialization completed');
+    cy.get('#chart-container .node').should('have.length', 10000);
+  });
+
+});

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

@@ -0,0 +1,161 @@
+describe('Demo Rendering and Configuration', () => {
+
+  const visitChartDemo = (page) => {
+    cy.visit('demo/' + page);
+    cy.get('#chart-container .orgchart').should('exist');
+  };
+
+  it('renders the bottom-to-top chart', () => {
+    visitChartDemo('bottom2top.html', 'Bottom to Top Demo');
+    cy.get('#chart-container .orgchart').should('have.class', 'b2t');
+  });
+
+  it('renders color-coded node levels', () => {
+    visitChartDemo('color-coded.html', 'Color Coded Demo');
+    cy.get('#chart-container .node').filter('.middle-level, .product-dept, .rd-dept').should('exist');
+  });
+
+  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');
+  });
+
+  it('renders the custom node template', () => {
+    visitChartDemo('custom-template.html', 'Custom Template Demo');
+    cy.get('#chart-container .node .office').should('exist');
+  });
+
+  it('renders compact nodes from node data', () => {
+    visitChartDemo('data-prop-compact.html', 'Compact Nodes Demo');
+    cy.get('#chart-container .node.compact').should('exist');
+  });
+
+  it('renders hybrid nodes from node data', () => {
+    visitChartDemo('data-prop-hybrid.html', 'Hybrid Nodes Demo');
+    cy.get('#chart-container .nodes.vertical').should('exist');
+  });
+
+  it('renders the PNG export control', () => {
+    visitChartDemo('export-chart.html', 'Export Chart Demo');
+    cy.get('.oc-export-btn').should('be.visible');
+  });
+
+  it('renders the PDF export control', () => {
+    visitChartDemo('export-chart-pdf.html', 'Export PDF Demo');
+    cy.get('.oc-export-btn').should('be.visible');
+  });
+
+  it('renders the picture export control and avatars', () => {
+    visitChartDemo('export-chart-with-pictures.html', 'Export Chart with Pictures Demo');
+    cy.get('.oc-export-btn').should('be.visible');
+    cy.get('#chart-container .avatar').should('exist');
+  });
+
+  it('renders the family-tree relationship layout', () => {
+    visitChartDemo('family-tree.html', 'Family Tree Demo');
+    cy.get('#chart-container .node').should('have.length.at.least', 3);
+  });
+
+  it('renders family-tree custom properties', () => {
+    visitChartDemo('familytree-custom-properties.html', 'Family Tree Custom Properties Demo');
+    cy.get('#chart-container .node').should('have.length.at.least', 3);
+  });
+
+  it('renders the left-to-right chart', () => {
+    visitChartDemo('left2right.html', 'Left to Right Demo');
+    cy.get('#chart-container .orgchart').should('have.class', 'l2r');
+  });
+
+  it('renders link nodes', () => {
+    visitChartDemo('link-node.html', 'Link Nodes Demo');
+    cy.get('#chart-container .node').should('have.length.at.least', 2);
+  });
+
+  it('renders nodes with different widths', () => {
+    visitChartDemo('nodes-of-different-widths.html', 'Nodes of Different Widths Demo');
+    cy.get('#chart-container .node').then(($nodes) => {
+      const widths = Array.from($nodes, (node) => node.getBoundingClientRect().width);
+
+      expect(new Set(widths).size).to.be.greaterThan(1);
+    });
+  });
+
+  it('renders the right-to-left chart', () => {
+    visitChartDemo('right2left.html', 'Right to Left Demo');
+    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');
+  });
+
+  it('renders the map integration page shell without requiring map tiles', () => {
+    cy.visit('demo/integrate-map.html');
+    cy.contains('h1', 'Map Integration Demo').should('be.visible');
+    cy.get('#map').should('exist');
+    cy.get('#chart-container').should('exist');
+  });
+
+});

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

@@ -0,0 +1,23 @@
+describe('Hybrid Drag and Drop Chart', () => {
+
+  const sanDan = '.node:contains("San Dan")';
+  const sanYue = '.node:contains("San Yue")';
+
+  beforeEach(() => {
+    cy.visit('demo/drag-drop-hybrid-chart.html');
+  });
+
+  it('recomputes vertical relationships after moving a nested branch', () => {
+    const dataTransfer = new DataTransfer();
+
+    cy.get(sanDan).trigger('dragstart', { dataTransfer, force: true });
+    cy.get(sanYue).trigger('drop', { dataTransfer, force: true });
+
+    cy.get(sanYue).should(($node) => {
+      expect($node.siblings('.nodes').find('.node:contains("San Dan")')).to.exist;
+    });
+    cy.get(sanYue).find('.toggleBtn').should('not.exist');
+    cy.get(sanYue).trigger('mouseenter').find('.toggleBtn').should('exist');
+  });
+
+});

package/test/cypress/e2e/edit-chart.cy.js

@@ -31,6 +31,26 @@ describe('Edit Chart', () => {
     });
   });
 
+  it('add parent to a non-root node without changing its branch', () => {
+    cy.get(football).click();
+    cy.get(newNodes).eq(0).type('Indoor sports');
+    cy.get(parentRel).click();
+    cy.get(addBtn).click();
+
+    cy.get(ballgame).should(($root) => {
+      const rootChildNodes = $root[0].nextElementSibling;
+      const rootChildren = Array.from(rootChildNodes.children);
+      const localParentHierarchy = rootChildren.find((hierarchy) =>
+        hierarchy.querySelector(':scope > .node > .title').textContent === 'Indoor sports'
+      );
+
+      expect(rootChildren).to.have.length(3);
+      expect(localParentHierarchy.querySelector(':scope > .nodes > .hierarchy > .node > .title').textContent).to.equal('Football');
+      expect(rootChildren.map((hierarchy) => hierarchy.querySelector(':scope > .node > .title').textContent))
+        .to.include.members(['Indoor sports', 'Basketball', 'Volleyball']);
+    });
+  });
+
   it('add child nodes -- Futsal and Beach football', () => {
     cy.get(football).click();
     cy.get(newNodes).eq(0).type('Futsal');

package/test/cypress/e2e/level-offset.cy.js

@@ -0,0 +1,21 @@
+describe('Level Offset', () => {
+
+  beforeEach(() => {
+    cy.visit('demo/level-offset.html');
+  });
+
+  it('applies the configured offset to the node and connector variables', () => {
+    cy.contains('.node .title', 'Hong Miao')
+      .closest('.node')
+      .should('have.css', 'margin-top', '140px')
+      .then(($node) => {
+        const nodeStyle = $node[0].style;
+
+        expect(nodeStyle.getPropertyValue('--top')).to.equal('-151px');
+        expect(nodeStyle.getPropertyValue('--height')).to.equal('149px');
+        expect(nodeStyle.getPropertyValue('--top-cross-point')).to.equal('-153px');
+        expect(nodeStyle.getPropertyValue('--height-cross-point')).to.equal('151px');
+      });
+  });
+
+});

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/minimap.cy.js

@@ -0,0 +1,66 @@
+describe('Minimap', () => {
+
+  const chart = '.orgchart';
+  const minimap = '.orgchart-minimap';
+  const minimapViewport = '.orgchart-minimap-viewport';
+  const parseMatrixScale = (transformValue) => {
+    const matrixMatch = /matrix\(([^)]+)\)/.exec(transformValue || '');
+
+    return matrixMatch ? Number.parseFloat(matrixMatch[1].split(',')[0]) : 1;
+  };
+
+  beforeEach(() => {
+    cy.visit('demo/minimap.html');
+  });
+
+  it('renders an overview and moves the chart when its viewport is dragged', () => {
+    cy.get(minimap).should('be.visible');
+    cy.get('.orgchart-minimap-node').should('have.length.at.least', 30);
+    cy.get(minimapViewport).should('be.visible');
+
+    cy.get(chart).invoke('css', 'transform').then((beforeTransform) => {
+      cy.get(minimapViewport).then(($viewport) => {
+        const viewport = $viewport[0];
+        const rect = viewport.getBoundingClientRect();
+        const startX = rect.left + (rect.width / 2);
+        const startY = rect.top + (rect.height / 2);
+        const win = viewport.ownerDocument.defaultView;
+
+        viewport.dispatchEvent(new win.MouseEvent('mousedown', {
+          bubbles: true,
+          cancelable: true,
+          clientX: startX,
+          clientY: startY
+        }));
+        viewport.ownerDocument.dispatchEvent(new win.MouseEvent('mousemove', {
+          bubbles: true,
+          clientX: startX + 20,
+          clientY: startY + 20
+        }));
+        viewport.ownerDocument.dispatchEvent(new win.MouseEvent('mouseup', { bubbles: true }));
+      });
+
+      cy.get(chart).should('not.have.css', 'transform', beforeTransform);
+    });
+  });
+
+  it('zooms the main chart from the minimap wheel control', () => {
+    cy.get(chart).invoke('css', 'transform').then((beforeTransform) => {
+      cy.get(minimap).then(($minimap) => {
+        const minimapElement = $minimap[0];
+        const win = minimapElement.ownerDocument.defaultView;
+
+        minimapElement.dispatchEvent(new win.WheelEvent('wheel', {
+          bubbles: true,
+          cancelable: true,
+          deltaY: -1
+        }));
+      });
+
+      cy.get(chart).invoke('css', 'transform').then((afterTransform) => {
+        expect(parseMatrixScale(afterTransform)).to.be.greaterThan(parseMatrixScale(beforeTransform));
+      });
+    });
+  });
+
+});

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);
+      });
+    });
   });
 
 });