sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Customizer: Add more QUnit tests to improve coverage on the new models.

Browse Source 
Includes tests for the broken `activate()`/`deactivate()` methods, which were fixed in [30871].

props westonruter.
see #30701.

git-svn-id: https://develop.svn.wordpress.org/trunk@30919 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Dominik Schilling (ocean90) 2014-12-16 19:43:22 +00:00
parent 93ea9862a5
commit e7f2ebf414
3 changed files with 303 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
tests/qunit/fixtures/customize-settings.js Normal file
View File

@ -0,0 +1,82 @@
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 &amp; 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 = {};

1
tests/qunit/index.html
View File

@ -23,6 +23,7 @@
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">
<script src="fixtures/customize-header.js"></script>
<script src="fixtures/customize-settings.js"></script>
</div>
<p><a href="editor">TinyMCE tests</a></p>

313
tests/qunit/wp-admin/js/customize-controls.js
View File

@ -1,134 +1,188 @@
/* global wp */
jQuery( function() {
jQuery( window ).load( function (){
'use strict';
var controlId, controlLabel, controlType, controlContent, controlDescription, controlData, mockControl,
mockControlInstance, controlExpectedValues, sectionId, sectionContent, sectionData, mockSection,
sectionInstance, sectionExpectedValues, panelId, panelTitle, panelDescription, panelContent, panelData,
mockPanel, panelExpectedValues, testCustomizerModel;
mockPanel, panelExpectedValues, testCustomizerModel, settingId, settingValue, mockSetting;
testCustomizerModel = function( model, expectedValues ) {
var type = expectedValues.type || '';
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 ] ) );
} );
if ( expectedValues.hasOwnProperty( 'id' ) ) {
test( type + ' instance has the right id' , function () {
equal( model.id , expectedValues.id );
test( type + ' instance has the right id', function () {
equal( model.id, expectedValues.id );
});
}
if ( expectedValues.hasOwnProperty( 'title') ) {
test( type + ' instance has the right title.', function () {
equal( model.params.title , expectedValues.title );
equal( model.params.title, expectedValues.title );
});
}
if ( expectedValues.hasOwnProperty( 'description' ) ) {
test( type + ' instance has the right description.', function () {
equal( model.params.description , expectedValues.description );
equal( model.params.description, expectedValues.description );
});
}
if ( expectedValues.hasOwnProperty( 'content' ) ) {
test( type + ' instance has the right content.', function () {
equal( model.params.content , expectedValues.content );
equal( model.params.content, expectedValues.content );
});
}
if ( expectedValues.hasOwnProperty( 'priority' ) ) {
test( type + ' instance has the right priority.', function () {
equal( model.priority() , expectedValues.priority );
equal( model.priority(), expectedValues.priority );
});
}
if ( expectedValues.textExpanded ) {
test( type + ' instance is not expanded', function () {
equal( model.expanded() , false );
if ( expectedValues.hasOwnProperty( 'active' ) ) {
test( type + ' instance has the right active state.', function () {
equal( model.active(), expectedValues.active );
});
}
test( type + ' can be deactivated', function () {
model.activate();
model.deactivate();
equal( model.active(), false );
model.activate();
equal( model.active(), true );
ok(true);
});
test( type + ' instance is expanded after calling .expanded()', function () {
model.expand();
ok( model.expanded() );
});
if ( type === 'Panel' || type === 'Section' ) {
if ( expectedValues.hasOwnProperty( 'expanded' ) ) {
test( type + ' instance has the right expanded state.', function () {
equal( model.expanded(), expectedValues.expanded );
} );
}
test( type + ' instance is collapsed after calling .collapse()', function () {
model.collapse();
equal( model.expanded() , false );
ok( ! model.expanded() );
});
test( type + ' instance is expanded after calling .expand()', function () {
model.expand();
ok( model.expanded() );
});
}
};
module( 'Customizer Setting in Fixture' );
test( 'Setting has fixture value', function () {
equal( wp.customize( 'fixture-setting' )(), 'Lorem Ipsum' );
} );
module( 'Customizer Control Model' );
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' );
} );
controlId = 'new_blogname';
controlLabel = 'Site Title';
controlType = 'text';
controlContent = '<li id="customize-control-blogname" class="customize-control customize-control-text"></li>';
controlDescription = 'Test control description';
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' );
} );
controlData = {
content : controlContent,
description : controlDescription,
label : controlLabel,
settings : { 'default' : 'blogname' },
type : controlType
};
mockControl = new wp.customize.Control( controlId , {
params : controlData,
previewer : wp.customize.previewer
});
controlExpectedValues = {
type : 'Control',
content : controlContent,
descrption : controlDescription,
label : controlLabel,
id : controlId,
priority : 10,
textExpanded : false
};
testCustomizerModel( mockControl , controlExpectedValues );
test( 'Control instance does not yet belong to a section.', function () {
equal( mockControl.section() , undefined );
});
test( 'Control instance has the right selector.', function () {
equal( mockControl.selector , '#customize-control-new_blogname' );
});
wp.customize.control.add( controlId , mockControl );
test( 'Control instance was added to the control class.', function () {
ok( wp.customize.control.has( controlId ) );
});
mockControlInstance = wp.customize.control( controlId );
test( 'Control instance has the right id when accessed from api.control().', function () {
equal( mockControlInstance.id , controlId );
});
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( 'Customizer Section Model' );
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-title_tagline" class="control-section accordion-section"></li>';
sectionContent = '<li id="accordion-section-mock_title_tagline" class="control-section accordion-section"></li>';
sectionData = {
content : sectionContent
content: sectionContent,
active: true
};
mockSection = new wp.customize.Section( sectionId , { params : sectionData } );
mockSection = new wp.customize.Section( sectionId, { params: sectionData } );
sectionExpectedValues = {
type : 'Section',
id : sectionId,
content : sectionContent,
priority : 100,
testExpanded : true
type: 'Section',
id: sectionId,
content: sectionContent,
priority: 100,
active: true // @todo This should default to true
};
testCustomizerModel( mockSection , sectionExpectedValues );
testCustomizerModel( mockSection, sectionExpectedValues );
wp.customize.section.add( sectionId , mockSection );
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 ) );
@ -137,37 +191,110 @@ jQuery( function() {
sectionInstance = wp.customize.section( sectionId );
test( 'Section instance has right content when accessed from wp.customize.section()', function () {
equal( sectionInstance.params.content , sectionContent );
equal( sectionInstance.params.content, sectionContent );
});
test( 'Section instance has no children yet', function () {
equal( sectionInstance.controls().length, 0 );
});
module( 'Customizer Panel Model' );
module( 'Dynamically-created Customizer Control Model' );
controlId = 'new_blogname';
controlLabel = 'Site Title';
controlType = 'text';
controlContent = '<li id="customize-control-blogname" class="customize-control customize-control-text"></li>';
controlDescription = 'Test control description';
controlData = {
content: controlContent,
description: controlDescription,
label: controlLabel,
settings: { 'default': 'new_blogname' },
type: controlType,
active: true // @todo This should default to true
};
mockControl = new wp.customize.Control( controlId, {
params: controlData,
previewer: wp.customize.previewer
});
controlExpectedValues = {
type: 'Control',
content: controlContent,
description: controlDescription,
label: controlLabel,
id: controlId,
priority: 10
};
testCustomizerModel( mockControl, controlExpectedValues );
test( 'Control instance does not yet belong to a section.', function () {
equal( mockControl.section(), undefined );
});
test( 'Control has not been embedded yet', function () {
equal( mockControl.deferred.embedded.state(), 'pending' );
} );
test( 'Control instance has the right selector.', function () {
equal( mockControl.selector, '#customize-control-new_blogname' );
});
wp.customize.control.add( controlId, mockControl );
test( 'Control instance was added to the control class.', function () {
ok( wp.customize.control.has( controlId ) );
});
mockControlInstance = wp.customize.control( controlId );
test( 'Control instance has the right id when accessed from api.control().', function () {
equal( mockControlInstance.id, controlId );
});
test( 'Control section can be set as expected', function () {
mockControl.section( mockSection.id );
equal( mockControl.section(), mockSection.id );
});
test( 'Associating a control with a section allows it to be embedded', function () {
equal( mockControl.deferred.embedded.state(), 'resolved' );
});
test( 'Control is now available on section.controls()', function () {
equal( sectionInstance.controls().length, 1 );
equal( sectionInstance.controls()[0], mockControl );
});
module( 'Dynamically-created Customizer Panel Model' );
panelId = 'mockPanelId';
panelTitle = 'Mock Panel Title';
panelDescription = 'Mock panel description';
panelContent = '<li id="accordion-panel-widgets" class="control-section control-panel accordion-section">';
panelData = {
content : panelContent,
title : panelTitle,
description : panelDescription
content: panelContent,
title: panelTitle,
description: panelDescription,
active: true // @todo This should default to true
};
mockPanel = new wp.customize.Panel( panelId , { params : panelData } );
mockPanel = new wp.customize.Panel( panelId, { params: panelData } );
panelExpectedValues = {
type : 'Panel',
id : panelId,
title : panelTitle ,
description : panelDescription,
content : panelContent,
priority : 100,
testExpanded : true
type: 'Panel',
id: panelId,
title: panelTitle,
description: panelDescription,
content: panelContent,
priority: 100,
active: true
};
testCustomizerModel( mockPanel , panelExpectedValues );
testCustomizerModel( mockPanel, panelExpectedValues );
test( 'Panel instance is not contextuallyActive', function () {
equal( mockPanel.isContextuallyActive() , false );
equal( mockPanel.isContextuallyActive(), false );
});
});