From 8f0ae21eca7546a5f783d12e5142bd1a364559f1 Mon Sep 17 00:00:00 2001
From: WMDE-Fisch <christoph.jauera@wikimedia.de>
Date: Thu, 19 Dec 2024 18:30:11 +0100
Subject: [PATCH] [qunit] Use strict and wrap test scope

Wrapping the test mainly to avoid that declared vars or functions
bleed into other tests.

Includes lint auto-fixes

Change-Id: Ia4577f7496ddecf4985525de674ade46f53e03a6
---
 .../createReferenceGateway.test.js            | 310 +++++++++---------
 .../isReferencePreviewsEnabled.test.js        | 193 +++++------
 .../renderer.test.js                          | 164 ++++-----
 3 files changed, 344 insertions(+), 323 deletions(-)

diff --git a/tests/qunit/ext.cite.referencePreviews/createReferenceGateway.test.js b/tests/qunit/ext.cite.referencePreviews/createReferenceGateway.test.js
index f906ef2cc..740346e17 100644
--- a/tests/qunit/ext.cite.referencePreviews/createReferenceGateway.test.js
+++ b/tests/qunit/ext.cite.referencePreviews/createReferenceGateway.test.js
@@ -1,174 +1,186 @@
-function createStubTitle( fragment = null ) {
-	return {
-		getFragment() {
-			return fragment;
-		}
-	};
-}
+'use strict';
 
-( mw.loader.getModuleNames().indexOf( 'ext.popups.main' ) !== -1 ?
-	QUnit.module :
-	QUnit.module.skip )( 'ext.cite.referencePreviews#createReferenceGateway', {
-	beforeEach: function () {
-		this.sandbox.stub( mw, 'msg', ( key ) => `<${ key }>` );
-		this.sandbox.stub( mw, 'message', ( key ) => ( {
-			exists: () => !key.endsWith( 'generic' ),
-			text: () => `<${ key }>`
-		} ) );
-
-		this.$sourceElement = $( '<a>' ).appendTo(
-			$( '<sup>' ).attr( 'id', 'cite_ref-1' ).appendTo( document.body )
-		);
-
-		this.$references = $( '<ul>' ).append(
-			$( '<li>' ).attr( 'id', 'cite_note-1' ).append(
-				$( '<span>' ).addClass( 'mw-reference-text' ).text( 'Footnote 1' )
-			),
-			$( '<li>' ).attr( 'id', 'cite_note-2' ).append(
-				$( '<span>' ).addClass( 'reference-text' ).append(
-					$( '<cite>' ).addClass( 'journal web unknown' ).text( 'Footnote 2' )
-				)
-			),
-			$( '<li>' ).attr( 'id', 'cite_note-3' ).append(
-				$( '<span>' ).addClass( 'reference-text' ).append(
-					$( '<cite>' ).addClass( 'news' ).text( 'Footnote 3' ),
-					$( '<cite>' ).addClass( 'news citation' ),
-					$( '<cite>' ).addClass( 'citation' )
-				)
-			),
-			$( '<li>' ).attr( 'id', 'cite_note-4' ).append(
-				$( '<span>' ).addClass( 'reference-text' ).append(
-					$( '<cite>' ).addClass( 'news' ).text( 'Footnote 4' ),
-					$( '<cite>' ).addClass( 'web' )
-				)
-			),
-			$( '<li>' ).attr( 'id', 'cite_note-5' ).append(
-				$( '<span>' ).addClass( 'mw-reference-text' ).html( '&nbsp;' )
-			)
-		).appendTo( document.body );
-	},
-	afterEach() {
-		this.$sourceElement.parent().remove();
-		this.$references.remove();
+( function () {
+	function createStubTitle( fragment = null ) {
+		return {
+			getFragment() {
+				return fragment;
+			}
+		};
 	}
-} );
 
-QUnit.test( 'Reference preview gateway returns the correct data', function ( assert ) {
-	const gateway = require( 'ext.cite.referencePreviews' ).private.createReferenceGateway(),
-		title = createStubTitle( 'cite note-1' );
+	( mw.loader.getModuleNames().indexOf( 'ext.popups.main' ) !== -1 ?
+		QUnit.module :
+		QUnit.module.skip )( 'ext.cite.referencePreviews#createReferenceGateway', {
+		beforeEach: function () {
+			this.sandbox.stub( mw, 'msg', ( key ) => `<${ key }>` );
+			this.sandbox.stub( mw, 'message', ( key ) => ( {
+				exists: () => !key.endsWith( 'generic' ),
+				text: () => `<${ key }>`
+			} ) );
 
-	return gateway.fetchPreviewForTitle( title, this.$sourceElement[ 0 ] ).then( ( result ) => {
-		assert.propEqual(
-			result,
-			{
-				url: '#cite_note-1',
-				extract: 'Footnote 1',
-				type: 'reference',
-				referenceType: null,
-				sourceElementId: 'cite_ref-1'
-			}
-		);
+			this.$sourceElement = $( '<a>' ).appendTo(
+				$( '<sup>' ).attr( 'id', 'cite_ref-1' ).appendTo( document.body )
+			);
+
+			this.$references = $( '<ul>' ).append(
+				$( '<li>' ).attr( 'id', 'cite_note-1' ).append(
+					$( '<span>' ).addClass( 'mw-reference-text' ).text( 'Footnote 1' )
+				),
+				$( '<li>' ).attr( 'id', 'cite_note-2' ).append(
+					$( '<span>' ).addClass( 'reference-text' ).append(
+						$( '<cite>' ).addClass( 'journal web unknown' ).text( 'Footnote 2' )
+					)
+				),
+				$( '<li>' ).attr( 'id', 'cite_note-3' ).append(
+					$( '<span>' ).addClass( 'reference-text' ).append(
+						$( '<cite>' ).addClass( 'news' ).text( 'Footnote 3' ),
+						$( '<cite>' ).addClass( 'news citation' ),
+						$( '<cite>' ).addClass( 'citation' )
+					)
+				),
+				$( '<li>' ).attr( 'id', 'cite_note-4' ).append(
+					$( '<span>' ).addClass( 'reference-text' ).append(
+						$( '<cite>' ).addClass( 'news' ).text( 'Footnote 4' ),
+						$( '<cite>' ).addClass( 'web' )
+					)
+				),
+				$( '<li>' ).attr( 'id', 'cite_note-5' ).append(
+					$( '<span>' ).addClass( 'mw-reference-text' ).html( '&nbsp;' )
+				)
+			).appendTo( document.body );
+		},
+		afterEach() {
+			this.$sourceElement.parent().remove();
+			this.$references.remove();
+		}
 	} );
-} );
 
-QUnit.test( 'Reference preview gateway accepts alternative text node class name', function ( assert ) {
-	const gateway = require( 'ext.cite.referencePreviews' ).private.createReferenceGateway(),
-		title = createStubTitle( 'cite note-2' );
+	QUnit.test( 'Reference preview gateway returns the correct data', function ( assert ) {
+		const gateway = require( 'ext.cite.referencePreviews' ).private.createReferenceGateway(),
+			title = createStubTitle( 'cite note-1' );
 
-	return gateway.fetchPreviewForTitle( title, this.$sourceElement[ 0 ] ).then( ( result ) => {
-		assert.propEqual(
-			result,
-			{
-				url: '#cite_note-2',
-				extract: '<cite class="journal web unknown">Footnote 2</cite>',
-				type: 'reference',
-				referenceType: 'web',
-				sourceElementId: 'cite_ref-1'
-			}
-		);
+		return gateway.fetchPreviewForTitle( title, this.$sourceElement[ 0 ] ).then( ( result ) => {
+			assert.propEqual(
+				result,
+				{
+					url: '#cite_note-1',
+					extract: 'Footnote 1',
+					type: 'reference',
+					referenceType: null,
+					sourceElementId: 'cite_ref-1'
+				}
+			);
+		} );
 	} );
-} );
 
-QUnit.test( 'Reference preview gateway accepts duplicated types', function ( assert ) {
-	const gateway = require( 'ext.cite.referencePreviews' ).private.createReferenceGateway(),
-		title = createStubTitle( 'cite note-3' );
+	QUnit.test( 'Reference preview gateway accepts alternative text node class name', function ( assert ) {
+		const gateway = require( 'ext.cite.referencePreviews' ).private.createReferenceGateway(),
+			title = createStubTitle( 'cite note-2' );
 
-	return gateway.fetchPreviewForTitle( title, this.$sourceElement[ 0 ] ).then( ( result ) => {
-		assert.propEqual(
-			result,
-			{
-				url: '#cite_note-3',
-				extract: '<cite class="news">Footnote 3</cite><cite class="news citation"></cite><cite class="citation"></cite>',
-				type: 'reference',
-				referenceType: 'news',
-				sourceElementId: 'cite_ref-1'
-			}
-		);
+		return gateway.fetchPreviewForTitle( title, this.$sourceElement[ 0 ] ).then( ( result ) => {
+			assert.propEqual(
+				result,
+				{
+					url: '#cite_note-2',
+					extract: '<cite class="journal web unknown">Footnote 2</cite>',
+					type: 'reference',
+					referenceType: 'web',
+					sourceElementId: 'cite_ref-1'
+				}
+			);
+		} );
 	} );
-} );
 
-QUnit.test( 'Reference preview gateway ignores conflicting types', function ( assert ) {
-	const gateway = require( 'ext.cite.referencePreviews' ).private.createReferenceGateway(),
-		title = createStubTitle( 'cite note-4' );
+	QUnit.test( 'Reference preview gateway accepts duplicated types', function ( assert ) {
+		const gateway = require( 'ext.cite.referencePreviews' ).private.createReferenceGateway(),
+			title = createStubTitle( 'cite note-3' );
 
-	return gateway.fetchPreviewForTitle( title, this.$sourceElement[ 0 ] ).then( ( result ) => {
-		assert.propEqual(
-			result,
-			{
-				url: '#cite_note-4',
-				extract: '<cite class="news">Footnote 4</cite><cite class="web"></cite>',
-				type: 'reference',
-				referenceType: 'news',
-				sourceElementId: 'cite_ref-1'
-			}
-		);
+		return gateway.fetchPreviewForTitle( title, this.$sourceElement[ 0 ] ).then( ( result ) => {
+			assert.propEqual(
+				result,
+				{
+					url: '#cite_note-3',
+					extract: '<cite class="news">Footnote 3</cite><cite class="news citation"></cite><cite class="citation"></cite>',
+					type: 'reference',
+					referenceType: 'news',
+					sourceElementId: 'cite_ref-1'
+				}
+			);
+		} );
 	} );
-} );
 
-QUnit.test( 'Reference preview gateway returns source element id', function ( assert ) {
-	const gateway = require( 'ext.cite.referencePreviews' ).private.createReferenceGateway(),
-		title = createStubTitle( 'cite note-1' );
+	QUnit.test( 'Reference preview gateway ignores conflicting types', function ( assert ) {
+		const gateway = require( 'ext.cite.referencePreviews' ).private.createReferenceGateway(),
+			title = createStubTitle( 'cite note-4' );
 
-	return gateway.fetchPreviewForTitle( title, this.$sourceElement[ 0 ] ).then( ( result ) => {
-		assert.propEqual(
-			result,
-			{
-				url: '#cite_note-1',
-				extract: 'Footnote 1',
-				type: 'reference',
-				referenceType: null,
-				sourceElementId: 'cite_ref-1'
-			}
-		);
+		return gateway.fetchPreviewForTitle( title, this.$sourceElement[ 0 ] ).then( ( result ) => {
+			assert.propEqual(
+				result,
+				{
+					url: '#cite_note-4',
+					extract: '<cite class="news">Footnote 4</cite><cite class="web"></cite>',
+					type: 'reference',
+					referenceType: 'news',
+					sourceElementId: 'cite_ref-1'
+				}
+			);
+		} );
 	} );
-} );
 
-QUnit.test( 'Reference preview gateway rejects non-existing references', function ( assert ) {
-	const gateway = require( 'ext.cite.referencePreviews' ).private.createReferenceGateway(),
-		title = createStubTitle( 'undefined' );
+	QUnit.test( 'Reference preview gateway returns source element id', function ( assert ) {
+		const gateway = require( 'ext.cite.referencePreviews' ).private.createReferenceGateway(),
+			title = createStubTitle( 'cite note-1' );
 
-	return gateway.fetchPreviewForTitle( title, this.$sourceElement[ 0 ] ).then( () => {
-		assert.true( false, 'It should not resolve' );
-	} ).catch( ( result ) => {
-		assert.propEqual( result, { textStatus: 'abort', textContext: 'Footnote not found or empty', xhr: { readyState: 0 } } );
+		return gateway.fetchPreviewForTitle( title, this.$sourceElement[ 0 ] ).then( ( result ) => {
+			assert.propEqual(
+				result,
+				{
+					url: '#cite_note-1',
+					extract: 'Footnote 1',
+					type: 'reference',
+					referenceType: null,
+					sourceElementId: 'cite_ref-1'
+				}
+			);
+		} );
 	} );
-} );
 
-QUnit.test( 'Reference preview gateway rejects all-whitespace references', function ( assert ) {
-	const gateway = require( 'ext.cite.referencePreviews' ).private.createReferenceGateway(),
-		title = createStubTitle( 'cite note-5' );
+	QUnit.test( 'Reference preview gateway rejects non-existing references', function ( assert ) {
+		const gateway = require( 'ext.cite.referencePreviews' ).private.createReferenceGateway(),
+			title = createStubTitle( 'undefined' );
 
-	return gateway.fetchPreviewForTitle( title, this.$sourceElement[ 0 ] ).then( () => {
-		assert.true( false, 'It should not resolve' );
-	} ).catch( ( result ) => {
-		assert.propEqual( result, { textStatus: 'abort', textContext: 'Footnote not found or empty', xhr: { readyState: 0 } } );
+		return gateway.fetchPreviewForTitle( title, this.$sourceElement[ 0 ] ).then( () => {
+			assert.true( false, 'It should not resolve' );
+		} ).catch( ( result ) => {
+			assert.propEqual( result, {
+				textStatus: 'abort',
+				textContext: 'Footnote not found or empty',
+				xhr: { readyState: 0 }
+			} );
+		} );
 	} );
-} );
 
-QUnit.test( 'Reference preview gateway is abortable', function ( assert ) {
-	const gateway = require( 'ext.cite.referencePreviews' ).private.createReferenceGateway(),
-		title = createStubTitle( 'cite note-1' ),
-		promise = gateway.fetchPreviewForTitle( title, this.$sourceElement[ 0 ] );
+	QUnit.test( 'Reference preview gateway rejects all-whitespace references', function ( assert ) {
+		const gateway = require( 'ext.cite.referencePreviews' ).private.createReferenceGateway(),
+			title = createStubTitle( 'cite note-5' );
 
-	assert.strictEqual( typeof promise.abort, 'function' );
-} );
+		return gateway.fetchPreviewForTitle( title, this.$sourceElement[ 0 ] ).then( () => {
+			assert.true( false, 'It should not resolve' );
+		} ).catch( ( result ) => {
+			assert.propEqual( result, {
+				textStatus: 'abort',
+				textContext: 'Footnote not found or empty',
+				xhr: { readyState: 0 }
+			} );
+		} );
+	} );
+
+	QUnit.test( 'Reference preview gateway is abortable', function ( assert ) {
+		const gateway = require( 'ext.cite.referencePreviews' ).private.createReferenceGateway(),
+			title = createStubTitle( 'cite note-1' ),
+			promise = gateway.fetchPreviewForTitle( title, this.$sourceElement[ 0 ] );
+
+		assert.strictEqual( typeof promise.abort, 'function' );
+	} );
+}() );
diff --git a/tests/qunit/ext.cite.referencePreviews/isReferencePreviewsEnabled.test.js b/tests/qunit/ext.cite.referencePreviews/isReferencePreviewsEnabled.test.js
index fc79e2522..66c50b416 100644
--- a/tests/qunit/ext.cite.referencePreviews/isReferencePreviewsEnabled.test.js
+++ b/tests/qunit/ext.cite.referencePreviews/isReferencePreviewsEnabled.test.js
@@ -1,106 +1,111 @@
-function createStubUserSettings( expectEnabled ) {
-	return {
-		isPreviewTypeEnabled() {
-			return expectEnabled !== false;
-		}
-	};
-}
+'use strict';
 
-function createStubUser( isAnon, options ) {
-	return {
-		isNamed() {
-			return !isAnon;
-		},
-		isAnon() {
-			return isAnon;
-		},
-		options
-	};
-}
+( function () {
+	function createStubUserSettings( expectEnabled ) {
+		return {
+			isPreviewTypeEnabled() {
+				return expectEnabled !== false;
+			}
+		};
+	}
 
-const options = { get: () => '1' };
-
-( mw.loader.getModuleNames().indexOf( 'ext.popups.main' ) !== -1 ?
-	QUnit.module :
-	QUnit.module.skip )( 'ext.cite.referencePreviews#isReferencePreviewsEnabled' );
-
-QUnit.test( 'relevant combinations of anonymous flags', ( assert ) => {
-	[
-		{
-			testCase: 'enabled for an anonymous user',
-			wgCiteReferencePreviewsActive: true,
-			isAnon: true,
-			enabledByAnon: true,
-			expected: true
-		},
-		{
-			testCase: 'turned off via the feature flag (anonymous user)',
-			wgCiteReferencePreviewsActive: false,
-			isAnon: true,
-			enabledByAnon: true,
-			expected: null
-		},
-		{
-			testCase: 'manually disabled by the anonymous user',
-			wgCiteReferencePreviewsActive: true,
-			isAnon: true,
-			enabledByAnon: false,
-			expected: false
-		}
-	].forEach( ( data ) => {
-		const user = {
-				isNamed: () => !data.isAnon && !data.isIPMasked,
-				isAnon: () => data.isAnon,
-				options: {
-					get: () => {}
-				}
+	function createStubUser( isAnon, options ) {
+		return {
+			isNamed() {
+				return !isAnon;
 			},
-			isPreviewTypeEnabled = () => {
-				if ( !data.isAnon ) {
-					assert.true( false, 'not expected to be called' );
-				}
-				return data.enabledByAnon;
+			isAnon() {
+				return isAnon;
 			},
+			options
+		};
+	}
+
+	const options = { get: () => '1' };
+
+	( mw.loader.getModuleNames().indexOf( 'ext.popups.main' ) !== -1 ?
+		QUnit.module :
+		QUnit.module.skip )( 'ext.cite.referencePreviews#isReferencePreviewsEnabled' );
+
+	QUnit.test( 'relevant combinations of anonymous flags', ( assert ) => {
+		[
+			{
+				testCase: 'enabled for an anonymous user',
+				wgCiteReferencePreviewsActive: true,
+				isAnon: true,
+				enabledByAnon: true,
+				expected: true
+			},
+			{
+				testCase: 'turned off via the feature flag (anonymous user)',
+				wgCiteReferencePreviewsActive: false,
+				isAnon: true,
+				enabledByAnon: true,
+				expected: null
+			},
+			{
+				testCase: 'manually disabled by the anonymous user',
+				wgCiteReferencePreviewsActive: true,
+				isAnon: true,
+				enabledByAnon: false,
+				expected: false
+			}
+		].forEach( ( data ) => {
+			const user = {
+					isNamed: () => !data.isAnon && !data.isIPMasked,
+					isAnon: () => data.isAnon,
+					options: {
+						get: () => {
+						}
+					}
+				},
+				isPreviewTypeEnabled = () => {
+					if ( !data.isAnon ) {
+						assert.true( false, 'not expected to be called' );
+					}
+					return data.enabledByAnon;
+				},
+				config = new Map();
+			config.set( 'wgCiteReferencePreviewsActive', data.wgCiteReferencePreviewsActive );
+
+			if ( data.isAnon ) {
+				user.options.get = () => assert.true( false, 'not expected to be called 2' );
+			} else {
+				user.options.get = () => data.enabledByRegistered ? '1' : '0';
+			}
+
+			assert.strictEqual(
+				require( 'ext.cite.referencePreviews' ).private.isReferencePreviewsEnabled( user, isPreviewTypeEnabled, config ),
+				data.expected,
+				data.testCase
+			);
+		} );
+	} );
+
+	QUnit.test( 'it should display reference previews when conditions are fulfilled', ( assert ) => {
+		const user = createStubUser( false, options ),
+			userSettings = createStubUserSettings( false ),
 			config = new Map();
-		config.set( 'wgCiteReferencePreviewsActive', data.wgCiteReferencePreviewsActive );
 
-		if ( data.isAnon ) {
-			user.options.get = () => assert.true( false, 'not expected to be called 2' );
-		} else {
-			user.options.get = () => data.enabledByRegistered ? '1' : '0';
-		}
+		config.set( 'wgCiteReferencePreviewsActive', true );
 
-		assert.strictEqual(
-			require( 'ext.cite.referencePreviews' ).private.isReferencePreviewsEnabled( user, isPreviewTypeEnabled, config ),
-			data.expected,
-			data.testCase
+		assert.true(
+			require( 'ext.cite.referencePreviews' ).private.isReferencePreviewsEnabled( user, userSettings, config ),
+			'If the user is logged in and the user is in the on group, then it\'s enabled.'
 		);
 	} );
-} );
 
-QUnit.test( 'it should display reference previews when conditions are fulfilled', ( assert ) => {
-	const user = createStubUser( false, options ),
-		userSettings = createStubUserSettings( false ),
-		config = new Map();
+	QUnit.test( 'it should not be enabled when the global is disabling it', ( assert ) => {
+		const user = createStubUser( false ),
+			userSettings = createStubUserSettings( false ),
+			config = new Map();
 
-	config.set( 'wgCiteReferencePreviewsActive', true );
+		config.set( 'wgCiteReferencePreviewsActive', false );
 
-	assert.true(
-		require( 'ext.cite.referencePreviews' ).private.isReferencePreviewsEnabled( user, userSettings, config ),
-		'If the user is logged in and the user is in the on group, then it\'s enabled.'
-	);
-} );
-
-QUnit.test( 'it should not be enabled when the global is disabling it', ( assert ) => {
-	const user = createStubUser( false ),
-		userSettings = createStubUserSettings( false ),
-		config = new Map();
-
-	config.set( 'wgCiteReferencePreviewsActive', false );
-
-	assert.strictEqual(
-		require( 'ext.cite.referencePreviews' ).private.isReferencePreviewsEnabled( user, userSettings, config ),
-		null,
-		'Reference Previews is disabled.'
-	);
-} );
+		assert.strictEqual(
+			require( 'ext.cite.referencePreviews' ).private.isReferencePreviewsEnabled( user, userSettings, config ),
+			null,
+			'Reference Previews is disabled.'
+		);
+	} );
+}() );
diff --git a/tests/qunit/ext.cite.referencePreviews/renderer.test.js b/tests/qunit/ext.cite.referencePreviews/renderer.test.js
index d20551019..783fb0f09 100644
--- a/tests/qunit/ext.cite.referencePreviews/renderer.test.js
+++ b/tests/qunit/ext.cite.referencePreviews/renderer.test.js
@@ -1,92 +1,96 @@
-let createReferencePreview;
-const previewTypes = { TYPE_REFERENCE: 'reference' };
+'use strict';
 
-( mw.loader.getModuleNames().indexOf( 'ext.popups.main' ) !== -1 ?
-	QUnit.module :
-	QUnit.module.skip )( 'ext.cite.referencePreviews#renderer', {
-	before() {
-		createReferencePreview = require( 'ext.cite.referencePreviews' ).private.createReferencePreview;
-	},
-	beforeEach: function () {
-		this.sandbox.stub( mw, 'msg', ( key ) => `<${ key }>` );
-		this.sandbox.stub( mw, 'message', ( key ) => ( {
-			exists: () => !key.endsWith( 'generic' ),
-			text: () => `<${ key }>`
-		} ) );
-		this.sandbox.stub( mw.html, 'escape', ( str ) => str && str.replace( /'/g, '&apos;' ).replace( /</g, '&lt;' ) );
-	}
-} );
+( function () {
+	let createReferencePreview;
+	const previewTypes = { TYPE_REFERENCE: 'reference' };
 
-QUnit.test( 'createReferencePreview(model)', ( assert ) => {
-	const model = {
-			url: '#custom_id',
-			extract: 'Custom <i>extract</i> with an <a href="/wiki/Internal">internal</a> and an <a href="//wikipedia.de" class="external">external</a> link',
-			type: previewTypes.TYPE_REFERENCE,
-			referenceType: 'web'
+	( mw.loader.getModuleNames().indexOf( 'ext.popups.main' ) !== -1 ?
+		QUnit.module :
+		QUnit.module.skip )( 'ext.cite.referencePreviews#renderer', {
+		before() {
+			createReferencePreview = require( 'ext.cite.referencePreviews' ).private.createReferencePreview;
 		},
-		preview = createReferencePreview( model );
+		beforeEach: function () {
+			this.sandbox.stub( mw, 'msg', ( key ) => `<${ key }>` );
+			this.sandbox.stub( mw, 'message', ( key ) => ( {
+				exists: () => !key.endsWith( 'generic' ),
+				text: () => `<${ key }>`
+			} ) );
+			this.sandbox.stub( mw.html, 'escape', ( str ) => str && str.replace( /'/g, '&apos;' ).replace( /</g, '&lt;' ) );
+		}
+	} );
 
-	assert.strictEqual( preview.hasThumbnail, false );
-	assert.strictEqual( preview.isTall, false );
+	QUnit.test( 'createReferencePreview(model)', ( assert ) => {
+		const model = {
+				url: '#custom_id',
+				extract: 'Custom <i>extract</i> with an <a href="/wiki/Internal">internal</a> and an <a href="//wikipedia.de" class="external">external</a> link',
+				type: previewTypes.TYPE_REFERENCE,
+				referenceType: 'web'
+			},
+			preview = createReferencePreview( model );
 
-	assert.strictEqual(
-		$( preview.el ).find( '.mwe-popups-title' ).text().trim(),
-		'<cite-reference-previews-web>'
-	);
-	assert.strictEqual(
-		$( preview.el ).find( '.mw-parser-output' ).text().trim(),
-		'Custom extract with an internal and an external link'
-	);
-	assert.strictEqual(
-		$( preview.el ).find( 'a[target="_blank"]' ).length,
-		1,
-		'only external links open in new tabs'
-	);
-} );
+		assert.strictEqual( preview.hasThumbnail, false );
+		assert.strictEqual( preview.isTall, false );
 
-QUnit.test( 'createReferencePreview default title', ( assert ) => {
-	const model = {
-			url: '',
-			extract: '',
-			type: previewTypes.TYPE_REFERENCE
-		},
-		preview = createReferencePreview( model );
+		assert.strictEqual(
+			$( preview.el ).find( '.mwe-popups-title' ).text().trim(),
+			'<cite-reference-previews-web>'
+		);
+		assert.strictEqual(
+			$( preview.el ).find( '.mw-parser-output' ).text().trim(),
+			'Custom extract with an internal and an external link'
+		);
+		assert.strictEqual(
+			$( preview.el ).find( 'a[target="_blank"]' ).length,
+			1,
+			'only external links open in new tabs'
+		);
+	} );
 
-	assert.strictEqual(
-		$( preview.el ).find( '.mwe-popups-title' ).text().trim(),
-		'<cite-reference-previews-reference>'
-	);
-} );
+	QUnit.test( 'createReferencePreview default title', ( assert ) => {
+		const model = {
+				url: '',
+				extract: '',
+				type: previewTypes.TYPE_REFERENCE
+			},
+			preview = createReferencePreview( model );
 
-QUnit.test( 'createReferencePreview updates fade-out effect on scroll', ( assert ) => {
-	const model = {
-			url: '',
-			extract: '',
-			type: previewTypes.TYPE_REFERENCE
-		},
-		preview = createReferencePreview( model ),
-		$extract = $( preview.el ).find( '.mwe-popups-extract' );
+		assert.strictEqual(
+			$( preview.el ).find( '.mwe-popups-title' ).text().trim(),
+			'<cite-reference-previews-reference>'
+		);
+	} );
 
-	$extract.children()[ 0 ].dispatchEvent( new Event( 'scroll' ) );
+	QUnit.test( 'createReferencePreview updates fade-out effect on scroll', ( assert ) => {
+		const model = {
+				url: '',
+				extract: '',
+				type: previewTypes.TYPE_REFERENCE
+			},
+			preview = createReferencePreview( model ),
+			$extract = $( preview.el ).find( '.mwe-popups-extract' );
 
-	assert.false( $extract.children()[ 0 ].isScrolling );
-	assert.false( $extract.hasClass( 'mwe-popups-fade-out' ) );
-} );
+		$extract.children()[ 0 ].dispatchEvent( new Event( 'scroll' ) );
 
-QUnit.test( 'createReferencePreview collapsible/sortable handling', ( assert ) => {
-	const model = {
-			url: '',
-			extract: '<table class="mw-collapsible"></table>' +
-				'<table class="sortable"><th class="headerSort" tabindex="1" title="Click here"></th></table>',
-			type: previewTypes.TYPE_REFERENCE
-		},
-		preview = createReferencePreview( model );
+		assert.false( $extract.children()[ 0 ].isScrolling );
+		assert.false( $extract.hasClass( 'mwe-popups-fade-out' ) );
+	} );
 
-	assert.strictEqual( $( preview.el ).find( '.mw-collapsible, .sortable, .headerSort' ).length, 0 );
-	assert.strictEqual( $( preview.el ).find( 'th' ).attr( 'tabindex' ), undefined );
-	assert.strictEqual( $( preview.el ).find( 'th' ).attr( 'title' ), undefined );
-	assert.strictEqual(
-		$( preview.el ).find( '.mwe-collapsible-placeholder' ).text(),
-		'<cite-reference-previews-collapsible-placeholder>'
-	);
-} );
+	QUnit.test( 'createReferencePreview collapsible/sortable handling', ( assert ) => {
+		const model = {
+				url: '',
+				extract: '<table class="mw-collapsible"></table>' +
+					'<table class="sortable"><th class="headerSort" tabindex="1" title="Click here"></th></table>',
+				type: previewTypes.TYPE_REFERENCE
+			},
+			preview = createReferencePreview( model );
+
+		assert.strictEqual( $( preview.el ).find( '.mw-collapsible, .sortable, .headerSort' ).length, 0 );
+		assert.strictEqual( $( preview.el ).find( 'th' ).attr( 'tabindex' ), undefined );
+		assert.strictEqual( $( preview.el ).find( 'th' ).attr( 'title' ), undefined );
+		assert.strictEqual(
+			$( preview.el ).find( '.mwe-collapsible-placeholder' ).text(),
+			'<cite-reference-previews-collapsible-placeholder>'
+		);
+	} );
+}() );