From 034f1840abcfbb92f3501c8e582f427e1b9ca114 Mon Sep 17 00:00:00 2001
From: joakin <joaquin@chimeces.com>
Date: Mon, 12 Dec 2016 19:01:23 +0100
Subject: [PATCH] Introduce the settings change listener

Which for the moment is only in charge of showing and hiding the dialog

Change-Id: Ib57250236ff424abddb0fa627d2a48167a5d8d74
---
 extension.json                                |  1 +
 .../ext.popups/changeListeners/settings.js    | 24 ++++++++
 .../changeListeners/settings.test.js          | 57 +++++++++++++++++++
 3 files changed, 82 insertions(+)
 create mode 100644 resources/ext.popups/changeListeners/settings.js
 create mode 100644 tests/qunit/ext.popups/changeListeners/settings.test.js

diff --git a/extension.json b/extension.json
index ce1e8700b..c8cfbbb4b 100644
--- a/extension.json
+++ b/extension.json
@@ -74,6 +74,7 @@
 				"resources/ext.popups/changeListeners/render.js",
 				"resources/ext.popups/changeListeners/eventLogging.js",
 				"resources/ext.popups/changeListeners/previewCount.js",
+				"resources/ext.popups/changeListeners/settings.js",
 				"resources/ext.popups/boot.js"
 			],
 			"templates": {
diff --git a/resources/ext.popups/changeListeners/settings.js b/resources/ext.popups/changeListeners/settings.js
new file mode 100644
index 000000000..589743d7f
--- /dev/null
+++ b/resources/ext.popups/changeListeners/settings.js
@@ -0,0 +1,24 @@
+( function ( mw ) {
+
+	/**
+	 * Creates an instance of the settings change listener.
+	 *
+	 * @param {Object} boundActions
+	 * @param {Object} render function that renders a jQuery el with the settings
+	 * @return {ext.popups.ChangeListener}
+	 */
+	mw.popups.changeListeners.settings = function ( boundActions, render ) {
+		var settings;
+
+		return function ( prevState, state ) {
+			if ( state.settings.shouldShow && !settings ) {
+				settings = render( boundActions );
+				settings.show();
+			} else if ( !state.settings.shouldShow && settings ) {
+				settings.hide();
+				settings = undefined;
+			}
+		};
+	};
+
+}( mediaWiki ) );
diff --git a/tests/qunit/ext.popups/changeListeners/settings.test.js b/tests/qunit/ext.popups/changeListeners/settings.test.js
new file mode 100644
index 000000000..c7e987fa3
--- /dev/null
+++ b/tests/qunit/ext.popups/changeListeners/settings.test.js
@@ -0,0 +1,57 @@
+( function ( mw ) {
+
+	QUnit.module( 'ext.popups/changeListeners/settings', {
+		setup: function () {
+			this.render = this.sandbox.stub();
+			this.rendered = {
+				show: this.sandbox.spy(),
+				hide: this.sandbox.spy()
+			};
+			this.render.withArgs( 'actions' ).returns( this.rendered );
+
+			this.defaultState = { settings: { shouldShow: false } };
+			this.showState = { settings: { shouldShow: true } };
+			this.settings =
+				mw.popups.changeListeners.settings( 'actions', this.render );
+		}
+	} );
+
+	QUnit.test( 'it should not create settings when shouldShow is false', function ( assert ) {
+		this.settings( null, this.defaultState );
+		assert.notOk( this.render.called, 'The renderer should not be called' );
+	} );
+
+	QUnit.test( 'it should not create settings when shouldShow keeps being false', function ( assert ) {
+		this.settings( null, this.defaultState );
+		this.settings( this.defaultState, this.defaultState );
+
+		assert.notOk( this.render.called, 'The renderer should not be called' );
+	} );
+
+	QUnit.test( 'it should create settings when shouldShow becomes true', function ( assert ) {
+		this.settings( null, this.defaultState );
+		this.settings( this.defaultState, this.showState );
+
+		assert.ok( this.render.calledWith( 'actions' ), 'The renderer should be called with the actions' );
+		assert.ok( this.rendered.show.called, 'The rendered object should be showed' );
+	} );
+
+	QUnit.test( 'it should not create settings when shouldShow keeps being true', function ( assert ) {
+		this.settings( null, this.defaultState );
+		this.settings( this.defaultState, this.showState );
+		this.settings( this.showState, this.showState );
+
+		assert.ok( this.render.calledOnce, 'The renderer should be called only the first time' );
+		assert.ok( this.rendered.show.calledOnce, 'The rendered object should be showed just once' );
+		assert.notOk( this.rendered.hide.called, 'The rendered object should not be hidden' );
+	} );
+
+	QUnit.test( 'it should hide settings when shouldShow becomes false', function ( assert ) {
+		this.settings( null, this.defaultState );
+		this.settings( this.defaultState, this.showState );
+		this.settings( this.showState, this.defaultState );
+
+		assert.ok( this.rendered.hide.calledOnce, 'The rendered object should be hidden' );
+	} );
+
+}( mediaWiki ) );