add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / test / specs / layout / container / boxOverflow / Menu.js

describe('Ext.layout.container.boxOverflow.Menu', function () {\r
    var toolbar;\r
\r
    function createToolbar(cfg) {\r
        toolbar = new Ext.toolbar.Toolbar(Ext.apply({\r
            enableOverflow: true,\r
            width: 1,\r
            renderTo: Ext.getBody(),\r
            items: [{\r
                xtype: 'checkboxfield',\r
                name: 'check1',\r
                itemId: 'check1'\r
            }]\r
        }, cfg || {}));\r
    }\r
\r
    afterEach(function () {\r
        Ext.destroy(toolbar);\r
        toolbar = null;\r
    });\r
\r
    it("should be able to show a button menu after being overflowed", function() {\r
        createToolbar({\r
            items: [{\r
                xtype: 'button',\r
                text: 'Foo',\r
                menu: {\r
                    items: {\r
                        text: 'Some Menu'\r
                    }\r
                }\r
            }]\r
        });\r
\r
        var menu = toolbar.layout.overflowHandler.menu,\r
            button = toolbar.items.first();\r
\r
        menu.show();\r
        menu.hide();\r
\r
        toolbar.setWidth(300);\r
\r
        button.showMenu();\r
        expect(button.getMenu().isVisible(true)).toBe(true);\r
    });\r
\r
    describe('addComponentToMenu', function () {\r
        it('should create an overflowClone bound to each toolbar item', function () {\r
            createToolbar();\r
\r
            toolbar.layout.overflowHandler.menu.show();\r
\r
            expect(toolbar.items.getAt(0).overflowClone).toBeDefined();\r
        });\r
\r
        it('should create an overflowClone bound to each toolbar item that is a reference to each menu item', function () {\r
            var menu, item;\r
\r
            createToolbar();\r
\r
            menu = toolbar.layout.overflowHandler.menu;\r
            menu.show();\r
\r
            item = menu.items.getAt(0);\r
\r
            expect(toolbar.items.getAt(0).overflowClone).toBe(item);\r
            expect(item.name).toBe('check1');\r
        });\r
    });\r
\r
    describe('createMenuConfig', function () {\r
        it('should have same state as its complement toolbar item', function () {\r
            var toolbarItems, overflowHandler, menuItems;\r
\r
            createToolbar({\r
                items: [{\r
                    xtype: 'checkboxfield',\r
                    name: 'check1',\r
                    itemId: 'check1'\r
                }, {\r
                    xtype: 'checkboxfield',\r
                    name: 'check2',\r
                    itemId: 'check2',\r
                    checked: true\r
                }]\r
            });\r
\r
            toolbarItems = toolbar.items;\r
            toolbarItems.getAt(0).setValue(true);\r
            toolbarItems.getAt(1).setValue(false);\r
\r
            overflowHandler = toolbar.layout.overflowHandler;\r
            menuItems = overflowHandler.menu.items;\r
\r
            overflowHandler.menu.show();\r
\r
            expect(menuItems.getAt(0).checked).toBe(true);\r
            expect(menuItems.getAt(1).checked).toBe(false);\r
        });\r
\r
        it('should not overwrite listeners config defined on the original component', function () {\r
            // This test demonstrates that the menu item created from the original component's config\r
            // will receive any listeners defined in the item's listeners config.\r
            var wasClicked = false,\r
                menu;\r
\r
            createToolbar({\r
                items: [{\r
                    // Button by default.\r
                    xtype: 'button',\r
                    listeners: {\r
                        click: function () {\r
                            wasClicked = true;\r
                        }\r
                    }\r
                }]\r
            });\r
\r
            menu = toolbar.layout.overflowHandler.menu;\r
            menu.show();\r
            jasmine.fireMouseEvent(menu.items.getAt(0).el, 'click');\r
\r
            expect(wasClicked).toBe(true);\r
        });\r
    });\r
\r
    describe('form fields in toolbar', function() {\r
        it('should sync the value both ways on change', function() {\r
            var overflowHandler, master, clone;\r
\r
            createToolbar({\r
                items: [{\r
                    xtype: 'textfield',\r
                    name: 'text1',\r
                    itemId: 'text1'\r
                }]\r
            });\r
            overflowHandler = toolbar.layout.overflowHandler;\r
            master = toolbar.down('#text1');\r
            \r
            overflowHandler.menu.show();\r
            clone = overflowHandler.menu.down('[name=text1]');\r
\r
            // Check syncing both ways\r
            master.setValue('foo');\r
            expect(clone.getValue()).toBe('foo');            \r
            clone.setValue('bar');\r
            expect(master.getValue()).toBe('bar')\r
        });\r
    });\r
});