require using AMD pattern gives error for jQuery UI events

Question

In my code test.js is dependent on jquery-ui which does not uses require AMD pattern and test.spec.js dependent on jquery-ui, test.js which uses AMD pattern. Can we load dependency of jquery-ui in test.js dynamically when running test.spec.js.

require.config({

    baseUrl: '/demo',

    paths: {
        'jquery': '../library/jquery-1.11.1',
        'jquery-ui': '../library/jquery-ui-1.11.4'
    },
    shim: {
        'jquery': {
            exports: 'jQuery'
        },
        'jquery-ui': {
            deps: ['jquery']
        },
        'library/src/js/test': {
            deps: ['library/jquery-1.11.1', 'library/jquery-ui-1.11.4', '../js/collapse'],
            exports: 'Test'
        }
    },
    callback: window.__karma__.start
});

In test.js "draggable" of jquery-ui draggable event is written. after evaluating $('#panelId').draggable({revert: true}); got error

"TypeError: 'undefined' is not a function (evaluating '$('#panelId').draggable({revert: true})')"

How to load jquery-ui for test.js in require.config. As i am using this to run my jasmine test cases. In real environment it is working as expected, but in jasmine test case not able to find jquery-ui event. test.js is not using require.js, but test.spec.js uses the require AMD pattern.

in test.spec.js code after executing this got error of jquery-ui draggable undefined

define(['jquery-ui','library/src/js/test'], function ($) {

});

I am able to access jquery ui in test.spec.js using $, not in test.js where jquery-ui event is written as test.js does not uses AMD require pattern. Don't know what is missing. any help will be appriciated... :)

Answer 1

Try this updated require js config

Use "library/src/js/test" to load your test

require.config({

    baseUrl: '/demo',

    paths: {

        'jquery': '../library/jquery-1.11.1', // assuming this is a correct path
        'jquery-ui': '../library/jquery-ui-1.11.4'  // assuming this is a correct path
    },
    shim: {
        'jquery': {
            exports: 'jQuery'
        },
        'jquery-ui': {
            deps: ['jquery']
        },
        'library/src/js/test': {
            deps: ['jquery', 'jquery-ui', '../js/collapse'], // changes done here
            exports: 'Test'
        }
    },
    callback: window.__karma__.start
});