add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / test / specs / form / field / Checkbox.js

describe("Ext.form.field.Checkbox", function() {\r
    var component, makeComponent;\r
\r
    function expectAria(attr, value) {\r
        jasmine.expectAriaAttr(component.inputEl, attr, value);\r
    }\r
    \r
    beforeEach(function() {\r
        makeComponent = function(config) {\r
            config = config || {};\r
            Ext.applyIf(config, {\r
                name: "test",\r
                renderTo: Ext.getBody()\r
            });\r
            component = new Ext.form.field.Checkbox(config);\r
        };\r
    });\r
\r
    afterEach(function() {\r
        if (component) {\r
            component.destroy();\r
        }\r
        component = makeComponent = null;\r
\r
    });\r
\r
    it("should be registered with the 'checkboxfield' xtype", function() {\r
        component = Ext.create("Ext.form.field.Checkbox", {name: 'test'});\r
        expect(component instanceof Ext.form.field.Checkbox).toBe(true);\r
        expect(Ext.getClass(component).xtype).toBe("checkboxfield");\r
    });\r
    \r
    describe("configuring", function() {\r
        it("should accept a value config", function() {\r
            makeComponent({\r
                value: true\r
            });    \r
            expect(component.checked).toBe(true);\r
        });  \r
    });\r
\r
    describe("rendering", function() {\r
        // NOTE this doesn't test the main label, error icon, etc. just the parts specific to Checkbox.\r
\r
        describe("bodyEl", function() {\r
            beforeEach(function() {\r
                makeComponent({value: 'foo'});\r
            });\r
\r
            it("should exist", function() {\r
                expect(component.bodyEl).toBeDefined();\r
            });\r
\r
            it("should have the class 'x-form-item-body'", function() {\r
                expect(component.bodyEl.hasCls('x-form-item-body')).toBe(true);\r
            });\r
\r
            it("should have the id '[id]-bodyEl'", function() {\r
                expect(component.bodyEl.dom.id).toEqual(component.id + '-bodyEl');\r
            });\r
        });\r
\r
        describe("inputEl (checkbox element)", function() {\r
            beforeEach(function() {\r
                makeComponent({value: 'foo'});\r
            });\r
\r
            it("should exist", function() {\r
                expect(component.inputEl).toBeDefined();\r
            });\r
\r
            it("should be a child of the div wrapper", function() {\r
                expect(component.inputEl.dom.parentNode.tagName.toLowerCase()).toBe('div');\r
            });\r
\r
            it("should be an ancestor of the bodyEl", function() {\r
                expect(component.inputEl.dom.parentNode.parentNode).toBe(component.bodyEl.dom);\r
            });\r
\r
            it("should be an input element", function() {\r
                expect(component.inputEl.dom.tagName.toLowerCase()).toEqual('input');\r
            });\r
\r
            it("should have type='checkbox'", function() {\r
                expect(component.inputEl.dom.tagName.toLowerCase()).toEqual('input');\r
            });\r
\r
            it("should have the component's inputId as its id", function() {\r
                expect(component.inputEl.dom.id).toEqual(component.inputId);\r
            });\r
\r
            it("should have the 'fieldCls' config as a class", function() {\r
                expect(component.displayEl.hasCls(component.fieldCls)).toBe(true);\r
            });\r
            \r
            describe("ARIA attributes", function() {\r
                it("should have checkbox role", function() {\r
                    expectAria('role', 'checkbox');\r
                });\r
                \r
                it("should have aria-hidden", function() {\r
                    expectAria('aria-hidden', 'false');\r
                });\r
                \r
                it("should have aria-disabled", function() {\r
                    expectAria('aria-disabled', 'false');\r
                });\r
                \r
                it("should have aria-invalid", function() {\r
                    expectAria('aria-invalid', 'false');\r
                });\r
                \r
                it("should have aria-checked", function() {\r
                    expectAria('aria-checked', 'false');\r
                });\r
                \r
                describe("aria-readonly", function() {\r
                    it("should false by default", function() {\r
                        expectAria('aria-readonly', 'false');\r
                    });\r
                    \r
                    it("should be true when readOnly", function() {\r
                        var cb2 = new Ext.form.field.Checkbox({\r
                            renderTo: Ext.getBody(),\r
                            name: 'cb2',\r
                            readOnly: true\r
                        });\r
                        \r
                        jasmine.expectAriaAttr(cb2.inputEl, 'aria-readonly', 'true');\r
                        \r
                        Ext.destroy(cb2);\r
                    });\r
                });\r
            });\r
        });\r
\r
\r
        describe("box label", function() {\r
            it("should not be created by default", function() {\r
                makeComponent({});\r
                expect(component.bodyEl.child('label')).toBeNull();\r
            });\r
\r
            it("should be created if the boxLabel config is defined", function() {\r
                makeComponent({boxLabel: 'the box label'});\r
                expect(component.bodyEl.down('label')).not.toBeNull();\r
            });\r
\r
            it("should be stored as a 'boxLabelEl' reference", function() {\r
                makeComponent({boxLabel: 'the box label'});\r
                expect(component.bodyEl.down('label').dom).toBe(component.boxLabelEl.dom);\r
            });\r
\r
            it("should have the class 'x-form-cb-label' by default", function() {\r
                makeComponent({boxLabel: 'the box label'});\r
                expect(component.boxLabelEl.hasCls('x-form-cb-label')).toBe(true);\r
            });\r
\r
            it("should be given the configured boxLabelCls", function() {\r
                makeComponent({boxLabel: 'the box label', boxLabelCls: 'my-custom-boxLabelCls'});\r
                expect(component.boxLabelEl.hasCls('my-custom-boxLabelCls')).toBe(true);\r
            });\r
\r
            it("should have a 'for' attribute set to the inputId", function() {\r
                makeComponent({boxLabel: 'the box label'});\r
                expect(component.boxLabelEl.getAttribute('for')).toEqual(component.inputId);\r
            });\r
\r
            it("should contain the boxLabel as its inner text node", function() {\r
                makeComponent({boxLabel: 'the box label'});\r
                expect(component.boxLabelEl.dom).hasHTML('the box label');\r
            });\r
            \r
            it("should be set to aria-labelledby", function() {\r
                makeComponent({ boxLabel: 'foo' });\r
                expectAria('aria-labelledby', component.boxLabelEl.id);\r
            });\r
\r
            describe('boxLabelAlign', function() {\r
                it("should render the label after the checkbox by default", function() {\r
                    makeComponent({boxLabel: 'the box label'});\r
                    expect(component.boxLabelEl.prev().prev().dom).toBe(component.inputEl.dom);\r
                });\r
                it("should render the label after the checkbox when boxLabelAlign='after'", function() {\r
                    makeComponent({boxLabel: 'the box label', boxLabelAlign: 'after'});\r
                    expect(component.boxLabelEl.prev().prev().dom).toBe(component.inputEl.dom);\r
                });\r
                it("should give the 'after' label a class of {boxLabelCls}-after", function() {\r
                    makeComponent({boxLabel: 'the box label', boxLabelAlign: 'after'});\r
                    expect(component.boxLabelEl.hasCls(component.boxLabelCls + '-after')).toBe(true);\r
                });\r
                it("should render the label before the checkbox when boxLabelAlign='before'", function() {\r
                    makeComponent({boxLabel: 'the box label', boxLabelAlign: 'before'});\r
                    expect(component.boxLabelEl.next().dom).toBe(component.inputEl.dom);\r
                });\r
                it("should give the 'before' label a class of {boxLabelCls}-before", function() {\r
                    makeComponent({boxLabel: 'the box label', boxLabelAlign: 'before'});\r
                    expect(component.boxLabelEl.hasCls(component.boxLabelCls + '-before')).toBe(true);\r
                });\r
            });\r
            \r
            describe("noBoxLabelCls", function() {\r
                it("should add the class when there is no boxLabel", function() {\r
                    makeComponent();\r
                    expect(component.el.down('.' + component.noBoxLabelCls, true)).not.toBeNull();\r
                });\r
                \r
                it("should not add the class when there is a boxLabel", function() {\r
                    makeComponent({\r
                        boxLabel: 'Foo'\r
                    });\r
                    expect(component.el.down('.' + component.noBoxLabelCls, true)).toBeNull();\r
                });\r
            });\r
        });\r
    });\r
\r
    describe("setting value", function() {\r
\r
        it("should accept the checked attribute", function(){\r
            makeComponent({\r
                checked: true\r
            });\r
            expect(component.getValue()).toBeTruthy();\r
            component.destroy();\r
\r
            makeComponent();\r
            expect(component.getValue()).toBeFalsy();\r
\r
        });\r
\r
        it("should allow the value to be set while not rendered", function(){\r
            makeComponent({\r
                renderTo: null\r
            });\r
            component.setValue(true);\r
            component.render(Ext.getBody());\r
            expect(component.getValue()).toBeTruthy();\r
        });\r
\r
        it("should support different values for setValue", function(){\r
            makeComponent();\r
            component.setValue('true');\r
            expect(component.getValue()).toBeTruthy();\r
            component.destroy();\r
\r
            makeComponent();\r
            component.setValue('1');\r
            expect(component.getValue()).toBeTruthy();\r
            component.destroy();\r
\r
            makeComponent();\r
            component.setValue('on');\r
            expect(component.getValue()).toBeTruthy();\r
            component.destroy();\r
\r
            makeComponent({\r
                inputValue: 'foo'\r
            });\r
            component.setValue('foo');\r
            expect(component.getValue()).toBeTruthy();\r
            component.setValue('bar');\r
            expect(component.getValue()).toBeFalsy();\r
        });\r
\r
        it("should fire the handler, with the correct scope", function(){\r
            var o1 = {\r
                fn: function(){}\r
            }, o2 = {},\r
            spy = spyOn(o1, 'fn');\r
\r
\r
            makeComponent({\r
                handler: o1.fn\r
            });\r
            component.setValue(true);\r
            expect(o1.fn).toHaveBeenCalledWith(component, true);\r
            expect(spy.calls[0].object).toBe(component);\r
            component.destroy();\r
\r
            makeComponent({\r
                handler: o1.fn,\r
                scope: o1\r
            });\r
            component.setValue(true);\r
            expect(o1.fn).toHaveBeenCalledWith(component, true);\r
            expect(spy.calls[1].object).toBe(o1);\r
            component.destroy();\r
\r
            makeComponent({\r
                handler: o1.fn,\r
                scope: o2\r
            });\r
            component.setValue(true);\r
            expect(o1.fn).toHaveBeenCalledWith(component, true);\r
            expect(spy.calls[2].object).toBe(o2);\r
        });\r
\r
        it("should not fire the handler if the value doesn't change", function() {\r
            makeComponent({\r
                handler: function() {}\r
            });\r
            spyOn(component, 'handler');\r
            component.setValue(false);\r
            expect(component.handler).not.toHaveBeenCalled();\r
        });\r
\r
        it("should allow the handler to route to a view controller", function() {\r
            var ctrl = new Ext.app.ViewController();\r
            ctrl.someMethod = function() {};\r
            spyOn(ctrl, 'someMethod');\r
\r
            var ct = new Ext.container.Container({\r
                controller: ctrl,\r
                renderTo: Ext.getBody(),\r
                items: {\r
                    xtype: 'checkbox',\r
                    handler: 'someMethod'\r
                }\r
            });\r
\r
            ct.items.first().setValue(true);\r
            expect(ctrl.someMethod).toHaveBeenCalled();\r
            ct.destroy();\r
        });\r
        \r
        it("should update aria-checked", function() {\r
            makeComponent();\r
            component.setValue(true);\r
            \r
            expectAria('aria-checked', 'true');\r
        });\r
    });\r
\r
    describe('readOnly', function() {\r
        it("should set the checkbox to disabled=true", function() {\r
            makeComponent({\r
                readOnly: true,\r
                renderTo: Ext.getBody()\r
            });\r
            expect(component.inputEl.dom.disabled).toBe(true);\r
        });\r
\r
        describe('setReadOnly method', function() {\r
            it("should set disabled=true when the arg is true", function() {\r
                makeComponent({\r
                    readOnly: false,\r
                    renderTo: Ext.getBody()\r
                });\r
                component.setReadOnly(true);\r
                expect(component.inputEl.dom.disabled).toBe(true);\r
            });\r
            it("should set disabled=false when the arg is false", function() {\r
                makeComponent({\r
                    readOnly: true,\r
                    renderTo: Ext.getBody()\r
                });\r
                component.setReadOnly(false);\r
                expect(component.inputEl.dom.disabled).toBe(false);\r
            });\r
            it("should set disabled=true when the arg is false but the component is disabled", function() {\r
                makeComponent({\r
                    readOnly: true,\r
                    disabled: true,\r
                    renderTo: Ext.getBody()\r
                });\r
                component.setReadOnly(false);\r
                expect(component.inputEl.dom.disabled).toBe(true);\r
            });\r
        });\r
    });\r
\r
    describe('submit value', function() {\r
        it("should submit the inputValue when checked", function() {\r
            makeComponent({\r
                name: 'cb-name',\r
                inputValue: 'the-input-value',\r
                checked: true\r
            });\r
            expect(component.getSubmitData()).toEqual({'cb-name': 'the-input-value'});\r
        });\r
\r
        it("should submit nothing when unchecked", function() {\r
            makeComponent({\r
                name: 'cb-name',\r
                inputValue: 'the-input-value',\r
                checked: false\r
            });\r
            expect(component.getSubmitData()).toBeNull();\r
        });\r
\r
        it("should submit the uncheckedValue when unchecked, if defined", function() {\r
            makeComponent({\r
                name: 'cb-name',\r
                inputValue: 'the-input-value',\r
                uncheckedValue: 'the-unchecked-value',\r
                checked: false\r
            });\r
            expect(component.getSubmitData()).toEqual({'cb-name': 'the-unchecked-value'});\r
        });\r
    });\r
\r
    describe('getModelData', function() {\r
        it("should return true when checked", function() {\r
            makeComponent({\r
                name: 'cb-name',\r
                inputValue: 'the-input-value',\r
                checked: true\r
            });\r
            expect(component.getModelData()).toEqual({'cb-name': true});\r
        });\r
\r
        it("should return false when unchecked", function() {\r
            makeComponent({\r
                name: 'cb-name',\r
                inputValue: 'the-input-value',\r
                uncheckedValue: 'the-unchecked-value',\r
                checked: false\r
            });\r
            expect(component.getModelData()).toEqual({'cb-name': false});\r
        });\r
    });\r
    \r
    describe("setRawValue", function() {\r
        it("should be able to fire the change event when checking after calling setRawValue", function() {\r
            var val;\r
            makeComponent();\r
            component.setRawValue(true);\r
            component.on('change', function(arg1, arg2) {\r
                val = arg2;\r
            });  \r
            jasmine.fireMouseEvent(component.inputEl.dom, 'click');\r
            expect(val).toBe(false);\r
        });  \r
        \r
        it("should be dirty after calling setRawValue", function() {\r
            makeComponent();\r
            component.setRawValue(true);\r
            expect(component.isDirty()).toBe(true);\r
        });\r
    });\r
\r
    describe("setBoxLabel", function() {\r
\r
        var boxOnlyWidth = 0,\r
            withLabelWidth = 0,\r
            label = '<div style="width: 100px;">a</div>';\r
\r
        beforeEach(function() {\r
            var temp;\r
\r
            if (boxOnlyWidth === 0) {\r
                temp = new Ext.form.field.Checkbox({\r
                    renderTo: Ext.getBody()\r
                });\r
                boxOnlyWidth = temp.getWidth();\r
                temp.destroy();\r
\r
                temp = new Ext.form.field.Checkbox({\r
                    renderTo: Ext.getBody(),\r
                    boxLabel: label\r
                });\r
                withLabelWidth = temp.getWidth();\r
                temp.destroy();\r
            }\r
        });\r
\r
        describe("before render", function() {\r
            describe("with an existing label", function() {\r
                it("should clear the label when passing an empty string", function() {\r
                    makeComponent({\r
                        boxLabel: 'Foo',\r
                        renderTo: null\r
                    });\r
                    component.setBoxLabel('');\r
                    component.render(Ext.getBody());\r
                    expect(component.getWidth()).toBe(boxOnlyWidth);\r
                });\r
\r
                it("should change the label when passing an empty string", function() {\r
                    makeComponent({\r
                        boxLabel: 'Foo',\r
                        renderTo: null\r
                    });\r
                    component.setBoxLabel('');\r
                    component.render(Ext.getBody());\r
                    expect(component.getWidth()).toBe(boxOnlyWidth);\r
                });\r
            });\r
\r
            describe("with no label configured", function() {\r
                it("should show the label", function() {\r
                    makeComponent({\r
                        renderTo: null\r
                    });\r
                    component.setBoxLabel(label);\r
                    component.render(Ext.getBody());\r
                    expect(component.getWidth()).toBe(withLabelWidth);\r
                });\r
            });\r
        });\r
\r
        describe("after render", function() {\r
            describe("with an existing label", function() {\r
                it("should clear the label when passing an empty string", function() {\r
                    makeComponent({\r
                        boxLabel: 'Foo',\r
                        liquidLayout: false // Use false so layouts run\r
                    });\r
                    var count = component.componentLayoutCounter;\r
                    component.setBoxLabel('');\r
                    expect(component.getWidth()).toBe(boxOnlyWidth);\r
                    expect(component.componentLayoutCounter).toBe(count + 1);\r
                });\r
\r
                it("should change the label when passing an empty string", function() {\r
                    makeComponent({\r
                        boxLabel: 'Foo',\r
                        liquidLayout: false // Use false so layouts run\r
                    });\r
                    var count = component.componentLayoutCounter;\r
                    component.setBoxLabel(label);\r
                    expect(component.getWidth()).toBe(withLabelWidth);\r
                    expect(component.componentLayoutCounter).toBe(count + 1);\r
                });\r
            });\r
\r
            describe("with no label configured", function() {\r
                it("should show the label", function() {\r
                    makeComponent({\r
                        liquidLayout: false // Use false so layouts run\r
                    });\r
                    var count = component.componentLayoutCounter;\r
                    component.setBoxLabel(label);\r
                    expect(component.getWidth()).toBe(withLabelWidth);\r
                    expect(component.componentLayoutCounter).toBe(count + 1);\r
                });\r
            });\r
        });\r
    });\r
\r
});\r