Add basic karma testing

Closes cookpete/react-player#22

.travis.yml

@@ -1,4 +1,8 @@
 language: node_js
+before_install:
+  - export CHROME_BIN=chromium-browser
+  - export DISPLAY=:99.0
+  - sh -e /etc/init.d/xvfb start
 install:
   - npm install -g npm@2
   - npm install

package.json

@@ -10,6 +10,9 @@
     "build:compile": "NODE_ENV=production babel src -d lib --ignore App.js,index.js",
     "start": "node server.js",
     "lint": "standard --verbose | snazzy",
+    "test:mocha": "NODE_ENV=production mocha --require ignore-styles test/mocha --compilers js:babel-core/register",
+    "test:karma": "karma start test/karma.config.js",
+    "test": "npm run test:mocha && npm run test:karma",
     "preversion": "npm run lint && npm run test",
     "version": "auto-changelog --package --template compact; git add CHANGELOG.md",
     "prepublish": "npm run build:compile",
@@ -55,6 +58,15 @@
     "extract-text-webpack-plugin": "^0.9.1",
     "ignore-styles": "^1.1.0",
     "imports-loader": "^0.6.4",
+    "karma": "^0.13.16",
+    "karma-chai": "^0.1.0",
+    "karma-chrome-launcher": "^0.2.2",
+    "karma-cli": "^0.1.2",
+    "karma-firefox-launcher": "^0.1.7",
+    "karma-mocha": "^0.2.1",
+    "karma-mocha-reporter": "^1.1.5",
+    "karma-sourcemap-loader": "^0.3.6",
+    "karma-webpack": "^1.7.0",
     "mocha": "^2.3.4",
     "node-sass": "^3.4.2",
     "react": "^0.14.0",

test/karma.config.js

@@ -0,0 +1,32 @@
+var webpackConfig = require('../webpack.config.dev')
+webpackConfig.devtool = 'inline-source-map'
+
+module.exports = function (config) {
+  config.set({
+    browsers: process.env.CONTINUOUS_INTEGRATION ? [ 'ChromeTravis' ] : [ 'Chrome', 'Firefox' ],
+    singleRun: true,
+    frameworks: [ 'mocha', 'chai' ],
+    files: [
+      'karma.webpack.js'
+    ],
+    preprocessors: {
+      'karma.webpack.js': [ 'webpack', 'sourcemap' ]
+    },
+    reporters: [ 'mocha' ],
+    webpack: webpackConfig,
+    webpackServer: {
+      noInfo: true
+    },
+    client: {
+      mocha: {
+        timeout: 10000
+      }
+    },
+    customLaunchers: {
+      ChromeTravis: {
+        base: 'Chrome',
+        flags: ['--no-sandbox']
+      }
+    }
+  })
+}

test/karma.webpack.js

@@ -0,0 +1,2 @@
+var context = require.context('./karma', true, /\.js$/)
+context.keys().forEach(context)

test/karma/ReactPlayer.js

@@ -0,0 +1,55 @@
+import React from 'react'
+import { render, unmountComponentAtNode } from 'react-dom'
+
+import ReactPlayer from '../../src/ReactPlayer'
+
+const { describe, it, beforeEach, afterEach } = window
+const TEST_YOUTUBE_URL = 'https://www.youtube.com/watch?v=GlCmAC4MHek'
+const TEST_SOUNDCLOUD_URL = 'https://soundcloud.com/miami-nights-1984/accelerated'
+const TEST_VIMEO_URL = 'https://vimeo.com/90509568'
+const TEST_FILE_URL = 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv'
+
+describe('ReactPlayer', () => {
+  let div
+
+  beforeEach(() => {
+    div = document.createElement('div')
+    document.body.appendChild(div)
+  })
+
+  afterEach(() => {
+    unmountComponentAtNode(div)
+    document.body.removeChild(div)
+  })
+
+  const testPlay = (url, onPlay) => {
+    render(<ReactPlayer url={url} playing onPlay={onPlay} />, div)
+  }
+
+  const testPause = (url, done) => {
+    const onPlay = () => {
+      setTimeout(() => {
+        render(<ReactPlayer url={url} playing={false} onPause={done} />, div)
+      }, 500)
+    }
+    testPlay(url, onPlay)
+  }
+
+  it('plays a YouTube video', done => testPlay(TEST_YOUTUBE_URL, done))
+  it('plays a SoundCloud track', done => testPlay(TEST_SOUNDCLOUD_URL, done))
+  it('plays a Vimeo video', done => testPlay(TEST_VIMEO_URL, done))
+  it('plays a file', done => testPlay(TEST_FILE_URL, done))
+
+  it('pauses a YouTube video', done => testPause(TEST_YOUTUBE_URL, done))
+  it('pauses a SoundCloud track', done => testPause(TEST_SOUNDCLOUD_URL, done))
+  it('pauses a Vimeo video', done => testPause(TEST_VIMEO_URL, done))
+  it('pauses a file', done => testPause(TEST_FILE_URL, done))
+
+  it('switches between media', function (done) {
+    const renderPlayer = (url, onPlay) => render(<ReactPlayer url={url} playing onPlay={onPlay} />, div)
+    const renderFilePlayer = () => renderPlayer(TEST_FILE_URL, done)
+    const renderVimeoPlayer = () => renderPlayer(TEST_VIMEO_URL, renderFilePlayer)
+    const renderSoundCloudPlayer = () => renderPlayer(TEST_SOUNDCLOUD_URL, renderVimeoPlayer)
+    renderPlayer(TEST_YOUTUBE_URL, renderSoundCloudPlayer)
+  })
+})

test/ReactPlayer.js → test/mocha/ReactPlayer.js

@@ -3,11 +3,11 @@ import { describe, it, beforeEach } from 'mocha'
 import { expect } from 'chai'
 import { createRenderer } from 'react-addons-test-utils'
 
-import ReactPlayer from '../src/ReactPlayer'
-import YouTube from '../src/players/YouTube'
-import Vimeo from '../src/players/Vimeo'
-import SoundCloud from '../src/players/SoundCloud'
-import FilePlayer from '../src/players/FilePlayer'
+import ReactPlayer from '../../src/ReactPlayer'
+import YouTube from '../../src/players/YouTube'
+import Vimeo from '../../src/players/Vimeo'
+import SoundCloud from '../../src/players/SoundCloud'
+import FilePlayer from '../../src/players/FilePlayer'
 
 const YOUTUBE_URL = 'https://www.youtube.com/watch?v=oUFJJNQGwhk'
 const SOUNDCLOUD_URL = 'https://soundcloud.com/miami-nights-1984/accelerated'

test/canPlay.js → test/mocha/canPlay.js

@@ -1,10 +1,10 @@
 import { describe, it } from 'mocha'
 import { expect } from 'chai'
 
-import SoundCloud from '../src/players/SoundCloud'
-import YouTube from '../src/players/YouTube'
-import Vimeo from '../src/players/Vimeo'
-import FilePlayer from '../src/players/FilePlayer'
+import SoundCloud from '../../src/players/SoundCloud'
+import YouTube from '../../src/players/YouTube'
+import Vimeo from '../../src/players/Vimeo'
+import FilePlayer from '../../src/players/FilePlayer'
 
 describe('YouTube', () => {
   it('knows what it can play', () => {

webpack.config.prod.js

@@ -28,10 +28,7 @@ module.exports = {
     loaders: [{
       test: /\.js$/,
       loader: 'babel',
-      include: [
-        path.join(__dirname, 'src'),
-        path.join(__dirname, 'test', 'karma')
-      ]
+      include: path.join(__dirname, 'src')
     }, {
       test: /\.scss$/,
       loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap'),