Manual:JavaScript unit testing

MediaWiki uses QUnit to unit test its JavaScript code base.
Run from a browser[edit]
- Set
$wgEnableJavaScriptTest
totrue
. (This is already set if you use MediaWiki-Docker or MediaWiki-Vagrant.) - Visit Special:JavaScriptTest in a browser to run the tests.
Run from the command line[edit]
One-time setup:
- Ensure environment variables
MW_SERVER
andMW_SCRIPT_PATH
are set. Either each time, or from~/.bash_profile
to have them always:# Adjust these values for your own environment. export MW_SERVER=http://localhost:8080 export MW_SCRIPT_PATH=/w
- Enter an isolated environment where you have Node.js and npm. Why?
- If using MediaWiki-Docker, consider using Fresh.
Runfresh-node -net -env
from the MediaWiki directory. - If using MediaWiki-Vagrant, simply ssh to your Vagrant VM and navigate to the MediaWiki directory.
- If using MediaWiki-Docker, consider using Fresh.
- Once inside your isolated shell, run
npm ci
to install or update any dependencies.
Run[edit]
This runs the QUnit tests in Headless Chrome:
$ npm run qunit
Running "karma:main" (karma) task
INFO [launcher]: Starting browser ChromeHeadless
mediawiki.util
✔ escapeRegExp
✔ debounce
…
Finished in 5.42 secs
SUMMARY:
✔ 440 tests completed
You can run QUnit tests for specific components (MediaWiki
to run MediaWiki core QUnit tests, or the name of an extension or skin) with the --qunit-component
option:
$ node_modules/grunt/bin/grunt qunit --qunit-component=GrowthExperiments
Running "karma:main" (karma) task
INFO [launcher]: Starting browser ChromeHeadless
testrunner
✔ Loader status
✔ assert.htmlEqual
ext.growthExperiments.Utils.js
✔ serializeActionData
✔ isUserInVariant
ext.growthExperiments.Help/HelpPanelProcessDialog.js
✔ getDefaultPanelForSuggestedEditSession for copyedit
✔ updateEditMode for link-recommendation
✔ updateEditMode for copyedit, isEditing
ext.growthExperiments.Homepage.SuggestedEdits/PagerWidget.js
✔ constructor
✔ setMessage with currentPosition < totalCount
✔ setMessage with currentPosition === totalCount
✔ setMessage with currentPosition > totalCount
ext.growthExperiments.NewcomerTaskLogger.js
✔ constructor
✔ should log impressions
✔ should get log metadata
ext.growthExperiments.StructuredTask/addimage/AddImageUtils.js
✔ getRenderData: target width < original width
✔ getRenderData: the image file needs to be re-rasterized
✔ getRenderData: vector image
✔ getRenderData: target width > original width
✔ getRenderData: 3x target width
✔ getRenderData: 2.5x target width
✔ getRenderData: vertical image with landscape viewport
✔ getRenderData: with specified render width
Finished in 0.03 secs
SUMMARY:
✔ 46 tests completed
How to help?[edit]
Run tests before committing[edit]
Make it a habit to run unit tests before committing and submitting your changes to Gerrit.
Write unit tests[edit]
Always write unit tests for new functionality. We're also looking to expand our unit test coverage of already existing modules in the MediaWiki JavaScript library.
Write a test[edit]
It is the convention to name the test suite file after the module it covers. For example, mediawiki.user.test.js
covers the mediawiki.user
module.
Inside the test suite should be one, and only one, call to QUnit.module
with the module name.
The unit tests for MediaWiki core are located in the tests/qunit/suites/
directory.
Register a test[edit]
MediaWiki core[edit]
Test suites are added to the registration of the mediawiki.tests.qunit.suites
module in /tests/qunit/QUnitTestResources.php
.
Tests are organised into a directory structure that matches the directory structure of the code being tested. For example: The unit test for resources/mediawiki.util/mediawiki.util.js
can be found at tests/qunit/suites/resources/mediawiki.util/mediawiki.util.test.js
.
Example:
'mediawiki.tests.qunit.suites' => array(
'scripts' => array(
'tests/qunit/suites/resources/mediawiki/mediawiki.test.js',
+ 'tests/qunit/suites/resources/mediawiki/mediawiki.example.test.js',
'tests/qunit/suites/resources/mediawiki/mediawiki.user.test.js',
'tests/qunit/suites/resources/mediawiki/mediawiki.util.test.js',
),
'dependencies' => array(
'mediawiki',
+ 'mediawiki.example',
'mediawiki.user',
'mediawiki.util',
Extensions[edit]
Extensions register their QUnit tests via the QUnitTestModule attribute in extension.json
.
See also[edit]
- Manual:Hooks/ResourceLoaderTestModules
- Manual:JavaScript unit testing/QUnit guidelines
- Writing Testable JavaScript (May 2013), Rebecca Murphey, A List Apart