diff --git a/tests/qunit/fixtures/customize-menus.js b/tests/qunit/fixtures/customize-menus.js index b2d85e4f97..8478510634 100755 --- a/tests/qunit/fixtures/customize-menus.js +++ b/tests/qunit/fixtures/customize-menus.js @@ -1,11 +1,12 @@ + 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,8 +15,8 @@ window._wpCustomizeNavMenusSettings = { '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,27 +49,33 @@ window._wpCustomizeNavMenusSettings = { 'nav_menu_term_id': 0 } }, - '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', 'customizingMenus': 'Customizing ▸ Menus', @@ -97,7 +104,6 @@ window._wpCustomizeNavMenusSettings = { 'untitled': '(no label)' } }; - window._wpCustomizeSettings.panels.nav_menus = { 'id': 'nav_menus', 'description': '

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.

Menus can be displayed in locations defined by your theme or in widget areas by adding a “Custom Menu” widget.

', @@ -109,6 +115,288 @@ window._wpCustomizeSettings.panels.nav_menus = { 'instanceNumber': 2 }; +// Nav Menu Locations +window._wpCustomizeSettings.sections.menu_locations = { + 'id': 'menu_locations', + 'description': '

Your theme contains 1 menu location. Select which menu you would like to use.<\/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 ▸ 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': '

    • ', + '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': '
    • ', + '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 ▸ 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 ▸ 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': '
    • ', + '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': '
    • ', + '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': '
    • ', + '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': '
  • \n\t\t\t +

    + + Customizing ▸ Menus + Add Menu Items

    + + +
    + +
    + + + +

    + + + + +

    +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    + + + diff --git a/tests/qunit/vendor/sinon-qunit.js b/tests/qunit/vendor/sinon-qunit.js index c26232fae7..a9dca782f5 100644 --- a/tests/qunit/vendor/sinon-qunit.js +++ b/tests/qunit/vendor/sinon-qunit.js @@ -57,6 +57,7 @@ sinon.config = { expected = null; } + return qTest(testName, expected, sinon.test(callback), async); }; }(this)); diff --git a/tests/qunit/wp-admin/js/customize-nav-menus.js b/tests/qunit/wp-admin/js/customize-nav-menus.js index ba50106fc4..45d16d2c67 100755 --- a/tests/qunit/wp-admin/js/customize-nav-menus.js +++ b/tests/qunit/wp-admin/js/customize-nav-menus.js @@ -1,23 +1,11 @@ /* 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,18 +14,116 @@ jQuery( function( ) { 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' ); + } ); + +} );