karma-jasmine-jquery
karma-jasmine-jquery copied to clipboard
Jquery plugins issue with requireJS
I have an issue with the Jquery plugins I am loading through requireJS, being attached to $j rather than what is used by the code I am testing (which all use 'jQuery' to refer to jQuery instance)
So, to be clear, in my RequireJS config I have:
shim: {
'vendor/jquery': {
'exports': 'jQuery'
},
'vendor/jquery-ui': [ 'vendor/jquery' ]
And the code I am testing is setup this way:
define([
'vendor/jquery',
'vendor/jquery-ui'
], function (jQuery) {
So I have confirmed that $j shows the jquery-ui as being defined (widget and ui properties are defined for example), but neither $ or jQuery have have any ui definitions registered into it therefore my code although it finds jQuery reference, it fails because it does not find jquery-ui component specific calls.
I am not able to change the way the code is tested as it is part of a large team project. I am hoping to somehow route the jQuery instance or plugins properly so that they are found by my code. Is there any way to set this up?
Thanks in advance! Danny
Anyone have any idea on this? I'm still stuck :/
Your declaration of jquery-ui visible in $ or $j?
Hi, jquery-ui declaration is visible only in $j. Hope that helps, thanks
@bessdsv Where you able to look into this? This is still an issue for me :/ Any help or direction is really appreciated.
can you show your karma framework and source declaration (karma.conf)?
Hi, here is my karma.conf.js
module.exports = function (config) {
var conf = {
basePath: '.',
frameworks: ['jasmine-jquery', 'jasmine', 'requirejs'],
files: [
'test/karma-requirejs-main.js', //karma's own requirejs bootstrapping
{ pattern: 'bower_components/akamai-analytics/akamai-html5.js', included: false},
{ pattern: 'bower_components/jquery/dist/jquery.js', included: false},
{ pattern: 'bower_components/jquery-cookie/jquery.cookie.js', included: false},
{ pattern: 'bower_components/jquery-ui/jquery-ui.js', included: false},
{ pattern: 'bower_components/jquery-mousewheel/jquery.mousewheel.js', included: false},
{ pattern: 'bower_components/loglevel/dist/loglevel.js', included: false},
{ pattern: 'bower_components/swfobject-amd/swfobject.js', included: false},
{ pattern: 'bower_components/videojs/dist/video-js/video.js', included: false},
{ pattern: 'src/assets/js/**/*.js', included: false },
{ pattern: 'test/fixtures/*.html', included: false },
{ pattern: 'test/**/*.spec.js', included: false }
],
//excluding the app's actual requirejs config, since this will confuse karma(karma uses its own at 'test/karma-requirejs-main.js'
exclude: ['src/assets/js/main.js', 'src/assets/js/lib/wm/js/widget-manager.js'],
//reporter to use for test results
//possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
reporters: ['progress', 'junit'],
junitReporter: {
outputFile: 'reports/test-results/test-results.xml'
},
//web server port
port: 9876,
//enable/disable colors in console output
colors: true,
//level of logging
//possible values: config.LOG_DISABLE, config.LOG_ERROR, config.LOG_INFO, config.LOG_DEBUG
logLevel: config.LOG_INFO,
autoWatch: false,
//browsers
//currently available: Chrome, Chrome Canary, Firefox, Opera (needs 'npm install karma-opera-launcher'),
//Safari (needs 'npm install karma-safari-launcher' and only works with mac), PhantomJS,
// IE (needs 'npm install karma-ie-launcher' and only works with windows)
browsers: ['PhantomJS'],
captureTimeout: 80000,
//The background option will tell grunt to run karma in a child process so it doesn't block subsequent grunt tasks.
//Since Karma is setup to run separate/unchained from any of our tasks, it is currently set to false.
background: false,
//Continuous integration mode
//if true, it capture browsers, runs tests and exit. If false, browsers remain open continuously running the tests as you code.
singleRun: true
};
config.set(conf);
return conf;
};
Here is my require JS config for karma/jasmine:
var allTestFiles = [];
var TEST_REGEXP = /(spec|test)\.js$/i;
var ASSETS_JS_REGEXP = /src\/assets\/js\//;
var modules = [];
var pathToModule = function (path) {
return path.replace(/^\/base\/src\/assets\/js\//, '').replace(/\.js$/, '');
};
var pathToSpecsModule = function (path) {
return path.replace(/^\/base\/players\/assets\/js\//, ''); //path.replace(/^\/base\//, '').replace(/\.js$/, '');
};
Object.keys(window.__karma__.files).forEach(function (file) {
if (TEST_REGEXP.test(file)) {
//Normalize spec file paths to RequireJS module names.
allTestFiles.push(pathToSpecsModule(file));
} else if (ASSETS_JS_REGEXP.test(file)) {
//Pushing all src/assets/js files, normalizing to requirejs module names
modules.push(pathToModule(file));
}
});
var startTest = function () {
//modules need to be loaded right away for accurate coverage reporting
require(modules, function () {
window.__karma__.start();
});
};
require.config({
// Karma serves files under /base, which is the basePath from your config file
baseUrl: '/base/src/assets/js',
paths: {
'vendor/akamai-html5': '../../../bower_components/akamai-analytics/akamai-html5',
'vendor/jquery': '../../../bower_components/jquery/dist/jquery',
'vendor/jquery.cookie': '../../../bower_components/jquery-cookie/jquery.cookie',
'vendor/jquery-ui': '../../../bower_components/jquery-ui/jquery-ui',
'vendor/jquery.mousewheel': '../../../bower_components/jquery-mousewheel/jquery.mousewheel',
'vendor/loglevel': '../../../bower_components/loglevel/dist/loglevel',
'vendor/swfobject': '../../../bower_components/swfobject-amd/swfobject',
'vendor/videojs': '../../../bower_components/videojs/dist/video-js/video'
},
shim: {
'vendor/jquery': {
'exports': 'jQuery'
},
'vendor/jquery-ui': [ 'vendor/jquery' ],
'vendor/jquery.cookie': [ 'vendor/jquery' ],
'vendor/jquery.mousewheel': [ 'vendor/jquery' ],
'vendor/ua-parser': {
'exports' : 'UAParser'
},
'vendor/video': {
'exports' : 'video'
}
},
// dynamically load all test files
deps: allTestFiles,
// we have to kickoff jasmine, as it is asynchronous
callback: startTest
});
//sets the target path for fixture loading
jasmine.getFixtures().fixturesPath = '/base/test/fixtures';
Hope you can find something here. Thanks
can you send me the final html head that karma generated, with a list of files js? Do you see frameworks files? and list of js files wich load requirejs?
@bessdsv Let me know how I can output this and I will copy it over to you. Thank you