COMPASS-646 line-number.jsx: return component instead of plain object for bson types (#743)

* return component instead of plain object for array items.

* add enzyme test.

* clean up test.

* fixed nested array/object inside array edge case.

Author: rueckstiess

package.json

@@ -184,6 +184,7 @@
     "hadron-build": "^4.1.1",
     "jsdom": "^9.8.3",
     "mocha": "^3.1.2",
+    "mock-require": "^2.0.1",
     "mongodb-js-precommit": "^0.2.9",
     "mongodb-runner": "^3.4.0",
     "react-addons-test-utils": "^15.2.1",

src/internal-packages/crud/lib/component/line-number.jsx

@@ -1,6 +1,8 @@
 const React = require('react');
 const outsideClickable = require('react-click-outside');
+const getComponent = require('hadron-react-bson');
 const Actions = require('../actions');
+// const debug = require('debug')('mongodb-compass:crud:line-number');
 
 /**
  * The BEM base style name for the element.
@@ -25,17 +27,17 @@ const DEFAULT_TEXT = 'Add Field After ';
 /**
  * Object text.
  */
-const OBJECT_TEXT = 'Add Field To Object ';
+const OBJECT_TEXT = 'Add Field To ';
 
 /**
  * Array text.
  */
-const ARRAY_TEXT = 'Add Element To Array ';
+const ARRAY_TEXT = 'Add Array Element To ';
 
 /**
  * Array element text.
  */
-const ARRAY_ELEMENT_TEXT = 'Add Element After ';
+const ARRAY_ELEMENT_TEXT = 'Add Array Element After ';
 
 /**
  * Add child icon.
@@ -197,12 +199,31 @@ class LineNumber extends React.Component {
   }
 
   /**
-   * Render the field name in the menu.
+   * Render the value of the element.
+   *
+   * @returns {React.Component} The value component.
+   */
+  renderValue() {
+    const component = getComponent(this.props.element.currentType);
+    return React.createElement(
+      component,
+      { type: this.props.element.currentType, value: this.props.element.currentValue }
+    );
+  }
+
+  /**
+   * Render the identifier in the menu. For objects and arrays in an array,
+   * this is the type, because the type is already part of the message. For other
+   * values inside arrays, it's the actual value. Otherwise it's the key.
    *
    * @returns {String} The field name or value if an array element.
    */
-  renderFieldName() {
-    return this.props.element.currentKey || this.props.element.currentValue;
+  renderIdentifier() {
+    // this case is already handled in renderDefaultItem()
+    if (this.isParentArray() && (this.isElementObject() || this.isElementArray())) {
+      return this.props.element.currentType;
+    }
+    return this.props.element.currentKey || this.renderValue();
   }
 
   /**
@@ -212,14 +233,16 @@ class LineNumber extends React.Component {
    * @param {String} text - The text.
    * @param {Function} handler - The click handler.
    * @param {String} testId - The test id.
+   *
+   * @returns {Component} the menu item component
    */
   renderMenuItem(iconClassName, text, handler, testId) {
     return (
       <li onClick={handler} data-test-id={testId}>
         <span>
           <i className={iconClassName} />
           {text}
-          <span className={FIELD_NAME_CLASS}>{this.renderFieldName()}</span>
+          <span className={FIELD_NAME_CLASS}>{this.renderIdentifier()}</span>
         </span>
       </li>
     );

test/crud.test.js

@@ -0,0 +1,43 @@
+/* eslint no-unused-vars: 0 */
+
+const mock = require('mock-require');
+const sinon = require('sinon');
+const chai = require('chai');
+const chaiEnzyme = require('chai-enzyme');
+const expect = chai.expect;
+const bson = require('bson');
+const mount = require('enzyme').mount;
+
+// mock CRUD actions
+const closeAllMenusSpy = sinon.spy();
+closeAllMenusSpy.listen = () => {};
+
+const crudActions = {
+  documentRemoved: sinon.spy(),
+  openInsertDocumentDialog: sinon.spy(),
+  closeInsertDocumentDialog: sinon.spy(),
+  insertDocument: sinon.spy(),
+  fileDropped: sinon.spy(),
+  refreshDocuments: sinon.spy(),
+  closeAllMenus: closeAllMenusSpy
+};
+
+mock('../src/internal-packages/crud/lib/actions', crudActions);
+
+const React = require('react');
+const Element = require('hadron-document').Element;
+const LineNumber = require('../src/internal-packages/crud/lib/component/line-number');
+
+// use chai-enzyme assertions, see https://github.com/producthunt/chai-enzyme
+chai.use(chaiEnzyme());
+
+describe('CRUD', function() {
+  const element = new Element(undefined, bson.Long.fromString('1'), false, {isRoot: () => false});
+
+  describe('<LineNumber />', function() {
+    it('renders a hadron-react-bson component for array values (COMPASS-646)', function() {
+      const component = mount(<LineNumber element={element} />);
+      expect(component.find('span.line-number-menu-field div.element-value')).to.have.className('element-value-is-int64');
+    });
+  });
+});