orgchart 3.1.4 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orgchart",
-  "version": "3.1.4",
+  "version": "3.2.0",
   "description": "Simple and direct organization chart(tree-like hierarchy) plugin based on pure DOM and jQuery.",
   "main": "./dist/js/jquery.orgchart.min.js",
   "style": [
@@ -10,7 +10,8 @@
     "test": "gulp test",
     "unit-tests": "gulp unit-tests",
     "build": "gulp build",
-    "start": "gulp serve"
+    "start": "gulp serve",
+    "cypress:open": "cypress open"
   },
   "jest": {
     "preset": "jest-puppeteer"
@@ -44,6 +45,7 @@
   "devDependencies": {
     "browser-sync": "^2.26.7",
     "chai": "^4.2.0",
+    "cypress": "^12.3.0",
     "del": "^3.0.0",
     "gulp": "^4.0.2",
     "gulp-clean-css": "^3.10.0",
@@ -54,19 +56,17 @@
     "gulp-mocha": "^6.0.0",
     "gulp-rename": "^1.4.0",
     "gulp-sourcemaps": "^2.6.5",
-    "gulp-testcafe": "^0.9.2",
     "gulp-uglify": "^3.0.2",
     "jest": "^29.3.1",
     "jest-cli": "^29.3.1",
-    "jest-image-snapshot": "^2.11.0",
+    "jest-image-snapshot": "^6.1.0",
     "jest-puppeteer": "^4.3.0",
     "jsdom": "^16.5.0",
     "jsdom-global": "^3.0.2",
     "merge-stream": "^1.0.1",
-    "mocha": "^6.2.0",
+    "mocha": "^10.2.0",
     "puppeteer": "^1.20.0",
     "sinon": "^4.5.0",
-    "sinon-chai": "^2.14.0",
-    "testcafe": "^1.5.0"
+    "sinon-chai": "^2.14.0"
   }
 }

package/src/css/jquery.orgchart.css

@@ -402,6 +402,8 @@
   position: absolute;
   left: 5px;
   bottom: -2px;
+  width: 1rem;
+  height: 1rem;
 }
 
 .orgchart .node .toggleBtn::before {

package/src/js/jquery.orgchart.js

@@ -958,7 +958,7 @@
         $children.addClass('sliding').removeClass('slide-up').eq(0).one('transitionend', { 'vNodes': $children }, this.expandVNodesEnd);
       } else {
         $descendants.addClass('sliding slide-up').eq(0).one('transitionend', { 'vNodes': $descendants }, this.collapseVNodesEnd);
-        $descendants.find('.toggleBtn').removeClass('oci-minus-square').addClass('oci-plus-square');
+        $descendants.find('.toggleBtn').removeClass('oci-minus-square oci-plus-square');
       }
     },
     //

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

@@ -0,0 +1,115 @@
+describe('Hybrid(horizontal + vertical) Chart', () => {
+
+  const laolao = '.node:contains("Lao Lao")';
+  const bomiao = '.node:contains("Bo Miao")';
+  const sumiao = '.node:contains("Su Miao")';
+  const hongmiao = '.node:contains("Hong Miao")';
+  const lixin = '.node:contains("Li Xin")';
+  const tiehua = '.node:contains("Tie Hua")';
+  const heihei = '.node:contains("Hei Hei")';
+  const pangpang = '.node:contains("Pang Pang")';
+  const dandan = '.node:contains("Dan Dan")';
+
+  beforeEach(() => {
+    cy.visit('demo/drag-drop.html');
+  });
+
+  function dropNodeToAnother (sourceNode, targetNode) {
+    const dataTransfer = new DataTransfer();
+    cy.get(sourceNode).trigger('dragstart', { dataTransfer, force: true });
+    cy.get(targetNode).trigger('drop', { dataTransfer, force: true });
+  }
+
+  it('drag lixin onto hongmiao', () => {
+    dropNodeToAnother(lixin, hongmiao);
+    cy.get(hongmiao).should(($node) => {
+      expect($node.siblings('.nodes')).to.exist;
+      expect($node.siblings('.nodes').find('.node:contains("Li Xin")')).to.exist;
+    });
+    cy.get(bomiao).should(($node) => {
+      expect($node.siblings('.nodes')).not.to.exist;
+    });
+  });
+
+  it('drag lixin onto heihei', () => {
+    dropNodeToAnother(lixin, heihei);
+    cy.get(heihei).should(($node) => {
+      expect($node.siblings('.nodes').find('.node').length).to.equal(3);
+      expect($node.siblings('.nodes').find('.node:contains("Li Xin")')).to.exist;
+    });
+    cy.get(bomiao).should(($node) => {
+      expect($node.siblings('.nodes')).not.to.exist;
+    });
+  });
+
+  it('heihei onto hongmiao', () => {
+    dropNodeToAnother(heihei, hongmiao);
+    cy.get(hongmiao).should(($node) => {
+      expect($node.siblings('.nodes')).to.exist;
+      expect($node.siblings('.nodes').find('.node').length).to.equal(3);
+      expect($node.siblings('.nodes').find('.node:contains("Hei Hei")')).to.exist;
+    });
+    cy.get(sumiao).should(($node) => {
+      expect($node.siblings('.nodes').find('.node:contains("Tie Hua")')).to.exist;
+    });
+  });
+
+  it('heihei onto bomiao', () => {
+    dropNodeToAnother(heihei, bomiao);
+    cy.get(bomiao).should(($node) => {
+      expect($node.siblings('.nodes').find('.node').length).to.equal(4);
+      expect($node.siblings('.nodes').find('.node:contains("Hei Hei")')).to.exist;
+    });
+    cy.get(sumiao).should(($node) => {
+      expect($node.siblings('.nodes').find('.node:contains("Tie Hua")')).to.exist;
+    });
+  });
+
+  it('pangpang onto heihei', () => {
+    dropNodeToAnother(pangpang, heihei);
+    cy.get(heihei).should(($node) => {
+      expect($node.siblings('.nodes').find('.node').length).to.equal(2);
+      expect($node.siblings('.nodes').find('.node:contains("Pang Pang")')).to.exist;
+    });
+  });
+
+  it('dandan onto heihei', () => {
+    dropNodeToAnother(dandan, heihei);
+    cy.get(heihei).should(($node) => {
+      expect($node.siblings('.nodes').find('.node').length).to.equal(2);
+      expect($node.siblings('.nodes').find('.node:contains("Dan Dan")')).to.exist;
+    });
+  });
+
+  it('pangpang onto dandan', () => {
+    dropNodeToAnother(pangpang, dandan);
+    cy.get(heihei).should(($node) => {
+      expect($node.siblings('.nodes').find('.node')).to.exist;
+      expect($node.siblings('.nodes').find('.node:contains("Dan Dan")')).to.exist;
+    });
+    cy.get(dandan).should(($node) => {
+      expect($node.siblings('.nodes').find('.node')).to.exist;
+      expect($node.siblings('.nodes').find('.node:contains("Pang Pang")')).to.exist;
+    });
+  });
+
+  it('heihei onto pangpang', () => {
+    dropNodeToAnother(heihei, pangpang);
+    cy.get(heihei).should(($node) => {
+      expect($node.siblings('.nodes').find('.node').length).to.equal(2);
+      expect($node.siblings('.nodes').find('.node:contains("Pang Pang")')).to.exist;
+      expect($node.siblings('.nodes').find('.node:contains("Dan Dan")')).to.exist;
+    });
+  });
+
+  it('hongmiao onto lixin', () => {
+    dropNodeToAnother(hongmiao, lixin);
+    cy.get(laolao).should(($node) => {
+      expect($node.siblings('.nodes').children('.hierarchy:contains("Hong Miao")')).to.exist;
+    });
+    cy.get(lixin).should(($node) => {
+      expect($node.siblings('.nodes').find('.node:contains("Hong Miao")')).not.to.exist;
+    });
+  });
+
+});

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

@@ -0,0 +1,80 @@
+describe('Edit Chart', () => {
+
+  const editPanel = '#edit-panel';
+  const ballgame = '.node:contains("Ball game")';
+  const football = '.node:contains("Football")';
+  const viewState = '#rd-view';
+  const editState = '#rd-edit';
+  const selectedNode = '#selected-node';
+  const newNodes = '#new-nodelist .new-node';
+  const addInput = '#btn-add-input';
+  const removeInput = '#btn-remove-input';
+  const parentRel = '#rd-parent';
+  const childRel = '#rd-child';
+  const siblingRel = '#rd-sibling';
+  const addBtn = '#btn-add-nodes';
+  const deleteBtn = '#btn-delete-nodes';
+  const resetBtn = '#btn-reset';
+
+  beforeEach(() => {
+    cy.visit('demo/edit-chart.html');
+  });
+
+  it('add parent(root) node -- sports', () => {
+    cy.get(ballgame).click();
+    cy.get(newNodes).eq(0).type('Sports');
+    cy.get(parentRel).click();
+    cy.get(addBtn).click();
+    cy.get(selectedNode).should('have.value', 'Ball game');
+    cy.get(ballgame).should(($node) => {
+      expect($node.closest('.nodes').siblings('.node')).to.have.text('Sports');
+    });
+  });
+
+  it('add child nodes -- Futsal and Beach football', () => {
+    cy.get(football).click();
+    cy.get(newNodes).eq(0).type('Futsal');
+    cy.get(addInput).click();
+    cy.get(newNodes).eq(1).type('Beach football');
+    cy.get(addInput).click();
+    cy.get(newNodes).eq(2).type('Robot football');
+    cy.get(removeInput).click();
+    cy.get(childRel).click();
+    cy.get(addBtn).click();
+    cy.get(selectedNode).should('have.value', 'Football');
+    cy.get(football).should(($node) => {
+      expect($node.siblings('.nodes').children('.hierarchy').length).to.equal(2);
+    });
+    cy.get(football).should(($node) => {
+      expect($node.siblings('.nodes').find('.node:contains("Futsal")')).to.exist;
+      expect($node.siblings('.nodes').find('.node:contains("Beach football")')).to.exist;
+    });
+
+    cy.get(resetBtn).click();
+    cy.get(football).should('not.have.class', 'focused');
+    cy.get(selectedNode).should('have.value', '');
+    cy.get(newNodes).should('have.length', 1);
+    cy.get(childRel).should('not.be.checked');
+  });
+
+  it('add sibling node -- Baseball', () => {
+    cy.get(football).click();
+    cy.get(newNodes).eq(0).type('Baseball');
+    cy.get(siblingRel).click();
+    cy.get(addBtn).click();
+    cy.get(selectedNode).should('have.value', 'Football');
+    cy.get(ballgame).should(($node) => {
+      expect($node.siblings('.nodes').children('.hierarchy').length).to.equal(4);
+      expect($node.siblings('.nodes').find('.node:contains("Baseball")')).to.exist;
+    });
+  });
+
+  it('delete the football node', () => {
+    cy.get(football).click();
+    cy.get(selectedNode).should('have.value', 'Football');
+    cy.get(deleteBtn).click();
+    cy.get(selectedNode).should('have.value', '');
+    cy.get(football).should('not.exist');
+  });
+
+});

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

@@ -0,0 +1,82 @@
+describe('Local Datasource', () => {
+
+  const laolao = '.node:contains("Lao Lao")';
+  const bomiao = '.node:contains("Bo Miao")';
+  const sumiao = '.node:contains("Su Miao")';
+  const hongmiao = '.node:contains("Hong Miao")';
+  const tiehua = '.node:contains("Tie Hua")';
+  const heihei = '.node:contains("Hei Hei")';
+  const pangpang = '.node:contains("Pang Pang")';
+  const dandan = '.node:contains("Dan Dan")';
+
+  beforeEach(() => {
+    cy.visit('demo/local-datasource.html');
+  });
+
+  it('bottomEdge of root node works well', () => {
+    cy.get(laolao).find('.bottomEdge').click();
+    cy.get(bomiao).get(sumiao).get(hongmiao).should('not.be.visible');
+
+    cy.get(laolao).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(laolao).get(bomiao).get(hongmiao).should('not.be.visible');
+
+    cy.get(sumiao).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(bomiao).get(hongmiao).should('not.be.visible');
+
+    cy.get(sumiao).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(bomiao).get(hongmiao).should('not.be.visible');
+
+    cy.get(sumiao).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(tiehua).get(heihei).get(pangpang).get(dandan).should('not.be.visible');
+
+    cy.get(sumiao).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(laolao).get(bomiao).get(sumiao).get(hongmiao).get(tiehua).get(pangpang).should('not.be.visible');
+
+    cy.get(heihei).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(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(tiehua).get(heihei).get(dandan).should('not.be.visible');
+
+      cy.get(pangpang).find('.leftEdge').click();
+      cy.get(tiehua).get(heihei).should('be.visible');
+  });
+
+});
+

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

@@ -0,0 +1,33 @@
+describe('Load data on-demand', () => {
+
+  const sumiao = '.node:contains("Su Miao")';
+  const heihei = '.node:contains("Hei Hei")';
+
+  beforeEach(() => {
+    cy.visit('demo/ondemand-loading-data.html');
+  });
+
+  it('load child nodes of hehei', () => {
+    cy.get(heihei).find('.bottomEdge').click();
+    cy.get(heihei).should(($node) => {
+      expect($node.siblings('.nodes').children('.hierarchy').length).to.equal(2);
+    });
+  });
+
+  it('load parent node of sumiao', () => {
+    cy.get(sumiao).find('.topEdge').click();
+    cy.get(sumiao).should(($node) => {
+      expect($node.closest('.nodes').siblings('.node:contains("Lao Lao")')).to.exist;
+    });
+  });
+
+  it('load parent and sibling nodes of sumiao', () => {
+    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);
+    });
+
+  });
+
+});

package/test/cypress/e2e/pan-zoom.cy.js

@@ -0,0 +1,41 @@
+describe('Pan & Zoom', () => {
+
+  beforeEach(() => {
+    cy.visit('demo/pan-zoom.html');
+  });
+
+  const chart = '.orgchart';
+
+  it('drag the chart to the top', () => {
+    cy.get(chart)
+      .trigger('mousedown', { which: 1, pageX: 10, pageY: 200 })
+      .trigger('mousemove', { which: 1, pageX: 10, pageY: 100 })
+      .trigger('mouseup')
+      .should('have.css', 'transform', 'matrix(1, 0, 0, 1, 0, -100)');
+  });
+
+  it('drag the chart to the bottom', () => {
+    cy.get(chart)
+    .trigger('mousedown', { which: 1, pageX: 10, pageY: 100 })
+    .trigger('mousemove', { which: 1, pageX: 10, pageY: 200 })
+    .trigger('mouseup')
+    .should('have.css', 'transform', 'matrix(1, 0, 0, 1, 0, 100)');
+  });
+
+  it('drag the chart to the left', () => {
+    cy.get(chart)
+    .trigger('mousedown', { which: 1, pageX: 200, pageY: 10 })
+    .trigger('mousemove', { which: 1, pageX: 100, pageY: 10 })
+    .trigger('mouseup')
+    .should('have.css', 'transform', 'matrix(1, 0, 0, 1, -100, 0)');
+  });
+
+  it('drag the chart to the right', () => {
+    cy.get(chart)
+    .trigger('mousedown', { which: 1, pageX: 100, pageY: 10 })
+    .trigger('mousemove', { which: 1, pageX: 200, pageY: 10 })
+    .trigger('mouseup')
+    .should('have.css', 'transform', 'matrix(1, 0, 0, 1, 100, 0)');
+  });
+
+});

package/test/cypress/e2e/reload-data.cy.js

@@ -0,0 +1,26 @@
+describe('Refresh orgchart with new options', () => {
+
+  beforeEach(() => {
+    cy.visit('demo/reload-data.html');
+  });
+
+  const loadChart1 = '#btn-chart1';
+  const loadChart2 = '#btn-chart2';
+  const loadChart3 = '#btn-chart3';
+
+  it('load chart2', () => {
+    cy.get(loadChart2).click();
+    cy.get('.node').should('have.length', 3);
+  });
+
+  it('load chart3', () => {
+    cy.get(loadChart3).click();
+    cy.get('.node').should('have.length', 4);
+  });
+
+  it('load chart1', () => {
+    cy.get(loadChart1).click();
+    cy.get('.node').should('have.length', 9);
+  });
+
+});

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

@@ -0,0 +1,33 @@
+describe('Toggle sibling nodes respectively', () => {
+
+  const bomiao = '.node:contains("Bo Miao")';
+  const sumiao = '.node:contains("Su Miao")';
+  const hongmiao = '.node:contains("Hong Miao")';
+  const renwu = '.node:contains("Ren Wu")';
+  const lixin = '.node:contains("Li Xin")';
+  const xingan = '.node:contains("Xing An")';
+  const yidian = '.node:contains("Yi Dian")';
+
+  beforeEach(() => {
+    cy.visit('demo/toggle-sibs-resp.html');
+  });
+
+  it('toggle the left side sibling nodes of sumiao', () => {
+    cy.get(sumiao).find('.leftEdge').click();
+    cy.get(bomiao).get(renwu).get(lixin).should('not.be.visible');
+
+    cy.get(sumiao).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(hongmiao).get(xingan).get(yidian).should('not.be.visible');
+
+    cy.get(sumiao).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

@@ -0,0 +1,38 @@
+describe('Hybrid(horizontal + vertical) Chart', () => {
+
+  beforeEach(() => {
+    cy.visit('demo/vertical-level.html');
+  });
+
+  const sumiao = '.node:contains("Su Miao")';
+  const tiehua = '.node:contains("Tie Hua")';
+  const heihei = '.node:contains("Hei Hei")';
+  const pangpang = '.node:contains("Pang Pang")';
+  const dandan = '.node:contains("Dan Dan")';
+  const erdan = '.node:contains("Er Dan")';
+  const sandan = '.node:contains("San Dan")';
+  const sidan = '.node:contains("Si Dan")';
+  const wudan = '.node:contains("Wu Dan")';
+
+  it('toggle the vertical nodes', () => {
+    cy.get(dandan).find('.toggleBtn').click();
+    cy.get(erdan).get(sandan).should('be.visible');
+    cy.get(sidan).get(wudan).should('not.be.visible');
+  
+    cy.get(heihei).find('.toggleBtn').click();
+    cy.get(pangpang).get(dandan).get(erdan).get(sandan).should('not.be.visible');
+  
+    cy.get(heihei).find('.toggleBtn').click();
+    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(tiehua).get(heihei).get(pangpang).get(dandan).should('be.visible');
+
+    cy.get(sumiao).find('.bottomEdge').click();
+    cy.get(tiehua).get(heihei).should('be.visible');
+    cy.get(pangpang).get(dandan).should('not.be.visible');
+  });
+
+});

package/test/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

package/test/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

package/test/cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')