Merge "Introduce the settings change listener" into mpga

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": {

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 ) );

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 ) );