PanelsTests.js

/*
Copyright 2013 OCAD University

Licensed under the Educational Community License (ECL), Version 2.0 or the New
BSD license. You may not use this file except in compliance with one these
Licenses.

You may obtain a copy of the ECL 2.0 License and BSD License at
https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
*/

// Declare dependencies
/* global fluid, jqUnit */

(function ($) {
    "use strict";

    fluid.registerNamespace("fluid.tests");

    /*************************
     * composite panel tests *
     *************************/

    fluid.tests.assertPathsExist = function (root, paths) {
        fluid.each(paths, function (path) {
            jqUnit.assertValue("The path '" + path + "' should exist", fluid.get(root, path));
        });
    };

    fluid.tests.listenerFuncMaker = function (funcName, args, environment) {
        return function () {
            fluid.invokeGlobalFunction(funcName, args, environment);
        };
    };

    fluid.defaults("fluid.tests.subPanel", {
        gradeNames: ["fluid.prefs.panel", "autoInit"],
        renderOnInit: true,
        selectors: {
            header: "h2"
        }
    });

    fluid.defaults("fluid.tests.subPanel1", {
        gradeNames: ["fluid.tests.subPanel", "autoInit"],
        preferenceMap: {
            "fluid.prefs.sub1": {
                "model.value": "default",
                "range.min": "minimum",
                "range.max": "maximum"
            }
        },
        listeners: {
            afterRender: {
                listener: "{compositePanel}.writeRecord",
                args: ["subPanel1"]
            }
        },
        repeatingSelectors: ["header"],
        protoTree: {
            expander: {
                type: "fluid.renderer.repeat",
                repeatID: "header",
                controlledBy: "value",
                pathAs: "modelPath",
                tree: {
                    value: "${{modelPath}}"
                }
            }
        }
    });

    fluid.defaults("fluid.tests.subPanel2", {
        gradeNames: ["fluid.tests.subPanel", "autoInit"],
        preferenceMap: {
            "fluid.prefs.sub2": {
                "model.value": "default",
                "range.min": "minimum",
                "range.max": "maximum"
            }
        },
        listeners: {
            afterRender: {
                listener: "{compositePanel}.writeRecord",
                args: ["subPanel2"]
            }
        },
        rendererFnOptions: {
            noexpand: true
        },
        repeatingSelectors: [],
        produceTree: function () {
            return {
                children: [{
                    ID: "header",
                    componentType: "UIBound",
                    value: "subPanel2",
                    valuebinding: "value"
                }]
            };
        }
    });

    fluid.defaults("fluid.tests.compositePanel", {
        gradeNames: ["fluid.prefs.compositePanel", "autoInit"],
        selectors: {
            subPanel1: ".subPanel1",
            subPanel2: ".subPanel2",
            heading: ".heading"
        },
        messageBase: {
            heading: "Heading"
        },
        selectorsToIgnore: ["subPanel1", "subPanel2"],
        model: {
            "fluid_prefs_sub1": ["subPanel1", "subPanel1a"],
            "fluid_prefs_sub2": "subPanel2"
        },
        members: {
            fireRecord: {}
        },
        invokers: {
            writeRecord: {
                funcName: "fluid.tests.compositePanel.writeRecord",
                args: ["{that}.fireRecord", "{arguments}.0"]
            }
        },
        listeners: {
            afterRender: {
                listener: "{that}.writeRecord",
                args: ["compositePanel"]
            }
        },
        protoTree: {
            "heading": {
                messagekey: "heading"
            }
        },
        resources: {
            template: {
                resourceText: "<section><h1 class=\"heading\"></h1><article class=\"subPanel1\"></article><article class=\"subPanel2\"></article></section>"
            },
            subPanel1: {
                resourceText: "<h2>subPanel1</h2>"
            },
            subPanel2: {
                resourceText: "<h2>subPanel2</h2>"
            }
        },
        components: {
            subPanel1: {
                type: "fluid.tests.subPanel1",
                container: "{compositePanel}.dom.subPanel1"
            },
            subPanel2: {
                type: "fluid.tests.subPanel2",
                container: "{compositePanel}.dom.subPanel2"
            }
        }
    });

    fluid.tests.compositePanel.writeRecord = function (fireRecord, id) {
        var currentVal = fluid.get(fireRecord, id);
        fluid.set(fireRecord, id, currentVal !== undefined ? ++currentVal : 1);
    };

    jqUnit.test("fluid.prefs.compositePanel", function () {
        jqUnit.expect(16);
        var that = fluid.tests.compositePanel(".flc-prefs-compositePanel");

        var expectedSubPanel1Rules = {
            "fluid_prefs_sub1": "value"
        };

        var expectedSubPanel2Rules = {
            "fluid_prefs_sub2": "value"
        };

        var expectedResourceText = "<section><h1 class=\"heading\"></h1><article class=\"subPanel1\"><h2>subPanel1</h2></article><article class=\"subPanel2\"><h2>subPanel2</h2></article></section>";

        var expectedFireRecord = {
            compositePanel: 3,
            subPanel1: 3,
            subPanel2: 3
        };

        var expectedSupanel1Selector = ".subPanel1 h2";
        var expectedSupanel2Selector = ".subPanel2 h2";

        var expectedRepeatingSelectors = ["subPanel1_header"];

        var expectedTree = {
            "children": [{
                "ID": "heading",
                "componentType": "UIMessage",
                "messagekey": {
                    "value": "heading"
                }
            }, {
                "ID": "subPanel2_header",
                "componentType": "UIBound",
                "value": "subPanel2",
                "valuebinding": "fluid_prefs_sub2"
            }, {
                "ID": "subPanel1_header:",
                "componentType": "UIBound",
                "value": "subPanel1",
                "valuebinding": "fluid_prefs_sub1.0"
            }, {
                "ID": "subPanel1_header:",
                "componentType": "UIBound",
                "value": "subPanel1a",
                "valuebinding": "fluid_prefs_sub1.1"
            }]
        };

        that.refreshView();
        that.subPanel1.refreshView();
        that.subPanel2.refreshView();
        jqUnit.assertDeepEq("The events should have populated the fireRecord correctly", expectedFireRecord, that.fireRecord);

        jqUnit.assertFalse("The renderOnInit option for subPanel1 should be false", that.subPanel1.options.renderOnInit);
        jqUnit.assertFalse("The renderOnInit option for subPanel2 should be false", that.subPanel2.options.renderOnInit);
        jqUnit.assertDeepEq("The rules block for subPanel1 should be generated correctly", expectedSubPanel1Rules, that.subPanel1.options.rules);
        jqUnit.assertDeepEq("The rules block for subPanel2 should be generated correctly", expectedSubPanel2Rules, that.subPanel2.options.rules);
        jqUnit.assertEquals("The resourceText should have been combined correctly", expectedResourceText, that.options.resources.template.resourceText);
        jqUnit.assertEquals("subPanel1's selectors should be surfaced to the compositePanel correctly", expectedSupanel1Selector, that.options.selectors.subPanel1_header);
        jqUnit.assertEquals("subPanel2's selectors should be surfaced to the compositePanel correctly", expectedSupanel2Selector, that.options.selectors.subPanel2_header);
        jqUnit.assertDeepEq("The repeatingSelectors should have been surfaced correctly", expectedRepeatingSelectors, that.options.rendererFnOptions.subPanelRepeatingSelectors);
        jqUnit.assertDeepEq("The produceTree should have combined the subPanel protoTrees together correctly", expectedTree, that.produceTree());
        jqUnit.assertEquals("The markup for the compositePanel should have rendered correctly", that.options.messageBase.heading, that.locate("heading").text());
        that.subPanel1.locate("header").each(function (idx, elm) {
            var actual = $(elm).text();
            jqUnit.assertEquals("The markup for subPanel1 should have rendered correctly", that.subPanel1.model.value[idx], actual);
        });
        jqUnit.assertEquals("The markup for subPanel2 should have rendered correctly", that.subPanel2.model.value, that.subPanel2.locate("header").text());
        jqUnit.assertDeepEq("The model for the subPanel1 should be the same as the corresponding value in the compositePanel", that.model.fluid_prefs_sub1, that.subPanel1.model.value);
        jqUnit.assertEquals("The model for the subPanel2 should be the same as the corresponding value in the compositePanel", that.model.fluid_prefs_sub2, that.subPanel2.model.value);
    });

    jqUnit.test("renderOnPreference", function () {
        var assertInitialized = function (that, panelName) {
            jqUnit.assertTrue("The " + panelName + " sub panel should be initialized", that[panelName]);
            jqUnit.assertTrue("The container for " + panelName + " should be visible", that.locate(panelName).is(":visible"));
        };

        var assertNotInitialized = function (that, panelName) {
            jqUnit.assertFalse("The " + panelName + " sub panel should not be initialized", that[panelName]);
            jqUnit.assertFalse("The container for " + panelName + " should not be visible", that.locate(panelName).is(":visible"));
        };

        var assertText = function (that, panelName, expected) {
            var actual = that[panelName].locate("text").text();
            jqUnit.assertEquals("The text for " + panelName + " should have rendered correctly", expected, actual);
        };

        var assertChecked = function (that, panelName, expected) {
            var actual = that[panelName].locate("input").is(":checked");
            jqUnit.assertEquals("The value for " + panelName + " should have rendered correctly", expected, actual);
        };

        var assertSubPanelLifecycleBindings = function (that, componentName, preference) {
            var pref = fluid.prefs.subPanel.safePrefKey(preference);
            var initEvent = "initOn_" + pref;
            jqUnit.assertEquals("The createOnEvent for " + componentName + " should be set", initEvent, fluid.get(that, "options.components." + componentName + ".createOnEvent"));
            jqUnit.assertEquals("The " + initEvent + " event should have been added", null, that.options.events[initEvent]);
            jqUnit.assertTrue("The modelListener for " + pref + " should be added", that.options.modelListeners[pref]);
            jqUnit.assertTrue("The onCreate listener to trigger " + initEvent + " should be added", that.options.listeners["onCreate." + pref]);
        };

        var that = fluid.prefs.compositePanel(".renderOnPreference", {
            events: {
                someEvent: null
            },
            selectors: {
                alwaysPanel1: ".alwaysPanel1",
                alwaysPanel2: ".alwaysPanel2",
                conditionalPanel1: ".conditionalPanel1",
                conditionalPanel2: ".conditionalPanel2"
            },
            selectorsToIgnore: ["alwaysPanel1", "alwaysPanel2", "conditionalPanel1", "conditionalPanel2"],
            model: {
                some_pref_1: false,
                some_pref_2: false,
                some_pref_3: false,
                some_pref_4: false
            },
            messageBase: {
                text1: "conditionalPanel1",
                text2: "conditionalPanel2"
            },
            components: {
                alwaysPanel1: {
                    type: "fluid.prefs.panel",
                    container: "{that}.dom.alwaysPanel1",
                    options: {
                        preferenceMap: {
                            "some.pref.1": {
                                "model.value": "default"
                            }
                        },
                        messageBase: {
                            text: "alwaysPanel1"
                        },
                        selectors: {
                            input: ".input"
                        },
                        protoTree: {
                            input: "${value}"
                        }
                    }
                },
                alwaysPanel2: {
                    type: "fluid.prefs.panel",
                    container: "{that}.dom.alwaysPanel2",
                    options: {
                        preferenceMap: {
                            "some.pref.2": {
                                "model.value": "default"
                            }
                        },
                        messageBase: {
                            text: "alwaysPanel2"
                        },
                        selectors: {
                            input: ".input"
                        },
                        protoTree: {
                            input: "${value}"
                        }
                    }
                },
                conditionalPanel1: {
                    type: "fluid.prefs.panel",
                    container: "{that}.dom.conditionalPanel1",
                    options: {
                        renderOnPreference: "some.pref.1",
                        preferenceMap: {
                            "some.pref.3": {
                                "model.value": "default"
                            }
                        },
                        messageBase: {
                            text1: "conditionalPanel1"
                        },
                        selectors: {
                            text: ".text"
                        },
                        protoTree: {
                            text: {
                                messagekey: "text1"
                            }
                        }
                    }
                },
                conditionalPanel2: {
                    type: "fluid.prefs.panel",
                    container: "{that}.dom.conditionalPanel2",
                    options: {
                        renderOnPreference: "some.pref.2",
                        preferenceMap: {
                            "some.pref.4": {
                                "model.value": "default"
                            }
                        },
                        messageBase: {
                            text2: "conditionalPanel2"
                        },
                        selectors: {
                            text: ".text"
                        },
                        protoTree: {
                            text: {
                                messagekey: "text2"
                            }
                        }
                    }
                }
            },
            resources: {
                template: {
                    resourceText: "<div class=\"alwaysPanel1\"></div><div class=\"conditionalPanel1\"></div><div class=\"alwaysPanel2\"></div><div class=\"conditionalPanel2\"></div>"
                },
                alwaysPanel1: {
                    resourceText: "<input type=\"checkbox\" class=\"input\" />"
                },
                alwaysPanel2: {
                    resourceText: "<input type=\"checkbox\" class=\"input\" />"
                },
                conditionalPanel1: {
                    resourceText: "<span class=\"text\"></span>"
                },
                conditionalPanel2: {
                    resourceText: "<span class=\"text\"></span>"
                }
            }
        });

        // component creation
        jqUnit.expect(18);
        assertInitialized(that, "alwaysPanel1");
        jqUnit.assertEquals("The createOnEvent for alwaysPanel1 should be set", "initSubPanels", fluid.get(that, "options.components.alwaysPanel1.createOnEvent"));
        assertInitialized(that, "alwaysPanel2");
        jqUnit.assertEquals("The createOnEvent for alwaysPanel2 should be set", "initSubPanels", fluid.get(that, "options.components.alwaysPanel2.createOnEvent"));
        assertNotInitialized(that, "conditionalPanel1");
        assertSubPanelLifecycleBindings(that, "conditionalPanel1", "some.pref.1");
        assertNotInitialized(that, "conditionalPanel2");
        assertSubPanelLifecycleBindings(that, "conditionalPanel2", "some.pref.2");

        // first rendering
        jqUnit.expect(10);
        that.events.afterRender.addListener(function () {
            assertInitialized(that, "alwaysPanel1");
            assertChecked(that, "alwaysPanel1", false);
            assertInitialized(that, "alwaysPanel2");
            assertChecked(that, "alwaysPanel2", false);
            assertNotInitialized(that, "conditionalPanel1");
            assertNotInitialized(that, "conditionalPanel2");
            that.events.afterRender.removeListener("initial");
        }, "initial", null, "last");
        that.refreshView();

        // set some.pref.1 to true
        jqUnit.expect(11);
        that.events.afterRender.addListener(function () {
            assertInitialized(that, "alwaysPanel1");
            assertChecked(that, "alwaysPanel1", true);
            assertInitialized(that, "alwaysPanel2");
            assertChecked(that, "alwaysPanel2", false);
            assertInitialized(that, "conditionalPanel1");
            assertText(that, "conditionalPanel1", "conditionalPanel1");
            assertNotInitialized(that, "conditionalPanel2");
            that.events.afterRender.removeListener("pref1_true");
        }, "pref1_true", null, "last");
        that.applier.requestChange("some_pref_1", true);

        // set some.pref.1 to false
        jqUnit.expect(10);
        that.events.afterRender.addListener(function () {
            assertInitialized(that, "alwaysPanel1");
            assertChecked(that, "alwaysPanel1", false);
            assertInitialized(that, "alwaysPanel2");
            assertChecked(that, "alwaysPanel2", false);
            assertNotInitialized(that, "conditionalPanel1");
            assertNotInitialized(that, "conditionalPanel2");
            that.events.afterRender.removeListener("pref1_false");
        }, "pref1_false", null, "last");
        that.applier.requestChange("some_pref_1", false);

        // set some.pref.2 to true
        jqUnit.expect(11);
        that.events.afterRender.addListener(function () {
            assertInitialized(that, "alwaysPanel1");
            assertChecked(that, "alwaysPanel1", false);
            assertInitialized(that, "alwaysPanel2");
            assertChecked(that, "alwaysPanel2", true);
            assertNotInitialized(that, "conditionalPanel1");
            assertInitialized(that, "conditionalPanel2");
            assertText(that, "conditionalPanel2", "conditionalPanel2");
            that.events.afterRender.removeListener("pref2_true");
        }, "pref2_true", null, "last");
        that.applier.requestChange("some_pref_2", true);

        // set some.pref.2 to false
        jqUnit.expect(10);
        that.events.afterRender.addListener(function () {
            assertInitialized(that, "alwaysPanel1");
            assertChecked(that, "alwaysPanel1", false);
            assertInitialized(that, "alwaysPanel2");
            assertChecked(that, "alwaysPanel2", false);
            assertNotInitialized(that, "conditionalPanel1");
            assertNotInitialized(that, "conditionalPanel2");
            that.events.afterRender.removeListener("pref2_false");
        }, "pref2_false", null, "last");
        that.applier.requestChange("some_pref_2", false);

    });

    /* FLUID-5201: renderer fluid decorator */

    fluid.defaults("fluid.tests.panel.sliderTest1", {
        gradeNames: ["fluid.prefs.panel", "autoInit"],
        selectors: {
            textSize: ".flc-prefsEditor-min-val",
            label: ".flc-prefsEditor-min-val-label",
            smallIcon: ".flc-prefsEditor-min-val-smallIcon",
            largeIcon: ".flc-prefsEditor-min-val-largeIcon",
            multiplier: ".flc-prefsEditor-multiplier"
        },
        protoTree: {
            label: {messagekey: "textSizeLabel"},
            smallIcon: {messagekey: "textSizeSmallIcon"},
            largeIcon: {messagekey: "textSizeLargeIcon"},
            multiplier: {messagekey: "multiplier"},
            textSize: {
                decorators: {
                    type: "fluid",
                    func: "fluid.textfieldSlider"
                }
            }
        }
    });

    jqUnit.test("FLUID-5201: renderer fluid decorator in a composite panel", function () {
        jqUnit.expect(1);
        var that = fluid.prefs.compositePanel(".fluid-5201", {
            selectors: {
                sliderTest1: ".flc-tests-panel-sliderTest1"
            },
            selectorsToIgnore: ["sliderTest1"],
            components: {
                sliderTest1: {
                    type: "fluid.tests.panel.sliderTest1",
                    container: "{that}.dom.sliderTest1"
                }
            },
            resources: {
                template: {
                    resourceText: "<ul><li class=\"flc-tests-panel-sliderTest1\"></li></ul>"
                },
                sliderTest1: {
                    resourceText: "<div class=\"flc-prefsEditor-min-val\"><div class=\"flc-textfieldSlider-slider\"></div><input id=\"min-val\" class=\"flc-textfieldSlider-field\" type=\"text\" /><span class=\"flc-prefsEditor-multiplier\"></span></div>"
                }
            }
        });

        // the first call to refreshView does the initial rendeirng which includes
        // putting the component defined by the renderer decorator into the components block
        that.refreshView();

        // the second call to refresh view uses the new components block and should ignore
        // the renderer decorator component which isn't a panel
        that.refreshView();
        jqUnit.assert("The composite panel containing a panel with renderer fluid decorator should have instantiated", that);
    });

    /* end FLUID-5201 */

    /* FLUID-5202: rebase valuebinding in a renderer selection object */

    fluid.defaults("fluid.tests.panel.dropdownTest1", {
        gradeNames: ["fluid.prefs.panel", "autoInit"],
        preferenceMap: {
            "learning.dropdownTest1": {
                "model.ddVal": "default",
                "controlValues.ddStrings": "enum"
            }
        },
        messageBase: {
            "dropdownTest-en": "English",
            "dropdownTest-kl": "Klingon",
            "dropdownTest-bj": "Bajoran",
            "dropdownTest-rm": "Romulan",
            "dropdownTest-cd": "Cardassian"
        },
        selectors: {
            textFont: ".flc-prefsEditor-text-font"
        },
        stringArrayIndex: {
            dd: ["dropdownTest-en", "dropdownTest-kl", "dropdownTest-bj", "dropdownTest-rm", "dropdownTest-cd"]
        },
        controlValues: {
            ddStrings: ["en", "kl", "bj", "rm", "cd"]
        },
        protoTree: {
            textFont: {
                optionnames: "${{that}.msgLookup.dd}",
                optionlist: "${{that}.options.controlValues.ddStrings}",
                selection: "${ddVal}"
            }
        }
    });

    jqUnit.test("FLUID-5202: rebase valuebinding in renderer selection object", function () {
        var that = fluid.prefs.compositePanel(".fluid-5202", {
            selectors: {
                dropdownTest1: ".flc-tests-panel-dropdownTest1"
            },
            selectorsToIgnore: ["dropdownTest1"],
            model: {
                "learning_dropdownTest1": "kl"
            },
            components: {
                dropdownTest1: {
                    type: "fluid.tests.panel.dropdownTest1",
                    container: "{that}.dom.dropdownTest1"
                }
            },
            resources: {
                template: {
                    resourceText: "<ul><li class=\"flc-tests-panel-dropdownTest1\"></li></ul>"
                },
                dropdownTest1: {
                    resourceText: "<select class=\"flc-prefsEditor-text-font\" id=\"text-font\"></select>"
                }
            }
        });

        var expectedTree = {
            "children": [{
                "ID": "dropdownTest1_textFont",
                "componentType": "UISelect",
                "optionlist": {
                    "value": [
                        "en",
                        "kl",
                        "bj",
                        "rm",
                        "cd"
                    ]
                },
                "optionnames": {
                    "value": [
                        "English",
                        "Klingon",
                        "Bajoran",
                        "Romulan",
                        "Cardassian"
                    ]
                },
                "selection": {
                    "value": "kl",
                    "valuebinding": "learning_dropdownTest1"
                }
            }]
        };

        jqUnit.assertDeepEq("The tree should be produced correctly, with all valuebinding rebased.", expectedTree, that.produceTree());
    });

    /* end FLUID-5202 */

    /* FLUID-5200: rebase parentRelativeID */

    fluid.defaults("fluid.tests.panel.radioTest1", {
        gradeNames: ["fluid.prefs.panel", "autoInit"],
        preferenceMap: {
            "learning.radioTest1": {
                "model.radioVal": "default",
                "controlValues.radioStrings": "enum"
            }
        },
        selectors: {
            frequencyRow: ".flc-prefsEditor-frequencyRow",
            frequencyLabel: ".flc-prefsEditor-frequency-label",
            frequencyInput: ".flc-prefsEditor-frequencyInput",
            label: ".flc-prefsEditor-contrast-label"
        },
        messageBase: {
            "radioTestKey-yes": "Yes",
            "radioTestKey-no": "No",
            "radioTestKey-maybe": "Maybe",
            "radioTestKey-sometimes": "Sometimes",
            "radioTestLabelKey": "Radio Button Label"
        },
        stringArrayIndex: {
            radioTestStrings: ["radioTestKey-yes", "radioTestKey-no", "radioTestKey-maybe", "radioTestKey-sometimes"]
        },
        controlValues: {
            radioStrings: ["yes", "no", "maybe", "sometimes"]
        },
        repeatingSelectors: ["frequencyRow"],
        protoTree: {
            label: {messagekey: "radioTestLabelKey"},
            expander: {
                type: "fluid.renderer.selection.inputs",
                rowID: "frequencyRow",
                labelID: "frequencyLabel",
                inputID: "frequencyInput",
                selectID: "frequency-radio",
                tree: {
                    optionnames: "${{that}.msgLookup.radioTestStrings}",
                    optionlist: "${{that}.options.controlValues.radioStrings}",
                    selection: "${radioVal}"
                }
            }
        }
    });

    jqUnit.test("FLUID-5200: rebase parentRelativeID", function () {
        var that = fluid.prefs.compositePanel(".fluid-5200", {
            selectors: {
                radioTest1: ".flc-tests-panel-radioTest1"
            },
            selectorsToIgnore: ["radioTest1"],
            model: {
                "learning_radioTest1": "maybe"
            },
            components: {
                radioTest1: {
                    type: "fluid.tests.panel.radioTest1",
                    container: "{that}.dom.radioTest1"
                }
            },
            resources: {
                template: {
                    resourceText: "<ul><li class=\"flc-tests-panel-radioTest1\"></li></ul>"
                },
                radioTest1: {
                    resourceText: "<div class=\"flc-prefsEditor-frequencyRow\"><input type=\"radio\" class=\"flc-prefsEditor-frequencyInput\" name=\"frequency\" id=\"frequency\"/><label for=\"frequency\" class=\"flc-prefsEditor-frequency-label\"></label></div>"
                }
            }
        });

        var expectedTree = {
            "children": [{
                "ID": "radioTest1_label",
                "componentType": "UIBound",
                "value": "Radio Button Label"
            }, {
                "ID": "radioTest1_frequency-radio",
                "componentType": "UISelect",
                "optionlist": {
                    "value": [
                        "yes",
                        "no",
                        "maybe",
                        "sometimes"
                    ]
                },
                "optionnames": {
                    "value": [
                        "Yes",
                        "No",
                        "Maybe",
                        "Sometimes"
                    ]
                },
                "selection": {
                    "value": "maybe",
                    "valuebinding": "learning_radioTest1"
                }
            }, {
                "ID": "radioTest1_frequencyRow:",
                "children": [{
                    "ID": "radioTest1_frequencyInput",
                    "choiceindex": 0,
                    "componentType": "UISelectChoice",
                    "parentRelativeID": "..::radioTest1_frequency-radio"
                }, {
                    "ID": "radioTest1_frequencyLabel",
                    "choiceindex": 0,
                    "componentType": "UISelectChoice",
                    "parentRelativeID": "..::radioTest1_frequency-radio"
                }]
            }, {
                "ID": "radioTest1_frequencyRow:",
                "children": [{
                    "ID": "radioTest1_frequencyInput",
                    "choiceindex": 1,
                    "componentType": "UISelectChoice",
                    "parentRelativeID": "..::radioTest1_frequency-radio"
                }, {
                    "ID": "radioTest1_frequencyLabel",
                    "choiceindex": 1,
                    "componentType": "UISelectChoice",
                    "parentRelativeID": "..::radioTest1_frequency-radio"
                }]
            }, {
                "ID": "radioTest1_frequencyRow:",
                "children": [{
                    "ID": "radioTest1_frequencyInput",
                    "choiceindex": 2,
                    "componentType": "UISelectChoice",
                    "parentRelativeID": "..::radioTest1_frequency-radio"
                }, {
                    "ID": "radioTest1_frequencyLabel",
                    "choiceindex": 2,
                    "componentType": "UISelectChoice",
                    "parentRelativeID": "..::radioTest1_frequency-radio"
                }]
            }, {
                "ID": "radioTest1_frequencyRow:",
                "children": [{
                    "ID": "radioTest1_frequencyInput",
                    "choiceindex": 3,
                    "componentType": "UISelectChoice",
                    "parentRelativeID": "..::radioTest1_frequency-radio"
                }, {
                    "ID": "radioTest1_frequencyLabel",
                    "choiceindex": 3,
                    "componentType": "UISelectChoice",
                    "parentRelativeID": "..::radioTest1_frequency-radio"
                }]
            }]
        };
        jqUnit.assertDeepEq("The tree should be produced correctly, with all valuebinding rebased.", expectedTree, that.produceTree());
    });

    /* end FLUID-5200 */

    /* FLUID-5203: support multiple text field sliders in one composite panel */

    fluid.defaults("fluid.tests.panel.slider1", {
        gradeNames: ["fluid.prefs.panel", "autoInit"],
        selectors: {
            textSize: ".flc-prefsEditor-min-val",
            label: ".flc-prefsEditor-min-val-label",
            smallIcon: ".flc-prefsEditor-min-val-smallIcon",
            largeIcon: ".flc-prefsEditor-min-val-largeIcon",
            multiplier: ".flc-prefsEditor-multiplier"
        },
        selectorsToIgnore: ["textSize"],
        components: {
            textSize: {
                type: "fluid.textfieldSlider",
                container: "{fluid.tests.panel.slider1}.dom.textSize",
                createOnEvent: "afterRender",
                options: {
                    model: {
                        value: "{fluid.tests.panel.slider1}.model.slider1"
                    },
                    range: "{fluid.tests.panel.slider1}.options.range",
                    sliderOptions: "{fluid.tests.panel.slider1}.options.sliderOptions"
                }
            }
        },
        range: {
            min: 1,
            max: 10
        },
        protoTree: {
            label: {messagekey: "textSizeLabel"},
            smallIcon: {messagekey: "textSizeSmallIcon"},
            largeIcon: {messagekey: "textSizeLargeIcon"},
            multiplier: {messagekey: "multiplier"}
        }
    });

    fluid.defaults("fluid.tests.panel.slider2", {
        gradeNames: ["fluid.prefs.panel", "autoInit"],
        selectors: {
            textSize: ".flc-prefsEditor-min-val",
            label: ".flc-prefsEditor-min-val-label",
            smallIcon: ".flc-prefsEditor-min-val-smallIcon",
            largeIcon: ".flc-prefsEditor-min-val-largeIcon",
            multiplier: ".flc-prefsEditor-multiplier"
        },
        selectorsToIgnore: ["textSize"],
        components: {
            textSize: {
                type: "fluid.textfieldSlider",
                container: "{fluid.tests.panel.slider2}.dom.textSize",
                createOnEvent: "afterRender",
                options: {
                    model: {
                        value: "{fluid.tests.panel.slider2}.model.slider2"
                    },
                    range: "{fluid.tests.panel.slider2}.options.range",
                    sliderOptions: "{fluid.tests.panel.slider2}.options.sliderOptions"
                }
            }
        },
        range: {
            min: 0,
            max: 20
        },
        protoTree: {
            label: {messagekey: "textSizeLabel"},
            smallIcon: {messagekey: "textSizeSmallIcon"},
            largeIcon: {messagekey: "textSizeLargeIcon"},
            multiplier: {messagekey: "multiplier"}
        }
    });

    jqUnit.test("FLUID-5203: support multiple text field sliders in one composite panel", function () {
        jqUnit.expect(4);
        var that = fluid.prefs.compositePanel(".fluid-5203", {
            selectors: {
                slider1: ".flc-tests-panel-slider1",
                slider2: ".flc-tests-panel-slider2"
            },
            selectorsToIgnore: ["slider1", "slider2"],
            components: {
                slider1: {
                    type: "fluid.tests.panel.slider1",
                    createOnEvent: "initSubPanels",
                    container: "{that}.dom.slider1"
                },
                slider2: {
                    type: "fluid.tests.panel.slider2",
                    createOnEvent: "initSubPanels",
                    container: "{that}.dom.slider2"
                }
            },
            resources: {
                template: {
                    resourceText: "<ul><li class=\"flc-tests-panel-slider1\"></li><li class=\"flc-tests-panel-slider2\"></li></ul>"
                },
                slider1: {
                    resourceText: "<div class=\"flc-prefsEditor-min-val\"><div class=\"flc-textfieldSlider-slider\"></div><input id=\"min-val\" class=\"flc-textfieldSlider-field\" type=\"text\" /><span class=\"flc-prefsEditor-multiplier\"></span></div>"
                },
                slider2: {
                    resourceText: "<div class=\"flc-prefsEditor-min-val\"><div class=\"flc-textfieldSlider-slider\"></div><input id=\"min-val\" class=\"flc-textfieldSlider-field\" type=\"text\" /><span class=\"flc-prefsEditor-multiplier\"></span></div>"
                }
            }
        });

        // the first call to refreshView does the initial rendeirng which includes
        // putting the component defined by the renderer decorator into the components block
        that.refreshView();

        // the second call to refresh view uses the new components block and should ignore
        // the renderer decorator component which isn't a panel
        that.refreshView();

        jqUnit.assert("The initial state with the min value for slider1 has been set properly", 0, $(".flc-tests-panel-slider1 .flc-textfieldSlider-slider").slider("value"));
        jqUnit.assert("The initial state with the min value for slider2 has been set properly", 1, $(".flc-tests-panel-slider2 .flc-textfieldSlider-slider").slider("value"));

        that.slider1.applier.requestChange("value", 100);
        that.slider2.applier.requestChange("value", 100);
        that.refreshView();
        jqUnit.assert("The max value for slider1 has been set properly", 10, $(".flc-tests-panel-slider1 .flc-textfieldSlider-slider").slider("value"));
        jqUnit.assert("The max value for slider2 has been set properly", 100, $(".flc-tests-panel-slider2 .flc-textfieldSlider-slider").slider("value"));
    });

    /* end FLUID-5203 */

    /* start FLUID-5210 */

    fluid.defaults("fluid.tests.fluid_5210.compositePanel", {
        gradeNames: ["fluid.prefs.compositePanel", "autoInit"],
        selectors: {
            originalSelector: ""
        },
        selectorsToIgnore: ["originalSelector"],
        resources: {
            template: {
                resourceText: "<div></div>"
            }
        }
    });

    jqUnit.test("FLUID-5210: merge selectorsToIgnore", function () {
        var that = fluid.tests.fluid_5210.compositePanel(".fluid-5210", {
            selectors: {
                newSelector: ""
            },
            selectorsToIgnore: ["newSelector"]
        });

        var expected = ["originalSelector", "newSelector"];

        jqUnit.assertDeepEq("The selectorsToIgnore should be merged", expected, that.options.selectorsToIgnore);
    });

    /* end FLUID-5210 */

    /* start FLUID-5220 */

    fluid.defaults("fluid.tests.fluid_5220.subPanel", {
        gradeNames: ["fluid.prefs.panel", "autoInit"]
    });

    jqUnit.test("FLUID-5220: onDomBind", function () {
        var that = fluid.prefs.compositePanel(".fluid-5220", {
            selectors: {
                subPanel: ".flc-tests-subPanel"
            },
            selectorsToIgnore: ["subPanel"],
            components: {
                subPanel: {
                    type: "fluid.tests.fluid_5220.subPanel",
                    createOnEvent: "initSubPanels",
                    container: "{that}.dom.subPanel"
                }
            },
            resources: {
                template: {
                    resourceText: "<div><div class=\"flc-tests-subPanel\"></div></div>"
                },
                subPanel: {
                    resourceText: "<div></div>"
                }
            }
        });

        jqUnit.expect(1);
        that.events.onCreate.addListener(function () {
            jqUnit.assertTrue("Composite panel onDomBind event is triggered at onCreate", true);
            that.events.onCreate.removeListener("onCompositePanelCreateDomBind");
        }, "onCompositePanelCreateDomBind", null, "last");

        that.subPanel.events.onDomBind.addListener(function () {
            jqUnit.assertDeepEq("Wrong! - Composite panel onCreate should not trigger onDomBind in the subpanel", false);
            that.subPanel.events.onDomBind.removeListener("onSubPanelCreateDomBind");
        }, "onSubPanelCreateDomBind", null, "last");

        jqUnit.expect(2);
        that.events.afterRender.addListener(function () {
            jqUnit.assertTrue("Composite panel afterRender event is fired", true);
            that.events.afterRender.removeListener("onCompositePanelAfterRender");
        }, "onCompositePanelAfterRender", null, "last");

        that.subPanel.events.onDomBind.addListener(function () {
            jqUnit.assertTrue("The subpanel onDomBind event is triggered when afterRender event of its composite panel gets fired", true);
            that.subPanel.events.onDomBind.removeListener("onSubPanelAfterRenderDomBind");
        }, "onSubPanelAfterRenderDomBind", null, "last");

        that.refreshView();
    });

    /* end FLUID-5220 */

    /*******************************************************************************
     * textFontPanel
     *******************************************************************************/

    fluid.defaults("fluid.tests.prefs.panel.textFont", {
        gradeNames: ["fluid.prefs.panel.textFont", "fluid.tests.panels.utils.defaultTestPanel", "autoInit"],
        messageBase: {
            "textFont-default": "default",
            "textFont-times": "Times New Roman",
            "textFont-comic": "Comic Sans",
            "textFont-arial": "Arial",
            "textFont-verdana": "Verdana",
            "textFontLabel": "text style",
            "textFontDescr": "Change the font used"
        },
        model: {
            value: 1
        },
        classnameMap: {
            "textFont": {
                "default": "",
                "times": "fl-font-times",
                "comic": "fl-font-comic-sans",
                "arial": "fl-font-arial",
                "verdana": "fl-font-verdana"
            }
        }
    });

    fluid.defaults("fluid.tests.textFontPanel", {
        gradeNames: ["fluid.test.testEnvironment", "autoInit"],
        components: {
            textFont: {
                type: "fluid.tests.prefs.panel.textFont",
                container: ".flc-textFont"
            },
            textFontTester: {
                type: "fluid.tests.textFontTester"
            }
        }
    });

    fluid.tests.textFontPanel.testDefault = function (that, expectedNumOfOptions, expectedFont) {
        var options = that.container.find("option");
        var messageBase = that.options.messageBase;
        jqUnit.assertEquals("There are " + expectedNumOfOptions + " text fonts in the control", expectedNumOfOptions, options.length);
        jqUnit.assertEquals("The first text font is " + expectedFont, expectedFont, options.filter(":selected").val());
        jqUnit.assertEquals("The label text is " + messageBase.textFontLabel, messageBase.textFontLabel, that.locate("label").text());
        jqUnit.assertEquals("The description text is " + messageBase.textFontDescr, messageBase.textFontDescr, that.locate("textFontDescr").text());

        fluid.each(options, function (option) {
            var css = that.options.classnameMap.textFont[option.value];
            if (css) {
                jqUnit.assertTrue("The option has appropriate css applied", $(option).hasClass(css));
            }
        });
    };

    fluid.tests.textFontPanel.changeSelection = function (element, newValue) {
        element.val(newValue).change();
    };

    fluid.defaults("fluid.tests.textFontTester", {
        gradeNames: ["fluid.test.testCaseHolder", "autoInit"],
        testOptions: {
            expectedNumOfOptions: 5,
            defaultValue: "default",
            newValue: "comic"
        },
        modules: [{
            name: "Test the text font settings panel",
            tests: [{
                expect: 9,
                name: "Test the rendering of the text font panel",
                sequence: [{
                    func: "{textFont}.refreshView"
                }, {
                    listener: "fluid.tests.textFontPanel.testDefault",
                    args: ["{textFont}", "{that}.options.testOptions.expectedNumOfOptions", "{that}.options.testOptions.defaultValue"],
                    event: "{textFont}.events.afterRender"
                }, {
                    func: "fluid.tests.textFontPanel.changeSelection",
                    args: ["{textFont}.dom.textFont", "{that}.options.testOptions.newValue"]
                }, {
                    listener: "fluid.tests.panels.utils.checkModel",
                    args: ["value", "{textFont}.model", "{that}.options.testOptions.newValue"],
                    spec: {path: "value", priority: "last"},
                    changeEvent: "{textFont}.applier.modelChanged"
                }]
            }]
        }]
    });

    /*******************************************************************************
     * Contrast
     *******************************************************************************/

    fluid.defaults("fluid.tests.prefs.panel.contrast", {
        gradeNames: ["fluid.prefs.panel.contrast", "fluid.tests.panels.utils.defaultTestPanel", "autoInit"],
        messageBase: {
            "contrast-default": "Default",
            "contrast-bw": "Black on white",
            "contrast-wb": "White on black",
            "contrast-by": "Black on yellow",
            "contrast-yb": "Yellow on black",
            "contrast-lgdg": "Low contrast",
            "contrastLabel": "colour and contrast",
            "contrastDescr": "Change the text and background colours"
        },
        model: {
            value: "default"
        },
        classnameMap: {
            "theme": {
                "default": "fl-prefsEditor-default-theme",
                "bw": "fl-theme-prefsEditor-bw fl-theme-bw",
                "wb": "fl-theme-prefsEditor-wb fl-theme-wb",
                "by": "fl-theme-prefsEditor-by fl-theme-by",
                "yb": "fl-theme-prefsEditor-yb fl-theme-yb",
                "lgdg": "fl-theme-prefsEditor-lgdg fl-theme-lgdg"
            }
        }
    });

    fluid.defaults("fluid.tests.contrastPanel", {
        gradeNames: ["fluid.test.testEnvironment", "autoInit"],
        components: {
            contrast: {
                type: "fluid.tests.prefs.panel.contrast",
                container: ".flc-contrast"
            },
            contrastTester: {
                type: "fluid.tests.contrastTester"
            }
        }
    });

    fluid.tests.contrastPanel.testDefault = function (that, expectedNumOfOptions, expectedContrast) {
        var inputs = that.locate("themeInput");
        var labels = that.locate("themeLabel");
        var messageBase = that.options.messageBase;

        jqUnit.assertEquals("The label text is " + messageBase.contrastLabel, messageBase.contrastLabel, that.locate("label").text());
        jqUnit.assertEquals("The description text is " + messageBase.contrastDescr, messageBase.contrastDescr, that.locate("contrastDescr").text());

        jqUnit.assertEquals("There are " + expectedNumOfOptions + " contrast selections in the control", expectedNumOfOptions, inputs.length);
        jqUnit.assertEquals("The first contrast is " + expectedContrast, expectedContrast, inputs.filter(":checked").val());

        var inputValue, label;
        fluid.each(inputs, function (input, index) {
            inputValue = input.value;
            label = labels.eq(index);
            jqUnit.assertTrue("The contrast label has appropriate css applied", label.hasClass(that.options.classnameMap.theme[inputValue]));
        });

        jqUnit.assertTrue("The default contrast label has the default label css applied", labels.eq(0).hasClass(that.options.styles.defaultThemeLabel));
    };

    fluid.tests.contrastPanel.changeChecked = function (inputs, newValue) {
        inputs.removeAttr("checked");
        var matchingInput = inputs.filter("[value='" + newValue + "']");
        matchingInput.prop("checked", "checked").change();
    };

    fluid.defaults("fluid.tests.contrastTester", {
        gradeNames: ["fluid.test.testCaseHolder", "autoInit"],
        testOptions: {
            expectedNumOfOptions: 6,
            defaultValue: "default",
            newValue: "bw"
        },
        modules: [{
            name: "Test the contrast settings panel",
            tests: [{
                expect: 12,
                name: "Test the rendering of the contrast panel",
                sequence: [{
                    func: "{contrast}.refreshView"
                }, {
                    listener: "fluid.tests.contrastPanel.testDefault",
                    args: ["{contrast}", "{that}.options.testOptions.expectedNumOfOptions", "{that}.options.testOptions.defaultValue"],
                    spec: {priority: "last"},
                    event: "{contrast}.events.afterRender"
                }, {
                    func: "fluid.tests.contrastPanel.changeChecked",
                    args: ["{contrast}.dom.themeInput", "{that}.options.testOptions.newValue"]
                }, {
                    listener: "fluid.tests.panels.utils.checkModel",
                    args: ["value", "{contrast}.model", "{that}.options.testOptions.newValue"],
                    spec: {path: "value", priority: "last"},
                    changeEvent: "{contrast}.applier.modelChanged"
                }]
            }]
        }]
    });

    /*******************************************************************************
     * Test functions shared by text field slider unit tests
     *******************************************************************************/
    fluid.tests.testDefault = function (that, messageMap) {
        var inputValue = that.container.find("input").val();
        var messageBase = that.options.messageBase;
        jqUnit.assertEquals("The default input value has been set to the min value", that.options.range.min, inputValue);

        fluid.each(messageMap, function(messageName, selectorName) {
            jqUnit.assertEquals("The label text is " + messageBase[messageName], messageBase[messageName], that.locate(selectorName).text());
      });

    };

    fluid.tests.changeInput = function (textSlider, newValue) {
        textSlider.find("input").val(newValue).change();
    };

    /*******************************************************************************
     * textSize
     *******************************************************************************/

    fluid.defaults("fluid.tests.prefs.panel.textSize", {
        gradeNames: ["fluid.prefs.panel.textSize", "fluid.tests.panels.utils.defaultTestPanel", "autoInit"],
        model: {
            textSize: 1
        },
        messageBase: {
            "textSizeLabel": "Text Size",
            "multiplier": "times",
            "textSizeDescr": "Adjust text size"
        }
    });

    fluid.defaults("fluid.tests.textSizePanel", {
        gradeNames: ["fluid.test.testEnvironment", "autoInit"],
        components: {
            textSize: {
                type: "fluid.tests.prefs.panel.textSize",
                container: ".flc-textSize"
            },
            textSizeTester: {
                type: "fluid.tests.textSizeTester"
            }
        }
    });

    fluid.defaults("fluid.tests.textSizeTester", {
        gradeNames: ["fluid.test.testCaseHolder", "autoInit"],
        testOptions: {
            newValue: 1.2
        },
        modules: [{
            name: "Test the text sizer settings panel",
            tests: [{
                expect: 4,
                name: "Test the rendering of the text size panel",
                sequence: [{
                    func: "{textSize}.refreshView"
                }, {
                    listener: "fluid.tests.testDefault",
                    event: "{textSize}.events.afterRender",
                    args: ["{textSize}", {
                        label: "textSizeLabel",
                        textSizeDescr: "textSizeDescr"
                    }]
                }, {
                    func: "fluid.tests.changeInput",
                    args: ["{textSize}.dom.textSize", "{that}.options.testOptions.newValue"]
                }, {
                    listener: "fluid.tests.panels.utils.checkModel",
                    args: ["textSize", "{textSize}.model", "{that}.options.testOptions.newValue"],
                    spec: {path: "textSize", priority: "last"},
                    changeEvent: "{textSize}.applier.modelChanged"
                }]
            }]
        }]
    });

    /*******************************************************************************
     * lineSpace
     *******************************************************************************/

    fluid.defaults("fluid.tests.prefs.panel.lineSpace", {
        gradeNames: ["fluid.prefs.panel.lineSpace", "fluid.tests.panels.utils.defaultTestPanel", "autoInit"],
        model: {
            lineSpace: 1
        },
        messageBase: {
            "lineSpaceLabel": "Line Spacing",
            "lineSpaceNarrowIcon": "icon of 3 horizontal lines with narrow spacing",
            "lineSpaceWideIcon": "icon of 3 horizontal lines with wide spacing",
            "multiplier": "times",
            "lineSpaceDescr": "Adjust the spacing between lines of text"
        }
    });

    fluid.defaults("fluid.tests.lineSpacePanel", {
        gradeNames: ["fluid.test.testEnvironment", "autoInit"],
        components: {
            lineSpace: {
                type: "fluid.tests.prefs.panel.lineSpace",
                container: ".flc-lineSpace"
            },
            lineSpaceTester: {
                type: "fluid.tests.lineSpaceTester"
            }
        }
    });

    fluid.defaults("fluid.tests.lineSpaceTester", {
        gradeNames: ["fluid.test.testCaseHolder", "autoInit"],
        testOptions: {
            newValue: 1.2
        },
        modules: [{
            name: "Test the line space settings panel",
            tests: [{
                expect: 4,
                name: "Test the rendering of the line space panel",
                sequence: [{
                    func: "{lineSpace}.refreshView"
                }, {
                    listener: "fluid.tests.testDefault",
                    event: "{lineSpace}.events.afterRender",
                    args: ["{lineSpace}", {
                        label: "lineSpaceLabel",
                        lineSpaceDescr: "lineSpaceDescr"
                    }]
                }, {
                    func: "fluid.tests.changeInput",
                    args: ["{lineSpace}.dom.textSize", "{that}.options.testOptions.newValue"]
                }, {
                    listener: "fluid.tests.panels.utils.checkModel",
                    args: ["lineSpace", "{lineSpace}.model", "{that}.options.testOptions.newValue"],
                    spec: {path: "lineSpace", priority: "last"},
                    changeEvent: "{lineSpace}.applier.modelChanged"
                }]
            }]
        }]
    });

    /*******************************************************************************
     * layoutPanel
     *******************************************************************************/

    fluid.defaults("fluid.tests.prefs.panel.layoutControls", {
        gradeNames: ["fluid.prefs.panel.layoutControls", "fluid.tests.panels.utils.defaultTestPanel", "autoInit"],
        model: {
            toc: false,
            layout: false
        },
        messageBase: {
            "tocLabel": "Table of Contents",
            "tocDescr": "Create a table of contents"
        }
    });

    fluid.defaults("fluid.tests.layoutPanel", {
        gradeNames: ["fluid.test.testEnvironment", "autoInit"],
        components: {
            layout: {
                type: "fluid.tests.prefs.panel.layoutControls",
                container: ".flc-layout"
            },
            layoutTester: {
                type: "fluid.tests.layoutTester"
            }
        }
    });

    fluid.tests.layoutPanel.checkRendering = function (that, defaultInputStatus) {
        var messageBase = that.options.messageBase;

        jqUnit.assertEquals("The label text is " + messageBase.tocLabel, messageBase.tocLabel, that.locate("label").text());
        jqUnit.assertEquals("The description text is " + messageBase.tocDescr, messageBase.tocDescr, that.locate("tocDescr").text());

        fluid.tests.panels.utils.verifyCheckboxState("The toc option is not checked by default", defaultInputStatus, that.locate("toc"));
    };

    fluid.defaults("fluid.tests.layoutTester", {
        gradeNames: ["fluid.test.testCaseHolder", "autoInit"],
        testOptions: {
            defaultInputStatus: false,
            newValue: true
        },
        modules: [{
            name: "Test the layout settings panel",
            tests: [{
                expect: 4,
                name: "Test the rendering of the layout panel",
                sequence: [{
                    func: "{layout}.refreshView"
                }, {
                    listener: "fluid.tests.layoutPanel.checkRendering",
                    event: "{layout}.events.afterRender",
                    args: ["{layout}", "{that}.options.testOptions.defaultInputStatus"]
                }, {
                    func: "fluid.tests.panels.utils.setCheckboxState",
                    args: ["{layout}.dom.toc", "{that}.options.testOptions.newValue"]
                }, {
                    listener: "fluid.tests.panels.utils.checkModel",
                    args: ["toc", "{that}.options.testOptions.newValue"],
                    spec: {path: "toc", priority: "last"},
                    changeEvent: "{layout}.applier.modelChanged"
                }]
            }]
        }]
    });

    /*******************************************************************************
     * emphasize links
     *******************************************************************************/

    fluid.defaults("fluid.tests.prefs.panel.emphasizeLinks", {
        gradeNames: ["fluid.prefs.panel.emphasizeLinks", "fluid.tests.panels.utils.defaultTestPanel", "autoInit"],
        model: {
            links: false
        }
    });

    fluid.defaults("fluid.tests.emphasizeLinksPanel", {
        gradeNames: ["fluid.test.testEnvironment", "autoInit"],
        components: {
            emphasizeLinks: {
                type: "fluid.tests.prefs.panel.emphasizeLinks",
                container: ".flc-links"
            },
            emphasizeLinksTester: {
                type: "fluid.tests.emphasizeLinksTester"
            }
        }
    });

    fluid.defaults("fluid.tests.emphasizeLinksTester", {
        gradeNames: ["fluid.test.testCaseHolder", "autoInit"],
        testOptions: {
            defaultInputStatus: false,
            newValue: true
        },
        modules: [{
            name: "Test the emphasizeLinks settings panel",
            tests: [{
                expect: 2,
                name: "Test the rendering of the emphasizeLinks panel",
                sequence: [{
                    func: "{emphasizeLinks}.refreshView"
                }, {
                    listener: "fluid.tests.panels.utils.verifyCheckboxState",
                    args: ["The inputs should be unchecked by default", "{that}.options.testOptions.defaultInputStatus", "{emphasizeLinks}.dom.links"],
                    event: "{emphasizeLinks}.events.afterRender"
                }, {
                    func: "fluid.tests.panels.utils.setCheckboxState",
                    args: ["{emphasizeLinks}.dom.links", "{that}.options.testOptions.newValue"]
                }, {
                    listener: "fluid.tests.panels.utils.checkModel",
                    args: ["links", "{emphasizeLinks}.model", "{that}.options.testOptions.newValue"],
                    spec: {path: "links", priority: "last"},
                    changeEvent: "{emphasizeLinks}.applier.modelChanged"
                }]
            }]
        }]
    });

    /*******************************************************************************
     * inputs larger
     *******************************************************************************/

    fluid.defaults("fluid.tests.prefs.panel.inputsLarger", {
        gradeNames: ["fluid.prefs.panel.inputsLarger", "fluid.tests.panels.utils.defaultTestPanel", "autoInit"],
        model: {
            inputsLarger: false
        }
    });

    fluid.defaults("fluid.tests.inputsLargerPanel", {
        gradeNames: ["fluid.test.testEnvironment", "autoInit"],
        components: {
            inputsLarger: {
                type: "fluid.tests.prefs.panel.inputsLarger",
                container: ".flc-links"
            },
            inputsLargerTester: {
                type: "fluid.tests.inputsLargerTester"
            }
        }
    });

    fluid.defaults("fluid.tests.inputsLargerTester", {
        gradeNames: ["fluid.test.testCaseHolder", "autoInit"],
        testOptions: {
            defaultInputStatus: false,
            newValue: true
        },
        modules: [{
            name: "Test the inputsLarger settings panel",
            tests: [{
                expect: 2,
                name: "Test the rendering of the inputsLarger panel",
                sequence: [{
                    func: "{inputsLarger}.refreshView"
                }, {
                    listener: "fluid.tests.panels.utils.verifyCheckboxState",
                    args: ["The inputs should be unchecked by default", "{that}.options.testOptions.defaultInputStatus", "{inputsLarger}.dom.inputsLarger"],
                    event: "{inputsLarger}.events.afterRender"
                }, {
                    func: "fluid.tests.panels.utils.setCheckboxState",
                    args: ["{inputsLarger}.dom.inputsLarger", "{that}.options.testOptions.newValue"]
                }, {
                    listener: "fluid.tests.panels.utils.checkModel",
                    args: ["inputsLarger", "{inputsLarger}.model", "{that}.options.testOptions.newValue"],
                    spec: {path: "inputsLarger", priority: "last"},
                    changeEvent: "{inputsLarger}.applier.modelChanged"
                }]
            }]
        }]
    });

    /*******************************************************************************
     * linksControlsPanel
     *******************************************************************************/

    fluid.defaults("fluid.tests.prefs.panel.linksControls", {
        gradeNames: ["fluid.prefs.panel.linksControls", "fluid.tests.panels.utils.defaultTestPanel", "autoInit"],
        model: {
            fluid_prefs_emphasizeLinks: false,
            fluid_prefs_inputsLarger: false
        },
        messageBase: {
            "linksControlsLabel": "emphasis",
            "inputsChoiceLabel": "Enlarge buttons, menus, text-fields, and other inputs",
            "linksChoiceLabel": "Underline and bold links"
        },
        selectors: {
            emphasizeLinks: ".flc-prefsEditor-emphasizeLinks",
            inputsLarger: ".flc-prefsEditor-inputsLarger"
        },
        selectorsToIgnore: ["emphasizeLinks", "inputsLarger"],
        components: {
            emphasizeLinks: {
                type: "fluid.prefs.panel.emphasizeLinks",
                container: "{that}.dom.emphasizeLinks",
                createOnEvent: "initSubPanels"
            },
            inputsLarger: {
                type: "fluid.prefs.panel.inputsLarger",
                container: "{that}.dom.inputsLarger",
                createOnEvent: "initSubPanels"
            }
        },
        resources: {
            template: {
                resourceText: "<h2><span class=\"fl-icon-links\"></span><span class=\"flc-prefsEditor-linksControls-label heading-text\"></span></h2><p class=\"flc-prefsEditor-emphasis-descr\"></p><ul class=\"fl-inputs fl-links-buttons-options\"><li class=\"flc-prefsEditor-emphasizeLinks\"></li><li class=\"flc-prefsEditor-inputsLarger\"></li></ul>"
            },
            emphasizeLinks: {
                resourceText: "<input type=\"checkbox\" id=\"links-choice\" class=\"flc-prefsEditor-links fl-force-left\" /><label class=\"flc-prefsEditor-links-choice-label\" for=\"links-choice\"></label>"
            },
            inputsLarger: {
                resourceText:  "<input type=\"checkbox\" id=\"inputs-choice\" class=\"flc-prefsEditor-inputs-larger fl-force-left\" /><label class=\"flc-prefsEditor-links-inputs-choice-label\" for=\"inputs-choice\"></label>"
            }
        }
    });

    fluid.defaults("fluid.tests.linksControlsPanel", {
        gradeNames: ["fluid.test.testEnvironment", "autoInit"],
        components: {
            linksControls: {
                type: "fluid.tests.prefs.panel.linksControls",
                container: ".flc-links"
            },
            linksTester: {
                type: "fluid.tests.linksTester"
            }
        }
    });

    fluid.tests.linksControlsPanel.testDefault = function (linksControlsPanel, expectedValue, expectedLabel) {
        var messageBase = linksControlsPanel.options.messageBase;

        jqUnit.assertEquals("The label text is " + messageBase.linksControlsLabel, messageBase.linksControlsLabel, linksControlsPanel.locate("label").text());

        var linksLabel = linksControlsPanel.locate("label").text();
        jqUnit.assertEquals("The links control label is rendered correctly", expectedLabel, linksLabel);
        var linksValue = linksControlsPanel.emphasizeLinks.locate("links").attr("checked");
        jqUnit.assertEquals("The emphasizeLinks option is not checked by default", expectedValue, linksValue);
        var inputsLargerValue = linksControlsPanel.inputsLarger.locate("inputsLarger").attr("checked");
        jqUnit.assertEquals("The inputsLarger option is not checked by default", expectedValue, inputsLargerValue);
    };


    fluid.defaults("fluid.tests.linksTester", {
        gradeNames: ["fluid.test.testCaseHolder", "autoInit"],
        testOptions: {
            defaultInputStatus: undefined,
            newValue: true
        },
        modules: [{
            name: "Test the linksControls settings panel",
            tests: [{
                expect: 6,
                name: "Test the rendering of the linksControls panel",
                sequence: [{
                    func: "{linksControls}.refreshView"
                }, {
                    listener: "fluid.tests.linksControlsPanel.testDefault",
                    args: ["{linksControls}", "{that}.options.testOptions.defaultInputStatus", "{linksControls}.options.messageBase.linksControlsLabel"],
                    event: "{linksControls}.events.afterRender"
                }, {
                    func: "fluid.tests.panels.utils.setCheckboxState",
                    args: ["{linksControls}.emphasizeLinks.dom.links", "{that}.options.testOptions.newValue"]
                }, {
                    listener: "fluid.tests.panels.utils.checkModel",
                    args: ["fluid_prefs_emphasizeLinks", "{linksControls}.model", "{that}.options.testOptions.newValue"],
                    spec: {path: "fluid_prefs_emphasizeLinks", priority: "last"},
                    changeEvent: "{linksControls}.applier.modelChanged"
                }, {
                    func: "fluid.tests.panels.utils.setCheckboxState",
                    args: ["{linksControls}.inputsLarger.dom.inputsLarger", "{that}.options.testOptions.newValue"]
                }, {
                    listener: "fluid.tests.panels.utils.checkModel",
                    args: ["fluid_prefs_inputsLarger", "{linksControls}.model", "{that}.options.testOptions.newValue"],
                    spec: {path: "fluid_prefs_inputsLarger", priority: "last"},
                    changeEvent: "{linksControls}.applier.modelChanged"
                }]
            }]
        }]
    });

    $(document).ready(function () {
        fluid.test.runTests([
            "fluid.tests.textFontPanel",
            "fluid.tests.contrastPanel",
            "fluid.tests.textSizePanel",
            "fluid.tests.lineSpacePanel",
            "fluid.tests.layoutPanel",
            "fluid.tests.emphasizeLinksPanel",
            "fluid.tests.inputsLargerPanel",
            "fluid.tests.linksControlsPanel"
        ]);
    });

})(jQuery);