test: Foundation

- Switch to Chrome (Phantomjs failed on Audio test)
- Downgrage to karma 0.13.15 (karma-runner/karma#1768)
- Add Foundation for testing
  + Use teaspoon for a jQuery-like DOM selector, stateless components wrapper
- Tested:
  + ControlButtons
  + AudioPlayer (need more love)

build/karma.conf.js

@@ -8,21 +8,32 @@ debug('Create configuration.')
 const karmaConfig = {
   basePath: '../', // project root in relation to bin/karma.js
   files: [
-    './node_modules/phantomjs-polyfill/bind-polyfill.js',
+    // './node_modules/phantomjs-polyfill/bind-polyfill.js',
     {
       pattern: `./${config.dir_test}/**/*.js`,
       watched: false,
       served: true,
       included: true
+    },
+    {
+      pattern: `./${config.dir_test}/stubs/sounds/*.mp3`,
+      watched: false,
+      served: true,
+      included: false,
+      nocache: false
     }
   ],
+  proxies: {
+    '/sounds/': '/base/tests/stubs/sounds/'
+  },
+  hostname: '0.0.0.0',
   singleRun: !argv.watch,
   frameworks: ['mocha', 'chai-sinon', 'chai-as-promised', 'chai'],
   preprocessors: {
     [`${config.dir_test}/**/*.js`]: ['webpack']
   },
   reporters: ['spec'],
-  browsers: ['PhantomJS'],
+  browsers: ['Chrome'],
   webpack: {
     devtool: 'inline-source-map',
     resolve: webpackConfig.resolve,

package.json

@@ -78,25 +78,24 @@
     "html-loader": "^0.4.0",
     "html-webpack-plugin": "^1.6.1",
     "isparta-loader": "^2.0.0",
-    "karma": "^0.13.16",
+    "karma": "0.13.15",
     "karma-chai": "^0.1.0",
     "karma-chai-as-promised": "^0.1.2",
     "karma-chai-sinon": "^0.1.5",
+    "karma-chrome-launcher": "^0.2.2",
     "karma-coverage": "^0.5.0",
     "karma-mocha": "^0.2.0",
-    "karma-phantomjs-launcher": "^0.2.2",
     "karma-spec-reporter": "0.0.23",
     "karma-webpack": "^1.7.0",
     "markdown-loader": "^0.1.7",
     "mocha": "^2.2.5",
     "node-sass": "^3.3.3",
     "parse": "^1.6.13",
-    "phantomjs": "^1.9.17",
-    "phantomjs-polyfill": "0.0.1",
     "postcss-loader": "^0.8.0",
     "postcss-pxtorem": "^3.1.1",
     "randomstring": "^1.1.3",
     "react-addons-test-utils": "^0.14.0",
+    "react-stateless-wrapper": "^1.0.2",
     "react-transform-catch-errors": "^1.0.1",
     "react-transform-hmr": "^1.0.0",
     "redbox-react": "^1.0.4",
@@ -107,6 +106,7 @@
     "sinon": "^1.17.2",
     "sinon-chai": "^2.8.0",
     "style-loader": "^0.13.0",
+    "teaspoon": "^5.0.1",
     "url-loader": "^0.5.6",
     "webpack": "^1.12.9",
     "webpack-dev-middleware": "^1.4.0",

src/components/AudioPlayer/Buttons/PlayButton.js

@@ -13,7 +13,7 @@ const PlayButton = (props) => {
       onClick={props.onClick}
       className='player-btn'
       title='Play/Pause'
-      disabled={!props.disable}
+      disabled={props.disabled}
     >
       <i className={iconClass}></i>
     </button>
@@ -23,7 +23,7 @@ const PlayButton = (props) => {
 PlayButton.propTypes = {
   onClick: PropTypes.func.isRequired,
   isPlaying: PropTypes.bool.isRequired,
-  disable: PropTypes.bool.isRequired
+  disabled: PropTypes.bool.isRequired
 }
 
 export default PlayButton

src/components/AudioPlayer/ControlButtons.js

@@ -10,7 +10,13 @@ class ControlButtons extends React.Component {
 
   render () {
     const props = this.props
-    const show = props.buttons
+    let show = props.buttons
+    // Show PlayButton when none given
+    if (show === undefined || show === null) {
+      show = {
+        PlayButton: true
+      }
+    }
 
     return (
       <div className='player-control-wrapper'>
@@ -22,7 +28,7 @@ class ControlButtons extends React.Component {
             <PlayButton
               isPlaying={props.isPlaying}
               onClick={props.playButtonAction}
-              disable={props.canUserToggleAudio}
+              disabled={!props.canUserToggleAudio}
             />
           }
           {show.MuteButton &&
@@ -44,7 +50,7 @@ class ControlButtons extends React.Component {
 }
 
 ControlButtons.propTypes = {
-  buttons: PropTypes.object.isRequired,
+  buttons: PropTypes.object,
   isLoading: PropTypes.bool.isRequired,
   isPlaying: PropTypes.bool.isRequired,
   mute: PropTypes.bool.isRequired,

src/components/AudioPlayer/index.js

@@ -29,7 +29,8 @@ class AudioPlayer extends React.Component {
     actionUpdateSeek: PropTypes.func.isRequired,
     onPlay: PropTypes.func.isRequired,
     onEnd: PropTypes.func.isRequired,
-    onLoad: PropTypes.func.isRequired
+    onLoad: PropTypes.func.isRequired,
+    onLoadError: PropTypes.func.isRequired
   }
 
   componentDidMount () {
@@ -52,7 +53,7 @@ class AudioPlayer extends React.Component {
       onend: this.onEnd,
       onplay: this.onPlay,
       onload: props.onLoad,
-      onloaderror: this.onLoadError
+      onloaderror: props.onLoadError()
     })
   }
 
@@ -77,10 +78,6 @@ class AudioPlayer extends React.Component {
     this.stop()
   }
 
-  onLoadError = (id, message) => {
-    throw new Error(message)
-  }
-
   tick () {
     this.stop()
     this._interval = setInterval(() => {