add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / test / specs / form / CheckboxGroup.js

describe("Ext.form.CheckboxGroup", function() {\r
    var component;\r
\r
    function makeComponent(config) {\r
        config = config || {};\r
        component = new Ext.form.CheckboxGroup(config);\r
    }\r
\r
    afterEach(function() {\r
        if (component) {\r
            component.destroy();\r
        }\r
        component = null;\r
    });\r
\r
\r
    describe("initial value", function() {\r
        it("should set its originalValue to the aggregated value of its sub-checkboxes", function() {\r
            makeComponent({\r
                items: [\r
                    {name: 'one', checked: true},\r
                    {name: 'two', checked: true, inputValue: 'two-1'},\r
                    {name: 'two', checked: false, inputValue: 'two-2'},\r
                    {name: 'two', checked: true, inputValue: 'two-3'}\r
                ]\r
            });\r
            expect(component.originalValue).toEqual({one:'on', two: ['two-1', 'two-3']});\r
        });\r
\r
        it("should set the values of its sub-checkboxes if the value config is specified", function() {\r
            makeComponent({\r
                items: [\r
                    {name: 'one', checked: true},\r
                    {name: 'two', checked: true, inputValue: 'two-1'},\r
                    {name: 'two', checked: false, inputValue: 'two-2'},\r
                    {name: 'two', checked: true, inputValue: 'two-3'}\r
                ],\r
                value: {two: ['two-1', 'two-2']}\r
            });\r
            expect(component.originalValue).toEqual({two: ['two-1', 'two-2']});\r
            expect(component.items.getAt(0).getValue()).toBe(false);\r
            expect(component.items.getAt(1).getValue()).toBe(true);\r
            expect(component.items.getAt(2).getValue()).toBe(true);\r
            expect(component.items.getAt(3).getValue()).toBe(false);\r
        });\r
    });\r
\r
    describe("sizing", function() {\r
        it("should respect a configured height", function() {\r
            makeComponent({\r
                renderTo: Ext.getBody(),\r
                height: 100,\r
                width: 300,\r
                vertical: true,\r
                columns: 2,\r
                scrollable: 'y',\r
                items: (function() {\r
                    var checkboxes = [],\r
                        i;\r
\r
                    for (i = 0; i < 50; ++i) {\r
                        checkboxes.push({\r
                            xtype: 'checkbox'\r
                        });\r
                    }   \r
                    return checkboxes;\r
                })()\r
            });\r
            expect(component.getHeight()).toBe(100);\r
        });\r
    })\r
\r
    it("should fire the change event when a sub-checkbox is changed", function() {\r
        makeComponent({\r
            items: [{name: 'foo', checked: true}]\r
        });\r
        var spy = jasmine.createSpy();\r
        component.on('change', spy);\r
\r
        component.items.getAt(0).setValue(false);\r
        expect(spy.calls[0].args).toEqual([component, {}, {foo:'on'}]);\r
\r
        component.items.getAt(0).setValue(true);\r
        expect(spy.calls[1].args).toEqual([component, {foo:'on'}, {}]);\r
    });\r
\r
    describe("getValue", function() {\r
        it("should return an object with keys matching the names of checked items", function() {\r
            makeComponent({\r
                items: [{name: 'one', checked: true}, {name: 'two'}]\r
            });\r
            var val = component.getValue();\r
            expect(val.one).toBeDefined();\r
            expect(val.two).not.toBeDefined();\r
        });\r
        it("should give the inputValue of a single checked item with a given name", function() {\r
            makeComponent({\r
                items: [{name: 'one', checked: true, inputValue: 'foo'}, {name: 'two'}]\r
            });\r
            expect(component.getValue().one).toEqual('foo');\r
        });\r
        it("should give an array of inputValues of multiple checked items with the same name", function() {\r
            makeComponent({\r
                items: [{name: 'one', checked: true, inputValue: '1'}, {name: 'one', checked: true, inputValue: '2'}, {name: 'one'}]\r
            });\r
            expect(component.getValue().one).toEqual(['1', '2']);\r
        });\r
    });\r
\r
    describe("getSubmitData", function() {\r
        it("should return null", function() {\r
            makeComponent({\r
                value: {foo: true},\r
                items: [{name: 'foo', inputValue: 'bar'}]\r
            });\r
            expect(component.getSubmitData()).toBeNull();\r
        });\r
    });\r
\r
    describe("getModelData", function() {\r
        it("should return null", function() {\r
            makeComponent({\r
                value: {foo: true},\r
                items: [{name: 'foo', inputValue: 'bar'}]\r
            });\r
            expect(component.getModelData()).toBeNull();\r
        });\r
    });\r
\r
    describe("reset", function() {\r
        it("should reset each checkbox to its initial checked state", function() {\r
            makeComponent({\r
                items: [{name: 'one', checked: true}, {name: 'two'}, {name: 'three', checked: true}]\r
            });\r
            component.setValue({one: false, two: true});\r
            component.reset();\r
            expect(component.items.getAt(0).getValue()).toBe(true);\r
            expect(component.items.getAt(1).getValue()).toBe(false);\r
            expect(component.items.getAt(2).getValue()).toBe(true);\r
        });\r
    });\r
\r
    describe("allowBlank = false", function() {\r
        it("should return a validation error when no sub-checkboxes are checked", function() {\r
            makeComponent({\r
                allowBlank: false,\r
                items: [{name: 'one'}]\r
            });\r
            expect(component.isValid()).toBe(false);\r
        });\r
\r
        it("should not return an error when a sub-checkbox is checked", function() {\r
            makeComponent({\r
                allowBlank: false,\r
                items: [{name: 'one', checked: true}]\r
            });\r
            expect(component.isValid()).toBe(true);\r
        });\r
        \r
        it("should fire the validitychange event with true when checking a box previously undefined", function(){\r
            makeComponent({\r
                allowBlank: false,\r
                items: [{name: 'one'}]\r
            });\r
            var isValid;\r
            component.on('validitychange', function(field, validState){\r
                isValid = validState;\r
            });\r
            component.setValue({\r
                one: true\r
            });\r
            expect(isValid).toBe(true);\r
        });\r
        \r
        it("should fire the validitychange event with true when unchecking a box", function(){\r
            makeComponent({\r
                allowBlank: false,\r
                items: [{name: 'one', checked: true}]\r
            });\r
            var isValid;\r
            component.on('validitychange', function(field, validState){\r
                isValid = validState;\r
            });\r
            component.setValue({\r
                one: false\r
            });\r
            expect(isValid).toBe(false);\r
        });\r
    });\r
\r
    describe("setValue", function() {\r
        describe("with a view model", function() {\r
            it("should be able to set the value with inline data", function() {\r
                var vm = new Ext.app.ViewModel({\r
                    data: {\r
                        theValue: {\r
                            foo: true,\r
                            baz: true\r
                        }\r
                    }\r
                });\r
\r
                makeComponent({\r
                    renderTo: Ext.getBody(),\r
                    items: [{\r
                        name: 'foo'\r
                    }, {\r
                        name: 'bar'\r
                    }, {\r
                        name: 'baz'\r
                    }],\r
                    viewModel: vm,\r
                    bind: {\r
                        value: '{theValue}'\r
                    }\r
                });\r
                vm.notify();\r
                expect(component.getValue()).toEqual({\r
                    foo: 'on',\r
                    baz: 'on'\r
                });\r
\r
            });\r
\r
            it("should be able to set the value with a defined viewmodel", function() {\r
                Ext.define('spec.Bar', {\r
                    extend: 'Ext.app.ViewModel',\r
                    alias: 'viewmodel.bar',\r
                    data: {\r
                        theValue: {\r
                            foo: true,\r
                            baz: true\r
                        }\r
                    }\r
                });\r
\r
                makeComponent({\r
                    renderTo: Ext.getBody(),\r
                    items: [{\r
                        name: 'foo'\r
                    }, {\r
                        name: 'bar'\r
                    }, {\r
                        name: 'baz'\r
                    }],\r
                    viewModel: {\r
                        type: 'bar'\r
                    },\r
                    bind: {\r
                        value: '{theValue}'\r
                    }\r
                });\r
\r
                component.getViewModel().notify();\r
\r
                expect(component.getValue()).toEqual({\r
                    foo: 'on',\r
                    baz: 'on'\r
                });\r
                Ext.undefine('spec.Bar');\r
                Ext.Factory.viewModel.instance.clearCache();\r
            });\r
        });\r
    });\r
    \r
    describe("ARIA", function() {\r
        function expectAria(attr, value) {\r
            jasmine.expectAriaAttr(component, attr, value);\r
        }\r
        \r
        beforeEach(function() {\r
            makeComponent({\r
                renderTo: Ext.getBody(),\r
                items: [{\r
                    name: 'foo'\r
                }, {\r
                    name: 'bar'\r
                }, {\r
                    name: 'baz'\r
                }]\r
            });\r
        });\r
        \r
        describe("ariaEl", function() {\r
            it("should have containerEl as ariaEl", function() {\r
                expect(component.ariaEl).toBe(component.containerEl);\r
            });\r
        });\r
        \r
        describe("attributes", function() {\r
            it("should have group role", function() {\r
                expectAria('role', 'group');\r
            });\r
            \r
            it("should have aria-owns", function() {\r
                var foo = component.down('[name=foo]').inputEl,\r
                    bar = component.down('[name=bar]').inputEl,\r
                    baz = component.down('[name=baz]').inputEl;\r
                \r
                expectAria('aria-owns', foo.id + ' ' + bar.id + ' ' + baz.id);\r
            });\r
        });\r
    });\r
});