Fix non-failing exceptions in Jasmine tests

There were several errors in the Jasmine tests that produce output on
the console but do not seem to fail the test-suite. This patch fixes
some of them. It includes also the changes from I5d8d7b2b.

The unneeded transition in formatEntityLabel() between jQuery deferreds
(which are already spec-compliant promises) and native Promises had the
effect of delaying the ItemSelectorWrapper’s formatEntityLabel()
handling until the LanguageAndLexicalCategoryWidget test was done, by
which time the sinon sandbox would have been restored and $.data() was
therefore no longer mocked, resulting in a TypeError that didn’t break
the test (because the test was done as far as Jasmine was concerned) but
looked ugly in the output. Simply chaining the promise directly is
sufficient to fix this :)

Further, one test was rewritten to use async/await because it seemed the
"afterEach" hook didn't wait until after the done() handler was called.

Co-authored-by: Lucas Werkmeister<[email protected]>
Change-Id: I5879cdce72de6a6c4f4659cbb082ce9723d451a2

resources/widgets/ItemSelectorWrapper.js

@@ -7,20 +7,15 @@ module.exports = ( function () {
 	 * @return {jQuery.Promise}
 	 */
 	function formatEntityLabel( api, id ) {
-		var deferred = $.Deferred(),
-			dataValue = { value: { id: id }, type: 'wikibase-entityid' };
-
-		api.formatValue(
-			dataValue,
+		return api.formatValue(
+			{ value: { id: id }, type: 'wikibase-entityid' },
 			{},
 			'wikibase-item',
 			'text/plain',
 			''
 		).then( function ( response ) {
-			deferred.resolve( response.result );
+			return response.result;
 		} );
-
-		return deferred.promise();
 	}
 
 	return function ( api ) {

tests/jasmine/.eslintrc.json

@@ -4,6 +4,9 @@
 		"shared-node-browser": true,
 		"jasmine": true
 	},
+	"parserOptions": {
+		"ecmaVersion": 8
+	},
 	"globals": {
 		"beforeEach": false,
 		"Promise": false,

tests/jasmine/LanguageAndLexicalCategoryWidget.spec.js

@@ -2,6 +2,7 @@
  * @license GPL-2.0-or-later
  */
 describe( 'LanguageAndLexicalCategoryWidget', function () {
+	global.$ = require( 'jquery' ); // eslint-disable-line no-restricted-globals
 	global.mw = { // eslint-disable-line no-restricted-globals
 		config: {
 			get: function () {
@@ -15,6 +16,14 @@ describe( 'LanguageAndLexicalCategoryWidget', function () {
 	expect.installPlugin( require( 'unexpected-dom' ) );
 
 	var newLanguageAndLexicalCategoryWidget = require( './../../resources/widgets/LanguageAndLexicalCategoryWidget.js' );
+	var sinon = require( 'sinon' );
+	var sandbox;
+	beforeEach( function () {
+		sandbox = sinon.createSandbox();
+	} );
+	afterEach( function () {
+		sandbox.restore();
+	} );
 
 	it( 'shows the language and the lexical category', function () {
 		var language = 'Q123',
@@ -28,21 +37,26 @@ describe( 'LanguageAndLexicalCategoryWidget', function () {
 		expect( widget.$el, 'to contain elements matching', '.lexical-category-link' );
 	} );
 
-	it( 'switches to edit mode and back', function ( done ) {
+	it( 'switches to edit mode and back', async function () {
+		var mockEntitySelector = {
+			selectedEntity: function () {
+			},
+			destroy: sinon.stub()
+		};
+		sandbox.stub( $.prototype, 'data' ).returns( mockEntitySelector )
+		$.fn.entityselector = sinon.stub(); // pretend the entityselector widget exists
+
 		var widget = newWidget( 'Q123', 'Q234' );
 
 		expect( widget, 'not to be in edit mode' );
 
 		widget.inEditMode = true;
-		widget.$nextTick( function () {
-			expect( widget, 'to be in edit mode' );
+		await widget.$nextTick();
+		expect( widget, 'to be in edit mode' );
 
-			widget.inEditMode = false;
-			widget.$nextTick( function () {
-				expect( widget, 'not to be in edit mode' );
-				done();
-			} );
-		} );
+		widget.inEditMode = false;
+		await widget.$nextTick();
+		expect( widget, 'not to be in edit mode' );
 	} );
 
 	expect.addAssertion( '<object> [not] to be in edit mode', function ( expect, widget ) {
@@ -55,7 +69,10 @@ describe( 'LanguageAndLexicalCategoryWidget', function () {
 
 	function newWidget( language, lexicalCategory ) {
 		var template = getTemplate('resources/templates/languageAndLexicalCategoryWidget.vue.html');
-		var LanguageAndLexicalCategoryWidget = Vue.extend( newLanguageAndLexicalCategoryWidget( template, {}, {
+		var mockApi = {
+			formatValue: function () { return Promise.resolve( { result: '' } ); },
+		};
+		var LanguageAndLexicalCategoryWidget = Vue.extend( newLanguageAndLexicalCategoryWidget( template, mockApi, {
 			get: function ( key ) {
 				return key;
 			}