Merge pull request #407 from Adslot/upgrade-deps

Upgrade: All deps

.eslintrc

@@ -29,6 +29,7 @@
     "no-cond-assign": [2, "except-parens"],
     "no-mixed-operators": ["error", {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}],
     "quote-props": 0,
+    "import/no-extraneous-dependencies": 0,
     "lodash/callback-binding": 2,
     "lodash/chain-style": [2, "as-needed"],
     "lodash/collection-return": 2,

package.json

@@ -5,21 +5,22 @@
   "main": "dist/adslot-ui-main.js",
   "license": "MIT",
   "scripts": {
+    "check-commit": "node scripts/commit-msg",
     "codecov": "cat coverage/coverage-final.json | codecov",
     "dist": "webpack --bail --env=dist",
-    "jscs-fix": "jscs ./src ./test --fix",
-    "jscs-lint": "jscs ./src ./test",
-    "sass-lint": "sass-lint './src/**/*.scss' -v",
     "eslint": "eslint --ext .jsx,.js --rulesdir ./src ./src && eslint  --ext .jsx,.js --rulesdir ./test ./test",
-    "lint": "npm run eslint && npm run sass-lint && npm run jscs-lint",
+    "jscs-lint": "jscs ./src ./test",
+    "jscs-fix": "jscs ./src ./test --fix",
+    "lint": "npm run eslint && npm run sass-lint && npm run jscs-lint && npm run check-commit",
+    "posttest": "npm run lint",
     "profile": "webpack --env=dist --profile --json > stats.json",
-    "release:major": "npm version major && npm publish && git push --follow-tags",
-    "release:minor": "npm version minor && npm publish && git push --follow-tags",
-    "release:patch": "npm version patch && npm publish && git push --follow-tags",
+    "release:major": "git checkout master && git pull && npm version major && npm publish && git push --follow-tags",
+    "release:minor": "git checkout master && git pull && npm version minor && npm publish && git push --follow-tags",
+    "release:patch": "git checkout master && git pull && npm version patch && npm publish && git push --follow-tags",
+    "sass-lint": "sass-lint './src/**/*.scss' -v",
     "start": "node server.js --env=dev",
     "start:cold": "node server.js --env=dev-cold",
     "test": "karma start",
-    "posttest": "npm run lint",
     "test:watch": "karma start --autoWatch=true --singleRun=false"
   },
   "repository": {
@@ -35,79 +36,79 @@
   ],
   "author": "Adslot",
   "devDependencies": {
-    "alexandria-adslot": "^3.4.6",
-    "autoprefixer": "^6.4.0",
-    "babel-core": "^6.13.2",
+    "alexandria-adslot": "^4.0.0",
+    "autoprefixer": "^6.5.3",
+    "babel-core": "^6.18.2",
     "babel-eslint": "^6.1.2",
-    "babel-loader": "^6.2.4",
-    "babel-plugin-transform-strict-mode": "^6.11.3",
-    "babel-polyfill": "^6.13.0",
-    "babel-preset-es2015": "^6.13.2",
-    "babel-preset-react": "^6.11.1",
+    "babel-loader": "^6.2.8",
+    "babel-plugin-transform-strict-mode": "^6.18.0",
+    "babel-polyfill": "^6.16.0",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-react": "^6.16.0",
     "bootstrap-sass": "^3.3.7",
     "chai": "^3.5.0",
     "classnames": "^2.2.5",
     "codecov.io": "^0.1.6",
-    "css-loader": "^0.23.1",
-    "enzyme": "^2.4.1",
-    "eslint": "^3.2.2",
-    "eslint-config-airbnb": "^10.0.0",
+    "css-loader": "^0.26.1",
+    "enzyme": "^2.6.0",
+    "eslint": "^3.11.1",
+    "eslint-config-airbnb": "^10.0.1",
     "eslint-import-resolver-webpack": "^0.4.0",
-    "eslint-loader": "^1.5.0",
-    "eslint-plugin-import": "^1.12.0",
-    "eslint-plugin-jsx-a11y": "^2.0.1",
-    "eslint-plugin-lodash": "^1.10.1",
-    "eslint-plugin-react": "^6.0.0",
+    "eslint-loader": "^1.6.1",
+    "eslint-plugin-import": "^1.16.0",
+    "eslint-plugin-jsx-a11y": "^2.2.3",
+    "eslint-plugin-lodash": "^1.10.3",
+    "eslint-plugin-react": "=6.5.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.9.0",
-    "generator-react-webpack": "^3.3.2",
+    "generator-react-webpack": "^3.3.4",
     "isparta-loader": "^2.0.0",
     "jscs": "^3.0.7",
-    "karma": "^1.1.2",
+    "karma": "^1.3.0",
     "karma-chai": "^0.1.0",
     "karma-coverage": "^1.1.1",
-    "karma-mocha": "^1.1.1",
-    "karma-mocha-reporter": "^2.1.0",
-    "karma-phantomjs-launcher": "^1.0.1",
+    "karma-mocha": "^1.3.0",
+    "karma-mocha-reporter": "^2.2.1",
+    "karma-phantomjs-launcher": "^1.0.2",
     "karma-phantomjs-shim": "^1.4.0",
     "karma-webpack": "^1.8.0",
     "minimist": "^1.2.0",
-    "mocha": "^3.0.2",
-    "moment": "^2.14.1",
-    "node-sass": "^3.8.0",
+    "mocha": "^3.2.0",
+    "moment": "^2.17.1",
+    "node-sass": "^3.13.0",
     "null-loader": "^0.1.1",
     "object-assign": "^4.1.0",
     "open": "^0.0.5",
-    "phantomjs-prebuilt": "^2.1.9",
+    "phantomjs-prebuilt": "^2.1.13",
     "postcss-loader": "^0.9.1",
-    "react-addons-pure-render-mixin": "=15.1.0",
-    "react-addons-test-utils": "=15.1.0",
-    "react-bootstrap": "^0.29.5",
+    "react-addons-test-utils": "=15.3.2",
+    "react-addons-shallow-compare": "=15.3.2",
+    "react-bootstrap": "^0.30.7",
     "react-datepicker": "^0.29.0",
-    "react-hot-loader": "^1.3.0",
-    "react-icheck": "=0.3.4",
-    "react-redux": "^4.4.5",
-    "react-select": "^1.0.0-beta14",
-    "react-toggle": "^2.1.1",
-    "redux": "^3.5.2",
-    "sass-lint": "^1.8.2",
-    "sass-loader": "^4.0.0",
-    "seamless-immutable": "^6.1.1",
+    "react-hot-loader": "^1.3.1",
+    "react-icheck": "^0.3.6",
+    "react-redux": "^4.4.6",
+    "react-select": "^1.0.0-rc.2",
+    "react-toggle": "^2.2.0",
+    "redux": "^3.6.0",
+    "sass-lint": "^1.10.2",
+    "sass-loader": "^4.0.2",
+    "seamless-immutable": "^6.3.0",
     "semver": "^5.3.0",
-    "shelljs": "^0.7.3",
-    "sinon": "^2.0.0-pre",
+    "shelljs": "^0.7.5",
+    "sinon": "^2.0.0-pre.4",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
-    "webpack": "^1.13.1",
-    "webpack-dev-server": "^1.14.1",
-    "webpack-sources": "^0.1.2"
+    "webpack": "^1.13.3",
+    "webpack-dev-server": "^1.16.2",
+    "webpack-sources": "^0.1.3"
   },
   "dependencies": {
-    "lodash": "^3.10.1",
-    "react": "=15.1.0",
-    "react-dom": "=15.1.0"
+    "lodash": "=3.10.1",
+    "react": "=15.3.2",
+    "react-dom": "=15.3.2"
   },
   "engines": {
-    "node": "^4.4"
+    "node": "^4.6"
   }
 }

scripts/git-hooks/pre-commit

@@ -8,12 +8,17 @@ then
   isVersionChange=$(git diff --cached | grep "+  \"version\"")
   if [[ -n "${isVersionChange[@]}" ]]
   then
+    echo -e "---------------------\nPreparing for release\n---------------------"
+    echo "👾  Installing node modules."
+    npm install
+    echo "📑  Compiling distribution files for release."
+    npm run -s dist && git add dist/*
     exit 0
   fi
 fi
 
-echo -e "---------------------------\nRunning git pre-commit hook\n---------------------------"
 
+echo -e "---------------------------\nRunning git pre-commit hook\n---------------------------"
 
 # Protect master from accidental commits.
 echo "🔍  Checking branch isn't master."
@@ -25,54 +30,50 @@ fi
 
 
 # Run linting and commit check.
-STAGED_SRC_FILES=`git diff --staged --name-only HEAD ./src | grep .*\\.js | grep -v json`; # JS & JSX Files included
-STAGED_TEST_FILES=`git diff --staged --name-only HEAD ./test | grep .*\\.js | grep -v json`; # JS & JSX Files included
-STAGED_SASS_FILES=`git diff --staged --name-only HEAD ./src/styles | grep .*\\.scss`;
-SRC_EXIT_CODE=1;
-TEST_EXIT_CODE=1;
-SASS_EXIT_CODE=1;
-JSCS_EXIT_CODE=1;
-COMMIT_MSG_EXIT_CODE=1;
+STAGED_SRC_FILES=`git diff --staged --name-only HEAD ./src | grep .*\\.js | grep -v json` # JS & JSX Files included
+STAGED_TEST_FILES=`git diff --staged --name-only HEAD ./test | grep .*\\.js | grep -v json` # JS & JSX Files included
+STAGED_SASS_FILES=`git diff --staged --name-only HEAD ./src/styles | grep .*\\.scss`
+SRC_EXIT_CODE=1
+TEST_EXIT_CODE=1
+SASS_EXIT_CODE=1
+JSCS_EXIT_CODE=1
+COMMIT_MSG_EXIT_CODE=1
 
-echo "🔍  Running linting on staged files…";
-echo "    - ESLint Source";
+echo "🔍  Running linting on staged files…"
+echo "    - ESLint Source"
 if [ "$STAGED_SRC_FILES" ]; then
-  eslint --rulesdir ./src $STAGED_SRC_FILES && SRC_EXIT_CODE=0;
+  eslint --rulesdir ./src $STAGED_SRC_FILES && SRC_EXIT_CODE=0
 else
-  SRC_EXIT_CODE=0;
+  SRC_EXIT_CODE=0
 fi
 
-echo "    - ESLint Tests";
+echo "    - ESLint Tests"
 if [ "$STAGED_TEST_FILES" ]; then
-  echo "linting test";
-  eslint --rulesdir ./test $STAGED_TEST_FILES && TEST_EXIT_CODE=0;
+  echo "linting test"
+  eslint --rulesdir ./test $STAGED_TEST_FILES && TEST_EXIT_CODE=0
 else
-  TEST_EXIT_CODE=0;
+  TEST_EXIT_CODE=0
 fi
 
 echo "    - SASSLint";
 if [ "$STAGED_SASS_FILES" ]; then
-  sass-lint $STAGED_SASS_FILES -v && SASS_EXIT_CODE=0;
+  sass-lint $STAGED_SASS_FILES -v && SASS_EXIT_CODE=0
 else
-  SASS_EXIT_CODE=0;
+  SASS_EXIT_CODE=0
 fi
 
-echo "    - JSCSLint";
+echo "    - JSCSLint"
 if [ "$STAGED_SRC_FILES" ]; then
-  jscs $STAGED_SRC_FILES $STAGED_TEST_FILES && JSCS_EXIT_CODE=0;
+  jscs $STAGED_SRC_FILES $STAGED_TEST_FILES && JSCS_EXIT_CODE=0
 else
-  JSCS_EXIT_CODE=0;
+  JSCS_EXIT_CODE=0
 fi
 
 if [ $SRC_EXIT_CODE -eq 1 ] || [ $TEST_EXIT_CODE -eq 1 ] || [ $SASS_EXIT_CODE -eq 1 ] || [ $JSCS_EXIT_CODE -eq 1 ]; then
-  echo "💔  Linting failed.";
-  exit 1;
+  echo "💔  Linting failed."
+  exit 1
 fi
 
-echo "🔍  Checking commit message.";
-node scripts/commit-msg && COMMIT_MSG_EXIT_CODE=0;
+echo "🔍  Checking commit message."
+node scripts/commit-msg && COMMIT_MSG_EXIT_CODE=0
 if [ $COMMIT_MSG_EXIT_CODE -eq 1 ]; then exit 1; fi
-
-# Compile the distribution from source.
-echo "🔍  Compiling distribution files."
-npm run -s dist && git add dist/*

src/.eslintrc

@@ -1,6 +1,5 @@
 {
   "rules": {
     "max-statements": [2, 6],
-    "import/no-extraneous-dependencies": 1, // Warning as this should address this at some point
   }
 }

src/components/Main.jsx

@@ -330,8 +330,8 @@ class AppComponent extends React.Component {
 
         <h1>Tabs</h1>
         <div className="btn-panel">
-          <Tabs defaultActiveKey="Audience" animation={false}>
-            <Tab eventKey="Targeting" title="Targeting" active>Targeting content</Tab>
+          <Tabs defaultActiveKey="Audience" animation={false} id="audience-tab">
+            <Tab eventKey="Targeting" title="Targeting">Targeting content</Tab>
             <Tab
               eventKey="Audience"
               title={<span className="flexible-wrapper-inline"><SvgSymbol /><FlexibleSpacer />Audience</span>}

src/components/adslotUi/SplitPaneComponent.jsx

@@ -2,14 +2,15 @@
 
 import React, { PropTypes } from 'react';
 import classNames from 'classnames';
+import expandDts from '../../helpers/expandDtsHelper';
 
 require('styles/adslotUi/SplitPane.scss');
 
 const SplitPaneComponent = ({ children, dts, additionalClassNames }) => {
   const splitPaneClass = classNames('splitpane-component', ...additionalClassNames);
 
   return (
-    <div className={splitPaneClass} if dts data-test-selector={dts}>
+    <div className={splitPaneClass} {...expandDts(dts)}>
       {children}
     </div>
   );

src/helpers/expandDtsHelper.js

@@ -0,0 +1,5 @@
+// A DTS is an attribute which attaches a selector to a component so E2Es can locate and navigate through the DOM.
+// expandDts converts a string to an object for ES6 expansion as <img {...expandDts(dtsString)} />
+const expandDts = (dtsString) => (dtsString ? { 'data-test-selector': dtsString } : {});
+
+export default expandDts;

src/helpers/propTypes/TreePickerPropTypes.js

@@ -1,29 +1,30 @@
 import { PropTypes } from 'react';
 import { SvgSymbol } from 'alexandria-adslot';
+import idPropType from '../../helpers/propTypes/idPropType';
 
 export default {
   node: PropTypes.shape({
-    id: PropTypes.string.isRequired,
+    id: idPropType.isRequired,
     isExpandable: PropTypes.bool,
     label: PropTypes.string.isRequired,
     path: PropTypes.arrayOf(
       PropTypes.shape({
-        id: PropTypes.string.isRequired,
+        id: idPropType.isRequired,
         label: PropTypes.string.isRequired,
       }).isRequired
     ).isRequired,
     type: PropTypes.string.isRequired,
     value: PropTypes.number,
   }),
   breadCrumbNode: PropTypes.shape({
-    id: PropTypes.string.isRequired,
+    id: idPropType.isRequired,
     label: PropTypes.string.isRequired,
   }),
   rootType: PropTypes.shape({
     emptySvgSymbol: PropTypes.shape(SvgSymbol.propTypes),
     svgSymbol: PropTypes.shape(SvgSymbol.propTypes),
     hidden: PropTypes.bool,
-    id: PropTypes.string.isRequired,
+    id: idPropType.isRequired,
     isRequired: PropTypes.bool.isRequired,
     label: PropTypes.string.isRequired,
   }),

src/helpers/propTypes/idPropType.js

@@ -0,0 +1,6 @@
+import { PropTypes } from 'react';
+
+export default PropTypes.oneOfType([
+  PropTypes.string,
+  PropTypes.number,
+]);

test/components/adslotUi/TreePickerNodeComponentTest.jsx

@@ -7,7 +7,7 @@ import { GridCell, GridRow } from 'alexandria-adslot';
 import { shallow, mount } from 'enzyme';
 
 describe('TreePickerNodeComponent', () => {
-  const { cbrNode, cbrNodeAlreadySelected, actNode, itemType, nodeRenderer } = TreePickerMocks;
+  const { cbrNode, cbrNodeAlreadySelected, actNode, maleNode, itemType, nodeRenderer } = TreePickerMocks;
 
   it('should render a node with defaults', () => {
     const component = shallow(<TreePickerNodeComponent itemType={itemType} node={cbrNode} />);
@@ -294,4 +294,14 @@ describe('TreePickerNodeComponent', () => {
       buttonElement.simulate('click');
     }).to.throw('AdslotUi TreePickerNode needs a removeNode handler');
   });
+
+  it('should accept both strings and numbers as node ids', () => {
+    const stringIdNode = shallow(<TreePickerNodeComponent itemType={itemType} node={cbrNode} selected />);
+    const numberIdNode = shallow(<TreePickerNodeComponent itemType={itemType} node={maleNode} />);
+
+    expect(cbrNode.id).to.equal('au-act-cbr');
+    expect(maleNode.id).to.equal(4);
+    expect(stringIdNode.find(GridRow).prop('dts')).to.equal('example-item-type-au-act-cbr');
+    expect(numberIdNode.find(GridRow).prop('dts')).to.equal('example-item-type-4');
+  });
 });

test/mocks/TreePickerMocks.js

@@ -20,8 +20,8 @@ const rootTypes = [
   { label: 'Hidden Segments', id: 'd', svgSymbol, isRequired: false, hidden: true },
 ];
 
-const auPath = { id: 'au', label: 'AU' };
-const actPath = { id: 'au-act', label: 'ACT' };
+const auPath = { id: 'au', label: 'AU', path: [] };
+const actPath = { id: 'au-act', label: 'ACT', path: [auPath] };
 
 const actNode = {
   id: 'au-act',
@@ -52,12 +52,13 @@ const cbrNodeAlreadySelected = {
   label: 'Canberra',
   type: 'City',
   ancestors: [actPath, auPath],
+  path: [],
   value: 2000,
   rootTypeId: 'a',
   isExpandable: true,
 };
 
-const maleNode = { id: '4', label: 'Males', type: '', path: [], value: 500, rootTypeId: 'b' };
+const maleNode = { id: 4, label: 'Males', type: '', path: [], value: 500, rootTypeId: 'b' };
 
 const valueFormatter = (value) => value;