Ticket #32688: 32688.8.diff

tests/qunit/fixtures/customize-menus.js

@@ +1 @@
+
 window._wpCustomizeNavMenusSettings = {
         'nonce': 'yo',
         'phpIntMax': '2147483647',
         'menuItemTransport': 'postMessage',
         'allMenus': [{
                 'term_id': '2',
-                'name': 'Awesome menu',
-                'slug': 'awesome-menu',
+                'name': 'Social Menu',
+                'slug': 'social-menu',
                 'term_group': '0',
                 'term_taxonomy_id': '2',
                 'taxonomy': 'nav_menu',
@@ -14 +15 @@
                 'count': '0'
         }, {
                 'term_id': '3',
-                'name': 'Cool Menu',
-                'slug': 'cool-menu',
+                'name': 'Primary Menu',
+                'slug': 'primary-menu',
                 'term_group': '0',
                 'term_taxonomy_id': '3',
                 'taxonomy': 'nav_menu',
@@ -48 +49 @@
                         'nav_menu_term_id': 0
                 }
         },
-        'itemTypes': {
-                'postTypes': {
-                        'page': {
-                                'label': 'Page'
-                        },
-                        'post': {
-                                'label': 'Post'
-                        }
+        'itemTypes': [
+                {
+                        'title': 'Post',
+                        'type': 'post_type',
+                        'object': 'post'
+                },
+                {
+                        'title': 'Page',
+                        'type': 'post_type',
+                        'object': 'page'
+                },
+                {
+                        'title': 'Category',
+                        'type': 'taxonomy',
+                        'object': 'category'
+                },
+                {
+                        'title': 'Tag',
+                        'type': 'taxonomy',
+                        'object': 'post_tag'
                 },
-                'taxonomies': {
-                        'post_tag': {
-                                'label': 'Tag'
-                        },
-                        'post_format': {
-                                'label': 'Format'
-                        },
-                        'category': {
-                                'label': 'Category'
-                        }
+                {
+                        'title': 'Format',
+                        'type': 'taxonomy',
+                        'object': 'post_format'
                 }
-        },
+        ],
         'l10n': {
                 'custom_label': 'Custom Link',
                 'customizingMenus': 'Customizing ▸ Menus',
@@ -97 +104 @@
                 'untitled': '(no label)'
         }
 };
-
 window._wpCustomizeSettings.panels.nav_menus = {
         'id': 'nav_menus',
         'description': '<p>This panel is used for managing navigation menus for content you have already published on your site. You can create menus and add items for existing content such as pages, posts, categories, tags, formats, or custom links.</p><p>Menus can be displayed in locations defined by your theme or in <a href="javascript:wp.customize.panel( "widgets" ).focus();">widget areas</a> by adding a &#8220;Custom Menu&#8221; widget.</p>',
@@ -109 +115 @@
         'instanceNumber': 2
 };
 
+// Nav Menu Locations
+window._wpCustomizeSettings.sections.menu_locations = {
+        'id': 'menu_locations',
+        'description': '<p>Your theme contains 1 menu location. Select which menu you would like to use.<\/p><p>You can also place menus in widget areas with the Custom Menu widget.<\/p>',
+        'priority': 5,
+        'panel': 'nav_menus',
+        'type': 'default',
+        'title': 'Menu Locations',
+        'content': '',
+        'active': true,
+        'instanceNumber': 13,
+        'customizeAction': 'Customizing &#9656; Menus'
+};
+window._wpCustomizeSettings.settings['nav_menu_locations[social]'] = {
+        'value': 2,
+        'transport': 'postMessage',
+        'dirty': false
+};
+window._wpCustomizeSettings.controls['nav_menu_locations[social]'] = {
+        'settings': { 'default': 'nav_menu_locations[social]' },
+        'type': 'nav_menu_location',
+        'priority': 10,
+        'active': true,
+        'section': 'menu_locations',
+        'content': '<li id="customize-control-nav_menu_locations-social" class="customize-control customize-control-nav_menu_location"> <label> <span class="customize-control-title">Social Links Menu</span> <select data-customize-setting-link="nav_menu_locations[social]"> <option value="0">&mdash; Select &mdash;</option><option value="59">Prim</option><option value="60" selected="selected">Social</option><option value="61">test11</option><option value="62">test222</option><option value="63">test333</option> </select> </label> </li>',
+        'label': 'Social Links Menu',
+        'description': '',
+        'instanceNumber': 40,
+        'locationId': 'social'
+};
+window._wpCustomizeSettings.settings['nav_menu_locations[primary]'] = {
+        'value': 3,
+        'transport': 'postMessage',
+        'dirty': false
+};
+window._wpCustomizeSettings.controls['nav_menu_locations[primary]'] = {
+        'active': true,
+        'content': '<li id="customize-control-nav_menu_locations-primary" class="customize-control customize-control-nav_menu_location"> <label> <span class="customize-control-title">Primary Menu</span> <select data-customize-setting-link="nav_menu_locations[primary]"> <option value="0">&mdash; Select &mdash;</option><option value="59" selected="selected">Prim</option><option value="60">Social</option><option value="61">test11</option><option value="62">test222</option><option value="63">test333</option> </select> </label> </li>',
+        'description': '',
+        'instanceNumber': 39,
+        'label': 'Primary Menu',
+        'locationId': 'primary',
+        'priority': 10,
+        'section': 'menu_locations',
+        'settings': {
+                'default': 'nav_menu_locations[primary]'
+        },
+        'type': 'nav_menu_location'
+};
+
+// Nav Menus
+window._wpCustomizeSettings.sections['nav_menu[3]'] = {
+        'id': 'nav_menu[3]',
+        'description': '',
+        'priority': 10,
+        'panel': 'nav_menus',
+        'type': 'nav_menu',
+        'title': 'Primary Menu',
+        'content': '',
+        'active': true,
+        'instanceNumber': 15,
+        'customizeAction': 'Customizing &#9656; Menus',
+        'menu_id': 3
+};
+window._wpCustomizeSettings.settings['nav_menu[3]'] = {
+        'value': {
+                'name': 'Primary menu',
+                'description': '',
+                'parent': 0,
+                'auto_add': false
+        },
+        'transport': 'postMessage',
+        'dirty': false
+};
+
+window._wpCustomizeSettings.sections['nav_menu[2]'] = {
+        'id': 'nav_menu[2]',
+        'description': '',
+        'priority': 10,
+        'panel': 'nav_menus',
+        'type': 'nav_menu',
+        'title': 'Social menu',
+        'content': '',
+        'active': true,
+        'instanceNumber': 14,
+        'customizeAction': 'Customizing &#9656; Menus',
+        'menu_id': 2
+};
+window._wpCustomizeSettings.settings['nav_menu[2]'] = {
+        'value': {
+                'name': 'Social menu',
+                'description': '',
+                'parent': 0,
+                'auto_add': false
+        },
+        'transport': 'postMessage',
+        'dirty': false
+};
+
+// Menu items
+window._wpCustomizeSettings.settings['nav_menu_item[2000]'] = {
+        'dirty': false,
+        'transport': 'postMessage',
+        'value': {
+                'attr_title': '',
+                'classes': [
+                        ''
+                ],
+                'description': '',
+                'menu_item_parent': 0,
+                'nav_menu_term_id': 3,
+                'object': 'page',
+                'object_id': 2,
+                'original_title': 'Sample Page',
+                'position': 1,
+                'status': 'publish',
+                'target': '',
+                'title': 'Sample Page',
+                'type': 'post_type',
+                'type_label': 'Page',
+                'url': 'http://src.wordpress-develop.dev/sample-page/',
+                'xfn': ''
+        }
+};
+window._wpCustomizeSettings.controls['nav_menu_item[2000]'] = {
+        'active': true,
+        'attr_title': '',
+        'classes': '',
+        'content': '<li id="customize-control-nav_menu_item-2000" class="customize-control customize-control-nav_menu_item"> </li>',
+        'depth': 0,
+        'description': '',
+        'el_classes': 'menu-item menu-item-depth-0 menu-item-page menu-item-edit-inactive',
+        'instanceNumber': 42,
+        'item_type': 'post_type',
+        'item_type_label': 'Page',
+        'label': 'Sample Page',
+        'menu_item_id': 2000,
+        'original_title': 'Sample Page',
+        'parent': 0,
+        'priority': 1,
+        'section': 'nav_menu[3]',
+        'settings': {
+                'default': 'nav_menu_item[2000]'
+        },
+        'target': '',
+        'title': 'Sample Page',
+        'type': 'nav_menu_item',
+        'url': 'http://src.wordpress-develop.dev/sample-page/',
+        'xfn': ''
+};
+
+window._wpCustomizeSettings.settings['nav_menu_item[2001]'] = {
+        'dirty': false,
+        'transport': 'postMessage',
+        'value': {
+                'attr_title': '',
+                'classes': [
+                        ''
+                ],
+                'description': '',
+                'menu_item_parent': 0,
+                'nav_menu_term_id': 3,
+                'object': 'custom',
+                'object_id': 2001,
+                'original_title': '',
+                'position': 2,
+                'status': 'publish',
+                'target': '',
+                'title': 'Example',
+                'type': 'custom',
+                'type_label': 'Custom Link',
+                'url': 'http://example.com/',
+                'xfn': ''
+        }
+};
+window._wpCustomizeSettings.controls['nav_menu_item[2001]'] = {
+        'active': true,
+        'attr_title': '',
+        'classes': '',
+        'content': '<li id="customize-control-nav_menu_item-2001" class="customize-control customize-control-nav_menu_item"> </li>',
+        'depth': 0,
+        'description': '',
+        'el_classes': 'menu-item menu-item-depth-0 menu-item-custom menu-item-edit-inactive',
+        'instanceNumber': 46,
+        'item_type': 'custom',
+        'item_type_label': 'Custom Link',
+        'label': 'Example',
+        'menu_item_id': 2001,
+        'original_title': '',
+        'parent': 0,
+        'priority': 2,
+        'section': 'nav_menu[3]',
+        'settings': {
+                'default': 'nav_menu_item[2001]'
+        },
+        'target': '',
+        'title': 'Example',
+        'type': 'nav_menu_item',
+        'url': 'http://example.com/',
+        'xfn': ''
+};
+
+window._wpCustomizeSettings.settings['nav_menu_item[2002]'] = {
+        'dirty': false,
+        'transport': 'postMessage',
+        'value': {
+                'attr_title': '',
+                'classes': '',
+                'description': '',
+                'menu_item_parent': 2001,
+                'nav_menu_term_id': 3,
+                'object': '',
+                'object_id': 0,
+                'original_title': 'Sub-Example',
+                'position': 3,
+                'status': 'publish',
+                'target': '',
+                'title': 'Example',
+                'type': 'custom',
+                'type_label': 'Custom Link',
+                'url': 'http://sub.example.com/',
+                'xfn': ''
+        }
+};
+window._wpCustomizeSettings.controls['nav_menu_item[2002]'] = {
+        'active': true,
+        'attr_title': '',
+        'classes': '',
+        'content': '<li id="customize-control-nav_menu_item-2002" class="customize-control customize-control-nav_menu_item"> </li>',
+        'depth': 0,
+        'description': '',
+        'el_classes': 'menu-item menu-item-depth-0 menu-item-custom menu-item-edit-inactive',
+        'instanceNumber': 46,
+        'item_type': 'custom',
+        'item_type_label': 'Custom Link',
+        'label': 'Sub-Example',
+        'menu_item_id': 2001,
+        'original_title': '',
+        'parent': 2001,
+        'priority': 3,
+        'section': 'nav_menu[3]',
+        'settings': {
+                'default': 'nav_menu_item[2002]'
+        },
+        'target': '',
+        'title': 'Sub-Example',
+        'type': 'nav_menu_item',
+        'url': 'http://sub.example.com/',
+        'xfn': ''
+};
+
+// Meta controls
+window._wpCustomizeSettings.sections.add_menu = {
+        'id': 'add_menu',
+        'description': '',
+        'priority': 999,
+        'panel': 'nav_menus',
+        'type': 'new_menu',
+        'title': 'Add a Menu',
+        'content': '<li id="accordion-section-add_menu" class="accordion-section-new-menu">\n\t\t\t<button type="button" class="button-secondary add-new-menu-item add-menu-toggle" aria-expanded="false">\n\t\t\t\tAdd a Menu\t\t\t<\/button>\n\t\t\t<ul class="new-menu-section-content"><\/ul>\n\t\t<\/li>',
+        'active': true,
+        'instanceNumber': 16,
+        'customizeAction': 'Customizing &#9656; Menus'
+};
+window._wpCustomizeSettings.controls.new_menu_name = {
+        'settings': { 'default': 'new_menu_name' },
+        'type': 'text',
+        'priority': 10,
+        'active': true,
+        'section': 'add_menu',
+        'content': '<li id="customize-control-new_menu_name" class="customize-control customize-control-text"> <label> <input type="text" class="menu-name-field" placeholder="New menu name"  value="" data-customize-setting-link="new_menu_name" /> </label> </li>',
+        'label': '',
+        'description': '',
+        'instanceNumber': 46
+};
+window._wpCustomizeSettings.settings.new_menu_name = {
+        'value': '',
+        'transport': 'postMessage',
+        'dirty': false
+};
+
+// From nav-menu.js
 window.wpNavMenu = {
         'options': {
                 'menuItemDepthPerLevel': 30,
@@ -120 +408 @@
         'isRTL': false,
         'negateIfRTL': 1
 };
-

tests/qunit/fixtures/customize-settings.js

@@ -3 +3 @@
 
 var customizerRootElement;
 customizerRootElement = jQuery( '<div id="customize-theme-controls"><ul></ul></div>' );
-customizerRootElement.css( { position: 'absolute', left: -1000 } ); // remove from view
+customizerRootElement.css( { position: 'absolute', left: -10000, top: -10000 } ); // remove from view
 jQuery( document.body ).append( customizerRootElement );
 
 window._wpCustomizeSettings = {
@@ -136 +136 @@
 
 jQuery.ajaxSetup( {
         beforeSend: function( e, data ) {
-                if ( data.data.indexOf( 'wp_customize' ) !== -1 ) {
+                if ( data.url.indexOf( '//example.org' ) !== -1 ) {
                         return false;
                 }
         }

tests/qunit/index.html

@@ -34 +34 @@
                 <script src="../../src/wp-includes/js/customize-models.js"></script>
                 <script src="../../src/wp-includes/js/shortcode.js"></script>
                 <script src="../../src/wp-admin/js/customize-controls.js"></script>
+
+                <script type='text/javascript' src='../../src/wp-includes/js/jquery/ui/core.js'></script>
+                <script type='text/javascript' src='../../src/wp-includes/js/jquery/ui/widget.js'></script>
+                <script type='text/javascript' src='../../src/wp-includes/js/jquery/ui/mouse.js'></script>
+                <script type='text/javascript' src='../../src/wp-includes/js/jquery/ui/sortable.js'></script>
+                <script type='text/javascript' src='../../src/wp-includes/js/jquery/ui/draggable.js'></script>
+                <script type='text/javascript' src='../../src/wp-includes/js/jquery/ui/droppable.js'></script>
+
+                <script src="../../src/wp-admin/js/nav-menu.js"></script>
                 <script src="../../src/wp-admin/js/customize-nav-menus.js"></script>
                 <script src="../../src/wp-admin/js/word-count.js"></script>
 
@@ -115 +124 @@
                         </li>
                 </script>
 
-                <!-- TinyMCE -->
+                <!-- Templates for Customizer Menus -->
+                <script type="text/html" id="tmpl-customize-control-nav_menu-content">
+                                        <button type="button" class="button-secondary add-new-menu-item" aria-label="Add or remove menu items" aria-expanded="false" aria-controls="available-menu-items">
+                        Add Items               </button>
+                <button type="button" class="not-a-button reorder-toggle" aria-label="Reorder menu items" aria-describedby="reorder-items-desc-{{ data.menu_id }}">
+                        <span class="reorder">Reorder</span>
+                        <span class="reorder-done">Done</span>
+                </button>
+                <p class="screen-reader-text" id="reorder-items-desc-{{ data.menu_id }}">When in reorder mode, additional controls to reorder menu items will be available in the items list above.</p>
+                <span class="add-menu-item-loading spinner"></span>
+                <span class="menu-delete-item">
+                        <button type="button" class="not-a-button menu-delete">
+                                Delete menu <span class="screen-reader-text">{{ data.menu_name }}</span>
+                        </button>
+                </span>
+                                <ul class="menu-settings">
+                        <li class="customize-control">
+                                <span class="customize-control-title">Menu locations</span>
+                        </li>
+
+                                                <li class="customize-control customize-control-checkbox assigned-menu-location">
+                                <label>
+                                        <input type="checkbox" data-menu-id="{{ data.menu_id }}" data-location-id="primary" class="menu-location" /> Primary Menu                                       <span class="theme-location-set">(Current: <span class="current-menu-location-name-primary"></span>)</span>
+                                </label>
+                        </li>
+                                                <li class="customize-control customize-control-checkbox assigned-menu-location">
+                                <label>
+                                        <input type="checkbox" data-menu-id="{{ data.menu_id }}" data-location-id="social" class="menu-location" /> Social Links Menu                                   <span class="theme-location-set">(Current: <span class="current-menu-location-name-social"></span>)</span>
+                                </label>
+                        </li>
+
+                </ul>
+                                </script>
+                                <script type="text/html" id="tmpl-customize-control-nav_menu_name-content">
+                                        <label>
+                        <# if ( data.label ) { #>
+                                <span class="customize-control-title screen-reader-text">{{ data.label }}</span>
+                        <# } #>
+                        <input type="text" class="menu-name-field live-update-section-title" />
+                </label>
+                                </script>
+                                <script type="text/html" id="tmpl-customize-control-nav_menu_auto_add-content">
+                                        <span class="customize-control-title">Menu options</span>
+                <label>
+                        <input type="checkbox" class="auto_add" />
+                        Automatically add new top-level pages to this menu              </label>
+                                </script>
+                                <script type="text/html" id="tmpl-customize-control-nav_menu_item-content">
+                                        <div class="menu-item-bar">
+                        <div class="menu-item-handle">
+                                <span class="item-type" aria-hidden="true">{{ data.item_type_label }}</span>
+                                <span class="item-title" aria-hidden="true">
+                                        <span class="spinner"></span>
+                                        <span class="menu-item-title<# if ( ! data.title ) { #> no-title<# } #>">{{ data.title || wp.customize.Menus.data.l10n.untitled }}</span>
+                                </span>
+                                <span class="item-controls">
+                                        <button type="button" class="not-a-button item-edit" aria-expanded="false"><span class="screen-reader-text">Edit menu item: {{ data.title || wp.customize.Menus.data.l10n.untitled }} ({{ data.item_type_label }})</span><span class="toggle-indicator" aria-hidden="true"></span></button>
+                                        <button type="button" class="not-a-button item-delete submitdelete deletion"><span class="screen-reader-text">Remove Menu Item: {{ data.title || wp.customize.Menus.data.l10n.untitled }} ({{ data.item_type_label }})</span></button>
+                                </span>
+                        </div>
+                </div>
+
+                <div class="menu-item-settings" id="menu-item-settings-{{ data.menu_item_id }}">
+                        <# if ( 'custom' === data.item_type ) { #>
+                        <p class="field-url description description-thin">
+                                <label for="edit-menu-item-url-{{ data.menu_item_id }}">
+                                        URL<br />
+                                        <input class="widefat code edit-menu-item-url" type="text" id="edit-menu-item-url-{{ data.menu_item_id }}" name="menu-item-url" />
+                                </label>
+                        </p>
+                <# } #>
+                        <p class="description description-thin">
+                                <label for="edit-menu-item-title-{{ data.menu_item_id }}">
+                                        Navigation Label<br />
+                                        <input type="text" id="edit-menu-item-title-{{ data.menu_item_id }}" class="widefat edit-menu-item-title" name="menu-item-title" />
+                                </label>
+                        </p>
+                        <p class="field-link-target description description-thin">
+                                <label for="edit-menu-item-target-{{ data.menu_item_id }}">
+                                        <input type="checkbox" id="edit-menu-item-target-{{ data.menu_item_id }}" class="edit-menu-item-target" value="_blank" name="menu-item-target" />
+                                        Open link in a new tab                          </label>
+                        </p>
+                        <p class="field-attr-title description description-thin">
+                                <label for="edit-menu-item-attr-title-{{ data.menu_item_id }}">
+                                        Title Attribute<br />
+                                        <input type="text" id="edit-menu-item-attr-title-{{ data.menu_item_id }}" class="widefat edit-menu-item-attr-title" name="menu-item-attr-title" />
+                                </label>
+                        </p>
+                        <p class="field-css-classes description description-thin">
+                                <label for="edit-menu-item-classes-{{ data.menu_item_id }}">
+                                        CSS Classes<br />
+                                        <input type="text" id="edit-menu-item-classes-{{ data.menu_item_id }}" class="widefat code edit-menu-item-classes" name="menu-item-classes" />
+                                </label>
+                        </p>
+                        <p class="field-xfn description description-thin">
+                                <label for="edit-menu-item-xfn-{{ data.menu_item_id }}">
+                                        Link Relationship (XFN)<br />
+                                        <input type="text" id="edit-menu-item-xfn-{{ data.menu_item_id }}" class="widefat code edit-menu-item-xfn" name="menu-item-xfn" />
+                                </label>
+                        </p>
+                        <p class="field-description description description-thin">
+                                <label for="edit-menu-item-description-{{ data.menu_item_id }}">
+                                        Description<br />
+                                        <textarea id="edit-menu-item-description-{{ data.menu_item_id }}" class="widefat edit-menu-item-description" rows="3" cols="20" name="menu-item-description">{{ data.description }}</textarea>
+                                        <span class="description">The description will be displayed in the menu if the current theme supports it.</span>
+                                </label>
+                        </p>
+
+                        <div class="menu-item-actions description-thin submitbox">
+                                <# if ( ( 'post_type' === data.item_type || 'taxonomy' === data.item_type ) && '' !== data.original_title ) { #>
+                                <p class="link-to-original">
+                                        Original: <a class="original-link" href="{{ data.url }}">{{ data.original_title }}</a>                          </p>
+                                <# } #>
+
+                                <button type="button" class="not-a-button item-delete submitdelete deletion">Remove</button>
+                                <span class="spinner"></span>
+                        </div>
+                        <input type="hidden" name="menu-item-db-id[{{ data.menu_item_id }}]" class="menu-item-data-db-id" value="{{ data.menu_item_id }}" />
+                        <input type="hidden" name="menu-item-parent-id[{{ data.menu_item_id }}]" class="menu-item-data-parent-id" value="{{ data.parent }}" />
+                </div><!-- .menu-item-settings-->
+                <ul class="menu-item-transport"></ul>
+                </script>
+
+                                <script type="text/html" id="tmpl-available-menu-item">
+                        <li id="menu-item-tpl-{{ data.id }}" class="menu-item-tpl" data-menu-item-id="{{ data.id }}">
+                                <div class="menu-item-bar">
+                                        <div class="menu-item-handle">
+                                                <span class="item-type" aria-hidden="true">{{ data.type_label }}</span>
+                                                <span class="item-title" aria-hidden="true">
+                                                        <span class="menu-item-title<# if ( ! data.title ) { #> no-title<# } #>">{{ data.title || wp.customize.Menus.data.l10n.untitled }}</span>
+                                                </span>
+                                                <button type="button" class="not-a-button item-add">
+                                                        <span class="screen-reader-text">Add to menu: {{ data.title || wp.customize.Menus.data.l10n.untitled }} ({{ data.type_label }})</span>
+                                                </button>
+                                        </div>
+                                </div>
+                        </li>
+                </script>
+
+                <script type="text/html" id="tmpl-menu-item-reorder-nav">
+                        <div class="menu-item-reorder-nav">
+                                <button type="button" class="menus-move-up">Move up</button><button type="button" class="menus-move-down">Move down</button><button type="button" class="menus-move-left">Move one level up</button><button type="button" class="menus-move-right">Move one level down</button>                 </div>
+                </script>
+                <div hidden>
+                        <div id="available-menu-items" class="accordion-container">
+                        <div class="customize-section-title">
+                                <button type="button" class="customize-section-back" tabindex="-1">
+                                        <span class="screen-reader-text">Back</span>
+                                </button>
+                                <h3>
+                                        <span class="customize-action">
+                                                Customizing &#9656; Menus                                       </span>
+                                        Add Menu Items                          </h3>
+                        </div>
+                        <div id="available-menu-items-search" class="accordion-section cannot-expand">
+                                <div class="accordion-section-title">
+                                        <label class="screen-reader-text" for="menu-items-search">Search Menu Items</label>
+                                        <input type="text" id="menu-items-search" placeholder="Search menu items&hellip;" aria-describedby="menu-items-search-desc" />
+                                        <p class="screen-reader-text" id="menu-items-search-desc">The search results will be updated as you type.</p>
+                                        <span class="spinner"></span>
+                                        <span class="clear-results"><span class="screen-reader-text">Clear Results</span></span>
+                                </div>
+                                <ul class="accordion-section-content" data-type="search"></ul>
+                        </div>
+                        <div id="new-custom-menu-item" class="accordion-section">
+                                <h4 class="accordion-section-title" role="presentation">
+                                        Custom Links                                    <button type="button" class="not-a-button" aria-expanded="false">
+                                                <span class="screen-reader-text">Toggle section: Custom Links</span>
+                                                <span class="toggle-indicator" aria-hidden="true"></span>
+                                        </button>
+                                </h4>
+                                <div class="accordion-section-content">
+                                        <input type="hidden" value="custom" id="custom-menu-item-type" name="menu-item[-1][menu-item-type]" />
+                                        <p id="menu-item-url-wrap">
+                                                <label class="howto" for="custom-menu-item-url">
+                                                        <span>URL</span>
+                                                        <input id="custom-menu-item-url" name="menu-item[-1][menu-item-url]" type="text" class="code menu-item-textbox" value="http://">
+                                                </label>
+                                        </p>
+                                        <p id="menu-item-name-wrap">
+                                                <label class="howto" for="custom-menu-item-name">
+                                                        <span>Link Text</span>
+                                                        <input id="custom-menu-item-name" name="menu-item[-1][menu-item-title]" type="text" class="regular-text menu-item-textbox">
+                                                </label>
+                                        </p>
+                                        <p class="button-controls">
+                                                <span class="add-to-menu">
+                                                        <input type="submit" class="button-secondary submit-add-to-menu right" value="Add to Menu" name="add-custom-menu-item" id="custom-menu-item-submit">
+                                                        <span class="spinner"></span>
+                                                </span>
+                                        </p>
+                                </div>
+                        </div>
+                        <div id="available-menu-items-post_type-post" class="accordion-section">
+                                        <h4 class="accordion-section-title" role="presentation">
+                                                Post                                            <span class="spinner"></span>
+                                                <span class="no-items">No items</span>
+                                                <button type="button" class="not-a-button" aria-expanded="false">
+                                                        <span class="screen-reader-text">Toggle section: Post</span>
+                                                        <span class="toggle-indicator" aria-hidden="true"></span>
+                                                </button>
+                                        </h4>
+                                        <ul class="accordion-section-content" data-type="post_type" data-object="post"></ul>
+                                </div>
+                                                                <div id="available-menu-items-post_type-page" class="accordion-section">
+                                        <h4 class="accordion-section-title" role="presentation">
+                                                Page                                            <span class="spinner"></span>
+                                                <span class="no-items">No items</span>
+                                                <button type="button" class="not-a-button" aria-expanded="false">
+                                                        <span class="screen-reader-text">Toggle section: Page</span>
+                                                        <span class="toggle-indicator" aria-hidden="true"></span>
+                                                </button>
+                                        </h4>
+                                        <ul class="accordion-section-content" data-type="post_type" data-object="page"></ul>
+                                </div>
+                                                                <div id="available-menu-items-taxonomy-category" class="accordion-section">
+                                        <h4 class="accordion-section-title" role="presentation">
+                                                Category                                                <span class="spinner"></span>
+                                                <span class="no-items">No items</span>
+                                                <button type="button" class="not-a-button" aria-expanded="false">
+                                                        <span class="screen-reader-text">Toggle section: Category</span>
+                                                        <span class="toggle-indicator" aria-hidden="true"></span>
+                                                </button>
+                                        </h4>
+                                        <ul class="accordion-section-content" data-type="taxonomy" data-object="category"></ul>
+                                </div>
+                                                                <div id="available-menu-items-taxonomy-post_tag" class="accordion-section">
+                                        <h4 class="accordion-section-title" role="presentation">
+                                                Tag                                             <span class="spinner"></span>
+                                                <span class="no-items">No items</span>
+                                                <button type="button" class="not-a-button" aria-expanded="false">
+                                                        <span class="screen-reader-text">Toggle section: Tag</span>
+                                                        <span class="toggle-indicator" aria-hidden="true"></span>
+                                                </button>
+                                        </h4>
+                                        <ul class="accordion-section-content" data-type="taxonomy" data-object="post_tag"></ul>
+                                </div>
+                                                                <div id="available-menu-items-taxonomy-post_format" class="accordion-section">
+                                        <h4 class="accordion-section-title" role="presentation">
+                                                Format                                          <span class="spinner"></span>
+                                                <span class="no-items">No items</span>
+                                                <button type="button" class="not-a-button" aria-expanded="false">
+                                                        <span class="screen-reader-text">Toggle section: Format</span>
+                                                        <span class="toggle-indicator" aria-hidden="true"></span>
+                                                </button>
+                                        </h4>
+                                        <ul class="accordion-section-content" data-type="taxonomy" data-object="post_format"></ul>
+                                </div>
+                                                </div><!-- #available-menu-items -->
+                        </div><!-- end nav menu templates -->
+
 
                 <script src="../../src/wp-includes/js/tinymce/tinymce.js"></script>
                 <script src="editor/js/utils.js"></script>

tests/qunit/vendor/sinon-qunit.js

@@ -57 +57 @@
             expected = null;
         }
 
+
         return qTest(testName, expected, sinon.test(callback), async);
     };
 }(this));

tests/qunit/wp-admin/js/customize-nav-menus.js

@@ -1 +1 @@
 /* global wp */
-jQuery( function( ) {
+jQuery( window ).load( function (){
 
         var api = wp.customize,
-        settings = window._wpCustomizeNavMenusSettings,
-        navMenu = window.wpNavMenu;
-        
-        module( 'Customize Nav Menus', {
-                setup: function() {
-            window._wpCustomizeNavMenusSettings = settings; 
-            window.wpNavMenu = navMenu;
-                },
-                teardown: function() {
-                        // restore defaults
-            window._wpCustomizeNavMenusSettings = settings; 
-            window.wpNavMenu = navMenu;
-                }
-
-        });
+                primaryMenuId = 3,
+                socialMenuId = 2;
 
+        module( 'Customize Nav Menus' );
 
         /**
          * Generate 20 ids and verify they are all unique.
@@ -26 +14 @@
                 var testIterations = 20,
                         ids = [ api.Menus.generatePlaceholderAutoIncrementId() ];
 
-                while( testIterations-- > 0 ) {
+                while ( testIterations ) {
                         var placeholderID = api.Menus.generatePlaceholderAutoIncrementId();
 
                         ok( -1 === ids.indexOf( placeholderID ) );
                         ids.push( placeholderID );
+                        testIterations -= 1;
                 }
 
         } );
 
         test( 'it should parse _wpCustomizeMenusSettings.defaults into itself', function() {
                 deepEqual( window._wpCustomizeNavMenusSettings, api.Menus.data );
-        });
+        } );
+
+        test( 'empty menus should have no Menu Item Controls', function() {
+                ok( 0 === wp.customize.Menus.getMenuControl( socialMenuId ).getMenuItemControls().length, 'empty menus' );
+        } );
+
+        test( 'populated menus should have no Menu Item Controls', function() {
+                ok( 0 !== wp.customize.Menus.getMenuControl( primaryMenuId ).getMenuItemControls().length, 'non-empty menus' );
+        } );
+
+        // @todo Add tests for api.Menus.AvailableMenuItemsPanelView (and api.Menus.AvailableItemCollection, api.Menus.AvailableItemCollection, api.Menus.AvailableItemModel)
 
+        test( 'there is a properly configured MenusPanel', function() {
+                var panel, sections;
+
+                panel = api.panel( 'nav_menus' );
+                ok( panel );
+                ok( panel.extended( api.Menus.MenusPanel ) );
+
+                sections = panel.sections();
+                ok( 'menu_locations' === sections[0].id, 'first section is menu_locations' );
+                ok( sections[1].extended( api.Menus.MenuSection ), 'second section is MenuSection' );
+                ok( sections[ sections.length - 1 ].extended( api.Menus.NewMenuSection ), 'last section is NewMenuSection' );
+        } );
+        // @todo Add more tests for api.Menus.MenusPanel behaviors
+
+        test( 'there an expected MenuSection for the primary menu', function() {
+                var section, controls;
+
+                section = api.section( 'nav_menu[' + primaryMenuId + ']' );
+                ok( section, 'section exists' );
+                ok( section.extended( api.Menus.MenuSection ), 'section is a api.Menus.MenuSection' );
+                ok( section.deferred.initSortables, 'has section.deferred.initSortables' );
+                ok( section.active(), 'section active() is true' );
+                ok( section.active.set( false ).get(), 'section active() cannot be set false' );
+
+                controls = section.controls();
+                ok( controls[0].extended( api.Menus.MenuNameControl ), 'first control in menu section is MenuNameControl' );
+                ok( controls[1].extended( api.Menus.MenuItemControl ), 'second control in menu section is MenuItemControl' );
+                console.info( 'noep', controls[ controls.length - 1].id )
+                ok( controls[ controls.length - 1 ].extended( api.Menus.MenuAutoAddControl ), 'last control in menu section is a MenuAutoAddControl' );
+        } );
+        // @todo Add more tests for api.Menus.MenuSection behaviors
+
+        test( 'changing a MenuNameControl change the corresponding menu value', function() {
+                var section, control;
+
+                section = api.section( 'nav_menu[' + primaryMenuId + ']' );
+                control = section.controls()[0];
+                ok( control.extended( api.Menus.MenuNameControl ), 'control is a MenuNameControl' );
+                equal( control.setting().name, 'Primary menu' );
+                ok( ! control.setting._dirty );
+                control.container.find( 'input[type=text]:first' ).val( 'Main menu' ).trigger( 'change' );
+                equal( control.setting().name, 'Main menu' );
+                ok( control.setting._dirty );
+        } );
+        // @todo Add more tests for api.Menus.MenuNameControl
+
+        test( 'manipulating a MenuItemControl works', function() {
+                var section, control, value;
+                section = api.section( 'nav_menu[' + primaryMenuId + ']' );
+                ok( section );
+
+                control = section.controls()[1];
+                ok( control.extended( api.Menus.MenuItemControl ), 'control is a MenuItemControl' );
+
+                control.actuallyEmbed();
+
+                control.container.find( '.edit-menu-item-title' ).val( 'Hello World' ).trigger( 'change' );
+                equal( control.setting().title, 'Hello World' );
+                value = _.clone( control.setting() );
+                value.title = 'Hola Mundo';
+                equal( control.container.find( '.edit-menu-item-title' ).val(), 'Hello World' );
+                equal( value.position, 1 );
+                equal( control.priority(), 1 );
+
+                // @todo test control.moveDown();
+        } );
+        // @todo Add more tests for api.Menus.MenuItemControl
+
+        // @todo Add tests for api.Menus.NewMenuSection
+        // @todo Add tests for api.Menus.MenuLocationControl
+        // @todo Add tests for api.Menus.MenuAutoAddControl
+        // @todo Add tests for api.Menus.MenuControl
+        // @todo Add tests for api.Menus.NewMenuControl
+        // @todo Add tests for api.Menus.applySavedData
+        // @todo Add tests for api.Menus.focusMenuItemControl
+
+        test( 'api.Menus.getMenuControl() should return the expected control', function() {
+                var control = api.Menus.getMenuControl( primaryMenuId );
+                ok( !! control, 'control is returned' );
+                ok( control.extended( api.Menus.MenuControl ), 'control is a MenuControl' );
+        } );
+
+        test( 'api.Menus.getMenuItemControl() should return the expected control', function() {
+                var control = api.Menus.getMenuItemControl( 2000 );
+                ok( !! control, 'control is returned' );
+                ok( control.extended( api.Menus.MenuItemControl ), 'control is a MenuItemControl' );
+        } );
 
-});
+} );