Add basic karma testing

Closes #22

.travis.yml

@@ -1,4 +1,7 @@
 language: node_js
+before_install:
+  - "export DISPLAY=:99.0"
+  - "sh -e /etc/init.d/xvfb start"
 install:
   - gem install scss-lint
   - npm install -g npm@2

package.json

@@ -12,7 +12,9 @@
     "lint:js": "standard --verbose | snazzy",
     "lint:css": "scss-lint src",
     "lint": "npm run lint:js; npm run lint:css",
-    "test": "NODE_ENV=production mocha --require ignore-styles test/mocha --compilers js:babel-core/register",
+    "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",
@@ -58,6 +60,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,26 @@
+var webpackConfig = require('../webpack.config.dev')
+webpackConfig.devtool = 'inline-source-map'
+
+module.exports = function (config) {
+  config.set({
+    browsers: process.env.CONTINUOUS_INTEGRATION ? [ 'Firefox' ] : [ '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
+      }
+    }
+  })
+}

test/karma.webpack.js

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

test/karma/App.js

@@ -0,0 +1,44 @@
+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_MP4_URL = 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
+
+describe('ReactPlayer', () => {
+  let div
+
+  beforeEach(() => {
+    div = document.createElement('div')
+    document.body.appendChild(div)
+  })
+
+  it('plays a YouTube video', function (done) {
+    const player = <ReactPlayer url={TEST_YOUTUBE_URL} playing onPlay={() => done()} />
+    render(player, div)
+  })
+
+  it('plays a SoundCloud track', function (done) {
+    const player = <ReactPlayer url={TEST_SOUNDCLOUD_URL} playing onPlay={() => done()} />
+    render(player, div)
+  })
+
+  it('plays a Vimeo video', function (done) {
+    const player = <ReactPlayer url={TEST_VIMEO_URL} playing onPlay={() => done()} />
+    render(player, div)
+  })
+
+  it('plays an mp4', function (done) {
+    const player = <ReactPlayer url={TEST_MP4_URL} playing onPlay={() => done()} />
+    render(player, div)
+  })
+
+  afterEach(() => {
+    unmountComponentAtNode(div)
+    document.body.removeChild(div)
+  })
+})

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', () => {