chore: switch to videojs-generate-karma-config (#5528)

2025-10-31 00:08:01 +02:00 · 2018-10-31 11:01:30 -04:00
parent 607ed8bea8
commit 2e704509c9
8 changed files with 819 additions and 1713 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -24,7 +24,7 @@ sandbox/*
 *results.xml
 *.log

-test/coverage/*
+test/dist/*
 .coveralls.yml
 .sass-cache

--- a/build/grunt.js
+++ b/build/grunt.js
@@ -1,77 +1,17 @@
-import {gruntCustomizer, gruntOptionsMaker} from './options-customizer.js';
 import isDocsOnly from './docs-only.js';

 module.exports = function(grunt) {
  require('time-grunt')(grunt);

-  let _ = require('lodash');
-  let pkg = grunt.file.readJSON('package.json');
-  let license = grunt.file.read('build/license-header.txt');
-  let bannerCommonData = _.pick(pkg, ['version', 'copyright']);
-  let verParts = pkg.version.split('.');
-  let version = {
+  const pkg = grunt.file.readJSON('package.json');
+  const verParts = pkg.version.split('.');
+  const version = {
    full: pkg.version,
    major: verParts[0],
    minor: verParts[1],
    patch: verParts[2]
  };

-  const browserifyGruntDefaults = {
-    browserifyOptions: {
-      standalone: 'videojs'
-    },
-    plugin: [
-      ['bundle-collapser/plugin'],
-      ['browserify-derequire']
-    ]
-  };
-
-  /**
-   * Customizes _.merge behavior in `browserifyGruntOptions` to concatenate
-   * arrays. This can be overridden on a per-call basis to
-   *
-   * @see https://lodash.com/docs#merge
-   * @function browserifyGruntCustomizer
-   * @private
-   * @param  {Mixed} objectValue
-   * @param  {Mixed} sourceValue
-   * @return {Object}
-   */
-  const browserifyGruntCustomizer = gruntCustomizer;
-
-  /**
-   * Creates a unique object of Browserify Grunt task options.
-   *
-   * @function browserifyGruntOptions
-   * @private
-   * @param  {Object} [options]
-   * @param  {Function} [customizer=browserifyGruntCustomizer]
-   *         If the default array-concatenation behavior is not desireable,
-   *         pass _.noop or a unique customizer (https://lodash.com/docs#merge).
-   *
-   * @return {Object}
-   */
-  const browserifyGruntOptions = gruntOptionsMaker(browserifyGruntDefaults, browserifyGruntCustomizer);
-
-  /**
-   * Creates processor functions for license banners.
-   *
-   * @function createLicenseProcessor
-   * @private
-   * @param  {Object} data Custom data overriding `bannerCommonData`. Will
-   *                       not be mutated.
-   * @return {Function}    A function which returns a processed grunt template
-   *                       using an object constructed from `bannerCommonData`
-   *                       and the `data` argument.
-   */
-  function createLicenseProcessor(data) {
-    return () => {
-      return grunt.template.process(license, {
-        data: _.merge({}, bannerCommonData, data)
-      });
-    };
-  }
-
  version.majorMinor = `${version.major}.${version.minor}`;
  grunt.vjsVersion = version;

@@ -79,8 +19,8 @@ module.exports = function(grunt) {
  grunt.initConfig({
    pkg,
    clean: {
-      build: ['build/temp/*', 'es5'],
-      dist: ['dist/*']
+      build: ['build/temp/*', 'es5', 'test/dist'],
+      dist: ['dist/*', 'test/dist']
    },
    dist: {},
    watch: {
@@ -89,55 +29,12 @@ module.exports = function(grunt) {
        tasks: ['vjslanguages']
      }
    },
-    connect: {
-      dev: {
-        options: {
-          port: Number(process.env.VJS_CONNECT_PORT) || 9999,
-          livereload: true,
-          useAvailablePort: true
-        }
-      }
-    },
    copy: {
      fonts: { cwd: 'node_modules/videojs-font/fonts/', src: ['*'], dest: 'build/temp/font/', expand: true, filter: 'isFile' },
      dist:  { cwd: 'build/temp/', src: ['**/**', '!test*'], dest: 'dist/', expand: true, filter: 'isFile' },
      a11y:  { src: 'sandbox/descriptions.html.example', dest: 'sandbox/descriptions.test-a11y.html' }, // Can only test a file with a .html or .htm extension
      examples: { cwd: 'docs/examples/', src: ['**/**'], dest: 'dist/examples/', expand: true, filter: 'isFile' }
    },
-    karma: {
-      // this config file applies to all following configs except if overwritten
-      options: {
-        configFile: 'test/karma.conf.js'
-      },
-
-      defaults: {
-        detectBrowsers: {
-          enabled: !process.env.TRAVIS,
-          usePhantomJS: false
-        }
-      },
-
-      watch: {
-        autoWatch: true,
-        singleRun: false
-      },
-
-      // these are run locally on local browsers
-      dev: { browsers: ['Chrome', 'Firefox', 'Safari'] },
-      chromecanary: { browsers: ['ChromeCanary'] },
-      chrome:       { browsers: ['Chrome'] },
-      firefox:      { browsers: ['Firefox'] },
-      safari:       { browsers: ['Safari'] },
-      ie:           { browsers: ['IE'] },
-
-      // this only runs on PRs from the mainrepo on BrowserStack
-      browserstack: { browsers: ['chrome_bs'] },
-      chrome_bs:    { browsers: ['chrome_bs'] },
-      firefox_bs:   { browsers: ['firefox_bs'] },
-      safari_bs:    { browsers: ['safari_bs'] },
-      edge_bs:      { browsers: ['edge_bs'] },
-      ie11_bs:      { browsers: ['ie11_bs'] }
-    },
    vjslanguages: {
      defaults: {
        files: {
@@ -156,29 +53,6 @@ module.exports = function(grunt) {
        dest: 'dist/video-js-' + version.full + '.zip'
      }
    },
-    browserify: {
-      tests: {
-        options: {
-          browserifyOptions: {
-            verbose: true,
-            standalone: false,
-            transform: ['babelify']
-          },
-          plugin: [
-            ['proxyquireify/plugin', 'bundle-collapser/plugin']
-          ],
-          banner: false,
-          watch: true,
-          keepAlive: true
-        },
-        files: {
-          'build/temp/tests.js': [
-            'test/globals-shim.js',
-            'test/unit/**/*.js'
-          ]
-        }
-      }
-    },
    coveralls: {
      options: {
        // warn instead of failing when coveralls errors
@@ -186,7 +60,7 @@ module.exports = function(grunt) {
        force: true
      },
      all: {
-        src: 'test/coverage/lcov.info'
+        src: 'test/dist/coverage/lcov.info'
      }
    },
    concurrent: {
@@ -195,30 +69,37 @@ module.exports = function(grunt) {
      },
      tests: [
        'shell:babel',
-        'browserify:tests'
      ],
      dev: [
        'shell:sass',
        'shell:babel',
-        'browserify:tests',
        'watch:lang',
-        'copy:dist'
+        'copy:dist',
+        'shell:karma-server'
      ],
      // Run multiple watch tasks in parallel
      // Needed so watchify can cache intelligently
      watchAll: [
        'watch',
-        'browserify:watch',
-        'browserify:watchnovtt',
-        'browserify:tests',
-        'karma:watch'
+        'shell:karma-server'
      ],
      watchSandbox: [
-        'watch',
-        'browserify:watch'
+        'watch'
      ]
    },
    shell: {
+      'karma-server': {
+        command: 'npm run karma-server',
+        options: {
+          preferLocal: true
+        }
+      },
+      'karma-run': {
+        command: 'npm run karma-run',
+        options: {
+          preferLocal: true
+        }
+      },
      cssmin: {
        command: 'npm run cssmin',
        options: {
@@ -331,7 +212,7 @@ module.exports = function(grunt) {
      'shell:noderequire',
      'shell:browserify',
      'shell:webpack',
-      'karma:defaults',
+      'shell:karma-run',
      'test-a11y'
    ];

@@ -348,13 +229,13 @@ module.exports = function(grunt) {
  });

  // Run while developing
-  grunt.registerTask('dev', ['sandbox', 'connect:dev', 'concurrent:dev']);
-  grunt.registerTask('watchAll', ['build', 'connect:dev', 'concurrent:watchAll']);
+  grunt.registerTask('dev', ['sandbox', 'concurrent:dev']);
+  grunt.registerTask('watchAll', ['build', 'concurrent:watchAll']);
  grunt.registerTask('test-a11y', ['copy:a11y', 'accessibility']);

  // Pick your testing, or run both in different terminals
-  grunt.registerTask('test-ui', ['browserify:tests']);
-  grunt.registerTask('test-cli', ['karma:watch']);
+  grunt.registerTask('test-ui', ['shell:karma-server']);
+  grunt.registerTask('test-cli', ['shell:karma-server']);

  // Load all the tasks in the tasks directory
  grunt.loadTasks('build/tasks');
--- a/build/options-customizer.js
+++ b/build/options-customizer.js
@@ -1,49 +0,0 @@
-import _ from 'lodash';
-/**
- * Customizes _.merge behavior in `gruntOptions` to concatenate
- * arrays. This can be overridden on a per-call basis to
- *
- * @see https://lodash.com/docs#merge
- * @function GruntCustomizer
- * @private
- * @param  {Mixed} objectValue
- * @param  {Mixed} sourceValue
- * @return {Object}
- */
-function gruntCustomizer(objectValue, sourceValue) {
-  if (Array.isArray(objectValue)) {
-    return objectValue.concat(sourceValue);
-  }
-}
-
-/**
- * Creates a gruntOptions instance for the specific defaultOptions and gruntCustomizer
- *
- * @function browserifyGruntOptions
- * @private
- * @param  {Object} [options]
- * @param  {Function} [customizer=gruntCustomizer]
- *         If the default array-concatenation behavior is not desireable,
- *         pass _.noop or a unique customizer (https://lodash.com/docs#merge).
- *
- * @return {Function}
- */
-function gruntOptionsMaker(defaultOptions, gruntCustomizer) {
-  /**
-   * Creates a unique object of Browserify Grunt task options.
-   *
-   * @function gruntOptions
-   * @private
-   * @param  {Object} [options]
-   * @param  {Function} [customizer=browserifyGruntCustomizer]
-   *         If the default array-concatenation behavior is not desireable,
-   *         pass _.noop or a unique customizer (https://lodash.com/docs#merge).
-   *
-   * @return {Object}
-   */
-  return function gruntOptions(options = null, customizer = gruntCustomizer) {
-    return _.merge({}, defaultOptions, options, customizer);
-  }
-};
-
-export { gruntCustomizer, gruntOptionsMaker };
--- a/index.html
+++ b/index.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Video.js Dev Server</title>
+</head>
+<body>
+  <h2>Navigation</h2>
+  <ul>
+    <li><a href="/test/debug.html">Run unit tests in browser.</a></li>
+    <li><a href="/sandbox/index.html">Simple Demo (also seen below)</a></li>
+    <li><a href="/sandbox/plugin.html">Plugin Demo</a></li>
+    <li><a href="/sandbox/responsive.html">Responsive Demo</a></li>
+    <li><a href="/sandbox/middleware-play.html">Middleware Play Demo</a></li>
+    <li><a href="/sandbox/icons.html">Icons Demo</a></li>
+    <li><a href="/sandbox/focus-visible.html">Focus Visible Demo</a></li>
+    <li><a href="/sandbox/flash.html">Flash Demo</a></li>
+    <li><a href="/sandbox/fake-live.html">Fake Live Demo</a></li>
+    <li><a href="/sandbox/embeds.html">Embeds Demo</a></li>
+    <li><a href="/sandbox/descriptions.html">Descriptions Demo</a></li>
+    <li><a href="/sandbox/combined-tracks.html">Combined Tracks Demo</a></li>
+  </ul>
+
+  <h2>Simple Demo (in an iframe)</h2>
+  <iframe src="/sandbox/index.html" width=700 height=500></iframe>
+</body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -41,6 +41,8 @@
    "lint": "vjsstandard",
    "start": "npm-run-all -p start:grunt watch",
    "start:grunt": "grunt dev",
+    "karma-server": "karma start test/karma.conf.js --singleRun=false --auto-watch",
+    "karma-run": "karma start test/karma.conf.js",
    "test": "grunt test",
    "docs": "npm run docs:lint && npm run docs:api",
    "jsdoc": "jsdoc",
@@ -77,13 +79,11 @@
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/register": "^7.0.0",
-    "aliasify": "^2.1.0",
    "autoprefixer": "^9.0.1",
    "babelify": "^10.0.0",
    "bluebird": "^3.5.1",
-    "browserify-derequire": "^0.9.4",
-    "browserify-istanbul": "^2.0.0",
-    "bundle-collapser": "^1.2.1",
+    "browserify": "^16.2.3",
+    "browserify-istanbul": "^3.0.1",
    "clean-css-cli": "^4.2.1",
    "cli-table": "^0.3.1",
    "conventional-changelog-cli": "^2.0.1",
@@ -94,38 +94,22 @@
    "gh-release": "^3.2.1",
    "grunt": "^1.0.3",
    "grunt-accessibility": "^6.0.0",
-    "grunt-browserify": "^5.3.0",
    "grunt-cli": "~1.3.1",
    "grunt-concurrent": "^2.3.1",
    "grunt-contrib-clean": "^2.0.0",
-    "grunt-contrib-connect": "~2.0.0",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-watch": "^1.1.0",
    "grunt-coveralls": "^1.0.0",
-    "grunt-karma": "^3.0.0",
    "grunt-shell": "^2.0.0",
    "grunt-videojs-languages": "0.0.4",
    "grunt-zip": "0.18.1",
    "humanize-duration": "^3.12.1",
    "husky": "^1.0.1",
-    "istanbul": "^0.4.5",
    "jsdoc": "^3.4.2",
    "karma": "^3.0.0",
    "karma-browserify": "^5.3.0",
-    "karma-browserstack-launcher": "^1.0.1",
-    "karma-chrome-launcher": "^2.0.0",
-    "karma-coverage": "^1.1.2",
-    "karma-detect-browsers": "^2.2.6",
-    "karma-firefox-launcher": "^1.1.0",
-    "karma-ie-launcher": "^1.0.0",
-    "karma-opera-launcher": "^1.0.0",
-    "karma-qunit": "^2.0.1",
-    "karma-safari-launcher": "^1.0.0",
-    "karma-safaritechpreview-launcher": "0.0.6",
-    "karma-sinon": "^1.0.5",
    "klaw-sync": "^6.0.0",
    "load-grunt-tasks": "^4.0.0",
-    "lodash": "^4.17.10",
    "markdown-table": "^1.0.0",
    "maxmin": "^2.1.0",
    "minimist": "^1.2.0",
@@ -157,7 +141,9 @@
    "uglify-js": "^3.3.21",
    "unified": "^7.0.0",
    "videojs-flash": "^2.1.0",
+    "videojs-generate-karma-config": "~4.0.2",
    "videojs-standard": "^8.0.2",
+    "watchify": "^3.11.0",
    "webpack": "^1.15.0"
  },
  "vjsstandard": {
@@ -172,7 +158,7 @@
      "**/lang/**",
      "**/sandbox/**",
      "**/test/api/**",
-      "**/test/coverage/**",
+      "**/test/dist/coverage/**",
      "**/test/karma.conf.js"
    ]
  },
--- a/test/index.html
+++ b/test/index.html
@@ -1,18 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>VideoJS Tests</title>
-  <link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css">
-  <link rel="stylesheet" href="../dist/video-js.min.css">
-</head>
-<body>
-  <div id="qunit"></div>
-  <script src="../node_modules/qunit/qunit/qunit.js"></script>
-
-  <!-- Execute the bundled tests first -->
-  <script src="../build/temp/tests.js"></script>
-  <script src="../build/temp/browserify.js"></script>
-  <script src="../build/temp/webpack.js"></script>
-</body>
-</html>
--- a/test/karma.conf.js
+++ b/test/karma.conf.js
@@ -1,196 +1,47 @@
+const generate = require('videojs-generate-karma-config');
+
 module.exports = function(config) {
-  // build out a name for browserstack
-  // {TRAVIS_BUILD_NUMBER} [{TRAVIS_PULL_REQUEST} {PR_BRANCH}] {TRAVIS_BRANCH}
-  var browserstackName = process.env.TRAVIS_BUILD_NUMBER;
+  const coverageFlag = process.env.npm_config_coverage;
+  const reportCoverage = false; // process.env.TRAVIS || coverageFlag || false;

-  if (process.env.TRAVIS_PULL_REQUEST !== 'false') {
-    browserstackName += ' ' + process.env.TRAVIS_PULL_REQUEST + ' ' + process.env.TRAVIS_PULL_REQUEST_BRANCH;
-  }
-
-  browserstackName +=  ' ' + process.env.TRAVIS_BRANCH;
-
-  // Creating settings object first so we can modify based on travis
-  var settings = {
-    basePath: '',
-
-    frameworks: ['browserify', 'qunit', 'detectBrowsers'],
-    autoWatch: false,
-    singleRun: true,
-
-    // Compling tests here
-    files: [
-      '../dist/video-js.css',
-      '../test/globals-shim.js',
-      '../test/unit/**/*.js',
-      '../build/temp/browserify.js',
-      '../build/temp/webpack.js',
-      { pattern: '../src/**/*.js', watched: true, included: false, served: false }
-    ],
-
-    preprocessors: {
-      '../test/**/*.js': [ 'browserify' ]
+  // see https://github.com/videojs/videojs-generate-karma-config
+  // for options
+  const options = {
+    serverBrowsers(defaults) {
+      return [];
    },
-
-    browserify: {
-      debug: true,
-      plugin: ['proxyquireify/plugin'],
-      transform: [['babelify', {
-        "presets": [
-          [
-            "@babel/preset-env",
-            {
-              "loose": true
-            }
-          ]
-        ]
-      }]]
-    },
-
-    plugins: [
-      'karma-qunit',
-      'karma-chrome-launcher',
-      'karma-firefox-launcher',
-      'karma-ie-launcher',
-      'karma-opera-launcher',
-      'karma-safari-launcher',
-      'karma-safaritechpreview-launcher',
-      'karma-browserstack-launcher',
-      'karma-browserify',
-      'karma-coverage',
-      'karma-detect-browsers',
-    ],
-
-    detectBrowsers: {
-      enabled: false,
-      usePhantomJS: false
-    },
-
-    reporters: ['dots'],
-
-    // web server port
-    port: 9876,
-
-    // cli runner port
-    runnerPort: 9100,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    captureTimeout: 300000,
-    browserNoActivityTimeout: 300000,
-    browserDisconnectTimeout: 300000,
-    browserDisconnectTolerance: 3,
-
-    browserStack: {
-      project: 'Video.js',
-      name: browserstackName,
-      build: browserstackName,
-      pollingTimeout: 30000,
-      captureTimeout: 600,
-      timeout: 600
-    },
-    customLaunchers: getCustomLaunchers(),
-
-    // The HTML reporter seems to be busted right now, so we're just using text in the meantime
-    // along with the summary after the test run.
-    coverageReporter: {
-      reporters: [
-        {
-          type: 'text',
-          dir: 'coverage/',
-          file: 'coverage.txt'
-        },
-        {
-          type: 'lcovonly',
-          dir: 'coverage/',
-          subdir: '.'
-        },
-        { type: 'text-summary' }
-      ]
-    },
-
-    // make QUnit show the UI in karma runs
-    client: {
-      clearContext: false,
-      qunit: {
-        showUI: true,
-        testTimeout: 5000
-      }
-    }
+    coverage: reportCoverage,
+  };
+
+  config = generate(config, options);
+
+  config.files = [
+    'dist/video-js.css',
+    'test/globals-shim.js',
+    'test/unit/**/*.js',
+    'build/temp/browserify.js',
+    'build/temp/webpack.js',
+    {pattern: 'src/**/*.js', watched: true, included: false, served: false }
+  ];
+
+  config.browserStack.project = 'Video.js';
+
+  config.frameworks.push('browserify');
+  config.browserify = {
+    debug: true,
+    plugin: ['proxyquireify/plugin'],
+    transform: [
+      ['babelify', {"presets": [["@babel/preset-env", {"loose": true}]]}],
+    ]
  };

-  // Coverage reporting
-  // Coverage is enabled by passing the flag --coverage to npm test
-  var coverageFlag = process.env.npm_config_coverage;
-  var reportCoverage = process.env.TRAVIS || coverageFlag;
  if (reportCoverage) {
-    settings.browserify.transform.push('browserify-istanbul');
-    settings.reporters.push('coverage');
+    config.browserify.transform.push('browserify-istanbul');
  }

-  if (process.env.TRAVIS) {
-    if (process.env.BROWSER_STACK_USERNAME) {
-      settings.browsers = [
-        'chrome_bs',
-        'firefox_bs',
-        'safari_bs',
-        'edge_bs',
-        'ie11_bs'
-      ];
-    } else {
-      settings.browsers = ['chrome_travis'];
-    }
-  }

-  config.set(settings);
-};
-
-function getCustomLaunchers(){
-  return {
-    chrome_travis: {
-      base: 'Chrome',
-      flags: ['--no-sandbox']
-    },
-
-    chrome_bs: {
-      base: 'BrowserStack',
-      browser: 'chrome',
-      os: 'Windows',
-      os_version: '10'
-    },
-
-    firefox_bs: {
-      base: 'BrowserStack',
-      browser: 'firefox',
-      os: 'Windows',
-      os_version: '10'
-    },
-
-    safari_bs: {
-      base: 'BrowserStack',
-      browser: 'safari',
-      os: 'OS X',
-      os_version: 'High Sierra'
-    },
-
-    safari9_bs: {
-      base: 'BrowserStack',
-      browser: 'safari',
-      os: 'OS X',
-      os_version: 'El Capitan'
-    },
-
-    edge_bs: {
-      base: 'BrowserStack',
-      browser: 'edge',
-      os: 'Windows',
-      os_version: '10'
-    },
-
-    ie11_bs: {
-      base: 'BrowserStack',
-      browser: 'ie',
-      browser_version: '11',
-      os: 'Windows',
-      os_version: '10'
-    }
+  config.preprocessors = {
+    'test/**/*.js': ['browserify']
  };
-}
+
+};