1

Using RequireJS successfully for a single page application for quite some time. Finally adding JS unit tests to exercise model classes. I have a single config for src modules and another for test modules. (I want to keep test files out of the shipping distribution)

I can load src from index.html and test from LocationTest.html only if both files are in the same top-level folder. I would like to move LocationTest.html inside the test folder, but no change to data-main or the test config file seems to work.

Here is the file layout for the happy path...

/www

 - index.html
 - LocationTest.html
 - js
   - src
     - lib
       - require.js
       - require_src_config.js
       - require_main.js
       - require_test_config.js
       - require_test.js
     - model
       - Location.js
       - (other src model classes)
  - test
     - lib
       - (jasmine libs)
     - model
       - LocationTest.js
       - (other test model classes eventually)

index.html

...
    <script type='text/javascript' data-main='js/src/lib/require_main' src='js/src/lib/require.js'></script>
...

LocationTest.html

...
    <script type='text/javascript' data-main='js/src/lib/require_test' src='js/src/lib/require.js'></script>
...

js/src/lib/require_src_config.js

requirejs.config({

    // Base URL for main application
    baseUrl: 'js',

    // Shortcuts to modules relative to baseUrl
    paths: {
        Location:   'src/model/Location'
        (many other modules...)
    }
});

js/src/lib/require_test_config.js

requirejs.config({

    baseUrl: 'js',

    // Paths (no extension)
    paths: {

        // Tests
        LocationTest:       'test/model/LocationTest',

        // Framework
        jasmine:            'test/lib/jasmine/jasmine',
        jasmineHtml:        'test/lib/jasmine/jasmine-html',
        jasmineBoot:        'test/lib/jasmine/boot',
    },

    // Make external libraries compatible with requirejs (AMD)
    shim: {
        jasmineHtml: {
            deps : ['jasmine']
        },
        jasmineBoot: {
            deps : ['jasmine', 'jasmineHtml']
        }
    }
});

js/src/lib/require_main.js

requirejs(['./require_src_config'], function (require_src_config) {

    (Application Code)

});

js/src/lib/require_test.js

requirejs(['./require_src_config'], function (require_src_config) {
    requirejs(['./src/lib/require_test_config'], function (require_test_config) {
        requirejs(['jasmineBoot'], function (require) {
            requirejs(['LocationTest'], function (LocationTest) {
                // Trigger Jasmine
                window.onload();
            });
        });
    });
});

The above all works, although I do not understand why I had to revise the path to require_config_test.js in require_test.js. The baseUrl for both configs is 'js'.

I would like to move LocationTest.html to js/test/model.

1) What should my data-main be set to?
2) How (and why) does this impact require_test.js settings?
3) Is there a better way to nest (or not) the configs for src and test to ensure src gets loaded first?

I was hoping to only have to set data-main to the path of the file with the entrypoint and be flexible to move things around. Thanks for your help!

0

Browse other questions tagged or ask your own question.