WordPress.org

Make WordPress Core

Ticket #30701: 30701.2.diff

File 30701.2.diff, 19.6 KB (added by westonruter, 7 years ago)

https://github.com/xwp/wordpress-develop/pull/58

  • src/wp-admin/js/customize-controls.js

    diff --git src/wp-admin/js/customize-controls.js src/wp-admin/js/customize-controls.js
    index ad54e01..ddbda87 100644
     
    189189                        api.utils.bubbleChildValueChanges( container, [ 'priority', 'active' ] );
    190190
    191191                        container.priority.set( isNaN( container.params.priority ) ? 100 : container.params.priority );
    192                         container.active.set( container.params.active );
     192                        container.active.set( container.params.active ); // @todo if undefined, this should default to true?
    193193                        container.expanded.set( false );
    194194                },
    195195
     
    252252                        if ( ! $.contains( document, this.container ) ) {
    253253                                // jQuery.fn.slideUp is not hiding an element if it is not in the DOM
    254254                                this.container.toggle( active );
    255                                 args.completeCallback();
     255                                if ( args.completeCallback ) {
     256                                        args.completeCallback();
     257                                }
    256258                        } else if ( active ) {
    257259                                this.container.stop( true, true ).slideDown( duration, args.completeCallback );
    258260                        } else {
     
    784786
    785787                        control.section.set( control.params.section );
    786788                        control.priority.set( isNaN( control.params.priority ) ? 10 : control.params.priority );
    787                         control.active.set( control.params.active );
     789                        control.active.set( control.params.active ); // @todo if undefined, this should default to true?
    788790
    789791                        api.utils.bubbleChildValueChanges( control, [ 'section', 'priority', 'active' ] );
    790792
     
    820822                        // Watch for changes to the section state
    821823                        inject = function ( sectionId ) {
    822824                                var parentContainer;
    823                                 if ( ! sectionId ) { // @todo allow a control to be embeded without a section, for instance a control embedded in the frontend
     825                                if ( ! sectionId ) { // @todo allow a control to be embedded without a section, for instance a control embedded in the frontend
    824826                                        return;
    825827                                }
    826828                                // Wait for the section to be registered
     
    878880                        if ( ! $.contains( document, this.container ) ) {
    879881                                // jQuery.fn.slideUp is not hiding an element if it is not in the DOM
    880882                                this.container.toggle( active );
    881                                 args.completeCallback();
     883                                if ( args.completeCallback ) {
     884                                        args.completeCallback();
     885                                }
    882886                        } else if ( active ) {
    883887                                this.container.slideDown( args.duration, args.completeCallback );
    884888                        } else {
     
    913917                 */
    914918                deactivate: Container.prototype.deactivate,
    915919
     920                /**
     921                 * Re-use _toggleActive from Container class.
     922                 *
     923                 * @access private
     924                 */
     925                _toggleActive: Container.prototype._toggleActive,
     926
    916927                dropdownInit: function() {
    917928                        var control      = this,
    918929                                statuses     = this.container.find('.dropdown-status'),
  • new file tests/qunit/fixtures/customize-settings.js

    diff --git tests/qunit/fixtures/customize-settings.js tests/qunit/fixtures/customize-settings.js
    new file mode 100644
    index 0000000..0c5b3a6
    - +  
     1window.wp = window.wp || {};
     2window.wp.customize = window.wp.customize || { get: function(){}  };
     3
     4var customizerRootElement;
     5customizerRootElement = jQuery( '<div id="customize-theme-controls"><ul></ul></div>' );
     6customizerRootElement.css( { position: 'absolute', top: -1000 } ); // remove from view
     7jQuery( document.body ).append( customizerRootElement );
     8
     9window._wpCustomizeSettings = {
     10        "autofocus": {},
     11        "browser": {
     12                "ios": false,
     13                "mobile": false
     14        },
     15        "controls": {
     16                "fixture-control": {
     17                        "active": true,
     18                        "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>",
     19                        "description": "",
     20                        "instanceNumber": 8,
     21                        "label": "Fixture Control",
     22                        "priority": 10,
     23                        "section": "fixture-section",
     24                        "settings": {
     25                                "default": "fixture-setting"
     26                        },
     27                        "type": "text"
     28                }
     29        },
     30        "documentTitleTmpl": "Customize: %s",
     31        "nonce": {
     32                "preview": "",
     33                "save": ""
     34        },
     35        "panels": {
     36                "fixture-panel": {
     37                        "active": true,
     38                        "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>",
     39                        "description": "Lorem ipsum",
     40                        "instanceNumber": 1,
     41                        "priority": 110,
     42                        "title": "Lorem Ipsum",
     43                        "type": "default"
     44                }
     45        },
     46        "sections": {
     47                "fixture-section": {
     48                        "active": true,
     49                        "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>",
     50                        "description": "",
     51                        "instanceNumber": 2,
     52                        "panel": "fixture-panel",
     53                        "priority": 20,
     54                        "title": "Fixture Section",
     55                        "type": "default"
     56                }
     57        },
     58        "settings": {
     59                "fixture-setting": {
     60                        "transport": "postMessage",
     61                        "value": "Lorem Ipsum"
     62                }
     63        },
     64        "theme": {
     65                "active": true,
     66                "stylesheet": "twentyfifteen"
     67        },
     68        "url": {
     69                "activated": "http://src.wordpress-develop.dev/wp-admin/themes.php?activated=true&previewed",
     70                "ajax": "/wp-admin/admin-ajax.php",
     71                "allowed": [
     72                        "http://src.wordpress-develop.dev/"
     73                ],
     74                "fallback": "http://src.wordpress-develop.dev/?preview=1&template=twentyfifteen&stylesheet=twentyfifteen&preview_iframe=1&TB_iframe=true",
     75                "home": "http://src.wordpress-develop.dev/",
     76                "isCrossDomain": false,
     77                "login": "http://src.wordpress-develop.dev/wp-login.php?interim-login=1&customize-login=1",
     78                "parent": "http://src.wordpress-develop.dev/wp-admin/",
     79                "preview": "http://src.wordpress-develop.dev/"
     80        }
     81};
     82window._wpCustomizeControlsL10n = {};
     83 No newline at end of file
  • tests/qunit/index.html

    diff --git tests/qunit/index.html tests/qunit/index.html
    index df51b7a..b873811 100644
     
    2323    <ol id="qunit-tests"></ol>
    2424    <div id="qunit-fixture">
    2525      <script src="fixtures/customize-header.js"></script>
     26      <script src="fixtures/customize-settings.js"></script>
    2627    </div>
    2728    <p><a href="editor">TinyMCE tests</a></p>
    2829
  • tests/qunit/wp-admin/js/customize-controls.js

    diff --git tests/qunit/wp-admin/js/customize-controls.js tests/qunit/wp-admin/js/customize-controls.js
    index 3a58a14..cb8767f 100644
     
    11/* global wp */
    22
    3 jQuery( function() {
     3jQuery( window ).load( function (){
     4        'use strict';
    45
    56        var controlId, controlLabel, controlType, controlContent, controlDescription, controlData, mockControl,
    67                mockControlInstance, controlExpectedValues, sectionId, sectionContent, sectionData, mockSection,
    78                sectionInstance, sectionExpectedValues, panelId, panelTitle, panelDescription, panelContent, panelData,
    8                 mockPanel, panelExpectedValues, testCustomizerModel;
     9                mockPanel, panelExpectedValues, testCustomizerModel, settingId, settingValue, mockSetting;
    910
    1011        testCustomizerModel = function( model, expectedValues ) {
    11                 var type =  expectedValues.type || '';
     12                if ( ! expectedValues.type || ! wp.customize[ expectedValues.type ] ) {
     13                        throw new Error( 'Must pass value type in expectedValues.' );
     14                }
     15                var type = expectedValues.type;
     16                test( 'Model extends proper type', function () {
     17                        ok( model.extended( wp.customize[ type ] ) );
     18                } );
    1219
    1320                if ( expectedValues.hasOwnProperty( 'id' ) ) {
    14                         test( type + ' instance has the right id' , function () {
    15                                 equal( model.id , expectedValues.id );
     21                        test( type + ' instance has the right id', function () {
     22                                equal( model.id, expectedValues.id );
    1623                        });
    1724                }
    1825                if ( expectedValues.hasOwnProperty( 'title') ) {
    1926                        test( type + ' instance has the right title.', function () {
    20                                 equal( model.params.title , expectedValues.title );
     27                                equal( model.params.title, expectedValues.title );
    2128                        });
    2229                }
    2330                if ( expectedValues.hasOwnProperty( 'description' ) ) {
    2431                        test( type + ' instance has the right description.', function () {
    25                                 equal( model.params.description , expectedValues.description );
     32                                equal( model.params.description, expectedValues.description );
    2633                        });
    2734                }
    2835                if ( expectedValues.hasOwnProperty( 'content' ) ) {
    2936                        test( type + ' instance has the right content.', function () {
    30                                 equal( model.params.content , expectedValues.content );
     37                                equal( model.params.content, expectedValues.content );
    3138                        });
    3239                }
    3340                if ( expectedValues.hasOwnProperty( 'priority' ) ) {
    3441                        test( type + ' instance has the right priority.', function () {
    35                                 equal( model.priority() , expectedValues.priority );
     42                                equal( model.priority(), expectedValues.priority );
    3643                        });
    3744                }
    38                 if ( expectedValues.textExpanded ) {
    39                         test( type + ' instance is not expanded', function () {
    40                                 equal( model.expanded() , false );
    41                         });
    42 
    43                         test( type + ' instance is expanded after calling .expanded()', function () {
    44                                 model.expand();
    45                                 ok( model.expanded() );
     45                if ( expectedValues.hasOwnProperty( 'active' ) ) {
     46                        test( type + ' instance has the right active state.', function () {
     47                                equal( model.active(), expectedValues.active );
    4648                        });
     49                }
     50                test( type + ' can be deactivated', function () {
     51                        model.activate();
     52                        model.deactivate();
     53                        equal( model.active(), false );
     54                        model.activate();
     55                        equal( model.active(), true );
     56                        ok(true);
     57                });
     58
     59                if ( type === 'Panel' || type === 'Section' ) {
     60                        if ( expectedValues.hasOwnProperty( 'expanded' ) ) {
     61                                test( type + ' instance has the right expanded state.', function () {
     62                                        equal( model.expanded(), expectedValues.expanded );
     63                                } );
     64                        }
    4765
    4866                        test( type + ' instance is collapsed after calling .collapse()', function () {
    4967                                model.collapse();
    50                                 equal( model.expanded() , false );
     68                                ok( ! model.expanded() );
     69                        });
     70
     71                        test( type + ' instance is expanded after calling .expand()', function () {
     72                                model.expand();
     73                                ok( model.expanded() );
    5174                        });
    5275                }
    5376
    5477        };
    5578
     79        module( 'Customizer Setting in Fixture' );
     80        test( 'Setting has fixture value', function () {
     81                equal( wp.customize( 'fixture-setting' )(), 'Lorem Ipsum' );
     82        } );
     83
     84        module( 'Customizer Control in Fixture' );
     85        test( 'Control exists', function () {
     86                ok( wp.customize.control.has( 'fixture-control' ) );
     87        } );
     88        test( 'Control has the fixture setting', function () {
     89                var control = wp.customize.control( 'fixture-control' );
     90                equal( control.setting(), 'Lorem Ipsum' );
     91                equal( control.setting.id, 'fixture-setting' );
     92        } );
     93        test( 'Control has the section fixture section ID', function () {
     94                var control = wp.customize.control( 'fixture-control' );
     95                equal( control.section(), 'fixture-section' );
     96        } );
     97
     98        module( 'Customizer Section in Fixture' );
     99        test( 'Fixture section exists', function () {
     100                ok( wp.customize.section.has( 'fixture-section' ) );
     101        } );
     102        test( 'Fixture section has control among controls()', function () {
     103                var section = wp.customize.section( 'fixture-section' );
     104                equal( section.controls().length, 1 );
     105                equal( section.controls()[0].id, 'fixture-control' );
     106        } );
     107        test( 'Fixture section has control among controls()', function () {
     108                var section = wp.customize.section( 'fixture-section' );
     109                equal( section.panel(), 'fixture-panel' );
     110        } );
     111
     112        module( 'Customizer Panel in Fixture' );
     113        test( 'Fixture panel exists', function () {
     114                ok( wp.customize.panel.has( 'fixture-panel' ) );
     115        } );
     116        test( 'Fixture section has control among controls()', function () {
     117                var panel = wp.customize.panel( 'fixture-panel' );
     118                equal( panel.sections().length, 1 );
     119                equal( panel.sections()[0].id, 'fixture-section' );
     120        } );
     121        test( 'Panel is not expanded by default', function () {
     122                var panel = wp.customize.panel( 'fixture-panel' );
     123                ok( ! panel.expanded() );
     124        } );
     125        test( 'Panel is not expanded by default', function () {
     126                var panel = wp.customize.panel( 'fixture-panel' );
     127                ok( ! panel.expanded() );
     128        } );
     129        test( 'Focusing on a control will expand the panel and section', function () {
     130                var panel, section, control;
     131                panel = wp.customize.panel( 'fixture-panel' );
     132                section = wp.customize.section( 'fixture-section' );
     133                control = wp.customize.control( 'fixture-control' );
     134                ok( ! panel.expanded() );
     135                ok( ! section.expanded() );
     136                control.focus();
     137                ok( section.expanded() );
     138                ok( panel.expanded() );
     139        } );
     140
     141
     142        module( 'Dynamically-created Customizer Setting Model' );
     143        settingId = 'new_blogname';
     144        settingValue = 'Hello World';
     145
     146        test( 'Create a new setting', function () {
     147                mockSetting = wp.customize.create(
     148                        settingId,
     149                        settingId,
     150                        settingValue,
     151                        {
     152                                transport: 'refresh',
     153                                previewer: wp.customize.previewer
     154                        }
     155                );
     156                equal( mockSetting(), settingValue );
     157                equal( mockSetting.id, settingId );
     158        } );
     159
     160        module( 'Dynamically-created Customizer Section Model' );
     161
     162        sectionId = 'mock_title_tagline';
     163        sectionContent = '<li id="accordion-section-mock_title_tagline" class="control-section accordion-section"></li>';
     164        sectionData = {
     165                content: sectionContent,
     166                active: true
     167        };
     168
     169        mockSection = new wp.customize.Section( sectionId, { params: sectionData } );
     170
     171        sectionExpectedValues = {
     172                type: 'Section',
     173                id: sectionId,
     174                content: sectionContent,
     175                priority: 100,
     176                active: true // @todo This should default to true
     177        };
     178
     179        testCustomizerModel( mockSection, sectionExpectedValues );
     180
     181        test( 'Section has been embedded', function () {
     182                equal( mockSection.deferred.embedded.state(), 'resolved' );
     183        } );
    56184
    57         module( 'Customizer Control Model' );
     185        wp.customize.section.add( sectionId, mockSection );
     186
     187        test( 'Section instance added to the wp.customize.section object', function () {
     188                ok( wp.customize.section.has( sectionId ) );
     189        });
     190
     191        sectionInstance = wp.customize.section( sectionId );
     192
     193        test( 'Section instance has right content when accessed from wp.customize.section()', function () {
     194                equal( sectionInstance.params.content, sectionContent );
     195        });
     196
     197        test( 'Section instance has no children yet', function () {
     198                equal( sectionInstance.controls().length, 0 );
     199        });
     200
     201        module( 'Dynamically-created Customizer Control Model' );
    58202
    59203        controlId = 'new_blogname';
    60204        controlLabel = 'Site Title';
    jQuery( function() { 
    63207        controlDescription = 'Test control description';
    64208
    65209        controlData = {
    66                 content : controlContent,
    67                 description : controlDescription,
    68                 label : controlLabel,
    69                 settings : { 'default' : 'blogname' },
    70                 type : controlType
     210                content: controlContent,
     211                description: controlDescription,
     212                label: controlLabel,
     213                settings: { 'default': 'new_blogname' },
     214                type: controlType,
     215                active: true // @todo This should default to true
    71216        };
    72217
    73         mockControl = new wp.customize.Control( controlId , {
    74                 params : controlData,
    75                 previewer : wp.customize.previewer
     218        mockControl = new wp.customize.Control( controlId, {
     219                params: controlData,
     220                previewer: wp.customize.previewer
    76221        });
    77222
    78223        controlExpectedValues = {
    79                 type : 'Control',
    80                 content : controlContent,
    81                 descrption : controlDescription,
    82                 label : controlLabel,
    83                 id : controlId,
    84                 priority : 10,
    85                 textExpanded : false
     224                type: 'Control',
     225                content: controlContent,
     226                description: controlDescription,
     227                label: controlLabel,
     228                id: controlId,
     229                priority: 10
    86230        };
    87231
    88         testCustomizerModel( mockControl , controlExpectedValues );
     232        testCustomizerModel( mockControl, controlExpectedValues );
    89233
    90234        test( 'Control instance does not yet belong to a section.', function () {
    91                 equal( mockControl.section() , undefined );
     235                equal( mockControl.section(), undefined );
    92236        });
     237        test( 'Control has not been embedded yet', function () {
     238                equal( mockControl.deferred.embedded.state(), 'pending' );
     239        } );
    93240
    94241        test( 'Control instance has the right selector.', function () {
    95                 equal( mockControl.selector , '#customize-control-new_blogname' );
     242                equal( mockControl.selector, '#customize-control-new_blogname' );
    96243        });
    97244
    98         wp.customize.control.add( controlId , mockControl );
     245        wp.customize.control.add( controlId, mockControl );
    99246
    100247        test( 'Control instance was added to the control class.', function () {
    101248                ok( wp.customize.control.has( controlId ) );
    jQuery( function() { 
    104251        mockControlInstance = wp.customize.control( controlId );
    105252
    106253        test( 'Control instance has the right id when accessed from api.control().', function () {
    107                 equal( mockControlInstance.id , controlId );
     254                equal( mockControlInstance.id, controlId );
    108255        });
    109256
    110 
    111         module( 'Customizer Section Model' );
    112 
    113         sectionId = 'mock_title_tagline';
    114         sectionContent = '<li id="accordion-section-title_tagline" class="control-section accordion-section"></li>';
    115         sectionData = {
    116                 content : sectionContent
    117         };
    118 
    119         mockSection = new wp.customize.Section( sectionId , { params : sectionData } );
    120 
    121         sectionExpectedValues = {
    122                 type : 'Section',
    123                 id : sectionId,
    124                 content : sectionContent,
    125                 priority : 100,
    126                 testExpanded : true
    127         };
    128 
    129         testCustomizerModel( mockSection , sectionExpectedValues );
    130 
    131         wp.customize.section.add( sectionId , mockSection );
    132 
    133         test( 'Section instance added to the wp.customize.section object', function () {
    134                 ok( wp.customize.section.has( sectionId ) );
     257        test( 'Control section can be set as expected', function () {
     258                mockControl.section( mockSection.id );
     259                equal( mockControl.section(), mockSection.id );
    135260        });
    136 
    137         sectionInstance = wp.customize.section( sectionId );
    138 
    139         test( 'Section instance has right content when accessed from wp.customize.section()', function () {
    140                 equal( sectionInstance.params.content , sectionContent );
     261        test( 'Associating a control with a section allows it to be embedded', function () {
     262                equal( mockControl.deferred.embedded.state(), 'resolved' );
    141263        });
    142264
     265        test( 'Control is now available on section.controls()', function () {
     266                equal( sectionInstance.controls().length, 1 );
     267                equal( sectionInstance.controls()[0], mockControl );
     268        });
    143269
    144         module( 'Customizer Panel Model' );
     270        module( 'Dynamically-created Customizer Panel Model' );
    145271
    146272        panelId = 'mockPanelId';
    147273        panelTitle = 'Mock Panel Title';
    148274        panelDescription = 'Mock panel description';
    149275        panelContent = '<li id="accordion-panel-widgets" class="control-section control-panel accordion-section">';
    150276        panelData = {
    151                 content : panelContent,
    152                 title : panelTitle,
    153                 description : panelDescription
     277                content: panelContent,
     278                title: panelTitle,
     279                description: panelDescription,
     280                active: true // @todo This should default to true
    154281        };
    155282
    156         mockPanel = new wp.customize.Panel( panelId , { params : panelData } );
     283        mockPanel = new wp.customize.Panel( panelId, { params: panelData } );
    157284
    158285        panelExpectedValues = {
    159                 type : 'Panel',
    160                 id : panelId,
    161                 title : panelTitle ,
    162                 description : panelDescription,
    163                 content : panelContent,
    164                 priority : 100,
    165                 testExpanded : true
     286                type: 'Panel',
     287                id: panelId,
     288                title: panelTitle,
     289                description: panelDescription,
     290                content: panelContent,
     291                priority: 100,
     292                active: true
    166293        };
    167294
    168         testCustomizerModel( mockPanel , panelExpectedValues );
     295        testCustomizerModel( mockPanel, panelExpectedValues );
    169296
    170297        test( 'Panel instance is not contextuallyActive', function () {
    171                 equal( mockPanel.isContextuallyActive() , false );
     298                equal( mockPanel.isContextuallyActive(), false );
    172299        });
    173300});