Fixed Nested Group Folding/Unfolding not working

.babelrc

@@ -3,6 +3,7 @@
   "plugins": [
     "transform-es3-property-literals",
     "transform-es3-member-expression-literals",
-    "@babel/plugin-transform-runtime"
+    "@babel/plugin-transform-runtime",
+	 ["js-logger", {"variable" : "L"}]
   ]
 }

.gitignore

@@ -24,3 +24,4 @@ gen/
 coverage/
 package-lock.json
 yarn.lock
+.DS_Store

lib/DataSet.js

@@ -168,6 +168,8 @@ class DataSet {
     if ('*' in this._subscribers) {
       subscribers = subscribers.concat(this._subscribers['*']);
     }
+	L.debug("Event: " + event + " params: " + params 
+							+ " Sender: " + senderId);
 
     for (let i = 0, len = subscribers.length; i < len; i++) {
       const subscriber = subscribers[i];
@@ -269,6 +271,7 @@ class DataSet {
       const props = { items: updatedIds, oldData, data: updatedData };
       this._trigger('update', props, senderId);
     }
+	L.debug('Ids updated ' + addedIds.concat(updatedIds) + " sender: " + senderId);
 
     return addedIds.concat(updatedIds);
   }

lib/logger-init.js

@@ -0,0 +1 @@
+require('js-logger').useDefaults();

lib/timeline/component/Group.js

@@ -22,6 +22,7 @@ class Group {
     this.subgroupOrderer = data && data.subgroupOrder;
     this.itemSet = itemSet;
     this.isVisible = null;
+    this.visible = true;
     this.stackDirty = true; // if true, items will be restacked on next redraw
 
     if (data && data.nestedGroups) {
@@ -137,6 +138,11 @@ class Group {
     } else {
       content = data && data.content;
     }
+	L.debug(this.groupId + ".setData: " + content);
+  L.debug(this.groupId + " being updated with data having props: ");
+  if (data) {
+    L.debug(Object.keys(data));
+  }
 
     if (content instanceof Element) {
       while (this.dom.inner.firstChild) {
@@ -177,6 +183,8 @@ class Group {
         }
       }
 
+
+
       util.addClassName(this.dom.label, 'timeline-nesting-group');
       var collapsedDirClassName = this.itemSet.options.rtl ? 'collapsed-rtl' : 'collapsed'
       if (this.showNested) {
@@ -232,6 +240,22 @@ class Group {
       util.addCssText(this.dom.label, data.style);
       this.style = data.style;
     }
+
+    if (data && data.visible !== undefined){
+      this.visible = data.visible;
+    }
+
+    if (this.visible == undefined){
+      L.debug("" + this.groupId + ".visible: was undefined");
+      this.visible = true;
+    }
+    // Hide if needed
+    L.debug("" + this.groupId + ".visible == " + this.visible);
+    if (this.visible){
+      this.show();
+    } else {
+      this.hide();
+    }
   }
 
   /**
@@ -588,6 +612,7 @@ class Group {
    * Show this group: attach to the DOM
    */
   show() {
+	L.debug("Showing " + this.dom.label )
     if (!this.dom.label.parentNode) {
       this.itemSet.dom.labelSet.appendChild(this.dom.label);
     }
@@ -610,6 +635,7 @@ class Group {
    */
   hide() {
     const label = this.dom.label;
+	L.debug("Hiding " + label )
     if (label.parentNode) {
       label.parentNode.removeChild(label);
     }

lib/timeline/component/ItemSet.js

@@ -185,6 +185,7 @@ class ItemSet extends Component {
                 if (!updatedNestedGroup) { return; }
                 updatedNestedGroup.nestedInGroup = groupData.id;
                 if (groupData.showNested == false) {
+					L.debug("Setting " + nestedGroupId + ".visible to false");
                   updatedNestedGroup.visible = false;
                 }
                 updatedGroups = updatedGroups.concat(updatedNestedGroup);
@@ -533,6 +534,7 @@ class ItemSet extends Component {
    * Hide the component from the DOM
    */
   hide() {
+	L.debug("ItemSet: calling hide on " + this);  
     // remove the frame containing the items
     if (this.dom.frame.parentNode) {
       this.dom.frame.parentNode.removeChild(this.dom.frame);
@@ -553,6 +555,7 @@ class ItemSet extends Component {
    * Show the component in the DOM (when not already visible).
    */
   show() {
+	  L.debug("ItemSet: calling show on " + this);  
     // show frame containing the items
     if (!this.dom.frame.parentNode) {
       this.body.dom.center.appendChild(this.dom.frame);
@@ -1183,6 +1186,7 @@ class ItemSet extends Component {
    */
   _onAddGroups(ids) {
     const me = this;
+	L.debug("Adding/Updating group ids: " + ids);
 
     ids.forEach(id => {
       const groupData = me.groupsData.get(id);
@@ -1830,12 +1834,16 @@ class ItemSet extends Component {
         if (nestedGroup.visible == undefined) {
           nestedGroup.visible = true;
         }
+        L.debug(""+nestedGroup.id + ".visible was: " + nestedGroup.visible);
         nestedGroup.visible = !!nestingGroup.showNested;
+        L.debug(""+nestedGroup.id + ".visible is: " + nestedGroup.visible);
         return nestedGroup;
       });
 
     groupsData.update(nestedGroups.concat(nestingGroup));
-
+	L.debug("Nesting: " + nestingGroup.groupId);
+
+	// Handle styling of collapse/uncollapse tabs
     if (nestingGroup.showNested) {
       util.removeClassName(group.dom.label, 'collapsed');
       util.addClassName(group.dom.label, 'expanded');

lib/util.js

@@ -3,6 +3,7 @@
 // first check if moment.js is already loaded in the browser window, if so,
 // use this instance. Else, load via commonjs.
 
+import './logger-init.js';
 
 import moment from './module/moment';
 

package.json

@@ -32,11 +32,13 @@
     "watch-dev": "gulp watch --bundle",
     "prepublishOnly": "npm run build",
     "predeploy": "npm run build --prefix ./docs",
-    "deploy": "gh-pages -d ./docs/build"
+    "deploy": "gh-pages -d ./docs/build",
+    "test" : "testcafe chrome tests/UI/"
   },
   "dependencies": {
     "emitter-component": "^1.1.1",
     "hammerjs": "^2.0.8",
+    "js-logger": "^1.6.0",
     "keycharm": "^0.2.0",
     "moment": "^2.18.1",
     "propagating-hammerjs": "^1.4.6",
@@ -46,11 +48,13 @@
     "@babel/core": "^7.2.2",
     "@babel/plugin-transform-runtime": "^7.2.0",
     "@babel/polyfill": "^7.2.5",
-    "@babel/preset-env": "^7.2.3",
+    "@babel/preset-env": "^7.3.1",
     "@babel/runtime": "^7.2.0",
     "async": "^2.5.0",
     "babel-cli": "^6.26.0",
+    "babel-jest": "^24.0.0",
     "babel-loader": "^8.0.5",
+    "babel-plugin-js-logger": "^1.0.17",
     "babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
     "babel-plugin-transform-es3-property-literals": "^6.22.0",
     "babelify": "^7.3.0",
@@ -62,16 +66,21 @@
     "gulp-eslint": "^4.0.0",
     "gulp-rename": "^1.2.2",
     "gulp-util": "^3.0.8",
+    "jest": "^24.0.0",
     "jsdoc": "^3.5.5",
     "jsdom": "11.3.0",
     "jsdom-global": "^3.0.2",
     "merge-stream": "^1.0.1",
     "mocha": "^5.2.0",
     "nyc": "^11.2.1",
     "rimraf": "^2.6.1",
+    "testcafe": "^0.23.3",
     "uglify-js": "^2.8.29",
     "uuid": "^3.1.0",
     "webpack": "^3.3.0",
     "yargs": "^8.0.2"
+  },
+  "scripts" : {
+    "test" : "testcafe chrome tests/UI/"
   }
 }

tests/UI/nesting.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>JS Bin</title>
+  <script src="../../dist/timeline.js"></script>
+  <link href="../../dist/timeline.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+  <div id="timeline"></div>
+  <script>
+  	var container = document.getElementById('timeline');
+	var data = [
+	  {id: 1, content: 'item 1', start: '2019-01-29T14:20:00Z', end: '2019-01-29T18:20:00Z',
+	   group: 1},
+	  {id: 2, content: "hello!", start: '2019-01-29T14:20:00Z', end: '2019-01-29T18:20:00Z',
+	  group: 2}
+	];
+
+	var groups = [
+	  {id: 1, content: 1, nestedGroups: [2]},
+	  {id: 2, content: 2}
+	]
+
+	var options = {};
+	var tv = new timeline.Timeline(container, data, groups, options);
+
+	// tv.on('select', function (properties) {alert('selected items: ' + properties.items);});
+
+  </script>
+</body>
+</html>

tests/UI/test_nest.js

@@ -0,0 +1,14 @@
+import { Selector } from 'testcafe';
+
+fixture `nesting`.page `./nesting.html`;
+
+test('Do nested groups hide/unhide', async t => {
+	const groups = Selector('.timeline-label');
+	const nesting = groups.withText('1');
+	const nested  = groups.withText('2');
+	await t
+		.expect(groups.count).eql(2)
+		.click(nesting);
+
+	await t.expect(groups.count).eql(1);
+})