Merge "Fix linkTitleChangeListener" into mpga

resources/ext.popups/changeListeners/linkTitle.js

@@ -12,24 +12,53 @@
 	mw.popups.changeListeners.linkTitle = function () {
 		var title;
 
-		return function ( prevState, state ) {
+		/**
-			var $link;
+		 * Destroys the title attribute of the element, storing its value in local
+		 * state so that it can be restored later (see `restoreTitleAttr`).
+		 *
+		 * @param {Element} el
+		 */
+		function destroyTitleAttr( el ) {
+			var $el = $( el );
 
 			// Has the user dwelled on a link? If we've already removed its title
 			// attribute, then NOOP.
-			if ( state.preview.activeLink && !title ) {
+			if ( title ) {
-				$link = $( state.preview.activeLink );
+				return;
+			}
 
-				title = $link.attr( 'title' );
+			title = $el.attr( 'title' );
 
-				$link.attr( 'title', '' );
+			$el.attr( 'title', '' );
+		}
 
-			// Has the user abandoned the link?
+		/**
-			} else if ( prevState && prevState.preview.activeLink ) {
+		 * Restores the title attribute of the element.
-				$( prevState.preview.activeLink ).attr( 'title', title );
+		 *
+		 * @param {Element} el
+		 */
+		function restoreTitleAttr( el ) {
+			$( el ).attr( 'title', title );
 
 			title = undefined;
 		}
+
+		return function ( prevState, state ) {
+			var hasPrevActiveLink = prevState && prevState.preview.activeLink;
+
+			if ( hasPrevActiveLink ) {
+
+				// Has the user dwelled on a link immediately after abandoning another
+				// (remembering that the LINK_ABANDON_END action is delayed by
+				// ~10e2 ms).
+				if ( prevState.preview.activeLink !== state.preview.activeLink ) {
+					restoreTitleAttr( prevState.preview.activeLink );
+				}
+			}
+
+			if ( state.preview.activeLink ) {
+				destroyTitleAttr( state.preview.activeLink );
+			}
 		};
 	};
 

tests/qunit/ext.popups/changeListeners/linkTitle.test.js

@@ -42,15 +42,13 @@
 
 		// Does the change listener guard against receiving many state tree updates
 		// with the same activeLink property?
-		nextState = $.extend( {}, this.state, {
+		nextState = $.extend( true, {}, this.state );
-			isDelayingFetch: false
-		} );
 
 		this.linkTitleChangeListener( this.state, nextState );
 
 		this.state = nextState;
 
-		nextState = $.extend( {}, this.state );
+		nextState = $.extend( true, {}, this.state );
 		delete nextState.preview.activeLink;
 
 		this.linkTitleChangeListener( this.state, nextState );
@@ -58,4 +56,39 @@
 		assert.strictEqual( this.$link.attr( 'title' ), 'Foo' );
 	} );
 
+	QUnit.test( 'it should restore the title when the user dwells on another link immediately', function ( assert ) {
+		var nextState,
+			$anotherLink = $( '<a title="Bar">' );
+
+		assert.expect( 3 );
+
+		this.whenTheLinkIsDwelledUpon();
+
+		nextState = $.extend( true, {}, this.state, {
+			preview: {
+				activeLink: $anotherLink
+			}
+		} );
+
+		this.linkTitleChangeListener( this.state, nextState );
+
+		assert.strictEqual( this.$link.attr( 'title' ), 'Foo' );
+		assert.strictEqual( $anotherLink.attr( 'title' ), '' );
+
+		// ---
+
+		this.state = nextState;
+
+		nextState = $.extend( true, {}, nextState );
+		delete nextState.preview.activeLink;
+
+		this.linkTitleChangeListener( this.state, nextState );
+
+		assert.strictEqual(
+			$anotherLink.attr( 'title' ),
+			'Bar',
+			'It should restore the title of the other link.'
+		);
+	} );
+
 }( mediaWiki, jQuery ) );