reducers: Reduce FETCH_COMPLETE if token matches

... instead of using the active element.

In the case of the eventLogging reducer, this fixes scenario 4.1 from
T159490#3150331, which was caused by late FETCH_COMPLETE actions being
reduced regardless of whether interaction had been finalised or a new
interaction had started.

Bug: T159490
Change-Id: If9d718625b0302ea2f75a778005643b4eef62bde

src/reducers/eventLogging.js

@@ -108,11 +108,15 @@ module.exports = function ( state, action ) {
 			} );
 
 		case actionTypes.FETCH_COMPLETE:
-			return nextState( state, {
-				interaction: nextState( state.interaction, {
-					previewType: action.result.type
-				} )
-			} );
+			if ( state.interaction && action.token === state.interaction.token ) {
+				return nextState( state, {
+					interaction: nextState( state.interaction, {
+						previewType: action.result.type
+					} )
+				} );
+			}
+
+			return state;
 
 		case actionTypes.PREVIEW_SHOW:
 			nextCount = state.previewCount + 1;

src/reducers/preview.js

@@ -81,7 +81,7 @@ module.exports = function ( state, action ) {
 				fetchResponse: undefined
 			} );
 		case actionTypes.FETCH_COMPLETE:
-			if ( action.el === state.activeLink ) {
+			if ( action.token === state.activeToken ) {
 				return nextState( state, {
 					fetchResponse: action.result,
 					shouldShow: true

tests/node-qunit/reducers/eventLogging.test.js

@@ -315,9 +315,13 @@ QUnit.test( 'PREVIEW_SHOW should update the perceived wait time of the interacti
 
 QUnit.test( 'FETCH_COMPLETE', function ( assert ) {
 	var model,
-		state = {
-			interaction: {}
-		};
+		token = '1234567890',
+		initialState = {
+			interaction: {
+				token: token
+			},
+		},
+		state;
 
 	model = createModel(
 		'Foo',
@@ -328,21 +332,46 @@ QUnit.test( 'FETCH_COMPLETE', function ( assert ) {
 		{}
 	);
 
-	state = eventLogging( state, {
+	state = eventLogging( initialState, {
 		type: 'FETCH_COMPLETE',
-		result: model
+		result: model,
+		token: token
 	} );
 
-	assert.deepEqual(
-		state,
-		{
-			interaction: {
-				previewType: model.type
-			}
-		},
+	assert.strictEqual(
+		state.interaction.previewType,
+		model.type,
 		'It mixes in the preview type to the interaction state.'
 	);
 
+	// ---
+	state = eventLogging( initialState, {
+		type: 'FETCH_COMPLETE',
+		result: model,
+		token: 'banana'
+	} );
+
+	assert.strictEqual(
+		initialState,
+		state,
+		'It should NOOP if there\'s a new interaction.'
+	);
+
+	// ---
+	delete initialState.interaction;
+
+	state = eventLogging( initialState, {
+		type: 'FETCH_COMPLETE',
+		result: model,
+		token: '0123456789'
+	} );
+
+	assert.strictEqual(
+		initialState,
+		state,
+		'It should NOOP if the interaction has been finalised.'
+	);
+
 	QUnit.test( 'ABANDON_START', function ( assert ) {
 		var state = {
 				interaction: {}

tests/node-qunit/reducers/preview.test.js

@@ -152,12 +152,13 @@ QUnit.test( 'ABANDON_END', function ( assert ) {
 } );
 
 QUnit.test( 'FETCH_COMPLETE', function ( assert ) {
-	var state = {
-			activeLink: this.el
+	var token = '1234567890',
+		state = {
+			activeToken: token
 		},
 		action = {
 			type: 'FETCH_COMPLETE',
-			el: this.el,
+			token: token,
 			result: {}
 		};
 
@@ -166,7 +167,7 @@ QUnit.test( 'FETCH_COMPLETE', function ( assert ) {
 	assert.deepEqual(
 		preview( state, action ),
 		{
-			activeLink: state.activeLink, // Previous state.
+			activeToken: state.activeToken, // Previous state.
 
 			fetchResponse: action.result,
 			shouldShow: true
@@ -176,12 +177,9 @@ QUnit.test( 'FETCH_COMPLETE', function ( assert ) {
 
 	// ---
 
-	state = {
-		activeLink: 'another active link'
-	};
 	action = {
 		type: 'FETCH_COMPLETE',
-		el: this.el,
+		token: 'banana',
 		result: {}
 	};