Jquery plugins issue with requireJS

[embpdaniel]

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

[embpdaniel]

Anyone have any idea on this? I'm still stuck :/

[bessdsv]

Your declaration of jquery-ui visible in $ or $j?

[embpdaniel]

Hi, jquery-ui declaration is visible only in $j. Hope that helps, thanks

[embpdaniel]

@bessdsv Where you able to look into this? This is still an issue for me :/ Any help or direction is really appreciated.

[bessdsv]

can you show your karma framework and source declaration (karma.conf)?

[embpdaniel]

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

[bessdsv]

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?

[embpdaniel]

@bessdsv Let me know how I can output this and I will copy it over to you. Thank you