Migrate from QUnit to Mocha/Chai (#1998)

* Migrating from QUnit to Mocha/Chai
jwplayer · May 8, 2017 · 8f18c2a · 8f18c2a
1 parent 472081d
commit 8f18c2a
Show file tree

Hide file tree

Showing 50 changed files with 2,950 additions and 3,179 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -3,7 +3,8 @@
     "env": {
         "browser": true,
         "amd": true,
-        "es6": true
+        "es6": true,
+        "mocha": true
     },
     "globals": {
         "__webpack_public_path__": true,
@@ -13,7 +14,9 @@
         "__REPO__": true,
         "__SELF_HOSTED__": true,
         "__DEBUG__": true,
-        "__BUILD_VERSION__": true
+        "__BUILD_VERSION__": true,
+        "assert": true,
+        "expect": true
     },
     "parserOptions": {
         "sourceType": "module"

diff --git a/README.md b/README.md
@@ -52,7 +52,7 @@ Check out an interactive example in this [JSFiddle](https://jsfiddle.net/Lgs0ou8
  We appreciate all contributions towards the player! Before submitting an issue or PR, please see our contributing docs [here](CONTRIBUTING.md).
 
 ## Building the Player
-We use `grunt` and a few `npm scripts` to build the player, lint code, and run tests. Debug code is built to `/bin-debug`, while minified & uglified code is built to `/bin-release`. Code is built with `webpack`, linted with `eslint`, and tested with `karma` and `qunit`.
+We use `grunt` and a few `npm scripts` to build the player, lint code, and run tests. Debug code is built to `/bin-debug`, while minified & uglified code is built to `/bin-release`. Code is built with `webpack`, linted with `eslint`, and tested with `karma`, `mocha` and `chai`.
 
 #### Requirements:
  1. [Node.js](https://nodejs.org/download)

diff --git a/karma.conf.js b/karma.conf.js
@@ -6,11 +6,11 @@ const webpackConfig = require('./webpack.config.js')[0];
 
 const aliases = {
     'test/underscore': path.resolve(__dirname + '/node_modules/underscore/underscore.js'),
-    'jquery': path.resolve(__dirname + '/node_modules/jquery/dist/jquery.js'),
-    'sinon': path.resolve(__dirname + '/node_modules/sinon/pkg/sinon.js'),
-    'data': path.resolve(__dirname + '/test/data'),
-    'mock': path.resolve(__dirname + '/test/mock'),
-    'utils/video': path.resolve(__dirname + '/test/mock/video.js')
+    'utils/video': path.resolve(__dirname + '/test/mock/video.js'),
+    jquery: path.resolve(__dirname + '/node_modules/jquery/dist/jquery.js'),
+    sinon: path.resolve(__dirname + '/node_modules/sinon/pkg/sinon.js'),
+    data: path.resolve(__dirname + '/test/data'),
+    mock: path.resolve(__dirname + '/test/mock')
 };
 
 webpackConfig.resolve.alias = Object.assign(webpackConfig.resolve.alias || {}, aliases);
@@ -20,7 +20,7 @@ module.exports = function(config) {
     var isJenkins = !!process.env.JENKINS_HOME;
     var serverPort = process.env.KARMA_PORT || 9876;
     var testReporters = [
-        // 'dots', // "dots" is useful for writing browser console logs to stdio
+        // 'dots', // useful for writing browser console logs to stdio
         'spec',
         'coverage'
     ];
@@ -30,7 +30,7 @@ module.exports = function(config) {
     var packageInfo = JSON.parse(require('fs').readFileSync('package.json', 'utf8'));
 
     config.set({
-        frameworks: ['qunit'],
+        frameworks: ['mocha', 'chai', 'sinon'],
         reporters: testReporters,
         port: serverPort, // web server port
         colors: !isJenkins, // colors in the output (reporters and logs)
@@ -52,40 +52,40 @@ module.exports = function(config) {
         browsers: [
             'PhantomJS',
             'Chrome',
-            //'Safari', // experiencing issues with safari-launcher@1.0.0 and Safari 9.1.1
+            // 'Safari', // experiencing issues with safari-launcher@1.0.0 and Safari 9.1.1
             'Firefox'
         ],
 
-        customLaunchers: require( './test/karma/browserstack-launchers' ),
+        customLaunchers: require('./test/karma/browserstack-launchers'),
 
         browserStack: {
-            username:  env.BS_USERNAME,
+            username: env.BS_USERNAME,
             accessKey: env.BS_AUTHKEY,
             name: 'Unit Tests',
             project: 'jwplayer',
-            build: '' + (env.JOB_NAME || 'local' ) + ' ' +
+            build: '' + (env.JOB_NAME || 'local') + ' ' +
             (env.BUILD_NUMBER || env.USER) + ' ' +
-            (env.GIT_BRANCH || '') +' '+
-            packageInfo.version,
+            (env.GIT_BRANCH || '') + ' ' + packageInfo.version,
             timeout: 300 // 5 minutes
         },
 
         // to avoid DISCONNECTED messages when connecting to BrowserStack
-        browserDisconnectTimeout : 20 * 1000, // default 2000
-        browserDisconnectTolerance : 1, // default 0
-        browserNoActivityTimeout : 10 * 1000, //default 10000
-        captureTimeout : 120 * 1000, //default 60000
+        browserDisconnectTimeout: 20 * 1000, // default 2000
+        browserDisconnectTolerance: 1, // default 0
+        browserNoActivityTimeout: 10 * 1000, // default 10000
+        captureTimeout: 120 * 1000, // default 60000
 
-        files : [
-            //3rd Party Code
-            { pattern: 'test-context.js' },
+        files: [
+            // 3rd Party Code
+            { pattern: 'test-context.js' }
         ],
 
         // preprocess matching files before serving them to the browser
         // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
         preprocessors: {
             'test-context.js': ['webpack']
         },
+
         coverageReporter: {
             type: 'html',
             dir: 'reports/coverage'
@@ -100,9 +100,9 @@ module.exports = function(config) {
                 }),
                 new webpack.DefinePlugin({
                     __SELF_HOSTED__: true,
-                    __REPO__ : '\'\'',
-                    __DEBUG__ : false,
-                    __BUILD_VERSION__:  '\'' + '7.10.0' + '\'',
+                    __REPO__: '\'\'',
+                    __DEBUG__: false,
+                    __BUILD_VERSION__: '\'' + '7.10.0' + '\'',
                     __FLASH_VERSION__: 18.0
                 }),
             ]

diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "babel-plugin-transform-es2015-modules-commonjs": "6.24.0",
     "babel-preset-es2015": "6.24.0",
     "babel-preset-es2015-loose": "8.0.0",
+    "chai": "3.5.0",
     "css-loader": "0.26.4",
     "eslint": "3.19.0",
     "eslint-config-jwplayer-base": "7.1.0",
@@ -36,12 +37,13 @@
     "jquery": "3.2.1",
     "karma": "1.5.0",
     "karma-browserstack-launcher": "1.2.0",
+    "karma-chai": "0.1.0",
     "karma-chrome-launcher": "2.0.0",
     "karma-coverage": "1.1.1",
     "karma-firefox-launcher": "1.0.1",
     "karma-junit-reporter": "1.2.0",
+    "karma-mocha": "1.3.0",
     "karma-phantomjs-launcher": "1.0.4",
-    "karma-qunit": "1.2.1",
     "karma-requirejs": "1.1.0",
     "karma-safari-launcher": "1.0.0",
     "karma-sinon": "1.0.5",
@@ -52,16 +54,15 @@
     "load-grunt-tasks": "3.5.2",
     "loader-utils": "1.1.0",
     "lodash": "4.17.4",
+    "mocha": "3.2.0",
     "node-libs-browser": "2.0.0",
-    "phantomjs-prebuilt": "2.1.14",
     "phantomjs-polyfill": "0.0.2",
+    "phantomjs-prebuilt": "2.1.14",
     "postcss-loader": "1.3.3",
-    "qunitjs": "2.3.0",
     "raw-loader": "0.5.1",
     "requirejs": "2.3.3",
     "simple-style-loader": "0.4.1",
     "sinon": "2.1.0",
-    "sinon-qunit": "2.0.0",
     "source-map": "0.5.6",
     "underscore": "1.8.3",
     "url-loader": "0.5.8",

diff --git a/test/.jshintrc b/test/.jshintrc
@@ -11,7 +11,6 @@
   "boss": true,
   "eqnull": true,
   "browser": true,
-  "qunit": true,
   "predef": [
     "jwplayer",
     "jQuery",

diff --git a/test/index.html b/test/index.html
diff --git a/test/mock/mock-api.js b/test/mock/mock-api.js
@@ -31,12 +31,9 @@ define([
         }
     });
 
-    function noop() {
-        //console.log('I shouldn\'t exist.');
-    }
+    function noop() {}
 
     function noopChained() {
-        //console.log('I shouldn\'t exist too.');
         return this;
     }
 

diff --git a/test/mock/mock-ensure.js b/test/mock/mock-ensure.js
@@ -22,4 +22,4 @@ define([
             return module;
         });
     };
-});
+});
diff --git a/test/mock/mock-model.js b/test/mock/mock-model.js
@@ -6,7 +6,7 @@ define([
     var MockModel = function() {};
 
     _.extend(MockModel.prototype, SimpleModel, {
-        setup : function(configuration) {
+        setup: function(configuration) {
             var self = this;
             var playlistItem = _.extend({
                 file: '//playertest.longtailvideo.com/bunny.mp4',
@@ -27,7 +27,7 @@ define([
 
             var customCaptions = {
                 back: true,
-                    fontSize: 14,
+                fontSize: 14,
                 fontFamily: 'Arial,sans-serif',
                 fontOpacity: 100,
                 color: '#FFF',
@@ -41,10 +41,10 @@ define([
             this.attributes = _.extend({}, {
                 id: '',
                 // See api/config `Defaults`:
-                state : 'idle',
+                state: 'idle',
                 autostart: false,
                 controls: true,
-                displaytitle : true,
+                displaytitle: true,
                 displaydescription: true,
                 mobilecontrols: false,
                 repeat: false,
@@ -55,7 +55,7 @@ define([
                 volume: 90,
                 width: '100%',
                 height: 270,
-                aspectratio : '56.25%',
+                aspectratio: '56.25%',
                 localization: {
                     play: 'Play',
                     playback: 'Start playback',
@@ -121,7 +121,7 @@ define([
                 ],
                 related: null,
                 sharing: null,
-                playlist : [
+                playlist: [
                     playlistItem,
                     {
                         file: 'http://content.bitsontherun.com/videos/q1fx20VZ-52qL9xLP.mp4',
@@ -144,8 +144,8 @@ define([
             this.attributes.mediaModel = this.mediaModel;
 
             var mediaElement = document.createElement('video');
-            mediaElement.src = "//content.bitsontherun.com/videos/bkaovAYt-52qL9xLP.mp4";
-            mediaElement.preload = "none";
+            mediaElement.src = '//content.bitsontherun.com/videos/bkaovAYt-52qL9xLP.mp4';
+            mediaElement.preload = 'none';
 
             this.attributes.provider = {
                 name: 'flash',
@@ -158,7 +158,7 @@ define([
                     // element.appendChild(mediaElement[0]);
                 },
                 setVisibility: function(state) {
-                    mediaElement.style.visibility = state ? 'visible': '';
+                    mediaElement.style.visibility = state ? 'visible' : '';
                     mediaElement.style.opacity = state ? 1 : 0;
                 },
                 seek: function(time) {

diff --git a/test/mock/video.js b/test/mock/video.js
@@ -5,8 +5,8 @@ define([
     // to keep results consistent across browsers in current tests
     // when running unit tests this file is loaded in place of src/utils/video
     var video = document.createElement('video');
-    video.load  = _.noop;
-    video.play  = _.noop;
+    video.load = _.noop;
+    video.play = _.noop;
     video.pause = _.noop;
     video.canPlayType = function(type) {
         return _.contains([
@@ -21,4 +21,4 @@ define([
         ], type);
     };
     return video;
-});
+});