Wordpress/tests/qunit/index.html
Weston Ruter 83b059aa19 Customize: Implement customized state persistence with changesets.
Includes infrastructure developed in the Customize Snapshots feature plugin.

See https://make.wordpress.org/core/2016/10/12/customize-changesets-technical-design-decisions/

Props westonruter, valendesigns, utkarshpatel, stubgo, lgedeon, ocean90, ryankienstra, mihai2u, dlh, aaroncampbell, jonathanbardo, jorbin.
See #28721.
See #31089.
Fixes #30937.
Fixes #31517.
Fixes #30028.
Fixes #23225.
Fixes #34142.
Fixes #36485.


git-svn-id: https://develop.svn.wordpress.org/trunk@38810 602fd350-edb4-49c9-b593-d223f7449a82
2016-10-18 20:04:36 +00:00

535 lines
25 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>WordPress QUnit Test Suite</title>
<!-- Dependencies -->
<script src="../../src/wp-includes/js/jquery/jquery.js"></script>
<script src="../../src/wp-includes/js/jquery/ui/core.js"></script>
<script src="../../src/wp-includes/js/underscore.min.js"></script>
<script src="../../src/wp-includes/js/backbone.min.js"></script>
<script src="../../src/wp-includes/js/wp-backbone.js"></script>
<script src="../../src/wp-includes/js/zxcvbn.min.js"></script>
<script>
window._wpUtilSettings = {
'ajax': {
'url': '\/wp-admin\/admin-ajax.php'
}
};
</script>
<script src="../../src/wp-includes/js/wp-util.js"></script>
<script src="../../src/wp-includes/js/wp-a11y.js"></script>
<!-- QUnit -->
<link rel="stylesheet" href="vendor/qunit.css" type="text/css" media="screen" />
<script src="vendor/qunit.js"></script>
<script src="vendor/sinon.js"></script>
<script src="vendor/sinon-qunit.js"></script>
<script>QUnit.config.hidepassed = false;</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<script src="fixtures/customize-header.js"></script>
<script src="fixtures/customize-settings.js"></script>
<script src="fixtures/customize-menus.js"></script>
<script src="fixtures/customize-widgets.js"></script>
</div>
<p><a href="editor">TinyMCE tests</a></p>
<!-- Tested files -->
<script src="../../src/wp-admin/js/password-strength-meter.js"></script>
<script src="../../src/wp-includes/js/customize-base.js"></script>
<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/customize-widgets.js"></script>
<script src="../../src/wp-admin/js/word-count.js"></script>
<!-- Unit tests -->
<script src="wp-admin/js/password-strength-meter.js"></script>
<script src="wp-admin/js/customize-base.js"></script>
<script src="wp-admin/js/customize-header.js"></script>
<script src="wp-includes/js/shortcode.js"></script>
<script src="wp-admin/js/customize-controls.js"></script>
<script src="wp-admin/js/customize-controls-utils.js"></script>
<script src="wp-admin/js/customize-nav-menus.js"></script>
<script src="wp-admin/js/customize-widgets.js"></script>
<script src="wp-admin/js/word-count.js"></script>
<!-- Customizer templates for sections -->
<script type="text/html" id="tmpl-customize-section-default">
<li id="accordion-section-{{ data.id }}" class="accordion-section control-section control-section-{{ data.type }}">
<h3 class="accordion-section-title" tabindex="0">
{{ data.title }}
<span class="screen-reader-text">Press return or enter to expand</span>
</h3>
<ul class="accordion-section-content">
<# if ( data.description ) { #>
<li class="customize-section-description-container">
<p class="description customize-section-description">{{{ data.description }}}</p>
</li>
<# } #>
</ul>
</li>
</script>
<script type="text/html" id="tmpl-customize-section-titleless">
<li id="accordion-section-{{ data.id }}" class="accordion-section control-section control-section-{{ data.type }}">
<!-- Notice the lack of an h3 with title displayed inside. -->
<ul class="accordion-section-content">
<# if ( data.description ) { #>
<li class="customize-section-description-container">
<p class="description customize-section-description">{{{ data.description }}}</p>
</li>
<# } #>
</ul>
</li>
</script>
<!-- Customizer templates for panels -->
<script type="text/html" id="tmpl-customize-panel-default">
<li id="accordion-panel-{{ data.id }}" class="accordion-section control-section control-panel control-panel-{{ data.type }}">
<h3 class="accordion-section-title" tabindex="0">
{{ data.title }}
<span class="screen-reader-text">Press return or enter to open this panel</span>
</h3>
<ul class="accordion-sub-container control-panel-content"></ul>
</li>
</script>
<script type="text/html" id="tmpl-customize-panel-default-content">
<li class="panel-meta accordion-section control-section<# if ( ! data.description ) { #> cannot-expand<# } #>">
<div class="accordion-section-title" tabindex="0">
<span class="preview-notice">You are customizing <strong class="panel-title">{{ data.title }}</strong></span>
</div>
<# if ( data.description ) { #>
<div class="accordion-section-content description">
{{{ data.description }}}
</div>
<# } #>
</li>
</script>
<script type="text/html" id="tmpl-customize-panel-titleless">
<li id="accordion-panel-{{ data.id }}" class="accordion-section control-section control-panel control-panel-{{ data.type }}">
<!-- Notice the lack of an h3 with title displayed inside. -->
<ul class="accordion-sub-container control-panel-content"></ul>
</li>
</script>
<script type="text/html" id="tmpl-customize-panel-titleless-content">
<li class="panel-meta accordion-section control-section<# if ( ! data.description ) { #> cannot-expand<# } #>">
<!-- Notice lack of title containing preview notice -->
<# if ( data.description ) { #>
<div class="accordion-section-content description">
{{{ data.description }}}
</div>
<# } #>
</li>
</script>
<script type="text/html" id="tmpl-customize-control-notifications">
<ul>
<# _.each( data.notifications, function( notification ) { #>
<li data-code="{{ notification.code }}" data-type="{{ notification.type }}">{{ notification.message || notification.code }}</li>
<# } ); #>
</ul>
</script>
<!-- Templates for Customizer Menus -->
<script type="text/html" id="tmpl-customize-control-nav_menu-content">
<button type="button" class="button 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>
<script type="text/html" id="tmpl-customize-section-sidebar">
<li id="accordion-section-{{ data.id }}" class="accordion-section control-section control-section-{{ data.type }}">
<h3 class="accordion-section-title" tabindex="0">
{{ data.title }}
<span class="screen-reader-text">Press return or enter to open</span>
</h3>
<ul class="accordion-section-content">
<li class="customize-section-description-container">
<div class="customize-section-title">
<button class="customize-section-back" tabindex="-1">
<span class="screen-reader-text">Back</span>
</button>
<h3>
<span class="customize-action">
{{{ data.customizeAction }}}
</span>
{{ data.title }}
</h3>
</div>
<# if ( data.description ) { #>
<div class="description customize-section-description">
{{{ data.description }}}
</div>
<# } #>
</li>
</ul>
</li>
</script>
<div hidden>
<div id="customize-preview"></div>
</div>
<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 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 -->
<div hidden>
<div id="widgets-left"><!-- compatibility with JS which looks for widget templates here -->
<div id="available-widgets">
<div class="customize-section-title">
<button class="customize-section-back" tabindex="-1">
<span class="screen-reader-text">Back</span>
</button>
<h3>
<span class="customize-action">Customizing &#9656; Widgets</span>
Add a Widget </h3>
</div>
<div id="available-widgets-filter">
<label class="screen-reader-text" for="widgets-search">Search Widgets</label>
<input type="search" id="widgets-search" placeholder="Search widgets&hellip;" />
</div>
<div id="available-widgets-list">
<div id="widget-tpl-search-2" data-widget-id="search-2" class="widget-tpl search-2" tabindex="0">
<div id='widget-11_search-__i__' class='widget'> <div class="widget-top">
<div class="widget-title-action">
<a class="widget-action hide-if-no-js" href="#available-widgets"></a>
<a class="widget-control-edit hide-if-js" href="/wp-admin/customize.php?editwidget=search-2&#038;addnew=1&#038;num=3&#038;base=search">
<span class="edit">Edit</span>
<span class="add">Add</span>
<span class="screen-reader-text">Search</span>
</a>
</div>
<div class="widget-title"><h4>Search<span class="in-widget-title"></span></h4></div>
</div>
<div class="widget-inside">
<div class="form">
<div class="widget-content">
<p><label for="widget-search-__i__-title">Title: <input class="widefat" id="widget-search-__i__-title" name="widget-search[__i__][title]" type="text" value="" /></label></p>
</div>
<input type="hidden" name="widget-id" class="widget-id" value="search-__i__" />
<input type="hidden" name="id_base" class="id_base" value="search" />
<input type="hidden" name="widget-width" class="widget-width" value="250" />
<input type="hidden" name="widget-height" class="widget-height" value="200" />
<input type="hidden" name="widget_number" class="widget_number" value="2" />
<input type="hidden" name="multi_number" class="multi_number" value="3" />
<input type="hidden" name="add_new" class="add_new" value="multi" />
<div class="widget-control-actions">
<div class="alignleft">
<a class="widget-control-remove" href="#remove">Delete</a> |
<a class="widget-control-close" href="#close">Close</a>
</div>
<div class="alignright">
<input type="submit" name="savewidget" id="widget-search-__i__-savewidget" class="button button-primary widget-control-save right" value="Save" /> <span class="spinner"></span>
</div>
<br class="clear" />
</div>
</div><!-- .form -->
</div>
<div class="widget-description">
A search form for your site.
</div>
</div> </div>
</div><!-- #available-widgets-list -->
</div><!-- #available-widgets -->
</div><!-- #widgets-left -->
</div><!-- end widget templates -->
<script src="../../src/wp-includes/js/tinymce/tinymce.js"></script>
<script src="editor/js/utils.js"></script>
<script src="wp-includes/js/tinymce/plugins/wptextpattern/plugin.js"></script>
<!-- Updates templates and HTML fixtures -->
<script id="tmpl-wp-updates-admin-notice" type="text/html">
<div <# if ( data.id ) { #>id="{{ data.id }}"<# } #> class="notice {{ data.className }}"><p>{{{ data.message }}}</p></div>
</script>
<div hidden>
<li id="wp-admin-bar-updates">
<a class="ab-item" href="wp-admin/update-core.php" title="2 Plugin Updates">
<span class="ab-icon"></span>
<span class="ab-label">2</span>
<span class="screen-reader-text">2 Plugin Updates</span>
</a>
</li>
<li class="wp-has-submenu wp-not-current-submenu menu-top menu-icon-plugins" id="menu-plugins">
<a href="plugins.php" class="wp-has-submenu wp-not-current-submenu menu-top menu-icon-plugins" aria-haspopup="true">
<div class="wp-menu-arrow"><div></div></div>
<div class="wp-menu-image dashicons-before dashicons-admin-plugins"><br></div>
<div class="wp-menu-name">Plugins
<span class="update-plugins count-2">
<span class="plugin-count">2</span>
</span>
</div>
</a>
<ul class="wp-submenu wp-submenu-wrap">
<li class="wp-submenu-head" aria-hidden="true">Plugins
<span class="update-plugins count-2">
<span class="plugin-count">2</span>
</span>
</li>
<li class="wp-first-item">
<a href="plugins.php" class="wp-first-item">Installed Plugins</a></li><li><a href="plugin-install.php">Add New</a>
</li><li>
<a href="plugin-editor.php">Editor</a>
</li>
</ul>
</li>
</div>
</body>
</html>