From 8b1b8461361bd106cc230b125eeb11b804c438c7 Mon Sep 17 00:00:00 2001 From: markveronich Date: Tue, 5 Jan 2016 11:58:05 +0000 Subject: [PATCH] Add basic karma testing Closes https://github.com/CookPete/react-player/issues/22 --- .travis.yml | 4 +++ package.json | 12 +++++++ test/karma.config.js | 32 +++++++++++++++++++ test/karma.webpack.js | 2 ++ test/karma/ReactPlayer.js | 55 +++++++++++++++++++++++++++++++++ test/{ => mocha}/ReactPlayer.js | 10 +++--- test/{ => mocha}/canPlay.js | 8 ++--- webpack.config.prod.js | 5 +-- 8 files changed, 115 insertions(+), 13 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 77091ab..530620d 100644 --- a/.travis.yml +++ b/.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 diff --git a/package.json b/package.json index 099fe75..4dc25bb 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 0000000..20f1fa7 --- /dev/null +++ b/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'] + } + } + }) +} diff --git a/test/karma.webpack.js b/test/karma.webpack.js new file mode 100644 index 0000000..345a630 --- /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 0000000..8e818dd --- /dev/null +++ b/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(, div) + } + + const testPause = (url, done) => { + const onPlay = () => { + setTimeout(() => { + render(, 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(, 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) + }) +}) 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 3b93898..8640805 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 2f037c6..6c43489 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', () => { diff --git a/webpack.config.prod.js b/webpack.config.prod.js index db5861b..254e890 100644 --- a/webpack.config.prod.js +++ b/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'),