Add link title change listener

Supporting changes:
* Remove the preview.previousActiveLink property from the state tree as
  it's unnecessary.

Change-Id: I657decf9425a7a9e2b27a798ed60b162569661d8

extension.json

@@ -66,6 +66,7 @@
 				"resources/ext.popups/reducers.js",
 				"resources/ext.popups/changeListener.js",
 				"resources/ext.popups/footerLinkChangeListener.js",
+				"resources/ext.popups/linkTitleChangeListener.js",
 				"resources/ext.popups/boot.js"
 			],
 			"templates": {

resources/ext.popups/footerLinkChangeListener.js

@@ -49,7 +49,7 @@
 	 *   creator is called.
 	 *
 	 * @param {Object} boundActions
-	 * @return {et.popups.ChangeListener}
+	 * @return {ext.popups.ChangeListener}
 	 */
 	mw.popups.changeListeners.footerLink = function ( boundActions ) {
 		var $footerLink;

resources/ext.popups/linkTitleChangeListener.js

@@ -0,0 +1,36 @@
+( function ( mw, $ ) {
+
+	/**
+	 * Creates an instance of the link title change listener.
+	 *
+	 * While the user dwells on a link, then it becomes the active link. The
+	 * change listener will remove a link's `title` attribute while it's the
+	 * active link.
+	 *
+	 * @return {ext.popups.ChangeListener}
+	 */
+	mw.popups.changeListeners.linkTitle = function () {
+		var title;
+
+		return function ( prevState, state ) {
+			var $link;
+
+			// Has the user dwelled on a link? If we've already removed its title
+			// attribute, then NOOP.
+			if ( state.preview.activeLink && !title ) {
+				$link = $( state.preview.activeLink );
+
+				title = $link.attr( 'title' );
+
+				$link.attr( 'title', '' );
+
+			// Has the user abandoned the link?
+			} else if ( prevState && prevState.preview.activeLink ) {
+				$( prevState.preview.activeLink ).attr( 'title', title );
+
+				title = undefined;
+			}
+		};
+	};
+
+}( mediaWiki, jQuery ) );

resources/ext.popups/reducers.js

@@ -43,7 +43,6 @@
 				pageToken: undefined,
 				linkInteractionToken: undefined,
 				activeLink: undefined,
-				previousActiveLink: undefined,
 				interactionStarted: undefined,
 				isDelayingFetch: false,
 				isFetching: false

tests/qunit/ext.popups/linkTitleChangeListener.test.js

@@ -0,0 +1,61 @@
+( function ( mw, $ ) {
+
+	// Since mw.popups.changeListeners.footerLink manipulates the DOM, this test
+	// is, by necessity, an integration test.
+	QUnit.module( 'ext.popups/footerLinkChangeListener @integration', {
+		setup: function () {
+			var that = this;
+
+			that.$link = $( '<a>' )
+				.attr( 'title', 'Foo' );
+
+			that.linkTitleChangeListener = mw.popups.changeListeners.linkTitle();
+
+			that.state = {
+				preview: {
+					activeLink: that.$link
+				}
+			};
+
+			// A helper method, which should make the following tests more easily
+			// readable.
+			that.whenTheLinkIsDwelledUpon = function () {
+				that.linkTitleChangeListener( undefined, that.state );
+			};
+		}
+	} );
+
+	QUnit.test( 'it should remove the title', function ( assert ) {
+		assert.expect( 1 );
+
+		this.whenTheLinkIsDwelledUpon();
+
+		assert.strictEqual( this.$link.attr( 'title' ), '' );
+	} );
+
+	QUnit.test( 'it should restore the title', function ( assert ) {
+		var nextState;
+
+		assert.expect( 1 );
+
+		this.whenTheLinkIsDwelledUpon();
+
+		// Does the change listener guard against receiving many state tree updates
+		// with the same activeLink property?
+		nextState = $.extend( {}, this.state, {
+			isDelayingFetch: false
+		} );
+
+		this.linkTitleChangeListener( this.state, nextState );
+
+		this.state = nextState;
+
+		nextState = $.extend( {}, this.state );
+		delete nextState.preview.activeLink;
+
+		this.linkTitleChangeListener( this.state, nextState );
+
+		assert.strictEqual( this.$link.attr( 'title' ), 'Foo' );
+	} );
+
+}( mediaWiki, jQuery ) );

tests/qunit/ext.popups/reducers.test.js

@@ -16,7 +16,6 @@
 					pageToken: undefined,
 					linkInteractionToken: undefined,
 					activeLink: undefined,
-					previousActiveLink: undefined,
 					interactionStarted: undefined,
 					isDelayingFetch: false,
 					isFetching: false