Karma + PhantomJS + Jasmine + Kendo UI component not rendering during test - kendo-ui

Question

Relatively lengthy question here, so bear with me please.
I have been trying to add unit testing to our client-side code for awhile now, and finally got the go ahead to take the time to do it. We use AMD (requirejs) as of now, but that is also something I am exploring switching out of. So the past few days I have been working on getting some of the testing infrastructure in place for our current setup, and am using phantomJS, Karma, and Jasmine to test from the terminal. I have run into a problem with the rendering of Kendo components, so before I dive any deeper, I wanted to ask here to see if anybody know if:
What is the problem caused by.
How to fix it in our setup files.
Some background on:
All our library scripts are loaded locally with requirejs. jQuery and kendoui are loaded statically via script tags (something to do with globalization not working correctly when doing it via requirejs).
When I try to test a Marionette View that wraps a Kendo component, I get "$el.kendoGrid" is not a function. The "kendo" global is however attached to window.
karma.conf.js:
// Karma configuration
// Generated on Wed Dec 28 2016 13:38:24 GMT-0600 (Central Standard Time)
module.exports = function (config) {
"use strict";
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
// Loads jQuery and kendoui statically via a script tag so the globals are available as expected by our
// source JavaScript files.
'web-libs-common/src/main/resources/META-INF/resources/static/js/lib/jquery/jquery.js',
'web-libs-common/src/main/resources/META-INF/resources/static/js/lib/kendoui/kendo.all.js',
// Load requirejs and its karma adapter after making the above scripts available.
'node_modules/requirejs/require.js',
'node_modules/karma-requirejs/lib/adapter.js',
//The following patterns make the files available to be loaded by requireJS.
{pattern: 'healthems-web/test/js/**/*.js', included: false}, //Make the test files available, but do not load.
//Make the source files available, but do not load
{pattern: 'healthems-web/src/main/resources/META-INF/resources/static/js/**/*.js', included: false},
//Make the library files available but do not load.
{
pattern: 'web-libs-common/src/main/resources/META-INF/resources/static/js/lib/**/*.js',
included: false
},
//Make the html templates available but do not load.
{pattern: 'healthems-web/src/main/resources/META-INF/resources/static/html/**/*.html', included: false},
//Make the test_utils directory available, but do not load.
{pattern: 'test_utils/*.js', included: false},
{pattern: 'node_modules/squirejs/src/Squire.js', included: false},
'test-main.js'
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['spec'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO ||
// config.LOG_DEBUG
logLevel: config.LOG_ERROR,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['PhantomJS'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
});
};
test-main.js:
"use strict";
var allTestFiles = [];
var TEST_REGEXP = /(spec|test)\.js$/i;
// Get a list of all the test files to include
Object.keys(window.__karma__.files).forEach(function (file) {
if (TEST_REGEXP.test(file)) {
// Normalize paths to RequireJS module names.
// If you require sub-dependencies of test files to be loaded as-is (requiring file extension)
// then do not normalize the paths
var normalizedTestModule = file.replace(/^\/base\/|\.js$/g, '');
allTestFiles.push(normalizedTestModule);
}
});
var baseLibPath = "web-libs-common/src/main/resources/META-INF/resources/static/js/";
var baseAppPath = "healthems-web/src/main/resources/META-INF/resources/static/js/";
var baseTemplatePath = "healthems-web/src/main/resources/META-INF/resources/static/";
require.config({
// Karma serves files under /base, which is the basePath from your config file
baseUrl: '/base',
map: {
'*': {
underscore: 'lodash'
}
},
paths: {
'app': baseAppPath + 'app',
'backbone': baseLibPath + 'lib/backbonejs/backbone',
'backbone.marionette': baseLibPath + 'lib/backbonejs/backbone.marionette',
'backbone.paginator': baseLibPath + 'lib/backbonejs/backbone.paginator',
'backbone.validation': baseLibPath + 'lib/backbonejs/backbone.validation',
'format': baseAppPath + 'format',
'jquery.ui': baseLibPath + 'lib/jquery/jquery.ui',
'jquery.waypoints': baseLibPath + 'lib/jquery/jquery.waypoints',
'jquery.waypoints.sticky': baseLibPath + 'lib/jquery/jquery.waypoints.sticky',
'kendoui': baseLibPath + 'lib/kendoui/kendo.all',
'json3': baseLibPath + 'lib/json3',
'jstz': baseLibPath + 'lib/jstz',
'jszip': baseLibPath + 'lib/kendoui/jszip.min',
'jquery': baseLibPath + 'lib/jquery/jquery',
'lodash': baseLibPath + 'lib/lodash',
'mocks': 'test_utils/defaultMocks',
'moment': baseLibPath + 'lib/momentjs/moment-with-locales',
'moment.timezone': baseLibPath + 'lib/momentjs/moment-timezone-with-data',
'rsvp': baseLibPath + 'lib/rsvp',
'sockjs': baseLibPath + 'lib/sockjs',
'spin': baseLibPath + 'lib/spin',
'stomp': baseLibPath + 'lib/stomp',
'Squire': 'node_modules/squirejs/src/Squire',
'template': baseTemplatePath + 'html/template',
'text': baseLibPath + 'lib/requirejs-text/text',
'util': baseAppPath + 'util',
'sprintf': baseLibPath + 'lib/sprintf'
},
shim: {
'jstz': {
exports: 'jstz'
},
'jquery.waypoints': {
deps: ['jquery'],
exports: 'Waypoint'
},
'jquery.waypoints.sticky': {
deps: ['jquery.waypoints'],
exports: 'Waypoint.Sticky'
},
'spin': {
exports: 'Spinner'
},
'stomp': {
exports: 'Stomp'
},
'sprintf': {
exports: 'sprintf'
}
}
// dynamically load all test files
//deps: allTestFiles,
// we have to kickoff jasmine, as it is asynchronous
//callback: window.__karma__.start
});
require(allTestFiles, function () {
window.__karma__.start();
});
Our main app requirejs config:
global.requirejs.config({
map: {
'*': {
underscore: 'lodash'
}
},
paths: {
'backbone': 'lib/backbonejs/backbone',
'backbone.marionette': 'lib/backbonejs/backbone.marionette',
'backbone.paginator': 'lib/backbonejs/backbone.paginator',
'backbone.validation': 'lib/backbonejs/backbone.validation',
'jquery.ui': 'lib/jquery/jquery.ui',
'jquery.waypoints': 'lib/jquery/jquery.waypoints',
'jquery.waypoints.sticky': 'lib/jquery/jquery.waypoints.sticky',
'json3': 'lib/json3',
'jstz': 'lib/jstz',
'jszip': 'lib/kendoui/jszip.min',
'lodash': 'lib/lodash',
'moment': 'lib/momentjs/moment-with-locales',
'moment.timezone': 'lib/momentjs/moment-timezone-with-data',
'rsvp': 'lib/rsvp',
'sockjs': 'lib/sockjs',
'spin': 'lib/spin',
'stomp': 'lib/stomp',
'template': '../html/template',
'text': 'lib/requirejs-text/text',
'sprintf': 'lib/sprintf'
},
shim: {
'jstz': {
exports: 'jstz'
},
'jquery.waypoints': {
deps: ['jquery'],
exports: 'Waypoint'
},
'jquery.waypoints.sticky': {
deps: ['jquery.waypoints'],
exports: 'Waypoint.Sticky'
},
'spin': {
exports: 'Spinner'
},
'stomp': {
exports: 'Stomp'
},
'sprintf': {
exports: 'sprintf'
}
}
});
define('jquery', [], function() {
return window.jQuery;
});
define('kendoui', [], function() {
window.kendo.culture("en-US");
window.kendo.culture().numberFormat.currency.pattern[0] = "-$n";
return window.kendo;
});
I am very new to node, and have limited experience with karma, jasmine, and phantomJS, so I've been rolling around on my back for awhile now trying to figure this out, so any help would be excellent. Thanks!