Simple test for enter/exiting fullscreen mode

While writing the test I spotted a bug and fixed it

Change-Id: I781c67752781960e4be88520f53163756fc11dab
Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/140

resources/mmv/mmv.js

@@ -176,7 +176,10 @@
 		// Register various event hooks. TODO: Make this a function that's only called once.
 
 		lightboxHooks.register( 'closeInterface', function () {
-			this.$nextButton.add( this.$prevButton ).css( 'top', '-999px' );
+			if ( this.$nextButton ) {
+				this.$nextButton.add( this.$prevButton ).css( 'top', '-999px' );
+			}
+			
 			$( document.body ).removeClass( 'mw-mlb-lightbox-open' );
 			if ( comingFromPopstate === false ) {
 				history.pushState( {}, '', '#' );
@@ -194,8 +197,6 @@
 		} );
 
 		lightboxHooks.register( 'fullscreen', function ( fullscreen ) {
-			viewer.ui.isFullscreen = fullscreen;
-
 			if ( this.$imageMetadata ) {
 				if ( fullscreen ) {
 					this.$imageMetadata.hide();

resources/multilightbox/lightboxinterface.js

@@ -69,6 +69,8 @@
 		} );
 
 		$( document ).on( 'jq-fullscreen-change', function ( e ) {
+			lbinterface.isFullscreen = e.fullscreen;
+
 			lightboxHooks.callAll( 'fullscreen', this, e.fullscreen );
 
 			if ( !lbinterface.fullscreenButtonJustPressed && !e.fullscreen ) {

tests/qunit/lightboxinterface.test.js

@@ -56,4 +56,45 @@
 		lightbox.load(img);
 	} );
 
+	QUnit.test( 'Fullscreen mode', 4, function ( assert ) {
+		var lightbox = new window.LightboxInterface(),
+			oldFnEnterFullscreen = $.fn.enterFullscreen,
+			oldFnExitFullscreen = $.fn.exitFullscreen;
+
+		// Since we don't want these tests to really open fullscreen
+		// which is subject to user security confirmation,
+		// we create a proxy and make it pretend that regular jquery.fullscreen behavior happened
+		$.fn.enterFullscreen = function() {
+			this.first().addClass( 'jq-fullscreened' ).data( 'isFullscreened', true );
+
+			$( document ).trigger( $.Event( 'jq-fullscreen-change', { element: this, fullscreen: true } ) );
+		};
+
+		$.fn.exitFullscreen = function() {
+			this.first().removeClass( 'jq-fullscreened' ).data( 'isFullscreened', false );
+
+			$( document ).trigger( $.Event( 'jq-fullscreen-change', { element: this, fullscreen: false } ) );
+		};
+
+		// Attach lightbox to testing fixture to avoid interference with other tests.
+		lightbox.attach( '#qunit-fixture' );
+
+		// 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');
+
+		$.fn.enterFullscreen = oldFnEnterFullscreen;
+		$.fn.exitFullscreen = oldFnExitFullscreen;
+	} );
+
 }( mediaWiki, jQuery ) );