orgchart 3.1.4 → 3.4.0

package/gulpfile.js

@@ -9,7 +9,7 @@ var merge = require('merge-stream');
 var csslint = require('gulp-csslint');
 var cleanCSS = require('gulp-clean-css');
 var sourcemaps = require('gulp-sourcemaps');
-var testcafe = require('gulp-testcafe');
+var cypress = require('cypress');
 var jest = require('gulp-jest').default;
 var paths = {
   src: 'src',
@@ -65,8 +65,9 @@ gulp.task('visual-regression', function () {
 });
 
 gulp.task('e2e-tests', gulp.series('addAssets', function () {
-  return gulp.src('test/e2e/**/test.js')
-    .pipe(testcafe({ browsers: ['chrome:headless', 'firefox:headless'] }));
+  return cypress.run({
+    spec: 'test/cypress/e2e/**/*.cy.js',
+  });
 }));
 
 gulp.task('test', gulp.series('e2e-tests', 'visual-regression'));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orgchart",
-  "version": "3.1.4",
+  "version": "3.4.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"
@@ -39,11 +40,13 @@
     "html2canvas": "^1.4.1",
     "jquery": "^3.6.2",
     "jquery-mockjax": "^2.6.0",
+    "json-digger": "^1.3.0",
     "jspdf": "^2.5.1"
   },
   "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",
@@ -51,22 +54,20 @@
     "gulp-eslint": "^4.0.2",
     "gulp-inject": "^4.3.2",
     "gulp-jest": "^4.0.3",
-    "gulp-mocha": "^6.0.0",
+    "gulp-mocha": "^8.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');
       }
     },
     //
@@ -1094,6 +1094,7 @@
     },
     // when user drops the node, it will be removed from original parent node and be added to new parent node
     dropHandler: function (event) {
+      var that = this;
       var $dropZone = $(event.delegateTarget);
       var $dragged = this.$chart.data('dragged');
 
@@ -1115,6 +1116,25 @@
       if (dropEvent.isDefaultPrevented()) {
         return;
       }
+      // special process for hybrid chart
+      if (this.$chart.data('options').verticalLevel > 1) {
+        var datasource = this.$chart.data('options').data;
+        var digger = new JSONDigger(datasource, this.$chart.data('options').nodeId, 'children');
+        digger.findNodeById($dragged.data('nodeData').id).then(function(draggedNode) {
+          var copy = Object.assign({}, draggedNode)
+          digger.removeNode(draggedNode.id).then(function() {
+            digger.findNodeById($dropZone.data('nodeData').id).then(function(dropNode) {
+              if (dropNode.children) {
+                dropNode.children.push(copy);
+              } else {
+                dropNode.children = [copy];
+              }
+              that.init({ 'data': datasource });
+            });
+          });
+        });
+      } else {
+      // The folowing code snippets are used to process horizontal chart
       // firstly, deal with the hierarchy of drop zone
       if (!$dropZone.siblings('.nodes').length) { // if the drop zone is a leaf node
         $dropZone.append('<i class="edge verticalEdge bottomEdge oci"></i>')
@@ -1142,6 +1162,7 @@
         $dragZone.find('.bottomEdge, .symbol').remove()
           .end().siblings('.nodes').remove();
       }
+    }
     },
     //
     touchstartHandler: function (event) {

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')