From 3a449139db36d0d75e911a3773a826b4828cb7a4 Mon Sep 17 00:00:00 2001
From: Adam Silverstein <adamsilverstein@git.wordpress.org>
Date: Fri, 20 Jan 2017 16:14:23 +0000
Subject: [PATCH] Menus: trigger an event when menu items are added or removed.

Fire a `menu-item-added` event after a menu item is added to the DOM. Fire a `menu-removing-item` event before a menu item is removed from the DOM. Enables hooking into and responding to menu changes.

Props welcher, adamsilverstein.
Fixes #31218.


git-svn-id: https://develop.svn.wordpress.org/trunk@39928 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/js/nav-menu.js         | 29 +++++++++--
 tests/qunit/index.html              |  1 +
 tests/qunit/wp-admin/js/nav-menu.js | 80 +++++++++++++++++++++++++++++
 3 files changed, 105 insertions(+), 5 deletions(-)
 create mode 100644 tests/qunit/wp-admin/js/nav-menu.js

diff --git a/src/wp-admin/js/nav-menu.js b/src/wp-admin/js/nav-menu.js
index 535aaf12af..bcce09a5dd 100644
--- a/src/wp-admin/js/nav-menu.js
+++ b/src/wp-admin/js/nav-menu.js
@@ -1003,21 +1003,33 @@ var wpNavMenu;
 		},
 
 		/**
-		 * Process the add menu item request response into menu list item.
+		 * Process the add menu item request response into menu list item. Appends to menu.
 		 *
-		 * @param string menuMarkup The text server response of menu item markup.
-		 * @param object req The request arguments.
+		 * @param {string} menuMarkup The text server response of menu item markup.
+		 *
+		 * @fires document#menu-item-added Passes menuMarkup as a jQuery object.
 		 */
 		addMenuItemToBottom : function( menuMarkup ) {
-			$(menuMarkup).hideAdvancedMenuItemFields().appendTo( api.targetList );
+			var $menuMarkup = $( menuMarkup );
+			$menuMarkup.hideAdvancedMenuItemFields().appendTo( api.targetList );
 			api.refreshKeyboardAccessibility();
 			api.refreshAdvancedAccessibility();
+			$( document ).trigger( 'menu-item-added', [ $menuMarkup ] );
 		},
 
+		/**
+		 * Process the add menu item request response into menu list item. Prepends to menu.
+		 *
+		 * @param {string} menuMarkup The text server response of menu item markup.
+		 *
+		 * @fires document#menu-item-added Passes menuMarkup as a jQuery object.
+		 */
 		addMenuItemToTop : function( menuMarkup ) {
-			$(menuMarkup).hideAdvancedMenuItemFields().prependTo( api.targetList );
+			var $menuMarkup = $( menuMarkup );
+			$menuMarkup.hideAdvancedMenuItemFields().prependTo( api.targetList );
 			api.refreshKeyboardAccessibility();
 			api.refreshAdvancedAccessibility();
+			$( document ).trigger( 'menu-item-added', [ $menuMarkup ] );
 		},
 
 		attachUnsavedChangesListener : function() {
@@ -1243,9 +1255,16 @@ var wpNavMenu;
 			wrapper.removeClass( 'has-no-menu-item' );
 		},
 
+		/**
+		 * Remove a menu item.
+		 * @param  {object} el The element to be removed as a jQuery object.
+		 *
+		 * @fires document#menu-removing-item Passes the element to be removed.
+		 */
 		removeMenuItem : function(el) {
 			var children = el.childMenuItems();
 
+			$( document ).trigger( 'menu-removing-item', [ el ] );
 			el.addClass('deleting').animate({
 					opacity : 0,
 					height: 0
diff --git a/tests/qunit/index.html b/tests/qunit/index.html
index 9a17ec23b8..58591e4860 100644
--- a/tests/qunit/index.html
+++ b/tests/qunit/index.html
@@ -66,6 +66,7 @@
 		<script src="wp-admin/js/customize-nav-menus.js"></script>
 		<script src="wp-admin/js/customize-widgets.js"></script>
 		<script src="wp-admin/js/word-count.js"></script>
+		<script src="wp-admin/js/nav-menu.js"></script>
 
 		<!-- Customizer templates for sections -->
 		<script type="text/html" id="tmpl-customize-section-default">
diff --git a/tests/qunit/wp-admin/js/nav-menu.js b/tests/qunit/wp-admin/js/nav-menu.js
new file mode 100644
index 0000000000..bd24b63712
--- /dev/null
+++ b/tests/qunit/wp-admin/js/nav-menu.js
@@ -0,0 +1,80 @@
+/*global wpNavMenu */
+( function( QUnit, $ ) {
+	QUnit.module( 'nav-menu' );
+	var assert,
+		eventsExpected = 3,
+		eventsFired = 0;
+
+	// Fail if we don't see the expected number of events triggered in 1500 ms.
+	setTimeout( function() {
+		assert.equal(
+			eventsFired,
+			eventsExpected,
+			eventsExpected + ' wpNavMenu events should fire.'
+		);
+	}, 1500 );
+
+	QUnit.test( 'Testing wpNavMenu event triggers.', function( assertPassed ) {
+		assert = assertPassed;
+
+		assert.expect( 3 );
+
+		var testString = '<div>Hello World</div>';
+
+		// Mock the internal function calls so the don't fail.
+		$.fn.hideAdvancedMenuItemFields = function() {
+			return {
+				'appendTo':       function() { return true; },
+				'prependTo':      function() { return true; }
+			};
+		};
+
+		$.fn.extend( {
+			'childMenuItems':  function() { return $(); },
+			'shiftDepthClass': function() { return $(); }
+		} );
+
+		// Set up the events we should test.
+		var eventsToTest = [
+			{
+				'event':         'addMenuItemToBottom',
+				'data':          testString,
+				'expect':        $( testString ),
+				'shouldTrigger': 'menu-item-added'
+			},
+			{
+				'event':         'addMenuItemToTop',
+				'data':          testString,
+				'expect':        $( testString ),
+				'shouldTrigger': 'menu-item-added'
+			},
+			{
+				'event':         'removeMenuItem',
+				'data':          $( testString ),
+				'expect':        $( testString ),
+				'shouldTrigger': 'menu-removing-item'
+			}
+		];
+
+		// Test each of the events.
+		_.each( eventsToTest, function( theEvent ) {
+
+			var done = assert.async();
+
+			$( document ).on( theEvent.shouldTrigger, function( evt, passed ) {
+				assert.equal(
+					passed.html(),
+					theEvent.expect.html(),
+					'The ' + theEvent.event + ' should trigger ' + theEvent.shouldTrigger + '.'
+				);
+				eventsFired++;
+				done();
+			} );
+			wpNavMenu[ theEvent.event ]( theEvent.data );
+			$( document ).off( theEvent.shouldTrigger );
+		} );
+
+	} );
+
+
+} )( window.QUnit, jQuery );