From 447cf60b2c461ebb0ab1748be5fc5d51305f2a64 Mon Sep 17 00:00:00 2001 From: Pete Cook Date: Tue, 5 Jan 2016 11:58:05 +0000 Subject: [PATCH] Add basic karma testing Closes https://github.com/CookPete/react-player/issues/22 For some reason the players do not work in Firefox on Travis, and I don't know why See https://travis-ci.org/CookPete/react-player/jobs/100382039 for a travis log with SoundCloud debug logs It seems to load the track correctly and run play(), but the stateChange event never happens (and so onPlay is never fired) --- .travis.yml | 2 +- package.json | 12 +++++++++ test/karma.config.js | 26 +++++++++++++++++++ test/karma.webpack.js | 2 ++ test/karma/ReactPlayer.js | 44 +++++++++++++++++++++++++++++++++ test/{ => mocha}/ReactPlayer.js | 10 ++++---- test/{ => mocha}/canPlay.js | 8 +++--- 7 files changed, 94 insertions(+), 10 deletions(-) create mode 100644 test/karma.config.js create mode 100644 test/karma.webpack.js create mode 100644 test/karma/ReactPlayer.js rename test/{ => mocha}/ReactPlayer.js (87%) rename test/{ => mocha}/canPlay.js (92%) diff --git a/.travis.yml b/.travis.yml index 77091ab7..1d30cc79 100644 --- a/.travis.yml +++ b/.travis.yml @@ -11,4 +11,4 @@ node_js: - "iojs" script: - npm run lint - - npm run test + - npm run test:mocha diff --git a/package.json b/package.json index 099fe757..4dc25bbe 100644 --- a/package.json +++ b/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", diff --git a/test/karma.config.js b/test/karma.config.js new file mode 100644 index 00000000..9d9c5c2f --- /dev/null +++ b/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 + } + } + }) +} diff --git a/test/karma.webpack.js b/test/karma.webpack.js new file mode 100644 index 00000000..345a6302 --- /dev/null +++ b/test/karma.webpack.js @@ -0,0 +1,2 @@ +var context = require.context('./karma', true, /\.js$/) +context.keys().forEach(context) diff --git a/test/karma/ReactPlayer.js b/test/karma/ReactPlayer.js new file mode 100644 index 00000000..c890b188 --- /dev/null +++ b/test/karma/ReactPlayer.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 = done()} /> + render(player, div) + }) + + it('plays a SoundCloud track', function (done) { + const player = done()} /> + render(player, div) + }) + + it('plays a Vimeo video', function (done) { + const player = done()} /> + render(player, div) + }) + + it('plays an mp4', function (done) { + const player = done()} /> + render(player, div) + }) + + afterEach(() => { + unmountComponentAtNode(div) + document.body.removeChild(div) + }) +}) diff --git a/test/ReactPlayer.js b/test/mocha/ReactPlayer.js similarity index 87% rename from test/ReactPlayer.js rename to test/mocha/ReactPlayer.js index 3b938982..86408055 100644 --- a/test/ReactPlayer.js +++ b/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' diff --git a/test/canPlay.js b/test/mocha/canPlay.js similarity index 92% rename from test/canPlay.js rename to test/mocha/canPlay.js index 2f037c65..6c434899 100644 --- a/test/canPlay.js +++ b/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', () => {