Skip to content

Commit 341c6d1

Browse files
mgolmgol
authored
Build: Make Karma work in ES modules mode
Also, run such a suite in CI to make sure modules are working as expected when used directly. Closes gh-4550
1 parent f37c2e5 commit 341c6d1

10 files changed

+188
-131
lines changed

‎.travis.yml

+14
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,20 @@ matrix:
1717
addons:
1818
chrome: stable
1919
firefox: latest
20+
# Run ES module tests.
21+
- node_js: "12"
22+
env:
23+
- NPM_SCRIPT="test:esmodules"
24+
- BROWSERS="ChromeHeadless"
25+
addons:
26+
chrome: stable
27+
# Run AMD tests.
28+
- node_js: "12"
29+
env:
30+
- NPM_SCRIPT="test:amd"
31+
- BROWSERS="ChromeHeadless"
32+
addons:
33+
chrome: stable
2034
# Run tests on Firefox ESR as well.
2135
- node_js: "12"
2236
env:

‎Gruntfile.js

+39-27
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,14 @@ module.exports = function( grunt ) {
141141
]
142142
}
143143
],
144+
client: {
145+
qunit: {
146+
147+
// We're running `QUnit.start()` ourselves via `loadTests()`
148+
// in test/jquery.js
149+
autostart: false
150+
}
151+
},
144152
files: [
145153
"test/data/jquery-1.9.1.js",
146154
"node_modules/sinon/pkg/sinon.js",
@@ -150,32 +158,6 @@ module.exports = function( grunt ) {
150158

151159
"test/jquery.js",
152160

153-
// Replacement for testinit.js#loadTests()
154-
"test/data/testrunner.js",
155-
"test/unit/basic.js",
156-
"test/unit/core.js",
157-
"test/unit/callbacks.js",
158-
"test/unit/deferred.js",
159-
"test/unit/deprecated.js",
160-
"test/unit/support.js",
161-
"test/unit/data.js",
162-
"test/unit/queue.js",
163-
"test/unit/attributes.js",
164-
"test/unit/event.js",
165-
"test/unit/selector.js",
166-
"test/unit/traversing.js",
167-
"test/unit/manipulation.js",
168-
"test/unit/wrap.js",
169-
"test/unit/css.js",
170-
"test/unit/serialize.js",
171-
"test/unit/ajax.js",
172-
"test/unit/effects.js",
173-
"test/unit/offset.js",
174-
"test/unit/dimensions.js",
175-
"test/unit/animation.js",
176-
"test/unit/tween.js",
177-
"test/unit/ready.js",
178-
179161
{ pattern: "dist/jquery.*", included: false, served: true },
180162
{ pattern: "src/**", type: "module", included: false, served: true },
181163
{ pattern: "amd/**", included: false, served: true },
@@ -195,6 +177,36 @@ module.exports = function( grunt ) {
195177
main: {
196178
browsers: isTravis && travisBrowsers || [ "ChromeHeadless", "FirefoxHeadless" ]
197179
},
180+
esmodules: {
181+
browsers: isTravis && travisBrowsers || [ "ChromeHeadless" ],
182+
options: {
183+
client: {
184+
qunit: {
185+
186+
// We're running `QUnit.start()` ourselves via `loadTests()`
187+
// in test/jquery.js
188+
autostart: false,
189+
190+
esmodules: true
191+
}
192+
}
193+
}
194+
},
195+
amd: {
196+
browsers: isTravis && travisBrowsers || [ "ChromeHeadless" ],
197+
options: {
198+
client: {
199+
qunit: {
200+
201+
// We're running `QUnit.start()` ourselves via `loadTests()`
202+
// in test/jquery.js
203+
autostart: false,
204+
205+
amd: true
206+
}
207+
}
208+
}
209+
},
198210

199211
jsdom: {
200212
options: {
@@ -206,7 +218,7 @@ module.exports = function( grunt ) {
206218
// choosing a version etc. for jsdom.
207219
"dist/jquery.js",
208220

209-
// Replacement for testinit.js#loadTests()
221+
// A partial replacement for testinit.js#loadTests()
210222
"test/data/testrunner.js",
211223

212224
// jsdom only runs basic tests

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,9 @@
7272
"start": "grunt watch",
7373
"test:browserless": "grunt && grunt test:slow",
7474
"test:browser": "grunt && grunt karma:main",
75-
"test": "grunt && grunt test:slow && grunt karma:main",
75+
"test:esmodules": "grunt && grunt karma:esmodules",
76+
"test:amd": "grunt && grunt karma:amd",
77+
"test": "grunt && grunt test:slow && grunt karma:main && grunt karma:esmodules && grunt karma:amd",
7678
"jenkins": "npm run test:browserless"
7779
},
7880
"commitplease": {

‎test/data/testinit-jsdom.js

+14
Original file line numberDiff line numberDiff line change
@@ -41,3 +41,17 @@ function url( value ) {
4141
return baseURL + value + ( /\?/.test( value ) ? "&" : "?" ) +
4242
new Date().getTime() + "" + parseInt( Math.random() * 100000, 10 );
4343
}
44+
45+
// The file-loading part of testinit.js#loadTests is handled by
46+
// jsdom Karma config; here we just need to trigger relevant APIs.
47+
this.loadTests = function() {
48+
49+
// Delay the initialization until after all the files are loaded
50+
// as in the JSDOM case we load them via Karma (see Gruntfile.js)
51+
// instead of directly in testinit.js.
52+
window.addEventListener( "load", function() {
53+
window.__karma__.start();
54+
jQuery.noConflict();
55+
QUnit.start();
56+
} );
57+
};

‎test/data/testinit.js

+8-3
Original file line numberDiff line numberDiff line change
@@ -301,10 +301,11 @@ this.loadTests = function() {
301301

302302
// QUnit.config is populated from QUnit.urlParams but only at the beginning
303303
// of the test run. We need to read both.
304-
var amd = QUnit.config.amd || QUnit.urlParams.amd;
304+
var esmodules = QUnit.config.esmodules || QUnit.urlParams.esmodules,
305+
amd = QUnit.config.amd || QUnit.urlParams.amd;
305306

306307
// Directly load tests that need evaluation before DOMContentLoaded.
307-
if ( !amd || document.readyState === "loading" ) {
308+
if ( ( !esmodules && !amd ) || document.readyState === "loading" ) {
308309
document.write( "<script src='" + parentUrl + "test/unit/ready.js'><\x2Fscript>" );
309310
} else {
310311
QUnit.module( "ready", function() {
@@ -360,7 +361,11 @@ this.loadTests = function() {
360361
}
361362

362363
} else {
363-
QUnit.load();
364+
if ( window.__karma__ && window.__karma__.start ) {
365+
window.__karma__.start();
366+
} else {
367+
QUnit.load();
368+
}
364369

365370
/**
366371
* Run in noConflict mode

‎test/index.html

+10-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<!-- See testinit for the list of tests -->
2020
<script src="data/testinit.js"></script>
2121

22-
<!-- A script that includes jQuery min, dev, ES modules or AMD -->
22+
<!-- A script that includes jQuery min, dev, ES modules or AMD modules -->
2323
<!-- Adds "basic" URL option, even to iframes -->
2424
<!-- iframes will not load AMD as loading needs to be synchronous for some tests -->
2525
<!-- Also executes the function above to load tests -->
@@ -29,7 +29,15 @@
2929
// Load tests if they have not been loaded
3030
// This is in a different script tag to ensure that
3131
// jQuery is on the page when the testrunner executes
32-
if ( !QUnit.urlParams.esmodules && !QUnit.urlParams.amd ) {
32+
// QUnit.config is populated from QUnit.urlParams but only at the beginning
33+
// of the test run. We need to read both.
34+
var esmodules = QUnit.config.esmodules || QUnit.urlParams.esmodules,
35+
amd = QUnit.config.amd || QUnit.urlParams.amd;
36+
37+
// Workaround: Remove call to `window.__karma__.loaded()`
38+
// in favour of calling `window.__karma__.start()` from `loadTests()`
39+
// because tests such as unit/ready.js should run after document ready.
40+
if ( !esmodules && !amd ) {
3341
loadTests();
3442
}
3543
</script>

‎test/jquery.js

+34-30
Original file line numberDiff line numberDiff line change
@@ -8,36 +8,35 @@
88
parentUrl = activeScript && activeScript.src ?
99
activeScript.src.replace( /[?#].*/, "" ) + FILEPATH.replace( /[^/]+/g, ".." ) + "/" :
1010
"../",
11-
QUnit = window.QUnit || parent.QUnit,
12-
require = window.require || parent.require,
11+
QUnit = window.QUnit,
12+
require = window.require,
1313

1414
// Default to unminified jQuery for directly-opened iframes
15-
urlParams = QUnit ?
16-
QUnit.urlParams :
15+
config = QUnit ?
16+
17+
// QUnit.config is populated from QUnit.urlParams but only at the beginning
18+
// of the test run. We need to read both.
19+
{
20+
esmodules: !!( QUnit.config.esmodules || QUnit.urlParams.esmodules ),
21+
amd: !!( QUnit.config.amd || QUnit.urlParams.amd )
22+
} :
23+
1724
{ dev: true },
18-
src = urlParams.dev ?
25+
src = config.dev ?
1926
"dist/jquery.js" :
2027
"dist/jquery.min.js";
2128

2229
// Define configuration parameters controlling how jQuery is loaded
2330
if ( QUnit ) {
24-
25-
// ES modules loading is asynchronous and incompatible with synchronous
26-
// test loading in Karma.
27-
if ( !window.__karma__ ) {
28-
QUnit.config.urlConfig.push( {
29-
id: "esmodules",
30-
label: "Load as modules",
31-
tooltip: "Load the jQuery module file (and its dependencies)"
32-
} );
33-
QUnit.config.urlConfig.push( {
34-
id: "amd",
35-
label: "Load with AMD",
36-
tooltip: "Load the AMD jQuery file (and its dependencies)"
37-
} );
38-
}
39-
4031
QUnit.config.urlConfig.push( {
32+
id: "esmodules",
33+
label: "Load as modules",
34+
tooltip: "Load the jQuery module file (and its dependencies)"
35+
}, {
36+
id: "amd",
37+
label: "Load with AMD",
38+
tooltip: "Load the AMD jQuery file (and its dependencies)"
39+
}, {
4140
id: "dev",
4241
label: "Load unminified",
4342
tooltip: "Load the development (unminified) jQuery file"
@@ -46,24 +45,29 @@
4645

4746
// Honor ES modules loading on the main window (detected by seeing QUnit on it).
4847
// This doesn't apply to iframes because they synchronously expect jQuery to be there.
49-
if ( urlParams.esmodules && window.QUnit ) {
48+
if ( config.esmodules && QUnit ) {
5049

5150
// Support: IE 11+, Edge 12 - 18+
5251
// IE/Edge don't support the dynamic import syntax so they'd crash
5352
// with a SyntaxError here.
5453
dynamicImportSource = "" +
55-
"import( `${ parentUrl }src/jquery.js` ).then( ( { default: jQuery } ) => {\n" +
56-
" window.jQuery = jQuery;\n" +
57-
" if ( typeof loadTests === \"function\" ) {\n" +
58-
" // Include tests if specified\n" +
59-
" loadTests();\n" +
60-
" }\n" +
61-
"} );";
54+
"import( `${ parentUrl }src/jquery.js` )\n" +
55+
" .then( ( { default: jQuery } ) => {\n" +
56+
" window.jQuery = jQuery;\n" +
57+
" if ( typeof loadTests === \"function\" ) {\n" +
58+
" // Include tests if specified\n" +
59+
" loadTests();\n" +
60+
" }\n" +
61+
" } )\n" +
62+
" .catch( error => {\n" +
63+
" console.error( error );\n" +
64+
" QUnit.done();\n" +
65+
" } );";
6266

6367
eval( dynamicImportSource );
6468

6569
// Apply similar treatment for AMD modules
66-
} else if ( urlParams.amd && window.QUnit ) {
70+
} else if ( config.amd && QUnit ) {
6771
require.config( {
6872
baseUrl: parentUrl
6973
} );

‎test/karma.context.html

+32-33
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,44 @@
11
<!DOCTYPE html>
22
<html lang="en" id="html">
33
<head>
4-
<meta charset="utf-8">
5-
<title>CONTEXT</title>
6-
<!-- Karma serves this page from /context.html. Other files are served from /base -->
7-
<link rel="stylesheet" href="/base/test/data/testsuite.css" />
4+
<meta charset="utf-8">
5+
<title>CONTEXT</title>
6+
<!-- Karma serves this page from /context.html. Other files are served from /base -->
7+
<link rel="stylesheet" href="/base/test/data/testsuite.css" />
88
</head>
99
<body id="body">
10-
<div id="qunit"></div>
10+
<div id="qunit"></div>
1111

12-
<!-- Start: jQuery Test HTML -->
13-
<!-- this iframe is outside the #qunit-fixture so it won't waste time by constantly reloading; the tests are "safe" and clean up after themselves -->
14-
<iframe id="loadediframe" name="loadediframe" style="display:none;" src="/base/test/data/iframe.html"></iframe>
15-
<div id="qunit-fixture"></div>
16-
<!-- End: jQuery Test HTML -->
12+
<!-- Start: jQuery Test HTML -->
13+
<!-- this iframe is outside the #qunit-fixture so it won't waste time by constantly reloading; the tests are "safe" and clean up after themselves -->
14+
<iframe id="loadediframe" name="loadediframe" style="display:none;" src="/base/test/data/iframe.html"></iframe>
15+
<div id="qunit-fixture"></div>
16+
<!-- End: jQuery Test HTML -->
1717

18-
<!-- Start: Karma boilerplate -->
19-
<script src="/context.js"></script>
20-
<script>
21-
%CLIENT_CONFIG%
22-
window.__karma__.setupContext(window);
18+
<!-- Start: Karma boilerplate -->
19+
<script src="/context.js"></script>
20+
<script>
21+
%CLIENT_CONFIG%
22+
window.__karma__.setupContext(window);
2323

24-
%MAPPINGS%
25-
</script>
26-
%SCRIPTS%
27-
<!-- End: Karma boilerplate -->
24+
%MAPPINGS%
25+
</script>
26+
%SCRIPTS%
27+
<!-- End: Karma boilerplate -->
2828

29-
<script src="/base/test/data/qunit-fixture.js"></script>
30-
<script>
31-
// Workaround: Remove call to window.__karma__.loaded()
32-
// in favour of calling window.__karma__.start() at window.onload
33-
// because tests such as unit/ready.js should run after document ready
34-
window.addEventListener('load', function() {
35-
window.__karma__.start();
29+
<script src="/base/test/data/qunit-fixture.js"></script>
30+
<script>
31+
// QUnit.config is populated from QUnit.urlParams but only at the beginning
32+
// of the test run. We need to read both.
33+
var esmodules = QUnit.config.esmodules || QUnit.urlParams.esmodules,
34+
amd = QUnit.config.amd || QUnit.urlParams.amd;
3635

37-
// Workaround: https://github.com/karma-runner/karma-qunit/issues/92
38-
QUnit.testStart(function () {
39-
// Restore content
40-
document.getElementById("qunit-fixture").innerHTML = QUnit.config.fixture;
41-
});
42-
});
43-
</script>
36+
// Workaround: Remove call to `window.__karma__.loaded()`
37+
// in favour of calling `window.__karma__.start()` from `loadTests()`
38+
// because tests such as unit/ready.js should run after document ready.
39+
if ( !esmodules && !amd ) {
40+
loadTests();
41+
}
42+
</script>
4443
</body>
4544
</html>

0 commit comments

Comments
 (0)