Enable Karma Js tests for xmodule-webpack

common/static/common/js/karma.common.conf.js

@@ -332,7 +332,11 @@ function getBaseConfig(config, useRequireJs) {
                 base: 'Firefox',
                 prefs: {
                     'app.update.auto': false,
-                    'app.update.enabled': false
+                    'app.update.enabled': false,
+                    'media.autoplay.default': 0, // allow autoplay
+                    'media.autoplay.blocking_policy': 0, // disable autoplay blocking
+                    'media.autoplay.allow-extension-background-pages': true,
+                    'media.autoplay.enabled.user-gestures-needed': false,
                 }
             },
             ChromeDocker: {

package.json

@@ -15,7 +15,7 @@
     "watch-sass": "scripts/watch_sass.sh",
     "test": "npm run test-jest && npm run test-karma",
     "test-jest": "jest",
-    "test-karma": "npm run test-karma-vanilla && npm run test-karma-require && echo 'WARNING: Skipped broken webpack tests. For details, see: https://github.com/openedx/edx-platform/issues/35956'",
+    "test-karma": "npm run test-karma-vanilla && npm run test-karma-require && npm run test-xmodule-webpack && echo 'WARNING: Skipped broken webpack tests. For details, see: https://github.com/openedx/edx-platform/issues/35956'",
     "test-karma-vanilla": "npm run test-cms-vanilla && npm run test-xmodule-vanilla && npm run test-common-vanilla",
     "test-karma-require": "npm run test-cms-require && npm run test-common-require",
     "test-karma-webpack": "npm run test-cms-webpack && npm run test-lms-webpack && npm run test-xmodule-webpack",

webpack.common.config.js

@@ -671,9 +671,11 @@ module.exports = Merge.merge({
             $: 'jQuery',
             backbone: 'Backbone',
             canvas: 'canvas',
+            fs: 'fs',
             gettext: 'gettext',
             jquery: 'jQuery',
             logger: 'Logger',
+            path: 'path',
             underscore: '_',
             URI: 'URI',
             XBlockToXModuleShim: 'XBlockToXModuleShim',

xmodule/assets/video/public/js/04_video_control.js

@@ -2,7 +2,6 @@
 
 import * as Time from './utils/time.js';
 
-
 // VideoControl module.
 let VideoControl = function(state) {
     let dfd = $.Deferred();

xmodule/js/karma_runner_webpack.js

@@ -27,12 +27,16 @@ import '../../common/static/common/js/spec_helpers/jasmine-waituntil.js';
 import '../../common/static/common/js/spec_helpers/jasmine-extensions.js';
 import '../../common/static/common/js/vendor/sinon.js';
 
+import HtmlUtils from 'edx-ui-toolkit/js/utils/html-utils';
+import StringUtils from 'edx-ui-toolkit/js/utils/string-utils';
+
+
 // These libraries are used by the tests (and the code under test)
 // but not explicitly imported
 import 'jquery.ui';
 
 // These
-import './src/video/10_main.js';
+import '../assets/video/public/js/10_main.js';
 import './spec/helper.js';
 import './spec/video_helper.js';
 
@@ -71,11 +75,18 @@ import './spec/video/video_transcript_feedback_spec.js';
 import './spec/video/video_volume_control_spec.js';
 import './spec/time_spec.js';
 
+
 // overwrite the loaded method and manually start the karma after a delay
 // Somehow the code initialized in jQuery's onready doesn't get called before karma auto starts
 
 // eslint-disable-next-line no-unused-expressions
 'use strict';
+
+window._ = _;
+window.edx = window.edx || {};
+window.edx.HtmlUtils = HtmlUtils;
+window.edx.StringUtils = StringUtils;
+
 window.__karma__.loaded = function() {
     setTimeout(function() {
         window.__karma__.start();

xmodule/js/karma_xmodule_webpack.conf.js

@@ -23,8 +23,8 @@ var options = {
     specFiles: [],
 
     fixtureFiles: [
-        {pattern: 'fixtures/*.*'},
-        {pattern: 'fixtures/hls/**/*.*'}
+        {pattern: path.join(__dirname, 'fixtures/*.*')},
+        {pattern: path.join(__dirname, 'fixtures/hls/**/*.*')}
     ],
 
     runFiles: [

xmodule/js/spec/helper.js

@@ -255,7 +255,8 @@
         }
 
         jasmine.stubRequests();
-        state = new window.Video('#example');
+        let runtime = jasmine.createSpyObj('TestRuntime', ['handlerUrl']);
+        state = new window.Video(runtime, '#example');
 
         state.resizer = (function() {
             var methods = [

xmodule/js/spec/time_spec.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import * as Time from 'time.js';
+import * as Time from '../../assets/video/public/js/utils/time.js';
 
 describe('Time', function() {
     describe('format', function() {

xmodule/js/spec/video/async_process_spec.js

@@ -1,81 +1,77 @@
-(function(require) {
-    require(
-        ['video/00_async_process.js'],
-        function(AsyncProcess) {
-            var getArrayNthLength = function(n, multiplier) {
-                    var result = [],
-                        mul = multiplier || 1;
+import AsyncProcess from '../../../assets/video/public/js/00_async_process.js';
 
-                    for (var i = 0; i < n; i++) {
-                        result[i] = i * mul;
-                    }
+let getArrayNthLength = function(n, multiplier) {
+    let result = [],
+        mul = multiplier || 1;
 
-                    return result;
-                },
-                items = getArrayNthLength(1000);
+    for (let i = 0; i < n; i++) {
+        result[i] = i * mul;
+    }
 
-            describe('AsyncProcess', function() {
-                it('Array is processed successfully', function(done) {
-                    var processedArray,
-                        expectedArray = getArrayNthLength(1000, 2),
-                        process = function(item) {
-                            return 2 * item;
-                        };
+    return result;
+},
+items = getArrayNthLength(1000);
 
-                    AsyncProcess.array(items, process).done(function(result) {
-                        processedArray = result;
-                    });
+describe('AsyncProcess', function() {
+    it('Array is processed successfully', function(done) {
+        var processedArray,
+            expectedArray = getArrayNthLength(1000, 2),
+            process = function(item) {
+                return 2 * item;
+            };
 
-                    jasmine.waitUntil(function() {
-                        return processedArray;
-                    }).then(function() {
-                        expect(processedArray).toEqual(expectedArray);
-                    }).always(done);
-                });
+        AsyncProcess.array(items, process).done(function(result) {
+            processedArray = result;
+        });
 
-                it('If non-array is passed, error callback is called', function(done) {
-                    var isError,
-                        process = function() {};
+        jasmine.waitUntil(function() {
+            return processedArray;
+        }).then(function() {
+            expect(processedArray).toEqual(expectedArray);
+        }).always(done);
+    });
 
-                    AsyncProcess.array('string', process).fail(function() {
-                        isError = true;
-                    });
+    it('If non-array is passed, error callback is called', function(done) {
+        var isError,
+            process = function() {};
 
-                    jasmine.waitUntil(function() {
-                        return isError;
-                    }).then(function() {
-                        expect(isError).toBeTruthy();
-                    }).always(done);
-                });
+        AsyncProcess.array('string', process).fail(function() {
+            isError = true;
+        });
 
-                it('If an empty array is passed, returns initial array', function(done) {
-                    var processedArray,
-                        process = function() {};
+        jasmine.waitUntil(function() {
+            return isError;
+        }).then(function() {
+            expect(isError).toBeTruthy();
+        }).always(done);
+    });
 
-                    AsyncProcess.array([], process).done(function(result) {
-                        processedArray = result;
-                    });
+    it('If an empty array is passed, returns initial array', function(done) {
+        var processedArray,
+            process = function() {};
 
-                    jasmine.waitUntil(function() {
-                        return processedArray;
-                    }).then(function() {
-                        expect(processedArray).toEqual([]);
-                    }).always(done);
-                });
+        AsyncProcess.array([], process).done(function(result) {
+            processedArray = result;
+        });
 
-                it('If no process function passed, returns initial array', function(done) {
-                    var processedArray;
+        jasmine.waitUntil(function() {
+            return processedArray;
+        }).then(function() {
+            expect(processedArray).toEqual([]);
+        }).always(done);
+    });
 
-                    AsyncProcess.array(items).done(function(result) {
-                        processedArray = result;
-                    });
+    it('If no process function passed, returns initial array', function(done) {
+        var processedArray;
 
-                    jasmine.waitUntil(function() {
-                        return processedArray;
-                    }).then(function() {
-                        expect(processedArray).toEqual(items);
-                    }).always(done);
-                });
-            });
+        AsyncProcess.array(items).done(function(result) {
+            processedArray = result;
         });
-}(require));
+
+        jasmine.waitUntil(function() {
+            return processedArray;
+        }).then(function() {
+            expect(processedArray).toEqual(items);
+        }).always(done);
+    });
+});