mediawiki-extensions-Popups/tests/node-qunit/reducers/preview.test.js

301 lines
5.8 KiB
JavaScript
Raw Normal View History

import preview from '../../../src/reducers/preview';
import actionTypes from '../../../src/actionTypes';
import { createNullModel } from '../../../src/preview/model';
QUnit.module( 'ext.popups/reducers#preview', {
beforeEach() {
this.el = 'active link';
}
} );
QUnit.test( '@@INIT', ( assert ) => {
const state = preview( undefined, { type: '@@INIT' } );
assert.expect( 1, 'All assertions are executed.' );
assert.deepEqual(
state,
{
enabled: {},
activeLink: undefined,
previewType: undefined,
measures: undefined,
activeToken: '',
shouldShow: false,
isUserDwelling: false,
wasClicked: false
},
'The initial state is correct.'
);
} );
QUnit.test( 'BOOT', ( assert ) => {
const action = {
type: actionTypes.BOOT,
initiallyEnabled: { page: true }
};
assert.expect( 1, 'All assertions are executed.' );
assert.deepEqual(
preview( {}, action ),
{
enabled: { page: true }
},
'It should set whether or not previews are enabled.'
);
} );
QUnit.test( 'SETTINGS_CHANGE', ( assert ) => {
const action = {
type: actionTypes.SETTINGS_CHANGE,
newValue: { page: true }
};
assert.expect( 1, 'All assertions are executed.' );
assert.deepEqual(
preview( { enabled: {} }, action ),
{
enabled: { page: true }
},
'It should set whether or not previews are enabled when settings change.'
);
} );
QUnit.test( 'LINK_DWELL initializes the state for a new link', function ( assert ) {
Update: cancel unused HTTP requests in flight Whenever an HTTP request sequence is started, i.e. wait for the fetch start time, issue a network request, and return the result, abort the process if the results are known to no longer be needed. This occurs when a user has dwelt upon one link and then abandoned it either during the fetch start wait time or during the fetch network request itself. This change is accomplished by preserving the pending promises in two actions, LINK_DWELL and FETCH_START, and whenever the ABANDON_START action is issued, it now aborts any previously pending XHR-like promise, called a "AbortPromise" which is just a thenable with an abort() method. There is a similar concept in Core: https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/ecc812f06e7dff587b3f31dc18189adbf4616351/resources/src/mediawiki.api/index.js. Aborting pending requests has big implications for client and server logging as requests are quickly canceled, especially on slower connections. These differences can be observed on the network tab of DevTools and the log in Redux DevTools. Consider, for instance, the scenario of dwelling upon and quickly abandoning a single link prior to this patch: BOOT EVENT_LOGGED LINK_DWELL FETCH_START ABANDON_START FETCH_END STATSV_LOGGED ABANDON_END EVENT_LOGGED FETCH_COMPLETE And after this patch when the fetch timer is canceled (prior to an actual network request): BOOT EVENT_LOGGED LINK_DWELL ABANDON_START ABANDON_END EVENT_LOGGED In the above sequence, FETCH_* and STATSV_LOGGED actions never occur. And after this patch when the network request itself is canceled: BOOT EVENT_LOGGED LINK_DWELL FETCH_START ABANDON_START FETCH_FAILED STATSV_LOGGED FETCH_COMPLETE ABANDON_END EVENT_LOGGED FETCH_FAILED occurs intentionally, STATSV_LOGGED and FETCH_COMPLETE still happen even though the fetch didn't complete successfully, and FETCH_END doesn't. Additionally, since less data is transmitted, it's possible that the timing and success rate of logging will improve on low bandwidth connections. Also, this patch tries to revise the JSDocs where possible to support type checking and fix a call to the missing assert.fail() function in changeListener.test.js. Bug: T197700 Change-Id: I9a73b3086fc8fb0edd897a347b5497d5362e20ef
2018-06-25 13:26:11 +00:00
const promise = $.Deferred().promise();
const action = {
type: actionTypes.LINK_DWELL,
el: this.el,
previewType: 'page',
event: {},
Update: cancel unused HTTP requests in flight Whenever an HTTP request sequence is started, i.e. wait for the fetch start time, issue a network request, and return the result, abort the process if the results are known to no longer be needed. This occurs when a user has dwelt upon one link and then abandoned it either during the fetch start wait time or during the fetch network request itself. This change is accomplished by preserving the pending promises in two actions, LINK_DWELL and FETCH_START, and whenever the ABANDON_START action is issued, it now aborts any previously pending XHR-like promise, called a "AbortPromise" which is just a thenable with an abort() method. There is a similar concept in Core: https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/ecc812f06e7dff587b3f31dc18189adbf4616351/resources/src/mediawiki.api/index.js. Aborting pending requests has big implications for client and server logging as requests are quickly canceled, especially on slower connections. These differences can be observed on the network tab of DevTools and the log in Redux DevTools. Consider, for instance, the scenario of dwelling upon and quickly abandoning a single link prior to this patch: BOOT EVENT_LOGGED LINK_DWELL FETCH_START ABANDON_START FETCH_END STATSV_LOGGED ABANDON_END EVENT_LOGGED FETCH_COMPLETE And after this patch when the fetch timer is canceled (prior to an actual network request): BOOT EVENT_LOGGED LINK_DWELL ABANDON_START ABANDON_END EVENT_LOGGED In the above sequence, FETCH_* and STATSV_LOGGED actions never occur. And after this patch when the network request itself is canceled: BOOT EVENT_LOGGED LINK_DWELL FETCH_START ABANDON_START FETCH_FAILED STATSV_LOGGED FETCH_COMPLETE ABANDON_END EVENT_LOGGED FETCH_FAILED occurs intentionally, STATSV_LOGGED and FETCH_COMPLETE still happen even though the fetch didn't complete successfully, and FETCH_END doesn't. Additionally, since less data is transmitted, it's possible that the timing and success rate of logging will improve on low bandwidth connections. Also, this patch tries to revise the JSDocs where possible to support type checking and fix a call to the missing assert.fail() function in changeListener.test.js. Bug: T197700 Change-Id: I9a73b3086fc8fb0edd897a347b5497d5362e20ef
2018-06-25 13:26:11 +00:00
token: '1234567890',
promise
};
assert.deepEqual(
preview( {}, action ),
{
activeLink: action.el,
previewType: 'page',
measures: action.measures,
activeToken: action.token,
shouldShow: false,
Update: cancel unused HTTP requests in flight Whenever an HTTP request sequence is started, i.e. wait for the fetch start time, issue a network request, and return the result, abort the process if the results are known to no longer be needed. This occurs when a user has dwelt upon one link and then abandoned it either during the fetch start wait time or during the fetch network request itself. This change is accomplished by preserving the pending promises in two actions, LINK_DWELL and FETCH_START, and whenever the ABANDON_START action is issued, it now aborts any previously pending XHR-like promise, called a "AbortPromise" which is just a thenable with an abort() method. There is a similar concept in Core: https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/ecc812f06e7dff587b3f31dc18189adbf4616351/resources/src/mediawiki.api/index.js. Aborting pending requests has big implications for client and server logging as requests are quickly canceled, especially on slower connections. These differences can be observed on the network tab of DevTools and the log in Redux DevTools. Consider, for instance, the scenario of dwelling upon and quickly abandoning a single link prior to this patch: BOOT EVENT_LOGGED LINK_DWELL FETCH_START ABANDON_START FETCH_END STATSV_LOGGED ABANDON_END EVENT_LOGGED FETCH_COMPLETE And after this patch when the fetch timer is canceled (prior to an actual network request): BOOT EVENT_LOGGED LINK_DWELL ABANDON_START ABANDON_END EVENT_LOGGED In the above sequence, FETCH_* and STATSV_LOGGED actions never occur. And after this patch when the network request itself is canceled: BOOT EVENT_LOGGED LINK_DWELL FETCH_START ABANDON_START FETCH_FAILED STATSV_LOGGED FETCH_COMPLETE ABANDON_END EVENT_LOGGED FETCH_FAILED occurs intentionally, STATSV_LOGGED and FETCH_COMPLETE still happen even though the fetch didn't complete successfully, and FETCH_END doesn't. Additionally, since less data is transmitted, it's possible that the timing and success rate of logging will improve on low bandwidth connections. Also, this patch tries to revise the JSDocs where possible to support type checking and fix a call to the missing assert.fail() function in changeListener.test.js. Bug: T197700 Change-Id: I9a73b3086fc8fb0edd897a347b5497d5362e20ef
2018-06-25 13:26:11 +00:00
isUserDwelling: true,
promise
},
'It should set active link and event as well as interaction info and hide the preview.'
);
} );
QUnit.test( 'LINK_DWELL on an active link only updates dwell state', function ( assert ) {
const action = {
type: actionTypes.LINK_DWELL,
el: this.el,
event: {},
token: '1234567890'
},
state = {
activeLink: this.el,
isUserDwelling: false
};
assert.deepEqual(
preview( state, action ),
{
activeLink: this.el,
isUserDwelling: true
},
'It should only set isUserDwelling to true'
);
} );
QUnit.test( 'ABANDON_END', ( assert ) => {
const action = {
type: actionTypes.ABANDON_END,
token: 'bananas'
};
let state = {
activeToken: 'bananas',
isUserDwelling: false
};
assert.deepEqual(
preview( state, action ),
{
activeLink: undefined,
previewType: undefined,
activeToken: undefined,
measures: undefined,
fetchResponse: undefined,
isUserDwelling: false,
shouldShow: false
},
'ABANDON_END should hide the preview and reset the interaction info.'
);
// ---
state = {
activeToken: 'apples',
isUserDwelling: true
};
assert.strictEqual(
preview( state, action ),
state,
'ABANDON_END should NOOP if the current interaction has changed.'
);
// ---
state = {
activeToken: 'bananas',
isUserDwelling: true
};
assert.strictEqual(
preview( state, action ),
state,
'ABANDON_END should NOOP if the user is dwelling on the preview.'
);
} );
QUnit.test( 'FETCH_COMPLETE', ( assert ) => {
const token = '1234567890';
let state = {
activeToken: token,
isUserDwelling: true
},
action = {
type: actionTypes.FETCH_COMPLETE,
token,
result: {}
};
assert.expect( 3, 'All assertions are executed.' );
assert.deepEqual(
preview( state, action ),
{
// Previous state.
activeToken: state.activeToken,
isUserDwelling: true,
fetchResponse: action.result,
shouldShow: true
},
'It should store the result and signal that a preview should be rendered.'
);
// ---
state = preview( state, {
type: actionTypes.ABANDON_START,
token
} );
assert.deepEqual(
preview( state, action ),
{
activeToken: token,
isUserDwelling: false, // Set when ABANDON_START is reduced.
wasClicked: false,
fetchResponse: action.result,
shouldShow: false
},
'It shouldn\'t signal that a preview should be rendered if the user has abandoned the link since the gateway request was made.'
);
// ---
action = {
type: actionTypes.FETCH_COMPLETE,
token: 'banana',
result: {}
};
assert.deepEqual(
preview( state, action ),
state,
'It should NOOP if the user has interacted with another link since the gateway request was made.'
);
} );
QUnit.test( actionTypes.FETCH_FAILED, ( assert ) => {
const token = '1234567890',
state = {
activeToken: token,
isUserDwelling: true
};
let action = {
type: actionTypes.FETCH_FAILED,
token
};
assert.expect( 2, 'All assertions are executed.' );
assert.deepEqual(
preview( state, action ),
{
activeToken: state.activeToken,
isUserDwelling: true
},
'It should not transition states.'
);
// ---
action = {
type: actionTypes.FETCH_COMPLETE,
token,
result: { title: createNullModel( 'Title', '/wiki/Title' ) }
};
assert.deepEqual(
preview( state, action ),
{
activeToken: state.activeToken,
isUserDwelling: true,
fetchResponse: action.result,
shouldShow: true
},
'It should store the result and signal that an error preview should be rendered.'
);
} );
QUnit.test( 'PREVIEW_DWELL', ( assert ) => {
const action = {
type: actionTypes.PREVIEW_DWELL
};
assert.expect( 1, 'All assertions are executed.' );
assert.deepEqual(
preview( {}, action ),
{
isUserDwelling: true
},
'It should mark the preview as being dwelled on.'
);
} );
QUnit.test( 'ABANDON_START', ( assert ) => {
const action = {
type: actionTypes.ABANDON_START
};
assert.deepEqual(
preview( {}, action ),
{
isUserDwelling: false,
wasClicked: false
},
'ABANDON_START should mark the preview having been abandoned.'
);
} );