Add qunit tests (including cli runner with code coverage)

Test Plan:
- Load in your LocalSettings with `wfLoadExtension( 'examples/Example' );`.
- Confirm that with $wgEnableJavaScriptTest = true,
  the qunit tests run from Special:JavaScriptTest.
- Confirm that in examples/Example, 'npm it' runs the qunit tests,
  with coverage report in standard out, and 'coverage/index.html'
  existing (can be viewed in a browser, e.g. with the 'open' command).

Change-Id: I0b8b010c6dc030f77f0d92cb430f9bcea9c708ad

.gitignore

@@ -1,4 +1,6 @@
 /composer.lock
 /vendor/
-/node_modules/
-/package-lock.json
+.nyc_output/
+coverage/
+node_modules/
+package-lock.json

Example/extension.json

@@ -56,7 +56,8 @@
 		"ParserFirstCallInit": "MediaWiki\\Extension\\Example\\Hooks::onParserFirstCallInit",
 		"MagicWordwgVariableIDs": "MediaWiki\\Extension\\Example\\Hooks::onMagicWordwgVariableIDs",
 		"ParserGetVariableValueSwitch": "MediaWiki\\Extension\\Example\\Hooks::onParserGetVariableValueSwitch",
-		"LoadExtensionSchemaUpdates": "MediaWiki\\Extension\\Example\\Hooks::onLoadExtensionSchemaUpdates"
+		"LoadExtensionSchemaUpdates": "MediaWiki\\Extension\\Example\\Hooks::onLoadExtensionSchemaUpdates",
+		"ResourceLoaderTestModules": "MediaWiki\\Extension\\Example\\Hooks::onResourceLoaderTestModules"
 	},
 	"ResourceFileModulePaths": {
 		"localBasePath": "modules/"

Example/includes/Hooks.php

@@ -77,6 +77,22 @@ public static function onLoadExtensionSchemaUpdates( DatabaseUpdater $updater )
 		$updater->addExtensionTable( 'example_note', dirname( __DIR__ ) . '/sql/add-example_note.sql' );
 	}
 
+	/**
+	 * @see https://www.mediawiki.org/wiki/Manual:Hooks/ResourceLoaderTestModules
+	 */
+	public static function onResourceLoaderTestModules( array &$modules ) {
+		$modules['qunit']['ext.Example.tests'] = [
+			'dependencies' => [
+				'ext.Example.welcome',
+			],
+			'localBasePath' => dirname( __DIR__ ) . '/tests/qunit',
+			'remoteExtPath' => 'examples/Example/tests/qunit',
+			'scripts' => [
+				'ext.Example.welcome.test.js',
+			],
+		];
+	}
+
 	/**
 	 * Parser magic word handler for {{MYWORD}}.
 	 *

Example/package.json

@@ -0,0 +1,23 @@
+{
+	"private": true,
+	"@script.test": "TODO: remove spawn-wrap workaround after <https://gerrit.wikimedia.org/r/482527>",
+	"scripts": {
+		"test": "SPAWN_WRAP_SHIM_ROOT=. NODE_PATH=modules nyc qunit --require ./tests/bootstrap.js tests/qunit",
+		"unit:watch": "NODE_PATH=modules qunit --watch --require ./tests/bootstrap.js tests/qunit"
+	},
+	"devDependencies": {
+		"nyc": "13.1.0",
+		"qunit": "2.8.0"
+	},
+	"nyc": {
+		"exclude": [
+			"tests"
+		],
+		"reporter": [
+			"text",
+			"clover",
+			"html"
+		],
+		"report-dir": "../coverage"
+	}
+}

Example/tests/bootstrap.js

@@ -0,0 +1,12 @@
+/* eslint-env node */
+
+global.mw = {
+	config: {
+		values: {},
+		get: function ( key ) {
+			return this.values[ key ];
+		}
+	}
+};
+
+// global.sinon = require( 'sinon' );

Example/tests/qunit/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+	"extends": "wikimedia/qunit"
+}

Example/tests/qunit/ext.Example.welcome.test.js

@@ -0,0 +1,20 @@
+QUnit.module( 'ext.Example.welcome', {
+	beforeEach: function () {
+		this.conf = mw.config.values;
+		mw.config.values = {
+			wgExampleWelcomeColorDays: {
+				tuesday: 'pink'
+			},
+			wgExampleWelcomeColorDefault: '#ccc'
+		};
+	},
+	afterEach: function () {
+		mw.config.values = this.conf;
+	}
+} );
+
+QUnit.test( 'getColorByDate()', function ( assert ) {
+	var welcome = require( 'ext.Example.welcome' );
+	assert.strictEqual( welcome.getColorByDate( 'monday' ), '#ccc', 'default' );
+	assert.strictEqual( welcome.getColorByDate( 'tuesday' ), 'pink', 'custom' );
+} );

Gruntfile.js

@@ -21,6 +21,7 @@ module.exports = function ( grunt ) {
 		stylelint: {
 			all: [
 				'**/*.{css,less}',
+				'!**/coverage/**',
 				'!node_modules/**',
 				'!vendor/**'
 			]

package.json

@@ -1,7 +1,9 @@
 {
 	"private": true,
 	"scripts": {
-		"test": "grunt test"
+		"test": "grunt test",
+		"postinstall": "cd Example/ && npm install",
+		"posttest": "cd Example/ && npm test"
 	},
 	"devDependencies": {
 		"eslint-config-wikimedia": "0.9.0",
@@ -14,6 +16,8 @@
 		"stylelint-config-wikimedia": "0.5.0"
 	},
 	"eslintIgnore": [
+		"**/coverage/",
+		"**/node_modules/",
 		"vendor/**"
 	]
 }