Test metadata visibility in fullscreen mode

Add metadata visibility logic to the test
Convert the code to CSS since writing the test made me
realise that the current JS was superfluous

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

MultimediaViewerHooks.php

@@ -117,6 +117,7 @@ class MultimediaViewerHooks {
 	public static function getTestModules( array &$testModules, ResourceLoader &$resourceLoader ) {
 		$testModules['qunit']['mmv.tests'] = array(
 			'scripts' => array(
+				'tests/qunit/mmv.testhelpers.js',
 				'tests/qunit/mmv.test.js',
 				'tests/qunit/mmv.model.test.js',
 				'tests/qunit/mmv.provider.test.js',

resources/mmv/mmv.css

@@ -165,6 +165,10 @@ body.mobile .mw-mlb-controls,
 	position: relative;
 }
 
+.jq-fullscreened .mw-mlb-image-metadata {
+	display: none;
+}
+
 .mw-mlb-image-desc-div {
 	width: 50%;
 	overflow-y: auto;

resources/mmv/mmv.js

@@ -196,16 +196,6 @@
 			viewer.resize( ui );
 			return false;
 		} );
-
-		lightboxHooks.register( 'fullscreen', function ( fullscreen ) {
-			if ( this.$imageMetadata ) {
-				if ( fullscreen ) {
-					this.$imageMetadata.hide();
-				} else {
-					this.$imageMetadata.show();
-				}
-			}
-		} );
 	}
 
 	MMVP = MultimediaViewer.prototype;
@@ -329,9 +319,11 @@
 		var viewer = this,
 			fileTitle = this.currentImageFileTitle;
 
-		this.fetchImageInfo( fileTitle, [ 'url' ] ).done( function ( imageData, repoInfo, targetWidth, requestedWidth ) {
-			viewer.loadResizedImage( ui, imageData, targetWidth, requestedWidth );
-		} );
+		if ( fileTitle ) {
+			this.fetchImageInfo( fileTitle, [ 'url' ] ).done( function ( imageData, repoInfo, targetWidth, requestedWidth ) {
+				viewer.loadResizedImage( ui, imageData, targetWidth, requestedWidth );
+			} );
+		}
 
 		this.updateControls();
 	};
@@ -383,7 +375,7 @@
 			top: prevNextTop
 		} );
 
-		ui.$nextButton.toggleClass( 'disabled', this.lightbox.currentIndex >= ( this.lightbox.images.length - 1 ) );
+		ui.$nextButton.toggleClass( 'disabled', this.lightbox.currentIndex >= ( ( this.lightbox.images ? this.lightbox.images.length : 0 ) - 1 ) );
 		ui.$prevButton.toggleClass( 'disabled', this.lightbox.currentIndex <= 0 );
 	};
 

resources/multilightbox/multilightbox.css

@@ -103,10 +103,10 @@
 	height: 29px;
 }
 
-.mlb-main.fullscreened {
+.mlb-main.jq-fullscreened {
 	background-color: black;
 }
 
-.fullscreened .mlb-fullscreen {
+.jq-fullscreened .mlb-fullscreen {
 	background-image: url("../img/defullscreen.svg");
 }

tests/qunit/lightboxinterface.test.js

@@ -63,18 +63,9 @@
 
 		// 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 } ) );
-		};
+		// 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' );

tests/qunit/mmv.lightboxinterface.test.js

@@ -23,7 +23,7 @@
 	QUnit.module( 'mmv.lightboxInterface', QUnit.newMwEnvironment() );
 
 	QUnit.test( 'Sanity test, object creation and ui construction', 14, function ( assert ) {
-		var lightbox = new mw.LightboxInterface();
+		var lightbox = new mw.LightboxInterface( mw.mediaViewer );
 
 		function checkIfUIAreasAttachedToDocument( inDocument ) {
 			var msg = inDocument === 1 ? ' ' : ' not ';
@@ -55,7 +55,7 @@
 
 	QUnit.test( 'The interface is emptied properly when necessary', thingsShouldBeEmptied.length + thingsShouldHaveEmptyClass.length + 1, function ( assert ) {
 		var i,
-			lightbox = new mw.LightboxInterface();
+			lightbox = new mw.LightboxInterface( mw.mediaViewer );
 
 		lightbox.empty();
 
@@ -71,7 +71,7 @@
 	} );
 
 	QUnit.test( 'Handler registration and clearance work OK', 2, function ( assert ) {
-		var lightbox = new mw.LightboxInterface(),
+		var lightbox = new mw.LightboxInterface( mw.mediaViewer ),
 			handlerCalls = 0;
 
 		function handleEvent() {
@@ -87,7 +87,7 @@
 	} );
 
 	QUnit.test( 'Setting repository information in the UI works as expected', 3, function ( assert ) {
-		var lightbox = new mw.LightboxInterface();
+		var lightbox = new mw.LightboxInterface( mw.mediaViewer );
 
 		lightbox.setRepoDisplay( 'Example Wiki' );
 		assert.strictEqual( lightbox.$repo.text(), 'Learn more on Example Wiki', 'Text set to something useful for remote wiki - if this fails it might be because of localisation' );
@@ -100,7 +100,7 @@
 	} );
 
 	QUnit.test( 'Setting location information works as expected', 2, function ( assert ) {
-		var lightbox = new mw.LightboxInterface();
+		var lightbox = new mw.LightboxInterface( mw.mediaViewer );
 
 		lightbox.setLocationData(
 			50, 10, 20, 'multimediaviewer-geoloc-north',
@@ -121,6 +121,41 @@
 		);
 	} );
 
+	QUnit.test( 'Fullscreen mode', 3, function ( assert ) {
+		var lightbox = new mw.LightboxInterface( mw.mediaViewer ),
+			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 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' );
+		lightbox.viewer.ui = lightbox;
+		lightbox.viewer.lightbox = lightbox;
+
+		assert.strictEqual( lightbox.$imageMetadata.is( ':visible' ) , true, 'Image metadata is visible' );
+
+		// Entering fullscreen
+		lightbox.$fullscreenButton.click();
+
+		assert.strictEqual( lightbox.$imageMetadata.is( ':visible' ) , false, 'Image metadata is hidden' );
+
+		// Exiting fullscreen
+		lightbox.$fullscreenButton.click();
+
+		assert.strictEqual( lightbox.$imageMetadata.is( ':visible' ) , true, 'Image metadata is visible' );
+
+		// Unattach lightbox from document
+		lightbox.unattach();
+
+		$.fn.enterFullscreen = oldFnEnterFullscreen;
+		$.fn.exitFullscreen = oldFnExitFullscreen;
+	} );
+
 	QUnit.test( 'Metadata scrolling', 13, function ( assert ) {
 		var lightbox = new mw.LightboxInterface( mw.mediaViewer ),
 			keydown = $.Event( 'keydown' ),
@@ -221,7 +256,6 @@
 		lightbox.unattach();
 
 
-
 		// Second phase of the test: scroll memory
 
 		// Scroll down a little bit to check that the scroll memory works

tests/qunit/mmv.test.js

@@ -448,7 +448,7 @@
 	QUnit.test( 'getImageSizeApiArgs(): Limited by height and limited by width', 4, function ( assert ) {
 		var widths,
 			viewer = new mw.MultimediaViewer(),
-			ui = new mw.LightboxInterface();
+			ui = new mw.LightboxInterface( viewer );
 
 		// Fake thumbnail, width/height == 1.5
 		ui.currentImage = {

tests/qunit/mmv.testhelpers.js

@@ -0,0 +1,17 @@
+( function ( mw, $ ) {
+	var MTH = {};
+
+	MTH.enterFullscreenMock = function() {
+		this.first().addClass( 'jq-fullscreened' ).data( 'isFullscreened', true );
+		
+		$( document ).trigger( $.Event( 'jq-fullscreen-change', { element: this, fullscreen: true } ) );
+	};
+
+	MTH.exitFullscreenMock = function() {
+		this.first().removeClass( 'jq-fullscreened' ).data( 'isFullscreened', false );
+
+		$( document ).trigger( $.Event( 'jq-fullscreen-change', { element: this, fullscreen: false } ) );
+	};
+
+	mw.mmvTestHelpers = MTH;
+} )( mediaWiki, jQuery );