Changeset 33528

Timestamp:

08/03/2015 07:27:27 PM (10 years ago)

Author:

westonruter

Message:

Customizer: Add QUnit tests for menus.

Props adamsilverstein, westonruter, jorbin.
Fixes #32688.

Location:

trunk/tests/qunit

Files:

• fixtures/customize-menus.js (modified) (7 diffs)
• fixtures/customize-settings.js (modified) (2 diffs)
• index.html (modified) (2 diffs)
• vendor/sinon-qunit.js (modified) (1 diff)
• wp-admin/js/customize-nav-menus.js (modified) (3 diffs)

trunk/tests/qunit/fixtures/customize-menus.js

@@ +1 @@
+
 window._wpCustomizeNavMenusSettings = {
     'nonce': 'yo',
@@ -5 +6 @@
     'allMenus': [{
         'term_id': '2',
-        'name': 'Awesome menu',
-        'slug': 'awesome-menu',
+        'name': 'Social Menu',
+        'slug': 'social-menu',
         'term_group': '0',
         'term_taxonomy_id': '2',
@@ -15 +16 @@
     }, {
         'term_id': '3',
-        'name': 'Cool Menu',
-        'slug': 'cool-menu',
+        'name': 'Primary Menu',
+        'slug': 'primary-menu',
         'term_group': '0',
         'term_taxonomy_id': '3',
@@ -49 +50 @@
         }
     },
-    'itemTypes': {
-        'postTypes': {
-            'page': {
-                'label': 'Page'
-            },
-            'post': {
-                'label': 'Post'
-            }
+    'itemTypes': [
+        {
+            'title': 'Post',
+            'type': 'post_type',
+            'object': 'post'
         },
-        'taxonomies': {
-            'post_tag': {
-                'label': 'Tag'
-            },
-            'post_format': {
-                'label': 'Format'
-            },
-            'category': {
-                'label': 'Category'
-            }
+        {
+            'title': 'Page',
+            'type': 'post_type',
+            'object': 'page'
+        },
+        {
+            'title': 'Category',
+            'type': 'taxonomy',
+            'object': 'category'
+        },
+        {
+            'title': 'Tag',
+            'type': 'taxonomy',
+            'object': 'post_tag'
+        },
+        {
+            'title': 'Format',
+            'type': 'taxonomy',
+            'object': 'post_format'
         }
-    },
+    ],
     'l10n': {
         'custom_label': 'Custom Link',
@@ -98 +105 @@
     }
 };
-
 window._wpCustomizeSettings.panels.nav_menus = {
     'id': 'nav_menus',
@@ -110 +116 @@
 };
 
+// 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': {
@@ -121 +409 @@
     'negateIfRTL': 1
 };
-

trunk/tests/qunit/fixtures/customize-settings.js

@@ -4 +4 @@
 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 );
 
@@ -137 +137 @@
 jQuery.ajaxSetup( {
     beforeSend: function( e, data ) {
-        if ( data.data.indexOf( 'wp_customize' ) !== -1 ) {
+        if ( data.url.indexOf( '//example.org' ) !== -1 ) {
             return false;
         }

trunk/tests/qunit/index.html

@@ -35 +35 @@
         <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>
@@ -116 +125 @@
         </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>

trunk/tests/qunit/vendor/sinon-qunit.js

@@ -58 +58 @@
         }
 
+
         return qTest(testName, expected, sinon.test(callback), async);
     };

trunk/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' );
 
     /**
@@ -27 +15 @@
             ids = [ api.Menus.generatePlaceholderAutoIncrementId() ];
 
-        while( testIterations-- > 0 ) {
+        while ( testIterations ) {
             var placeholderID = api.Menus.generatePlaceholderAutoIncrementId();
 
             ok( -1 === ids.indexOf( placeholderID ) );
             ids.push( placeholderID );
+            testIterations -= 1;
         }
 
@@ -38 +27 @@
     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' );
+    } );
+
+} );