<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[30919] trunk/tests/qunit: Customizer: Add more QUnit tests to improve coverage on the new models.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/30919">30919</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/30919","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>ocean90</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2014-12-16 19:43:22 +0000 (Tue, 16 Dec 2014)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Customizer: Add more QUnit tests to improve coverage on the new models.
Includes tests for the broken `activate()`/`deactivate()` methods, which were fixed in <a href="https://core.trac.wordpress.org/changeset/30871">[30871]</a>.
props westonruter.
see <a href="https://core.trac.wordpress.org/ticket/30701">#30701</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunktestsqunitindexhtml">trunk/tests/qunit/index.html</a></li>
<li><a href="#trunktestsqunitwpadminjscustomizecontrolsjs">trunk/tests/qunit/wp-admin/js/customize-controls.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunktestsqunitfixturescustomizesettingsjs">trunk/tests/qunit/fixtures/customize-settings.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunktestsqunitfixturescustomizesettingsjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/tests/qunit/fixtures/customize-settings.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/qunit/fixtures/customize-settings.js (rev 0)
+++ trunk/tests/qunit/fixtures/customize-settings.js 2014-12-16 19:43:22 UTC (rev 30919)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,82 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+window.wp = window.wp || {};
+window.wp.customize = window.wp.customize || { get: function(){} };
+
+var customizerRootElement;
+customizerRootElement = jQuery( '<div id="customize-theme-controls"><ul></ul></div>' );
+customizerRootElement.css( { position: 'absolute', top: -1000 } ); // remove from view
+jQuery( document.body ).append( customizerRootElement );
+
+window._wpCustomizeSettings = {
+ 'autofocus': {},
+ 'browser': {
+ 'ios': false,
+ 'mobile': false
+ },
+ 'controls': {
+ 'fixture-control': {
+ 'active': true,
+ 'content': '<li id="customize-control-fixture-control" class="customize-control customize-control-text">\n\t\t\t\t\t\t\t<label>\n\t\t\t\t\t\t\t\t\t\t\t<span class="customize-control-title">Site Title</span>\n\t\t\t\t\t\t\t\t\t\t<input type="text" value="sWordPress Developssa!" data-customize-setting-link="blogname" />\n\t\t\t\t</label>\n\t\t\t\t\t\t</li>',
+ 'description': '',
+ 'instanceNumber': 8,
+ 'label': 'Fixture Control',
+ 'priority': 10,
+ 'section': 'fixture-section',
+ 'settings': {
+ 'default': 'fixture-setting'
+ },
+ 'type': 'text'
+ }
+ },
+ 'documentTitleTmpl': 'Customize: %s',
+ 'nonce': {
+ 'preview': '',
+ 'save': ''
+ },
+ 'panels': {
+ 'fixture-panel': {
+ 'active': true,
+ 'content': '<li id="accordion-panel-fixture-panel" class="accordion-section control-section control-panel control-panel-default">\n\t\t\t<h3 class="accordion-section-title" tabindex="0">\n\t\t\t\tLipsum\t\t\t\t<span class="screen-reader-text">Press return or enter to open this panel</span>\n\t\t\t</h3>\n\t\t\t<ul class="accordion-sub-container control-panel-content">\n\t\t\t\t\t\t<li class="panel-meta accordion-section control-section">\n\t\t\t<div class="accordion-section-title" tabindex="0">\n\t\t\t\t<span class="preview-notice">You are customizing <strong class="panel-title">Lipsum</strong></span>\n\t\t\t</div>\n\t\t\t\t\t\t\t<div class="accordion-section-content description">\n\t\t\t\t\tLorem Ipsum\t\t\t\t</div>\n\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t</li
>',
+ 'description': 'Lorem ipsum',
+ 'instanceNumber': 1,
+ 'priority': 110,
+ 'title': 'Lorem Ipsum',
+ 'type': 'default'
+ }
+ },
+ 'sections': {
+ 'fixture-section': {
+ 'active': true,
+ 'content': '<li id="accordion-section-fixture-section" class="accordion-section control-section control-section-default">\n\t\t\t<h3 class="accordion-section-title" tabindex="0">\n\t\t\t\tSite Title & Tagline\t\t\t\t<span class="screen-reader-text">Press return or enter to expand</span>\n\t\t\t</h3>\n\t\t\t<ul class="accordion-section-content">\n\t\t\t\t\t\t\t</ul>\n\t\t</li>',
+ 'description': '',
+ 'instanceNumber': 2,
+ 'panel': 'fixture-panel',
+ 'priority': 20,
+ 'title': 'Fixture Section',
+ 'type': 'default'
+ }
+ },
+ 'settings': {
+ 'fixture-setting': {
+ 'transport': 'postMessage',
+ 'value': 'Lorem Ipsum'
+ }
+ },
+ 'theme': {
+ 'active': true,
+ 'stylesheet': 'twentyfifteen'
+ },
+ 'url': {
+ 'activated': 'http://example.org/wp-admin/themes.php?activated=true&previewed',
+ 'ajax': '/wp-admin/admin-ajax.php',
+ 'allowed': [
+ 'http://example.org/'
+ ],
+ 'fallback': 'http://example.org/?preview=1&template=twentyfifteen&stylesheet=twentyfifteen&preview_iframe=1&TB_iframe=true',
+ 'home': 'http://example.org/',
+ 'isCrossDomain': false,
+ 'login': 'http://example.org/wp-login.php?interim-login=1&customize-login=1',
+ 'parent': 'http://example.org/wp-admin/',
+ 'preview': 'http://example.org/'
+ }
+};
+window._wpCustomizeControlsL10n = {};
</ins></span></pre></div>
<a id="trunktestsqunitindexhtml"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/qunit/index.html</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/qunit/index.html 2014-12-16 19:42:09 UTC (rev 30918)
+++ trunk/tests/qunit/index.html 2014-12-16 19:43:22 UTC (rev 30919)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -23,6 +23,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <ol id="qunit-tests"></ol>
</span><span class="cx" style="display: block; padding: 0 10px"> <div id="qunit-fixture">
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="fixtures/customize-header.js"></script>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <script src="fixtures/customize-settings.js"></script>
</ins><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <p><a href="editor">TinyMCE tests</a></p>
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunktestsqunitwpadminjscustomizecontrolsjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/qunit/wp-admin/js/customize-controls.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/qunit/wp-admin/js/customize-controls.js 2014-12-16 19:42:09 UTC (rev 30918)
+++ trunk/tests/qunit/wp-admin/js/customize-controls.js 2014-12-16 19:43:22 UTC (rev 30919)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,61 +1,205 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* global wp */
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-jQuery( function() {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+jQuery( window ).load( function (){
+ 'use strict';
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> var controlId, controlLabel, controlType, controlContent, controlDescription, controlData, mockControl,
</span><span class="cx" style="display: block; padding: 0 10px"> mockControlInstance, controlExpectedValues, sectionId, sectionContent, sectionData, mockSection,
</span><span class="cx" style="display: block; padding: 0 10px"> sectionInstance, sectionExpectedValues, panelId, panelTitle, panelDescription, panelContent, panelData,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- mockPanel, panelExpectedValues, testCustomizerModel;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ mockPanel, panelExpectedValues, testCustomizerModel, settingId, settingValue, mockSetting;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> testCustomizerModel = function( model, expectedValues ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var type = expectedValues.type || '';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( ! expectedValues.type || ! wp.customize[ expectedValues.type ] ) {
+ throw new Error( 'Must pass value type in expectedValues.' );
+ }
+ var type = expectedValues.type;
+ test( 'Model extends proper type', function () {
+ ok( model.extended( wp.customize[ type ] ) );
+ } );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( expectedValues.hasOwnProperty( 'id' ) ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- test( type + ' instance has the right id' , function () {
- equal( model.id , expectedValues.id );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ test( type + ' instance has the right id', function () {
+ equal( model.id, expectedValues.id );
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> if ( expectedValues.hasOwnProperty( 'title') ) {
</span><span class="cx" style="display: block; padding: 0 10px"> test( type + ' instance has the right title.', function () {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- equal( model.params.title , expectedValues.title );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ equal( model.params.title, expectedValues.title );
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> if ( expectedValues.hasOwnProperty( 'description' ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> test( type + ' instance has the right description.', function () {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- equal( model.params.description , expectedValues.description );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ equal( model.params.description, expectedValues.description );
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> if ( expectedValues.hasOwnProperty( 'content' ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> test( type + ' instance has the right content.', function () {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- equal( model.params.content , expectedValues.content );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ equal( model.params.content, expectedValues.content );
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> if ( expectedValues.hasOwnProperty( 'priority' ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> test( type + ' instance has the right priority.', function () {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- equal( model.priority() , expectedValues.priority );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ equal( model.priority(), expectedValues.priority );
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( expectedValues.textExpanded ) {
- test( type + ' instance is not expanded', function () {
- equal( model.expanded() , false );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( expectedValues.hasOwnProperty( 'active' ) ) {
+ test( type + ' instance has the right active state.', function () {
+ equal( model.active(), expectedValues.active );
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ }
+ test( type + ' can be deactivated', function () {
+ model.activate();
+ model.deactivate();
+ equal( model.active(), false );
+ model.activate();
+ equal( model.active(), true );
+ ok(true);
+ });
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- test( type + ' instance is expanded after calling .expanded()', function () {
- model.expand();
- ok( model.expanded() );
- });
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( type === 'Panel' || type === 'Section' ) {
+ if ( expectedValues.hasOwnProperty( 'expanded' ) ) {
+ test( type + ' instance has the right expanded state.', function () {
+ equal( model.expanded(), expectedValues.expanded );
+ } );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> test( type + ' instance is collapsed after calling .collapse()', function () {
</span><span class="cx" style="display: block; padding: 0 10px"> model.collapse();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- equal( model.expanded() , false );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ ok( ! model.expanded() );
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ test( type + ' instance is expanded after calling .expand()', function () {
+ model.expand();
+ ok( model.expanded() );
+ });
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ module( 'Customizer Setting in Fixture' );
+ test( 'Setting has fixture value', function () {
+ equal( wp.customize( 'fixture-setting' )(), 'Lorem Ipsum' );
+ } );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- module( 'Customizer Control Model' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ module( 'Customizer Control in Fixture' );
+ test( 'Control exists', function () {
+ ok( wp.customize.control.has( 'fixture-control' ) );
+ } );
+ test( 'Control has the fixture setting', function () {
+ var control = wp.customize.control( 'fixture-control' );
+ equal( control.setting(), 'Lorem Ipsum' );
+ equal( control.setting.id, 'fixture-setting' );
+ } );
+ test( 'Control has the section fixture section ID', function () {
+ var control = wp.customize.control( 'fixture-control' );
+ equal( control.section(), 'fixture-section' );
+ } );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ module( 'Customizer Section in Fixture' );
+ test( 'Fixture section exists', function () {
+ ok( wp.customize.section.has( 'fixture-section' ) );
+ } );
+ test( 'Fixture section has control among controls()', function () {
+ var section = wp.customize.section( 'fixture-section' );
+ equal( section.controls().length, 1 );
+ equal( section.controls()[0].id, 'fixture-control' );
+ } );
+ test( 'Fixture section has control among controls()', function () {
+ var section = wp.customize.section( 'fixture-section' );
+ equal( section.panel(), 'fixture-panel' );
+ } );
+
+ module( 'Customizer Panel in Fixture' );
+ test( 'Fixture panel exists', function () {
+ ok( wp.customize.panel.has( 'fixture-panel' ) );
+ } );
+ test( 'Fixture section has control among controls()', function () {
+ var panel = wp.customize.panel( 'fixture-panel' );
+ equal( panel.sections().length, 1 );
+ equal( panel.sections()[0].id, 'fixture-section' );
+ } );
+ test( 'Panel is not expanded by default', function () {
+ var panel = wp.customize.panel( 'fixture-panel' );
+ ok( ! panel.expanded() );
+ } );
+ test( 'Panel is not expanded by default', function () {
+ var panel = wp.customize.panel( 'fixture-panel' );
+ ok( ! panel.expanded() );
+ } );
+ test( 'Focusing on a control will expand the panel and section', function () {
+ var panel, section, control;
+ panel = wp.customize.panel( 'fixture-panel' );
+ section = wp.customize.section( 'fixture-section' );
+ control = wp.customize.control( 'fixture-control' );
+ ok( ! panel.expanded() );
+ ok( ! section.expanded() );
+ control.focus();
+ ok( section.expanded() );
+ ok( panel.expanded() );
+ } );
+
+
+ module( 'Dynamically-created Customizer Setting Model' );
+ settingId = 'new_blogname';
+ settingValue = 'Hello World';
+
+ test( 'Create a new setting', function () {
+ mockSetting = wp.customize.create(
+ settingId,
+ settingId,
+ settingValue,
+ {
+ transport: 'refresh',
+ previewer: wp.customize.previewer
+ }
+ );
+ equal( mockSetting(), settingValue );
+ equal( mockSetting.id, settingId );
+ } );
+
+ module( 'Dynamically-created Customizer Section Model' );
+
+ sectionId = 'mock_title_tagline';
+ sectionContent = '<li id="accordion-section-mock_title_tagline" class="control-section accordion-section"></li>';
+ sectionData = {
+ content: sectionContent,
+ active: true
+ };
+
+ mockSection = new wp.customize.Section( sectionId, { params: sectionData } );
+
+ sectionExpectedValues = {
+ type: 'Section',
+ id: sectionId,
+ content: sectionContent,
+ priority: 100,
+ active: true // @todo This should default to true
+ };
+
+ testCustomizerModel( mockSection, sectionExpectedValues );
+
+ test( 'Section has been embedded', function () {
+ equal( mockSection.deferred.embedded.state(), 'resolved' );
+ } );
+
+ wp.customize.section.add( sectionId, mockSection );
+
+ test( 'Section instance added to the wp.customize.section object', function () {
+ ok( wp.customize.section.has( sectionId ) );
+ });
+
+ sectionInstance = wp.customize.section( sectionId );
+
+ test( 'Section instance has right content when accessed from wp.customize.section()', function () {
+ equal( sectionInstance.params.content, sectionContent );
+ });
+
+ test( 'Section instance has no children yet', function () {
+ equal( sectionInstance.controls().length, 0 );
+ });
+
+ module( 'Dynamically-created Customizer Control Model' );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> controlId = 'new_blogname';
</span><span class="cx" style="display: block; padding: 0 10px"> controlLabel = 'Site Title';
</span><span class="cx" style="display: block; padding: 0 10px"> controlType = 'text';
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -63,39 +207,42 @@
</span><span class="cx" style="display: block; padding: 0 10px"> controlDescription = 'Test control description';
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> controlData = {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- content : controlContent,
- description : controlDescription,
- label : controlLabel,
- settings : { 'default' : 'blogname' },
- type : controlType
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ content: controlContent,
+ description: controlDescription,
+ label: controlLabel,
+ settings: { 'default': 'new_blogname' },
+ type: controlType,
+ active: true // @todo This should default to true
</ins><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- mockControl = new wp.customize.Control( controlId , {
- params : controlData,
- previewer : wp.customize.previewer
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ mockControl = new wp.customize.Control( controlId, {
+ params: controlData,
+ previewer: wp.customize.previewer
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> controlExpectedValues = {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- type : 'Control',
- content : controlContent,
- descrption : controlDescription,
- label : controlLabel,
- id : controlId,
- priority : 10,
- textExpanded : false
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ type: 'Control',
+ content: controlContent,
+ description: controlDescription,
+ label: controlLabel,
+ id: controlId,
+ priority: 10
</ins><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- testCustomizerModel( mockControl , controlExpectedValues );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ testCustomizerModel( mockControl, controlExpectedValues );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> test( 'Control instance does not yet belong to a section.', function () {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- equal( mockControl.section() , undefined );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ equal( mockControl.section(), undefined );
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ test( 'Control has not been embedded yet', function () {
+ equal( mockControl.deferred.embedded.state(), 'pending' );
+ } );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> test( 'Control instance has the right selector.', function () {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- equal( mockControl.selector , '#customize-control-new_blogname' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ equal( mockControl.selector, '#customize-control-new_blogname' );
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- wp.customize.control.add( controlId , mockControl );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ wp.customize.control.add( controlId, mockControl );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> test( 'Control instance was added to the control class.', function () {
</span><span class="cx" style="display: block; padding: 0 10px"> ok( wp.customize.control.has( controlId ) );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -104,70 +251,50 @@
</span><span class="cx" style="display: block; padding: 0 10px"> mockControlInstance = wp.customize.control( controlId );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> test( 'Control instance has the right id when accessed from api.control().', function () {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- equal( mockControlInstance.id , controlId );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ equal( mockControlInstance.id, controlId );
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
- module( 'Customizer Section Model' );
-
- sectionId = 'mock_title_tagline';
- sectionContent = '<li id="accordion-section-title_tagline" class="control-section accordion-section"></li>';
- sectionData = {
- content : sectionContent
- };
-
- mockSection = new wp.customize.Section( sectionId , { params : sectionData } );
-
- sectionExpectedValues = {
- type : 'Section',
- id : sectionId,
- content : sectionContent,
- priority : 100,
- testExpanded : true
- };
-
- testCustomizerModel( mockSection , sectionExpectedValues );
-
- wp.customize.section.add( sectionId , mockSection );
-
- test( 'Section instance added to the wp.customize.section object', function () {
- ok( wp.customize.section.has( sectionId ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ test( 'Control section can be set as expected', function () {
+ mockControl.section( mockSection.id );
+ equal( mockControl.section(), mockSection.id );
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ test( 'Associating a control with a section allows it to be embedded', function () {
+ equal( mockControl.deferred.embedded.state(), 'resolved' );
+ });
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- sectionInstance = wp.customize.section( sectionId );
-
- test( 'Section instance has right content when accessed from wp.customize.section()', function () {
- equal( sectionInstance.params.content , sectionContent );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ test( 'Control is now available on section.controls()', function () {
+ equal( sectionInstance.controls().length, 1 );
+ equal( sectionInstance.controls()[0], mockControl );
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ module( 'Dynamically-created Customizer Panel Model' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- module( 'Customizer Panel Model' );
-
</del><span class="cx" style="display: block; padding: 0 10px"> panelId = 'mockPanelId';
</span><span class="cx" style="display: block; padding: 0 10px"> panelTitle = 'Mock Panel Title';
</span><span class="cx" style="display: block; padding: 0 10px"> panelDescription = 'Mock panel description';
</span><span class="cx" style="display: block; padding: 0 10px"> panelContent = '<li id="accordion-panel-widgets" class="control-section control-panel accordion-section">';
</span><span class="cx" style="display: block; padding: 0 10px"> panelData = {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- content : panelContent,
- title : panelTitle,
- description : panelDescription
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ content: panelContent,
+ title: panelTitle,
+ description: panelDescription,
+ active: true // @todo This should default to true
</ins><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- mockPanel = new wp.customize.Panel( panelId , { params : panelData } );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ mockPanel = new wp.customize.Panel( panelId, { params: panelData } );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> panelExpectedValues = {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- type : 'Panel',
- id : panelId,
- title : panelTitle ,
- description : panelDescription,
- content : panelContent,
- priority : 100,
- testExpanded : true
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ type: 'Panel',
+ id: panelId,
+ title: panelTitle,
+ description: panelDescription,
+ content: panelContent,
+ priority: 100,
+ active: true
</ins><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- testCustomizerModel( mockPanel , panelExpectedValues );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ testCustomizerModel( mockPanel, panelExpectedValues );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> test( 'Panel instance is not contextuallyActive', function () {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- equal( mockPanel.isContextuallyActive() , false );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ equal( mockPanel.isContextuallyActive(), false );
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span></span></pre>
</div>
</div>
</body>
</html>