Add code and test assurance testing

package.json

@@ -18,11 +18,13 @@
     "make:dist": "mkdirp dist && browserify src/PlotlyEditor.js -o ./dist/PlotlyEditor.js -t [ babelify --presets [ es2015 react ] ] -t browserify-global-shim --standalone createPlotlyComponent && uglifyjs ./dist/PlotlyEditor.js --compress --mangle --output ./dist/PlotlyEditor.min.js --source-map filename=dist/PlotlyEditor.min.js.map && make:dist:css",
     "make:dist:css": "mkdirp dist && node-sass --output-style compressed src/styles/main.scss > dist/react-plotly.js-editor.css",
     "prepublishOnly": "npm run make:lib",
-    "lint": "prettier  --write \"{src}/**/*.{js,jsx}\"",
-    "test": "jest",
+    "lint": "prettier  --write \"src/**/*.js\"",
+    "test:lint": "eslint src && echo -e '\\033[0;32m'PASS'\\033[0m'",
+    "test:pretty": "prettier -l \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
+    "test:js": "jest",
+    "test": "npm run test:lint && npm run test:pretty && npm run test:js",
     "watch": "nodemon --exec \"npm run make:lib\" -w src",
-    "watch-test": "jest --watch",
-    "eslint:check": "eslint --print-config .eslintrc | eslint-config-prettier-check"
+    "watch-test": "jest --watch"
   },
   "keywords": [
     "graphing",
@@ -48,6 +50,7 @@
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-react": "^7.4.0",
     "gl": "^4.0.4",
+    "glob": "^7.1.2",
     "jest": "^21.2.1",
     "mkdirp": "^0.5.1",
     "node-sass": "^4.7.1",

src/DefaultEditor.js

@@ -258,21 +258,21 @@ class DefaultEditor extends Component {
             </Section>
           </AxesFold>
 
-          {/* <AxesFold name={_('Lines')}>
-              <AxesSelector />
-              </AxesFold>
-              <AxesFold name={_('Tick Labels')}>
-              <AxesSelector />
-              </AxesFold>
-              <AxesFold name={_('Tick Markers')}>
-              <AxesSelector />
-              </AxesFold>
-              <AxesFold name={_('Zoom Interactivity')}>
-              <AxesSelector />
-              </AxesFold>
-              <AxesFold name={_('Layout')}>
-              <AxesSelector />
-              </AxesFold> */}
+          <AxesFold name={_('Lines')}>
+            <AxesSelector />
+          </AxesFold>
+          <AxesFold name={_('Tick Labels')}>
+            <AxesSelector />
+          </AxesFold>
+          <AxesFold name={_('Tick Markers')}>
+            <AxesSelector />
+          </AxesFold>
+          <AxesFold name={_('Zoom Interactivity')}>
+            <AxesSelector />
+          </AxesFold>
+          <AxesFold name={_('Layout')}>
+            <AxesSelector />
+          </AxesFold>
         </LayoutPanel>
 
         <LayoutPanel group="Style" name={_('Legend')}>
@@ -382,6 +382,10 @@ class DefaultEditor extends Component {
   }
 }
 
+DefaultEditor.propTypes = {
+  localize: PropTypes.func,
+};
+
 DefaultEditor.contextTypes = {
   dataSourceNames: PropTypes.array.isRequired,
 };

src/PlotlyEditor.js

@@ -38,7 +38,9 @@ class PlotlyEditor extends Component {
 
   updateProp(event) {
     const {graphDiv} = this.props;
-    this.props.onUpdate && this.props.onUpdate({graphDiv, ...event});
+    if (this.props.onUpdate) {
+      this.props.onUpdate({graphDiv, ...event});
+    }
   }
 
   render() {
@@ -52,11 +54,12 @@ class PlotlyEditor extends Component {
 }
 
 PlotlyEditor.propTypes = {
-  onUpdate: PropTypes.func,
-  plotly: PropTypes.object,
+  children: PropTypes.node,
+  dataSources: PropTypes.object,
   graphDiv: PropTypes.object,
   locale: PropTypes.string,
-  dataSources: PropTypes.object,
+  onUpdate: PropTypes.func,
+  plotly: PropTypes.object,
 };
 
 PlotlyEditor.defaultProps = {

src/__tests__/syntax-test.js

@@ -0,0 +1,20 @@
+// check for for focus and exclude jasmine blocks
+import fs from 'fs';
+import glob from 'glob';
+
+const BLACK_LIST = ['fdescribe', 'fit', 'xdescribe', 'xit'];
+const REGEXS = BLACK_LIST.map(token => new RegExp(`^\\s*${token}\\(.*`));
+
+describe('Syntax and test validation', () => {
+  describe(`ensures ${BLACK_LIST} is not present in tests`, () => {
+    const files = glob.sync('**/__tests__/*.js');
+    files.forEach(file =>
+      it(`checks ${file} for test checks`, () => {
+        const code = fs.readFileSync(file, {encoding: 'utf-8'});
+        code.split('\n').forEach(line => {
+          expect(REGEXS.some(re => re.test(line))).toBe(false);
+        });
+      })
+    );
+  });
+});

src/components/PanelMenuWrapper.js

@@ -1,5 +1,6 @@
-import SidebarGroup from './sidebar/SidebarGroup';
+import PropTypes from 'prop-types';
 import React, {cloneElement, Component} from 'react';
+import SidebarGroup from './sidebar/SidebarGroup';
 import {bem} from '../lib';
 
 class PanelsWithSidebar extends Component {
@@ -87,4 +88,8 @@ class PanelsWithSidebar extends Component {
   }
 }
 
+PanelsWithSidebar.propTypes = {
+  children: PropTypes.node,
+};
+
 export default PanelsWithSidebar;

src/components/containers/Fold.js

@@ -1,11 +1,11 @@
-import React, {Component} from 'react';
 import PropTypes from 'prop-types';
+import React, {Component} from 'react';
 import {bem} from '../../lib';
 
 export default class Fold extends Component {
   renderHeader() {
     const {deleteContainer} = this.context;
-    const {canDelete, name} = this.props;
+    const {canDelete} = this.props;
     const doDelete = canDelete && typeof deleteContainer === 'function';
     return (
       <div className={bem('fold', 'top', ['active'])}>
@@ -36,6 +36,7 @@ export default class Fold extends Component {
 
 Fold.propTypes = {
   canDelete: PropTypes.bool,
+  children: PropTypes.node,
   hideHeader: PropTypes.bool,
   name: PropTypes.string,
 };

src/components/containers/Panel.js

@@ -6,13 +6,13 @@ class Panel extends Component {
   render() {
     if (this.props.visible) {
       return <div className={bem('panel')}>{this.props.children}</div>;
-    } else {
-      return <div />;
     }
+    return <div />;
   }
 }
 
 Panel.propTypes = {
+  children: PropTypes.node,
   visible: PropTypes.bool,
 };
 

src/components/containers/__tests__/Layout-test.js

@@ -8,9 +8,7 @@ import {connectLayoutToPlot} from '../../../lib';
 import {mount} from 'enzyme';
 
 const Layouts = [Panel, Fold, Section].map(connectLayoutToPlot);
-const Editor = props => (
-  <TestEditor {...{onUpdate: jest.fn(), ...props}} />
-);
+const Editor = props => <TestEditor {...{onUpdate: jest.fn(), ...props}} />;
 
 Layouts.forEach(Layout => {
   describe(`<${Layout.displayName}>`, () => {
@@ -43,10 +41,11 @@ Layouts.forEach(Layout => {
         .find('[attr="width"]')
         .find(NumericInput);
 
-      wrapper.prop('onChange')(200);
+      const widthUpdate = 200;
+      wrapper.prop('onChange')(widthUpdate);
       const event = onUpdate.mock.calls[0][0];
       expect(event.type).toBe(EDITOR_ACTIONS.UPDATE_LAYOUT);
-      expect(event.payload).toEqual({update: {width: 200}});
+      expect(event.payload).toEqual({update: {width: widthUpdate}});
     });
   });
 });

src/components/containers/__tests__/Section-test.js

@@ -33,13 +33,15 @@ describe('Section', () => {
     expect(
       wrapper
         .find(Flaglist)
-        .childAt(0) // unwrap higher-level component
+        // unwrap higher-level component
+        .childAt(0)
         .exists()
     ).toBe(true);
     expect(
       wrapper
         .find(Numeric)
-        .childAt(0) // unwrap higher-level component
+        // unwrap higher-level component
+        .childAt(0)
         .exists()
     ).toBe(false);
   });

src/components/fields/Color.js

@@ -2,7 +2,7 @@ import ColorPicker from '../widgets/ColorPicker';
 import Field from './Field';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import {bem, connectToContainer} from '../../lib';
+import {connectToContainer} from '../../lib';
 
 class Color extends Component {
   render() {

src/components/fields/DataSelector.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import Field from './Field';
 import nestedProperty from 'plotly.js/src/lib/nested_property';
-import {connectToContainer, unpackPlotProps} from '../../lib';
+import {connectToContainer} from '../../lib';
 
 function attributeIsData(meta = {}) {
   return meta.valType === 'data_array' || meta.arrayOk;

src/components/fields/Flaglist.js

@@ -2,7 +2,7 @@ import Field from './Field';
 import FlaglistCheckboxGroup from '../widgets/FlaglistCheckboxGroup';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
-import {bem, connectToContainer} from '../../lib';
+import {connectToContainer} from '../../lib';
 
 class Flaglist extends Component {
   render() {

src/components/fields/derived.js

@@ -9,8 +9,8 @@ import {
 
 export const CanvasSize = connectToContainer(UnconnectedNumeric, {
   modifyPlotProps: (props, context, plotProps) => {
-      const {fullContainer} = plotProps;
-      if (plotProps.isVisible && fullContainer && fullContainer.autosize) {
+    const {fullContainer} = plotProps;
+    if (plotProps.isVisible && fullContainer && fullContainer.autosize) {
       plotProps.isVisible = false;
     }
   },

src/components/sidebar/SidebarGroup.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {bem} from '../../lib';
 
@@ -58,6 +59,10 @@ export default class SidebarGroup extends Component {
   }
 }
 
-SidebarGroup.defaultProps = {
-  expanded: false,
+SidebarGroup.propTypes = {
+  group: PropTypes.string,
+  onChangeGroup: PropTypes.func,
+  panels: PropTypes.array,
+  selectedGroup: PropTypes.string,
+  selectedPanel: PropTypes.string,
 };

src/components/sidebar/SidebarItem.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {bem} from '../../lib';
 
@@ -6,12 +7,16 @@ export default class SidebarItem extends Component {
     return (
       <div
         onClick={this.props.onClick}
-        className={bem('sidebar-item', [
-          this.props.active ? 'is-active' : '',
-        ])}
+        className={bem('sidebar-item', [this.props.active ? 'is-active' : ''])}
       >
         {this.props.label}
       </div>
     );
   }
 }
+
+SidebarItem.propTypes = {
+  active: PropTypes.bool,
+  label: PropTypes.string,
+  onClick: PropTypes.func,
+};

src/components/widgets/CheckboxGroup.js

@@ -1,16 +1,16 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import classnames from "classnames";
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
 class CheckboxGroup extends Component {
   constructor(props) {
     super(props);
-    this.state = { options: this.props.options };
+    this.state = {options: this.props.options};
     this.handleChange = this.handleChange.bind(this);
   }
 
   componentWillReceiveProps(nextProps) {
-    this.setState({ options: nextProps.options });
+    this.setState({options: nextProps.options});
   }
 
   handleChange(i) {
@@ -23,13 +23,13 @@ class CheckboxGroup extends Component {
 
   renderOptions() {
     return this.state.options.map((option, i) => {
-      const checkClass = classnames(["checkbox__check", "icon"], {
-        "icon-check-mark": option.checked,
+      const checkClass = classnames(['checkbox__check', 'icon'], {
+        'icon-check-mark': option.checked,
       });
 
-      const itemClass = classnames("checkbox__item", {
-        "checkbox__item--vertical": this.props.orientation === "vertical",
-        "checkbox__item--horizontal": this.props.orientation === "horizontal",
+      const itemClass = classnames('checkbox__item', {
+        'checkbox__item--vertical': this.props.orientation === 'vertical',
+        'checkbox__item--horizontal': this.props.orientation === 'horizontal',
       });
 
       return (
@@ -44,8 +44,8 @@ class CheckboxGroup extends Component {
   }
 
   render() {
-    const boxClass = classnames("checkbox__group", this.props.className, {
-      checkbox__group_horizontal: this.props.orientation === "horizontal",
+    const boxClass = classnames('checkbox__group', this.props.className, {
+      checkbox__group_horizontal: this.props.orientation === 'horizontal',
     });
 
     return <div className={boxClass}>{this.renderOptions()}</div>;
@@ -66,7 +66,7 @@ CheckboxGroup.propTypes = {
 };
 
 CheckboxGroup.defaultProps = {
-  className: "",
+  className: '',
 };
 
 export default CheckboxGroup;

src/components/widgets/ColorPicker.js

@@ -12,6 +12,7 @@ import {
 import {CustomPicker as customPicker} from 'react-color';
 import {localize} from '../../lib';
 
+/* eslint-disable no-inline-comments */
 const defaultColors = [
   '#444444',
   '#ffffff',
@@ -26,6 +27,7 @@ const defaultColors = [
   '#bcbd22', // curry yellow-green
   '#17becf', // blue-teal
 ];
+/* eslint-enable no-inline-comments */
 
 // Utility functions for converting ColorPicker color objects or raw strings
 // into TinyColor objects.

src/components/widgets/Dropdown.js

@@ -1,6 +1,6 @@
+import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import Select from 'react-select';
-import PropTypes from 'prop-types';
 
 class Dropdown extends Component {
   constructor(props) {
@@ -15,9 +15,8 @@ class Dropdown extends Component {
     if (!selection) {
       return onChange(null);
     } else if (multi) {
-      console.log(valueKey, selection);
       throw new Error('TODO: de-ramda');
-      //return onChange(map(prop(valueKey), selection));
+      // return onChange(map(prop(valueKey), selection));
     }
 
     return onChange(selection[valueKey]);