QA: Test renderer#show

Binding the behavior has been left out as it requires some refactoring.
Ideally, that functionality should be tested via integration tests, which
is already done.

Bug: T133022
Change-Id: If2fd472847eb3557de97c7ec9619e8831e9bda6d

src/renderer.js

@@ -107,7 +107,10 @@ function render( model ) {
 		 * @return {jQuery.Promise}
 		 */
 		show: function ( event, boundActions, token ) {
-			return show( preview, event, boundActions, token );
+			return show(
+				preview, event, $( event.target ), boundActions, token,
+				document.body
+			);
 		},
 
 		/**
@@ -248,35 +251,36 @@ function renderExtract( extract, title ) {
  *
  * @param {ext.popups.Preview} preview
  * @param {Event} event
+ * @param {jQuery} $link event target
  * @param {ext.popups.PreviewBehavior} behavior
  * @param {String} token
+ * @param {Object} container DOM object to which pokey masks are appended
  * @return {jQuery.Promise} A promise that resolves when the promise has faded
  *  in
  */
-function show( preview, event, behavior, token ) {
-	var $link = $( event.target ),
-		layout = createLayout(
-			preview.isTall,
-			{
-				pageX: event.pageX,
-				pageY: event.pageY,
-				clientY: event.clientY
-			},
-			{
-				clientRects: $link.get( 0 ).getClientRects(),
-				offset: $link.offset(),
-				width: $link.width(),
-				height: $link.height()
-			},
-			{
-				scrollTop: $window.scrollTop(),
-				width: $window.width(),
-				height: $window.height()
-			},
-			SIZES.pokeySize
-		);
+function show( preview, event, $link, behavior, token, container ) {
+	var layout = createLayout(
+		preview.isTall,
+		{
+			pageX: event.pageX,
+			pageY: event.pageY,
+			clientY: event.clientY
+		},
+		{
+			clientRects: $link.get( 0 ).getClientRects(),
+			offset: $link.offset(),
+			width: $link.width(),
+			height: $link.height()
+		},
+		{
+			scrollTop: $window.scrollTop(),
+			width: $window.width(),
+			height: $window.height()
+		},
+		SIZES.pokeySize
+	);
 
-	preview.el.appendTo( document.body );
+	preview.el.appendTo( container );
 
 	layoutPreview(
 		preview, layout, getClasses( preview, layout ),
@@ -734,6 +738,7 @@ module.exports = {
 	createPreview: createPreview,
 	createEmptyPreview: createEmptyPreview,
 	bindBehavior: bindBehavior,
+	show: show,
 	hide: hide,
 	createThumbnail: createThumbnail,
 	createThumbnailElement: createThumbnailElement,

tests/node-qunit/renderer.js

@@ -241,6 +241,71 @@ QUnit.test( 'bindBehavior - settings link URL', function ( assert ) {
 	);
 } );
 
+QUnit.test( 'show', function ( assert ) {
+	var preview = createPreview(),
+		event = {
+			pageX: 252,
+			pageY: 1146,
+			clientY: 36
+		},
+		link = {
+			get: function () {
+				return {
+					getClientRects: function () {
+						return [ {
+							bottom: 37,
+							height: 13,
+							left: 201,
+							right: 357,
+							top: 24,
+							width: 156
+						} ];
+					}
+				};
+			},
+			offset: function () {
+				return {
+					top: 1134,
+					left: 201
+				};
+			},
+			width: function () {
+				return 156;
+			},
+			height: function () {
+				return 13;
+			}
+		},
+		behavior = createBehavior( this.sandbox ),
+		token = 'some-token',
+		$container = $( '<div>' ),
+		done = assert.async( 1 ),
+		promise;
+
+	preview.el.show = this.sandbox.stub();
+
+	promise = renderer.show(
+		preview, event, link, behavior, token, $container.get( 0 ) );
+
+	assert.notEqual(
+		$container.html(),
+		'',
+		'Container is not empty.'
+	);
+	assert.ok(
+		preview.el.show.calledOnce,
+		'Preview has been shown.'
+	);
+
+	promise.done( function () {
+		assert.ok(
+			behavior.previewShow.calledWith( token ),
+			'previewShow has been called with the correct token.'
+		);
+		done();
+	} );
+} );
+
 QUnit.test( 'hide - fade out up', function ( assert ) {
 	var preview = {
 			el: $( '<div>', { 'class': 'mwe-popups-fade-in-down' } ),