Page MenuHomePhabricator

mw.loader.using is not loading QUnit properly?
Closed, InvalidPublic

Description

  1. Create a wiki page with the following content and save it:
<div id="qunit"></div>
<div id="qunit-fixture"></div>
  1. Open browser's console and paste the following code into it:
mw.loader.using('jquery.qunit').done(function () {
    QUnit.test( "one", function( assert ) {
        assert.ok( 1 == "1", "Passed!" );
    });
    QUnit.test( "two", function( assert ) {
        assert.ok( 2 == "2", "Passed!" );
    });
    QUnit.test( "three", function( assert ) {
        assert.ok( 3 == "3", "Passed!" );
    });
});

The test-runner will halt while "Running" the tests and won't finish.

The following warning is shown in Firefox's console:

performance.measure could not be executed because of  An invalid or illegal string was specified

Strangely, if I delete any one of the three tests, then the other two will pass successfully.

  1. But if I run the same tests by loading QUnit from their original site, i.e.:
jQuery.getScript('https://code.jquery.com/qunit/qunit-2.9.1.js').done(function () {
    QUnit.test( "one", function( assert ) {
        assert.ok( 1 == "1", "Passed!" );
    });
    QUnit.test( "two", function( assert ) {
        assert.ok( 2 == "2", "Passed!" );
    });
    QUnit.test( "three", function( assert ) {
        assert.ok( 3 == "3", "Passed!" );
    });
});

$('<link/>', {
    rel: 'stylesheet',
    type: 'text/css',
    href: 'https://code.jquery.com/qunit/qunit-2.9.1.css'
}).appendTo('head');

now all three tests pass successfully.

I'm not good with JavaScript, I might be doing something wrong, otherwise I'm suspicious that mw.loader.using is not loading the QUnit properly. I expect the code in step 2 to work the same way as loading the libraries from the original site (step 3).

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Dalba updated the task description. (Show Details)

There are strange race conditions when loading QUnit asynchronously, as it usually starts immediately, will then fail on the missing tests (which are defined only afterwards), and then be confused on the newly added tests. What you want to do is:

//delay running of QUnit until tests are defined
window.QUnit = {
    config: {
        autostart: false
    }
};
mw.loader.using('jquery.qunit').done(function () {
    QUnit.test( "one", function( assert ) {
        assert.ok( 1 == "1", "Passed!" );
    });
    QUnit.test( "two", function( assert ) {
        assert.ok( 2 == "2", "Passed!" );
    });
    QUnit.test( "three", function( assert ) {
        assert.ok( 3 == "3", "Passed!" );
    });
    QUnit.start(); //now start running QUnit
});

This let's you control when QUnit starts running.

Dalba closed this task as Invalid.EditedJan 29 2019, 10:03 AM

It worked! Thank you so much @Schnark !