COMPASS 301: Hide validation tab for servers < 3.2 (#615)

* COMPASS-301: Only show validation tab for mongod instances > 3.2.0-rc0

* Add <Collection />  test stub

Several issues here:
1. _helper.js needs to be named that way so that it is executed first, before other tests.
2. The <Collection /> component has deep dependencies on the app.appRegistry and now also app.instance
3. I can’t see an easy way to mock those components, but will retry as time permits.

* Rename NavBarComponent to TabNavBar

It’s already named as such elsewhere, and is just confusing for enzyme tests.

* Add enzyme tests for the validation tab on different server versions

Note: Requires a new showView prop, just for testing for now so the component is actually rendered.

* Fix React warning

Comes from our super-highly decoupled hadron magic :)
Also console.trace() is amazing!

* Fix eslint warnings

* Go back to tests failing on local

npm run test -- --unit

* Unit tests pass on local

npm run test -- --unit
Something upstream is being evil, but I don’t really want to spend the time now to track it down, and I think the test name is clear enough that something bad is going on.

Author: pzrq

src/internal-packages/app/lib/components/tab-nav-bar.jsx

@@ -2,7 +2,7 @@ const React = require('react');
 const _ = require('lodash');
 // const debug = require('debug')('mongodb-compass:app:nav-bar');
 
-class NavBarComponent extends React.Component {
+class TabNavBar extends React.Component {
 
   constructor(props) {
     super(props);
@@ -87,7 +87,7 @@ class NavBarComponent extends React.Component {
   }
 }
 
-NavBarComponent.propTypes = {
+TabNavBar.propTypes = {
   theme: React.PropTypes.oneOf(['dark', 'light']),
   activeTabIndex: React.PropTypes.number,
   mountAllViews: React.PropTypes.bool,
@@ -96,12 +96,12 @@ NavBarComponent.propTypes = {
   onTabClicked: React.PropTypes.func
 };
 
-NavBarComponent.defaultProps = {
+TabNavBar.defaultProps = {
   theme: 'light',
   activeTabIndex: 0,
   mountAllViews: true
 };
 
-NavBarComponent.displayName = 'NavBarComponent';
+TabNavBar.displayName = 'TabNavBar';
 
-module.exports = NavBarComponent;
+module.exports = TabNavBar;

src/internal-packages/collection/lib/components/index.jsx

@@ -1,5 +1,6 @@
 const React = require('react');
 const app = require('ampersand-app');
+const semver = require('semver');
 const toNS = require('mongodb-ns');
 const NamespaceStore = require('hadron-reflux-store').NamespaceStore;
 
@@ -9,7 +10,7 @@ class Collection extends React.Component {
 
     this.state = {
       name: '',
-      showView: false,
+      showView: this.props.showView || false,
       activeTab: 0
     };
     this.Stats = app.appRegistry.getComponent('CollectionStats.CollectionStats');
@@ -39,20 +40,24 @@ class Collection extends React.Component {
   }
 
   showCollection() {
+    const serverVersion = app.instance.build.version;
+    const DV_ENABLED = semver.gt(serverVersion, '3.2.0-rc0');
     const tabs = [
       'SCHEMA',
       'DOCUMENTS',
       'EXPLAIN PLAN',
-      'INDEXES',
-      'VALIDATION'
+      'INDEXES'
     ];
     const views = [
       <this.Schema />,
       <this.Document />,
       <this.Explain />,
-      <this.Indexes />,
-      <this.Validation />
+      <this.Indexes />
     ];
+    if (DV_ENABLED) {
+      tabs.push('VALIDATION');
+      views.push(<this.Validation />);
+    }
 
     return (
       <div className="collection-view clearfix">
@@ -83,6 +88,10 @@ class Collection extends React.Component {
   }
 }
 
+Collection.propTypes = {
+  showView: React.PropTypes.bool
+};
+
 Collection.displayName = 'Collection';
 
 module.exports = Collection;

test/a-babel-global-test-setup.js

@@ -0,0 +1 @@
+require('babel-register')();

test/collection-component.test.js

@@ -0,0 +1,59 @@
+/* eslint no-unused-vars: 0, no-unused-expressions: 0 */
+const app = require('ampersand-app');
+const chai = require('chai');
+const chaiEnzyme = require('chai-enzyme');
+const expect = chai.expect;
+const React = require('react');
+const sinon = require('sinon');
+const shallow = require('enzyme').shallow;
+const AppRegistry = require('hadron-app-registry');
+const Collection = require('../src/internal-packages/collection/lib/components/index');
+const TabNavBar = require('../src/internal-packages/app/lib/components/tab-nav-bar');
+
+// const debug = require('debug')('compass:collection:test');
+
+// use chai-enzyme assertions, see https://github.com/producthunt/chai-enzyme
+chai.use(chaiEnzyme());
+
+describe('<Collection />', function() {
+  let appRegistry = app.appRegistry;
+  let appInstance = app.instance;
+  beforeEach(function() {
+    // Mock the AppRegistry with a new one so tests don't complain about
+    // appRegistry.getComponent (i.e. appRegistry being undefined)
+    app.appRegistry = new AppRegistry();
+    app.appRegistry.registerComponent('App.TabNavBar', TabNavBar);
+
+    app.appRegistry.registerComponent('Schema.Schema', sinon.spy());
+    app.appRegistry.registerComponent('CRUD.DocumentList', sinon.spy());
+    app.appRegistry.registerComponent('Indexes.Indexes', sinon.spy());
+    app.appRegistry.registerComponent('Explain.ExplainPlan', sinon.spy());
+    app.appRegistry.registerComponent('Validation.Validation', sinon.spy());
+
+    // Fixes Warning: React.createElement:
+    // type should not be null, undefined, boolean, or number.
+    // It should be a string (for DOM elements)
+    // or a ReactClass (for composite components).
+    app.appRegistry.registerComponent('CollectionStats.CollectionStats', sinon.spy());
+  });
+  afterEach(function() {
+    // Restore properties on the global app object,
+    // so they don't affect other tests
+    app.appRegistry = appRegistry;
+    app.instance = appInstance;
+  });
+
+  it('has 4 tabs with server version 3.0.6', function() {
+    app.instance = {build: {version: '3.0.6'}};
+    const component = shallow(<Collection showView={true} />);
+    const tabs = component.find(TabNavBar).dive().find('.tab-nav-bar-tab');
+    expect(tabs).to.have.length(4);
+  });
+  it('has 5 tabs inc a validation tab when serverVersion >= 3.2.0', function() {
+    app.instance = {build: {version: '3.2.0'}};
+    const component = shallow(<Collection showView={true} />);
+    const tabs = component.find(TabNavBar).dive().find('.tab-nav-bar-tab');
+    expect(tabs.find('#VALIDATION')).to.exist;
+    expect(tabs).to.have.length(5);
+  });
+});