var mock = require( 'mock-require' ), Redux = require( 'redux' ), ReduxThunk = require( 'redux-thunk' ), wait = require( '../../src/wait' ); function identity( x ) { return x; } function constant( x ) { return function () { return x; }; } /* * Integration tests for actions and state of the preview part of the system. * Follows a diagram of the interactions considered valid, which will be * used as a basis for the following tests: * +--------+ |INACTIVE+-----------------------+ +---+----+ | ^ | | link or preview | | abandon end | | link_dwell| | | | | | | +---|----------------------------|---+ | | ACTIVE | | +---|----------------------------|---+ | + v | | OFF_LINK ON_LINK | Inside ACTIVE, or out | + ^ link or preview | ^ | of it, only actions with | | | abandon start | | | that same active link are | | +----------------------+ | | valid. Others are ignored. | | | | | +----------------------------+ | | preview or same link dwell | | | | NO_DATA +-------> DATA | | fetch end | +------------------------------------+ */ QUnit.module( 'ext.popups preview @integration', { setup: function () { var that = this, reducers, actions, registerChangeListener; this.resetWait = function () { that.waitDeferred = $.Deferred(); that.waitPromise = that.waitDeferred.promise(); that.wait.returns( that.waitPromise ); }; this.wait = this.sandbox.stub(); this.resetWait(); mock( '../../src/wait', this.wait ); // Require modules after the setting require mocks reducers = require( '../../src/reducers' ); actions = require( '../../src/actions' ); registerChangeListener = require( '../../src/changeListener' ); this.store = Redux.createStore( Redux.combineReducers( reducers ), Redux.compose( Redux.applyMiddleware( ReduxThunk.default ) ) ); this.actions = Redux.bindActionCreators( actions, this.store.dispatch ); this.registerChangeListener = function ( fn ) { return registerChangeListener( that.store, fn ); }; this.actions.boot( /* isEnabled: */ constant( true ), /* user */ { sessionId: constant( 'sessiontoken' ), isAnon: constant( true ) }, /* userSettings: */ { getPreviewCount: constant( 1 ) }, /* generateToken: */ constant( 'pagetoken' ), /* config: */ { get: identity } ); this.dwell = function ( el, ev, fetchResponse ) { that.resetWait(); that.actions.linkDwell( el, ev, { getPageSummary: function () { return $.Deferred().resolve( fetchResponse ).promise(); } }, function () { return 'pagetoken'; } ); return that.waitPromise; }; this.dwellAndShowPreview = function ( el, ev, fetchResponse ) { that.dwell( el, ev, fetchResponse ); that.waitDeferred.resolve(); return wait( 0 ); // Wait for next tick to resolve pending callbacks }; this.abandon = function () { that.resetWait(); that.actions.abandon(); return that.waitPromise; }; this.abandonAndWait = function () { that.abandon(); that.waitDeferred.resolve(); return wait( 0 ); // Wait for next tick to resolve pending callbacks }; this.dwellAndPreviewDwell = function ( el, ev, res ) { return that.dwellAndShowPreview( el, ev, res ).then( function () { // Get out of the link, and before the delay ends... var abandonPromise = that.abandon( el ), abandonDeferred = that.waitDeferred; // Dwell over the preview that.actions.previewDwell( el ); // Then the abandon delay finishes abandonDeferred.resolve(); return abandonPromise; } ); }; this.abandonPreview = function () { that.resetWait(); that.actions.abandon(); return that.waitPromise; }; } } ); QUnit.test( 'it boots in INACTIVE state', function ( assert ) { var state = this.store.getState(); assert.equal( state.preview.activeLink, undefined ); assert.equal( state.preview.linkInteractionToken, undefined ); } ); QUnit.test( 'in INACTIVE state, a link dwell switches it to ACTIVE', function ( assert ) { var state, gateway = { getPageSummary: function () { $.Deferred().promise(); } }; this.actions.linkDwell( 'element', 'event', gateway, constant( 'pagetoken' ) ); state = this.store.getState(); assert.equal( state.preview.activeLink, 'element', 'It has an active link' ); assert.equal( state.preview.shouldShow, false, 'Initializes with NO_DATA' ); } ); QUnit.test( 'in ACTIVE state, fetch end switches it to DATA', function ( assert ) { var store = this.store, done = assert.async(); this.dwellAndShowPreview( 'element', 'event', 42 ).then( function () { var state = store.getState(); assert.equal( state.preview.activeLink, 'element' ); assert.equal( state.preview.shouldShow, true, 'Should show when data has been fetched' ); done(); } ); } ); QUnit.test( 'in ACTIVE state, abandon start, and then end, switch it to INACTIVE', function ( assert ) { var that = this, done = assert.async(); this.dwellAndShowPreview( 'element', 'event', 42 ).then( function () { return that.abandonAndWait( 'element' ); } ).then( function () { var state = that.store.getState(); assert.equal( state.preview.activeLink, undefined, 'After abandoning, preview is back to INACTIVE' ); done(); } ); } ); QUnit.test( 'in ACTIVE state, abandon link, and then dwell preview, should keep it active after all delays', function ( assert ) { var that = this, done = assert.async(); this.dwellAndPreviewDwell( 'element', 'event', 42 ) .then( function () { var state = that.store.getState(); assert.equal( state.preview.activeLink, 'element' ); done(); } ); } ); QUnit.test( 'in ACTIVE state, abandon link, hover preview, back to link, should keep it active after all delays', function ( assert ) { var that = this, done = assert.async(); this.dwellAndPreviewDwell( 'element', 'event', 42 ) .then( function () { var abandonPreviewDeferred, dwellPromise, dwellDeferred; // Start abandoning the preview that.abandonPreview( 'element' ); abandonPreviewDeferred = that.waitDeferred; // Dwell back into the link, new event is triggered dwellPromise = that.dwell( 'element', 'event2', 42 ); dwellDeferred = that.waitDeferred; // Preview abandon happens next, before the fetch abandonPreviewDeferred.resolve(); // Then fetch happens dwellDeferred.resolve(); return dwellPromise; } ) .then( function () { var state = that.store.getState(); assert.equal( state.preview.activeLink, 'element' ); done(); } ); } );