Create JavaScript tests
Open, Needs TriagePublic
Actions

Assigned To

Authored By

	Wugapodes
	Jul 18 2024, 10:06 PM

Description

We should have tests for the JavaScript module to make sure that it works as expected. This has two steps: setting up the extension for tests and writing some first tests.

Setting up testing

Based on the manual on JavaScript testing, tests can be set up by doing the following:

Create tests/qunit/ext.chessViewer.core.test.js and see the extension examples file for how it should look
Register the tests by adding the following code to extension.json

"QUnitTestModule": {
		"localBasePath": "tests/qunit/",
		"remoteExtPath": "ChessBrowser/tests/qunit/",
		"scripts": [
			"ext.chessViewer.core.test.js"
		],
		"dependencies": [
			ext.chessViewer.core.js"
		]
	},

Writing tests

See the extension examples file for examples on how to write tests
Follow the MediaWiki QUnit guidelines
Check out the QUnit guides for more information

Patch checklist

A successful first patch will cover at least the following core functions:

Details

Related Changes in Gerrit:

Subject	Repo	Branch	Lines +/-
ChessBrowser: Add QUnit tests for Game core methods	mediawiki/extensions/ChessBrowser	master	+85 -0
chessViewer.core: Add QUnit tests for core functionalities	mediawiki/extensions/ChessBrowser	master	+47 -1
Added tests for ChessBrowser javascript module	mediawiki/extensions/ChessBrowser	master	+85 -3

Customize query in gerrit

Event Timeline

Wugapodes created this task.Jul 18 2024, 10:06 PM

Thank you for tagging this task with good first task for Wikimedia newcomers!

Newcomers often may not be aware of things that may seem obvious to seasoned contributors, so please take a moment to reflect on how this task might look to somebody who has never contributed to Wikimedia projects.

A good first task is a self-contained, non-controversial task with a clear approach. It should be well-described with pointers to help a completely new contributor, for example it should clearly pointed to the codebase URL and provide clear steps to help a contributor get setup for success. We've included some guidelines at https://phabricator.wikimedia.org/tag/good_first_task/ !

Thank you for helping us drive new contributions to our projects <3

Wugapodes updated the task description. (Show Details)Jul 18 2024, 10:10 PM

Wugapodes moved this task from Needs triage to Backlog on the ChessBrowser board.Jul 18 2024, 10:12 PM

Aklapper added a project: Test-Coverage.Jul 19 2024, 9:30 AM

should i install qunit npm package as a dev dependency?

Yes, that's a good idea. I forgot it wasn't listed as a dependency in the extension. You can use npm install qunit --save-dev

should i also add sinon sandbox and jquery?

it giving
Expected:
[

"emit1",
"sub",
"foo",
"emit2",
"bar"

]
Result:
[

"emit1",
"sub",
{
  "exception": Error("Unknown module: modules/ext.chessViewer.core.js"),
  "source": "resolve"
},
"foo",
"emit2",
"bar"

]
Diff:
[

"emit1",
"sub",
{
  "exception": Error("Unknown module: modules/ext.chessViewer.core.js"),
  "source": "resolve"
},
"foo",
"emit2",
"bar"

]
error while testing it at Special:JavaScriptTest. path seems to be correct

Anujagrawal added a comment.Jul 24 2024, 5:26 PM

This comment was removed by Anujagrawal.

In T370482#10009449, @Anujagrawal wrote:

should i also add sinon sandbox and jquery?

jQuery is included in MediaWiki by default, so we don't need to add it as a dependency. I don't know anything about sinon sandbox. If you're using it in your tests you should add is as a dependency.

In T370482#10011963, @Anujagrawal wrote:

error while testing it at Special:JavaScriptTest. path seems to be correct

I need more details. I recommend uploading a patch to gerrit so I can see the rest of the code. From the output you gave, it seems like the module isn't being found. Some things to check:

Did you register the test in extension.json?
Is ChessBrowser installed as an extension in your mediawiki development environment?
Is $wgEnableJavaScriptTest set to true in your configuration file?

Those would be the first three things I'd check. If the tests still can't find the module after ensuring those are set up correctly, I'd need to see the rest of the code to help troubleshoot.

i did the things you sad. I'll upload a patch for your reference

Change #1057199 had a related patch set uploaded (by Anujagrawal; author: Anujagrawal):

[mediawiki/extensions/ChessBrowser@master] Added tests for ChessBrowser javascript module

https://gerrit.wikimedia.org/r/1057199

gerritbot added a project: Patch-For-Review.Jul 26 2024, 11:34 AM

I left some comments on the patch. Fixing those comments should resolve the current test failures.

I referred https://github.com/wikimedia/mediawiki-extensions-examples/blob/master/tests/qunit/ext.Example.welcome.test.js and test files in MobileFrontend extension.
const

QUnit = require( 'qunit' );
Game = require ('../../modules/ext.chessViewer.core.js')

QUnit.module( 'Modules ext.chessViewer.core.test.js', {

		beforeEach: function () {
			var fixtureElement = document.createElement( 'div' );
			fixtureElement.setAttribute( 'data-chess', JSON.stringify( {
				boards: [],
				plys: [],
				tokens: [],
				metadata: {}
			} ) );
			this.$fixture = $( fixtureElement );
			this.game = Game( this.$fixture );
		}

} );

Running npm -s run lint after saving it gives error that the const keyword is reserved. It doesn't supports ES6 syntax, but MobileFrontend does.

@Wugapodes Please check the above query.

The chessViewer module was written in ES5, so the linter is set up for ES5 not ES6. See [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/ChessBrowser/+/refs/heads/master/.eslintrc.json | line 4 of .eslintrc.json ]]

You can try changing the linter to ES6 using "extends": ["wikimedia/client",.... If you switch to ES6 linting and chessViewer throws errors, submit a new ticket and we can look into it further outside of the test implementation.

should i change the tests to ES5 or change linter to ES6?

@Wugapodes

Thanks for your patience @Anujagrawal, I didn't have much time to volunteer last week.

should i change the tests to ES5 or change linter to ES6?

Change the linter to ES6. If something goes wrong with that linter change, write a new ticket and tag me in it.

Change #1059961 had a related patch set uploaded (by Aditya0545; author: Aditya0545):

[mediawiki/extensions/ChessBrowser@master] chessViewer.core: Add QUnit tests for core functionalities

https://gerrit.wikimedia.org/r/1059961

gerritbot added a project: Patch-For-Review.Aug 6 2024, 2:43 AM

Restricted Application removed a project: Patch-Needs-Improvement. · View Herald TranscriptAug 6 2024, 2:43 AM

Okay i'll work on it. I have my semester exams around the corner.

Hello @Wugapodes I have fixed the problem could you please give me review

https://gerrit.wikimedia.org/r/c/mediawiki/extensions/ChessBrowser/+/1059961

Please do not resolve unresolved tasks.
Please also see https://www.mediawiki.org/wiki/Gerrit/Commit_message_guidelines ; no need to explicitly ask for review - thanks!

@Adityakumar0545 Please check the patch checklist. Also import QUnit with respect to ES5 and fix the linting errors.

I changed the linter to ES6, here is .eslintrc.json

{
	"root": true,
	"extends": [
	  "wikimedia/client",
	  "wikimedia/jquery",
	  "wikimedia/mediawiki"
	],
	"parserOptions": {
	  "ecmaVersion": 2015,
	  "sourceType": "module"
	},
	"overrides": [
	  {
			"files": [
		  "*.js"
			],
			"rules": {
		  "no-unused-vars": "warn"
			}
	  }
	],
	"rules": {
	  "no-jquery/variable-pattern": "warn"
	}
}

Now linter is forcing to change type to "const" for all the variables which have not be reassigned in chessViewer module.

Also i made the changes to the linter of chessViewer extension, not of mediawiki root directory.

Adityakumar0545 removed Adityakumar0545 as the assignee of this task.Mar 4 2025, 2:25 AM

Pppery edited projects, added Patch-Needs-Improvement; removed Patch-For-Review.Sun, Jan 11, 4:23 PM