Loading dependencies within JS tests

[Vinai]

The problem is custom jquery plugin extensions are not initialized.
On a page I'm loading jquery and a custom plugin jcanvas.

On the page on the frontend I'm the also loading a custom extension, and all works well.
Doing the same in a test however does not work as expected.

How can I ensure all requirements for a test are loaded?

Background to reproduce:

This is my requirejs-config.js from the example module

var config = {
    map: {
        '*': {
            jcanvas: 'Example_Module/js/jcanvas',
            example: 'Example_Module/js/example'
        }
    }
};

This is the little custom extension, its only purpose it to allow me to create a test for it

define(["jquery", "jcanvas"], function ($) {
    $.jCanvas.extend({
        name: 'drawAnotherLine',
        props: {},
        fn: function (ctx, params) {
            var canvas = $(ctx.canvas);
            canvas.drawLine({
                strokeStyle: '#000',
                strokeWidth: 3,
                x1: 0, y1: canvas.height(),
                x2: canvas.width(), y2: 0
            });
        }
    });
});

Here is the code from the template

    <canvas width="300" height="100" id="exampleCanvas"></canvas>
    <script type="text/javascript">
        require(['jquery', 'jcanvas', 'example'], function ($) {
            var canvas = $('#exampleCanvas');
            canvas.drawAnotherLine();
        });
    </script>

The above far everything works fine when visiting a page in a browser.

The example test however doesn't succeed:

ExampleTest = TestCase('Example');
ExampleTest.prototype.setUp = function() {
    /*:DOC += <canvas width="100" height="70" id="testCanvas"></canvas>*/
    this.canvas = jQuery('#testCanvas');
};
ExampleTest.prototype.testInit = function() {
    assertTypeOf('this.canvas', 'object', this.canvas);
    assertTypeOf('this.canvas.drawLine', 'function', this.canvas.drawLine);
    assertTypeOf('this.canvas.drawAnotherLine', 'function', this.canvas.drawAnotherLine);
};

The first two assertions succeed. So jQuery and jCanvas must be loaded.
But the third assertion testing for the custom function fails, this.canvas.drawAnotherLine is undefined.

% java -jar "JsTestDriver-1.3.5.jar" --config "jsTestDriver.conf" --reset --port 9876 --browser "/Applications/Firefox.app/Contents/MacOS/firefox" --raiseOnFailure true --tests Example --captureConsole
setting runnermode QUIET
Firefox: Reset
F
Total 1 tests (Passed: 0; Fails: 1; Errors: 0) (3,00 ms)
  Firefox 34.0 Mac OS: Run 1 tests (Passed: 0; Fails: 1; Errors 0) (3,00 ms)
    Example.testInit failed (3,00 ms): AssertError: this.canvas.drawAnotherLine expected to be function but was undefined
      ExampleTest.prototype.testInit@http://localhost:9876/test//Volumes/CaseSensitive/Workspace/m2.dev/htdocs/app/code/Example/Module/tests/js/testsuite/example.js:11:5

Finally, here is my jsTestDriver.conf

server: http://localhost:9876
load:
  - ../../../lib/web/jquery/jquery.js
  - ../../../lib/web/jquery/jquery-migrate.js
  - ../../../lib/web/jquery/jquery-ui-1.9.2.js
  - ../../../dev/tests/js/framework/requirejs-util.js
  - ../../../lib/web/jquery/jquery.cookie.js
  - ../../../lib/web/mage/apply/main.js
  - ../../../lib/web/mage/mage.js
  - ../../../lib/web/mage/decorate.js
  - ../../../lib/web/jquery/jquery.validate.js
  - ../../../lib/web/jquery/jquery.metadata.js
  - ../../../lib/web/mage/translate.js
  - ../../../lib/web/mage/requirejs/plugin/id-normalizer.js
  - ../../../dev/tests/js/framework/qunit/qunit-1.14.0.js
  - ../../../dev/tests/js/framework/stub.js
  - ../../../lib/web/mage/webapi.js
  - ../../../lib/web/mage/validation/validation.js
  - ../../../lib/web/jquery/jquery.tmpl.min.js
  - ../../../app/code/Magento/DesignEditor/view/adminhtml/web/js/infinitescroll.js
  - ../../../lib/web/jquery/jstree/jquery.jstree.js
  - ../../../lib/web/jquery/jquery-ui-timepicker-addon.js
  - ../../../lib/web/mage/cookies.js
  - ../../../lib/web/mage/calendar.js
  - ../../../lib/web/mage/loader_old.js
  - ../../../lib/web/mage/edit-trigger.js
  - ../../../lib/web/mage/translate-inline.js
  - ../../../lib/web/mage/translate-inline-vde.js
  - ../../../lib/web/mage/backend/form.js
  - ../../../lib/web/mage/backend/button.js
  - ../../../lib/web/mage/backend/tabs.js
  - ../../../lib/web/mage/backend/menu.js
  - ../../../lib/web/mage/backend/suggest.js
  - ../../../lib/web/mage/backend/tree-suggest.js
  - ../../../lib/web/mage/gallery.js
  - ../../../lib/web/mage/gallery-fullscreen.js
  - ../../../lib/web/mage/zoom.js
  - ../../../app/code/Example/Module/view/frontend/web/js/jcanvas.js # the jquery plugin
  - ../../../app/code/Example/Module/view/frontend/web/js/example.js # my example plugin extension
test:
  - ../../../dev/tests/js/testsuite/lib/ko/datepicker/datepicker.js
  - ../../../dev/tests/js/testsuite/lib/storage/test-storage.js
  - ../../../dev/tests/js/testsuite/mage/_demo/test.js
  - ../../../dev/tests/js/testsuite/mage/accordion/accordion.js
  - ../../../dev/tests/js/testsuite/mage/button/button-test.js
  - ../../../dev/tests/js/testsuite/mage/calendar/calendar-qunit.js
  - ../../../dev/tests/js/testsuite/mage/calendar/calendar-test.js
  - ../../../dev/tests/js/testsuite/mage/calendar/date-range-test.js
  - ../../../dev/tests/js/testsuite/mage/collapsible/test-collapsible.js
  - ../../../dev/tests/js/testsuite/mage/design_editor/adminhtml/js/infinitescroll.js
  - ../../../dev/tests/js/testsuite/mage/dropdown/test-dropdown.js
  - ../../../dev/tests/js/testsuite/mage/edit_trigger/edit-trigger-test.js
  - ../../../dev/tests/js/testsuite/mage/form/form-test.js
  - ../../../dev/tests/js/testsuite/mage/gallery/gallery-fullscreen-test.js
  - ../../../dev/tests/js/testsuite/mage/gallery/gallery-test.js
  - ../../../dev/tests/js/testsuite/mage/list/jquery-list-test.js
  - ../../../dev/tests/js/testsuite/mage/loader/jquery-loader-test.js
  - ../../../dev/tests/js/testsuite/mage/loader/loader-test.js
  - ../../../dev/tests/js/testsuite/mage/menu/test-menu.js
  - ../../../dev/tests/js/testsuite/mage/requirejs/plugin/id-normalizer-test.js
  - ../../../dev/tests/js/testsuite/mage/search/regular-search-test.js
  - ../../../dev/tests/js/testsuite/mage/suggest/suggest-test.js
  - ../../../dev/tests/js/testsuite/mage/suggest/tree-suggest-test.js
  - ../../../dev/tests/js/testsuite/mage/tabs/tabs-test.js
  - ../../../dev/tests/js/testsuite/mage/tabs/tabs.js
  - ../../../dev/tests/js/testsuite/mage/translate/translate-test.js
  - ../../../dev/tests/js/testsuite/mage/translate_inline/translate-inline-test.js
  - ../../../dev/tests/js/testsuite/mage/translate_inline_vde/translate-inline-vde-dialog-test.js
  - ../../../dev/tests/js/testsuite/mage/translate_inline_vde/translate-inline-vde-test.js
  - ../../../dev/tests/js/testsuite/mage/validation/test-validation.js
  - ../../../dev/tests/js/testsuite/mage/zoom/zoom-test.js
  - ../../../dev/tests/js/testsuite/mage/decorate-test.js
  - ../../../dev/tests/js/testsuite/mage/mage-test.js
  - ../../../dev/tests/js/testsuite/mage/webapi-test.js
  - ../../../app/code/Example/Module/tests/js/testsuite/example.js # my test

[guz-anton]

HI @Vinai ,
JsTestDriver not convenient for work with async loading JavaScript.
As workaround you can cover your 'jcanvas', 'example' as UMD plugins.
Then directly place on page (what already done in your example).

[Vinai]

Thanks for the input! I'll try to understand how I can cover the example as an UMD plugin.

[verklov]

@Vinai, we'd like to hear back from you. Do you need further assistance from the team on this issue?

[Vinai]

Thanks for the follow up @verklov! With the developer beta forum ans work I haven't had any time to dig further into this issue, but I plan on doing so when I have a little space.

[verklov]

No problem @Vinai :-) We will be waiting for update from you.

[vpelipenko]

@Vinai, do you have any updates around this issue?

[vpelipenko]

Closed due to contributor's inactivity during last 2 weeks. @Vinai, if you have any other suggestions about improving Magento js testing, please, feel free to reopen this issue or create new one.