mediawiki-extensions-Multim.../tests/qunit/lightboxinterface.test.js
Gilles Dubuc 6e127b25e2 Preload prev/next images
When the lightbox is opened, or prev/next pressed, preloads the
previous/next N images.

Technical debt introduced:
* initialization is a mess, with the viewer and the interface
  randomly setting properties on each other in different phases of
  execution. That got in the way and I shuffled things around
  until they worked, which is obviously not the way to have a
  robust system, but hopefully it will get scrapped soon anyway
  in favor of a clean top-down dependency injection.

Change-Id: Idcb5c40de1ac0b3e482decd66e56c4de8ec71b6b
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/155
2014-02-13 10:52:40 +01:00

117 lines
4.1 KiB
JavaScript

( function ( mw, $ ) {
QUnit.module( 'multilightbox.interface', QUnit.newMwEnvironment() );
QUnit.test( 'Sanity test, object creation and ui construction', 9, function ( assert ) {
var lightbox = new window.LightboxInterface();
function checkIfUIAreasAttachedToDocument( inDocument ) {
var msg = inDocument === 1 ? ' ' : ' not ';
assert.strictEqual( $( '.mlb-wrapper' ).length, inDocument, 'Wrapper area' + msg + 'attached.' );
assert.strictEqual( $( '.mlb-main' ).length, inDocument, 'Main area' + msg + 'attached.' );
assert.strictEqual( $( '.mlb-overlay' ).length, inDocument, 'Overlay area' + msg + 'attached.' );
}
// UI areas not attached to the document yet.
checkIfUIAreasAttachedToDocument(0);
// Attach lightbox to testing fixture to avoid interference with other tests.
lightbox.attach( '#qunit-fixture' );
// UI areas should now be attached to the document.
checkIfUIAreasAttachedToDocument(1);
// Unattach lightbox from document
lightbox.unattach();
checkIfUIAreasAttachedToDocument(0);
} );
QUnit.asyncTest( 'Check we are saving the resize listener', 2, function ( assert ) {
var img = new window.LightboxImage('http://en.wikipedia.org/w/skins/vector/images/search-ltr.png'),
lightbox = new window.LightboxInterface();
// resizeListener not saved yet
assert.strictEqual( this.resizeListener, undefined, 'Listener is not saved yet' );
// Save original showImage
lightbox.originalShowImage = lightbox.showImage;
// Mock showImage
lightbox.showImage = function ( image, ele ) {
// Call original showImage
this.originalShowImage( image, ele );
// resizeListener should have been saved
assert.notStrictEqual( this.resizeListener, undefined, 'Saved listener !' );
QUnit.start();
};
lightbox.load(img);
} );
QUnit.test( 'Fullscreen mode', 8, function ( assert ) {
var lightbox = new window.LightboxInterface(),
oldFnEnterFullscreen = $.fn.enterFullscreen,
oldFnExitFullscreen = $.fn.exitFullscreen,
oldSupportFullscreen = $.support.fullscreen;
// Since we don't want these tests to really open fullscreen
// which is subject to user security confirmation,
// we use a mock that pretends regular jquery.fullscreen behavior happened
$.fn.enterFullscreen = mw.mmvTestHelpers.enterFullscreenMock;
$.fn.exitFullscreen = mw.mmvTestHelpers.exitFullscreenMock;
// Attach lightbox to testing fixture to avoid interference with other tests.
lightbox.attach( '#qunit-fixture' );
$.support.fullscreen = false;
lightbox.setupFullscreenButton();
assert.ok( !lightbox.$fullscreenButton.is(':visible'),
'Fullscreen button is hidden when fullscreen mode is unavailable' );
$.support.fullscreen = true;
lightbox.setupFullscreenButton();
assert.ok( lightbox.$fullscreenButton.is(':visible'),
'Fullscreen button is visible when fullscreen mode is available' );
// Entering fullscreen
lightbox.$fullscreenButton.click();
assert.strictEqual( lightbox.$main.hasClass( 'jq-fullscreened' ) , true,
'Fullscreened area has the fullscreen class');
assert.strictEqual( lightbox.isFullscreen , true, 'Lightbox knows it\'s in fullscreen mode');
// Exiting fullscreen
lightbox.$fullscreenButton.click();
assert.strictEqual( lightbox.$main.hasClass( 'jq-fullscreened' ) , false,
'Fullscreened area doesn\'t have the fullscreen class anymore');
assert.strictEqual( lightbox.isFullscreen , false, 'Lightbox knows it\'s not in fullscreen mode');
// Entering fullscreen
lightbox.$fullscreenButton.click();
// Hard-exiting fullscreen
lightbox.$closeButton.click();
// Re-attach after hard-exit
lightbox.attach( '#qunit-fixture' );
assert.strictEqual( lightbox.$main.hasClass( 'jq-fullscreened' ) , false,
'Fullscreened area doesn\'t have the fullscreen class anymore');
assert.strictEqual( lightbox.isFullscreen , false, 'Lightbox knows it\'s not in fullscreen mode');
// Unattach lightbox from document
lightbox.unattach();
$.fn.enterFullscreen = oldFnEnterFullscreen;
$.fn.exitFullscreen = oldFnExitFullscreen;
$.support.fullscreen = oldSupportFullscreen;
} );
}( mediaWiki, jQuery ) );