refactor, add tests, fix some issues

Author: vitosamson

README.md

@@ -67,6 +67,9 @@ The `dist` folder should be committed to the repo for now.
 #### Linting
 `npm run lint` - please lint before committing any code
 
+#### Testing
+`npm test`
+
 ## Known Issues
   - Typing a decimal as the last character in a number field doesn't work because of the way we coerce the type - if the field is a number type, we try to `parseFloat()` it, which parses a value like `1.` to `1`. Adding the decimal anywhere but the last character will work, so a workaround to trying to type `1.1` would be to type `11`, then insert the decimal between the `1`s.
 

dist/components/Editor.js

@@ -26,6 +26,8 @@ var _lodash7 = require('lodash.set');
 
 var _lodash8 = _interopRequireDefault(_lodash7);
 
+var _lib = require('../lib');
+
 var _Field = require('./Field');
 
 var _Field2 = _interopRequireDefault(_Field);
@@ -99,52 +101,57 @@ var JSONEditor = function (_Component) {
   }, {
     key: 'onFieldValueChange',
     value: function onFieldValueChange(path, value) {
-      var json = (0, _lodash4.default)(this.parseJson());
+      var _changeFieldValue = (0, _lib.changeFieldValue)(this.parseJson(), path, value);
+
+      var json = _changeFieldValue.json;
+      var previous = _changeFieldValue.previous;
+
 
       this.undoStack.push({
         path: path,
-        value: (0, _lodash6.default)(json, path)
+        value: previous
       });
 
-      (0, _lodash8.default)(json, path, value);
       this.redoStack = [];
       this.props.onChange(json);
     }
   }, {
     key: 'addArrayElement',
     value: function addArrayElement(path, value) {
-      var json = (0, _lodash4.default)(this.parseJson());
-      var currentVal = (0, _lodash6.default)(json, path);
+      var _addArrayElement2 = (0, _lib.addArrayElement)(this.parseJson(), path, value);
+
+      var json = _addArrayElement2.json;
+      var previous = _addArrayElement2.previous;
+
 
       this.undoStack.push({
         path: path,
-        value: currentVal
+        value: previous
       });
 
-      (0, _lodash8.default)(json, path, currentVal.concat(value));
       this.redoStack = [];
       this.props.onChange(json);
     }
   }, {
     key: 'addMapElement',
     value: function addMapElement(path, name, value) {
-      var json = (0, _lodash4.default)(this.parseJson());
-      var currentVal = (0, _lodash6.default)(json, path) || json;
+      var _addMapElement2 = (0, _lib.addMapElement)(this.parseJson(), path, name, value);
 
-      if (typeof currentVal[name] !== 'undefined') {
+      var json = _addMapElement2.json;
+      var previous = _addMapElement2.previous;
+
+
+      if (!json) {
         return false;
       }
 
-      // quick hack to fix an issue where adding an element to the root level
-      // messes up undo/redo since there's no path
-      if (path) {
+      if (path && path.length) {
         this.undoStack.push({
           path: path,
-          value: (0, _lodash4.default)(currentVal)
+          value: previous
         });
       }
 
-      currentVal[name] = value;
       this.redoStack = [];
       this.props.onChange(json);
 
@@ -153,23 +160,17 @@ var JSONEditor = function (_Component) {
   }, {
     key: 'removeElement',
     value: function removeElement(path, isArrayElement) {
-      var json = (0, _lodash4.default)(this.parseJson());
+      var _removeElement2 = (0, _lib.removeElement)(this.parseJson(), path, isArrayElement);
+
+      var json = _removeElement2.json;
+      var previous = _removeElement2.previous;
 
-      var beforePath = path.slice(0, path.length - 1);
-      var elementKey = path[path.length - 1];
-      var beforePathValue = (0, _lodash6.default)(json, beforePath);
 
       this.undoStack.push({
-        path: beforePath,
-        value: (0, _lodash4.default)(beforePathValue)
+        path: path,
+        value: previous
       });
 
-      if (isArrayElement) {
-        beforePathValue.splice(elementKey, 1);
-      } else {
-        delete beforePathValue[elementKey];
-      }
-
       this.redoStack = [];
       this.props.onChange(json);
     }
@@ -252,7 +253,7 @@ var JSONEditor = function (_Component) {
         React.createElement(
           'div',
           { className: 'editor-actions' },
-          React.createElement(_AddElementButton2.default, { path: '' }),
+          React.createElement(_AddElementButton2.default, { path: [] }),
           this.undoStack.length > 0 && React.createElement(
             'button',
             { className: 'btn default btn-xs', type: 'button', onClick: this.undo },

dist/components/Field.js

@@ -71,6 +71,19 @@ var JSONField = function (_Component) {
   }
 
   _createClass(JSONField, [{
+    key: 'shouldComponentUpdate',
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      if (nextState.expanded !== this.state.expanded) {
+        return true;
+      }
+
+      if (JSON.stringify(nextProps.fieldValue) !== JSON.stringify(this.props.fieldValue)) {
+        return true;
+      }
+
+      return false;
+    }
+  }, {
     key: 'toggleExpanded',
     value: function toggleExpanded() {
       this.setState({ expanded: !this.state.expanded });

dist/lib/addArrayElement.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = addArrayElement;
+
+var _lodash = require('lodash.get');
+
+var _lodash2 = _interopRequireDefault(_lodash);
+
+var _changeFieldValue = require('./changeFieldValue');
+
+var _changeFieldValue2 = _interopRequireDefault(_changeFieldValue);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function addArrayElement(json, path, value) {
+  var previous = (0, _lodash2.default)(json, path);
+
+  return {
+    json: (0, _changeFieldValue2.default)(json, path, previous.concat(value)).json,
+    previous: previous
+  };
+}

dist/lib/addMapElement.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = addMapElement;
+
+var _lodash = require('lodash.clonedeep');
+
+var _lodash2 = _interopRequireDefault(_lodash);
+
+var _lodash3 = require('lodash.get');
+
+var _lodash4 = _interopRequireDefault(_lodash3);
+
+var _changeFieldValue = require('./changeFieldValue');
+
+var _changeFieldValue2 = _interopRequireDefault(_changeFieldValue);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function addMapElement(json, path, name, value) {
+  if (path && path.length) {
+    // adding element to sub map - not root json object
+    var cloned = (0, _lodash2.default)(json);
+    var previous = (0, _lodash4.default)(cloned, path);
+
+    if (typeof previous[name] !== 'undefined') {
+      return false;
+    }
+
+    // get a snapshot of the previous value before we modify it
+    var clonedPrevious = (0, _lodash2.default)(previous);
+
+    previous[name] = value;
+
+    return {
+      json: (0, _changeFieldValue2.default)(json, path, previous).json,
+      previous: clonedPrevious
+    };
+  } else {
+    // adding element to root json object
+    if (typeof json[name] !== 'undefined') {
+      return false;
+    }
+
+    return {
+      json: (0, _changeFieldValue2.default)(json, name, value).json,
+      previous: json
+    };
+  }
+}

dist/lib/changeFieldValue.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = changeFieldValue;
+
+var _lodash = require('lodash.clonedeep');
+
+var _lodash2 = _interopRequireDefault(_lodash);
+
+var _lodash3 = require('lodash.set');
+
+var _lodash4 = _interopRequireDefault(_lodash3);
+
+var _lodash5 = require('lodash.get');
+
+var _lodash6 = _interopRequireDefault(_lodash5);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function changeFieldValue(json, path, value) {
+  var previous = (0, _lodash6.default)(json, path);
+  var cloned = (0, _lodash2.default)(json);
+
+  (0, _lodash4.default)(cloned, path, value);
+
+  return {
+    previous: previous,
+    json: cloned
+  };
+}

dist/lib/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.coerceToType = exports.getValueType = exports.isPlainValue = undefined;
+exports.removeElement = exports.addMapElement = exports.addArrayElement = exports.changeFieldValue = exports.coerceToType = exports.getValueType = exports.isPlainValue = undefined;
 
 var _isPlainValue2 = require('./isPlainValue');
 
@@ -17,8 +17,28 @@ var _coerceToType2 = require('./coerceToType');
 
 var _coerceToType3 = _interopRequireDefault(_coerceToType2);
 
+var _changeFieldValue2 = require('./changeFieldValue');
+
+var _changeFieldValue3 = _interopRequireDefault(_changeFieldValue2);
+
+var _addArrayElement2 = require('./addArrayElement');
+
+var _addArrayElement3 = _interopRequireDefault(_addArrayElement2);
+
+var _addMapElement2 = require('./addMapElement');
+
+var _addMapElement3 = _interopRequireDefault(_addMapElement2);
+
+var _removeElement2 = require('./removeElement');
+
+var _removeElement3 = _interopRequireDefault(_removeElement2);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 exports.isPlainValue = _isPlainValue3.default;
 exports.getValueType = _getValueType3.default;
-exports.coerceToType = _coerceToType3.default;
+exports.coerceToType = _coerceToType3.default;
+exports.changeFieldValue = _changeFieldValue3.default;
+exports.addArrayElement = _addArrayElement3.default;
+exports.addMapElement = _addMapElement3.default;
+exports.removeElement = _removeElement3.default;

dist/lib/removeElement.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = removeElement;
+
+var _lodash = require('lodash.clonedeep');
+
+var _lodash2 = _interopRequireDefault(_lodash);
+
+var _lodash3 = require('lodash.get');
+
+var _lodash4 = _interopRequireDefault(_lodash3);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function removeElement(json, path, isArrayElement) {
+  var cloned = (0, _lodash2.default)(json);
+
+  if (path.length === 1) {
+    // removing from the root json object
+    var previous = (0, _lodash2.default)(json[path[0]]);
+    delete cloned[path[0]];
+
+    return {
+      json: cloned,
+      previous: previous
+    };
+  } else {
+    // removing from a sub object or array
+    var beforePath = path.slice(0, path.length - 1);
+    var elementKey = path[path.length - 1];
+    var beforePathValue = (0, _lodash4.default)(cloned, beforePath);
+    var clonedBeforePathValue = (0, _lodash2.default)(beforePathValue);
+
+    if (isArrayElement) {
+      beforePathValue.splice(elementKey, 1);
+    } else {
+      delete beforePathValue[elementKey];
+    }
+
+    return {
+      json: cloned,
+      previous: clonedBeforePathValue
+    };
+  }
+}

karma.conf.js

@@ -0,0 +1,26 @@
+const webpackConfig = require('./tests/webpack.config');
+
+module.exports = config => {
+  config.set({
+    browsers: ['Chrome'],
+    frameworks: ['mocha'],
+    reporters: ['mocha'],
+
+    files: ['tests/index.js'],
+
+    preprocessors: {
+      'tests/index.js': ['webpack'],
+      '**/*.js': ['sourcemap'],
+    },
+
+    webpack: webpackConfig,
+
+    webpackServer: {
+      noInfo: true,
+    },
+
+    autoWatch: true,
+    singleRun: false,
+    colors: true,
+  });
+};