add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / test / specs / tip / ToolTip.js

describe("Ext.tip.ToolTip", function() {\r
\r
    var tip,\r
        target;\r
\r
    function createTip(config) {\r
        config = Ext.apply({}, config, {target: target, width: 50, height: 50, html: 'X'});\r
        tip = new Ext.tip.ToolTip(config);\r
        return tip;\r
    }\r
\r
    beforeEach(function() {\r
        // force scroll to top, to avoid issues with positions getting calculted incorrectly as the scroll jumps around\r
       // window.scrollTo(0, 0);\r
\r
        target = Ext.getBody().insertHtml(\r
            'beforeEnd',\r
            '<a href="#" id="tipTarget" style="position:absolute; left:100px; top:100px; width: 50px; height: 50px;">x</a>',\r
            true\r
        );\r
                \r
    });\r
\r
    afterEach(function() {\r
        if (tip) {\r
            tip.destroy();\r
            tip = null;\r
        }\r
        target.destroy();\r
    });\r
\r
    function mouseOverTarget() {\r
        jasmine.fireMouseEvent(target, 'mouseover', target.getX(), target.getY());\r
    }\r
\r
    describe("basic", function() {\r
        it("should extend Ext.tip.Tip", function() {\r
            expect(createTip() instanceof Ext.tip.Tip).toBeTruthy();\r
        });\r
\r
        it("should accept an id for the 'target' config", function() {\r
            createTip({target: 'tipTarget'});\r
            expect(tip.target.dom).toBe(target.dom);\r
        });\r
\r
        it("should accept an Ext.Element for the 'target' config", function() {\r
            createTip({target: target});\r
            expect(tip.target.dom).toBe(target.dom);\r
        });\r
\r
        it("should accept an HTMLElement for the 'target' config", function() {\r
            createTip({target: target.dom});\r
            expect(tip.target.dom).toBe(target.dom);\r
        });\r
    });\r
\r
    describe("disable", function() {\r
        it("should not show when not using a delay", function() {\r
            createTip({\r
                target: 'tipTarget',\r
                showDelay: 0\r
            });\r
            tip.disable();\r
            mouseOverTarget();\r
            expect(tip.isVisible()).toBe(false);\r
        });\r
\r
        it("should not show when disabled during a delay and not rendered", function() {\r
            createTip({\r
                target: 'tipTarget',\r
                showDelay: 1000\r
            });\r
            mouseOverTarget();\r
            tip.disable();\r
            var spy = jasmine.createSpy();\r
            tip.on('show', spy);\r
            waits(1500);\r
            runs(function() {\r
                expect(spy).not.toHaveBeenCalled();\r
            });\r
        });\r
\r
        it("should not show when disabled during a delay and already rendered", function() {\r
            createTip({\r
                target: 'tipTarget',\r
                showDelay: 1000,\r
                renderTo: Ext.getBody()\r
            });\r
            tip.hide();\r
            mouseOverTarget();\r
            tip.disable();\r
            var spy = jasmine.createSpy();\r
            tip.on('show', spy);\r
            waits(1500);\r
            runs(function() {\r
                expect(spy).not.toHaveBeenCalled();\r
            });\r
        });\r
    });\r
\r
    describe("show/hide", function() {\r
        it("should show the tooltip after mousing over the target element", function() {\r
            runs(function() {\r
                createTip({showDelay: 1});\r
                var delaySpy = spyOn(tip, 'delayShow').andCallThrough();\r
                expect(tip.isVisible()).toBeFalsy();\r
                mouseOverTarget();\r
                expect(delaySpy).toHaveBeenCalled();\r
            });\r
            waitsFor(function() {\r
                return tip.isVisible();\r
            }, "ToolTip was never shown");\r
        });\r
\r
        it("should hide the tooltip after mousing out of the target element", function() {\r
            runs(function() {\r
                createTip({showDelay: 1, hideDelay: 15});\r
                mouseOverTarget();\r
            });\r
            waitsFor(function() {\r
                return tip.isVisible();\r
            }, "ToolTip was never shown");\r
            runs(function() {\r
                jasmine.fireMouseEvent(target, 'mouseout', target.getX(), target.getY());\r
            });\r
            waitsFor(function() {\r
                return !tip.isVisible();\r
            }, "ToolTip was never hidden");\r
        });\r
\r
        it("should hide the tooltip after a delay", function() {\r
            runs(function() {\r
                createTip({showDelay: 1, dismissDelay: 15});\r
                mouseOverTarget();\r
            });\r
            waitsFor(function() {\r
                return tip.isVisible();\r
            }, "ToolTip was never shown");\r
            waitsFor(function() {\r
                return !tip.isVisible();\r
            }, "ToolTip was never hidden");\r
        });\r
\r
        it("should prevent the tooltip from automatically hiding if autoHide is false", function() {\r
            runs(function() {\r
                createTip({showDelay: 1, autoHide: false});\r
                this.spy = spyOn(tip, 'hide');\r
                mouseOverTarget();\r
            });\r
            waitsFor(function() {\r
                return tip.isVisible();\r
            }, "ToolTip was never shown");\r
            waits(100);\r
            runs(function() {\r
                expect(this.spy).not.toHaveBeenCalled();\r
            });\r
        });\r
\r
        it("should allow clicking outside the tip to close it if autoHide is false", function() {\r
            runs(function() {\r
                createTip({showDelay: 1, autoHide: false});\r
                mouseOverTarget();\r
            });\r
            waitsFor(function() {\r
                return tip.isVisible();\r
            }, "ToolTip was never shown");\r
            runs(function() {\r
                this.spy = spyOn(tip, 'hide').andCallThrough();\r
                jasmine.fireMouseEvent(Ext.getBody(), 'mousedown', 0, 0);\r
                expect(this.spy).toHaveBeenCalled();\r
            });\r
        });\r
    });\r
\r
    describe("mouseOffset", function() {\r
        it("should display the tooltip [15,18] from the mouse pointer by default", function() {\r
            runs(function() {\r
                createTip({showDelay: 1});\r
                mouseOverTarget();\r
            });\r
            waitsFor(function() {\r
                return tip.isVisible();\r
            }, "ToolTip was never shown");\r
            runs(function() {\r
                expect(tip.el).toBePositionedAt(target.getX() + 15, target.getY() + 18);\r
            });\r
        });\r
\r
        it("should allow configuring the mouseOffset", function() {\r
            runs(function() {\r
                createTip({showDelay: 1, mouseOffset: [20, 30]});\r
                mouseOverTarget();\r
            });\r
            waitsFor(function() {\r
                return tip.isVisible();\r
            }, "ToolTip was never shown");\r
            runs(function() {\r
                expect(tip.el).toBePositionedAt(target.getX() + 35, target.getY() + 48);\r
            });\r
        });\r
    });\r
    \r
    describe("showAt", function(){\r
        it("should at the specified position", function(){\r
            createTip();\r
            tip.showAt([100, 100]);\r
            expect(tip.el).toBePositionedAt(100, 100);    \r
        });  \r
    });\r
\r
    describe("trackMouse", function() {\r
        it("should move the tooltip along with the mouse if 'trackMouse' is true", function() {\r
            var x = target.getX(),\r
                y = target.getY();\r
            runs(function() {\r
                createTip({showDelay: 1, trackMouse: true});\r
                jasmine.fireMouseEvent(target, 'mouseover', x, y);\r
            });\r
            waitsFor(function() {\r
                return tip.isVisible();\r
            }, "ToolTip was never shown");\r
            runs(function() {\r
                expect(tip.el).toBePositionedAt(x + 15, y + 18);\r
                for(var i = 0; i < 5; i++) {\r
                    jasmine.fireMouseEvent(target, 'mousemove', ++x, ++y);\r
                    expect(tip.el).toBePositionedAt(x + 15, y + 18);\r
                }\r
            });\r
        });\r
\r
        describe('caching coords', function () {\r
            // See EXTJSIV-11292.\r
            // NOTE: The first time that the target is moused over the tooltip's layer (it's el)\r
            // won't have been created yet, so it's necessary to mouseover twice to test the API.\r
            //\r
            // When trackMouse = false, the XY coords will be cached by Tooltip.delayShow() and passed along\r
            // as an argument to Tooltip.show().  This is why we're checking the arguments passed to it.\r
            var x, y, n = 0;\r
\r
            beforeEach(function () {\r
                x = target.getX();\r
                y = target.getY();\r
\r
                runs(function() {\r
                    // Since there are only two tests in this suite let's use the variable n to flip trackMouse.\r
                    createTip({showDelay: 1, trackMouse: n ? true : false});\r
                    spyOn(tip, 'show').andCallThrough();\r
                    jasmine.fireMouseEvent(target, 'mouseover', x, y);\r
                    n++;\r
                });\r
\r
                waitsFor(function() {\r
                    return tip.isVisible();\r
                }, 'ToolTip was never shown');\r
            });\r
\r
            it('should cache xy coords when trackMouse=false', function () {\r
                runs(function () {\r
                    expect(tip.show.mostRecentCall.args[0]).toBe(undefined);\r
                });\r
\r
                waits(10);\r
\r
                runs(function () {\r
                    jasmine.fireMouseEvent(target, 'mouseover', x, y);\r
                    expect(tip.show.mostRecentCall.args[0]).toEqual([115, 118]);\r
                });\r
            });\r
\r
            it('should not cache xy coords when trackMouse=true', function () {\r
                runs(function () {\r
                    expect(tip.show.mostRecentCall.args[0]).toBeFalsy();\r
                });\r
\r
                waits(10);\r
\r
                runs(function () {\r
                    jasmine.fireMouseEvent(target, 'mouseover', x, y);\r
                    expect(tip.show.mostRecentCall.args[0]).toBeFalsy();\r
                });\r
            });\r
        });\r
    });\r
\r
    describe("anchor", function() {\r
        it("should allow anchoring the top of the tooltip to the target", function() {\r
            createTip({anchor: 'top'});\r
            tip.show();\r
            var tgtXY = target.getXY();\r
            expect(tip.el).toBePositionedAt(tgtXY[0], tgtXY[1] + target.getHeight() + 9);\r
        });\r
\r
        it("should allow anchoring the right of the tooltip to the target", function() {\r
            createTip({anchor: 'right'});\r
            tip.show();\r
            var tgtXY = target.getXY();\r
            expect(tip.el).toBePositionedAt(tgtXY[0] - tip.el.getWidth() - 13, tgtXY[1]);\r
        });\r
\r
        it("should allow anchoring the bottom of the tooltip to the target", function() {\r
            createTip({anchor: 'bottom'});\r
            tip.show();\r
            var tgtXY = target.getXY();\r
            expect(tip.el).toBePositionedAt(tgtXY[0], tgtXY[1] - tip.el.getHeight() - 13);\r
        });\r
\r
        it("should allow anchoring the left of the tooltip to the target", function() {\r
            createTip({anchor: 'left'});\r
            tip.show();\r
            var tgtXY = target.getXY();\r
            expect(tip.el).toBePositionedAt(tgtXY[0] + target.getWidth() + 9, tgtXY[1]);\r
        });\r
\r
        it("should flip from top to bottom if not enough space below the target", function() {\r
            target.setY(Ext.Element.getViewportHeight() - 75);\r
            createTip({anchor: 'top', constrainPosition: true});\r
            tip.show();\r
            var tgtXY = target.getXY();\r
            expect(tip.el).toBePositionedAt(tgtXY[0], tgtXY[1] - tip.el.getHeight() - 13);\r
        });\r
\r
        it("should flip from bottom to top if not enough space above the target", function() {\r
            target.setY(25);\r
            createTip({anchor: 'bottom', constrainPosition: true});\r
            tip.show();\r
            var tgtXY = target.getXY();\r
            expect(tip.el).toBePositionedAt(tgtXY[0], tgtXY[1] + target.getHeight() + 9);\r
        });\r
\r
        it("should flip from right to left if not enough space to the left of the target", function() {\r
            target.setX(25);\r
            createTip({anchor: 'right', constrainPosition: true});\r
            tip.show();\r
            var tgtXY = target.getXY();\r
            expect(tip.el).toBePositionedAt(tgtXY[0] + target.getWidth() + 9, tgtXY[1]);\r
        });\r
\r
        it("should flip from left to right if not enough space to the right of the target", function() {\r
            target.setX(Ext.Element.getViewportWidth() - 75);\r
            createTip({anchor: 'left', constrainPosition: true});\r
            tip.show();\r
            var tgtXY = target.getXY();\r
            expect(tip.el).toBePositionedAt(tgtXY[0] - tip.el.getWidth() - 13, tgtXY[1]);\r
        });\r
    });\r
\r
    describe("anchorToTarget=false", function() {\r
        it("should allow anchoring the top of the tooltip to the mouse pointer", function() {\r
            var xy = target.getXY();\r
            runs(function() {\r
                createTip({showDelay: 1, anchorToTarget: false, anchor: 'top'});\r
                jasmine.fireMouseEvent(target, 'mouseover', xy[0], xy[1]);\r
            });\r
            waitsFor(function() {\r
                return tip.isVisible();\r
            }, "ToolTip was never shown");\r
            runs(function() {\r
                expect(tip.el).toBePositionedAt(xy[0] - 15, xy[1] + 30);\r
            });\r
        });\r
\r
        it("should allow anchoring the right of the tooltip to the mouse pointer", function() {\r
            var xy = target.getXY();\r
            runs(function() {\r
                createTip({showDelay: 1, anchorToTarget: false, anchor: 'right'});\r
                jasmine.fireMouseEvent(target, 'mouseover', xy[0], xy[1]);\r
            });\r
            waitsFor(function() {\r
                return tip.isVisible();\r
            }, "ToolTip was never shown");\r
            runs(function() {\r
                expect(tip.el).toBePositionedAt(xy[0] - tip.el.getWidth() - 15, xy[1] - 13);\r
            });\r
        });\r
\r
        it("should allow anchoring the bottom of the tooltip to the mouse pointer", function() {\r
            var xy = target.getXY();\r
            runs(function() {\r
                createTip({showDelay: 1, anchorToTarget: false, anchor: 'bottom'});\r
                jasmine.fireMouseEvent(target, 'mouseover', xy[0], xy[1]);\r
            });\r
            waitsFor(function() {\r
                return tip.isVisible();\r
            }, "ToolTip was never shown");\r
            runs(function() {\r
                expect(tip.el).toBePositionedAt(xy[0] - 19, xy[1] - tip.el.getHeight() - 13);\r
            });\r
        });\r
        \r
        it("should allow anchoring the left of the tooltip to the mouse pointer", function() {\r
            var xy = target.getXY();\r
            runs(function() {\r
                createTip({showDelay: 1, anchorToTarget: false, anchor: 'left'});\r
                jasmine.fireMouseEvent(target, 'mouseover', xy[0], xy[1]);\r
            });\r
            waitsFor(function() {\r
                return tip.isVisible();\r
            }, "ToolTip was never shown");\r
            runs(function() {\r
                expect(tip.el).toBePositionedAt(xy[0] + 25, xy[1] - 13);\r
            });\r
        });\r
    });\r
\r
    describe("anchorOffset", function() {\r
        it("should move the anchor arrow horizontally when anchor is top", function() {\r
            createTip({anchor: 'top', anchorOffset: 25});\r
            tip.show();\r
            var tipXY = tip.el.getXY(),\r
                anchorXY = tip.anchorEl.getXY();\r
            expect(anchorXY[0]).toEqual(tipXY[0] + 15 + 25);\r
        });\r
\r
        it("should move the anchor arrow horizontally when anchor is bottom", function() {\r
            createTip({anchor: 'bottom', anchorOffset: 25});\r
            tip.show();\r
            var tipXY = tip.el.getXY(),\r
                anchorXY = tip.anchorEl.getXY();\r
            expect(anchorXY[0]).toEqual(tipXY[0] + 15 + 25);\r
        });\r
\r
        it("should move the anchor arrow vertically when anchor is left", function() {\r
            createTip({anchor: 'left', anchorOffset: 25});\r
            tip.show();\r
            var tipXY = tip.el.getXY(),\r
                anchorXY = tip.anchorEl.getXY();\r
            expect(anchorXY[1]).toEqual(tipXY[1] + 7 + 25);\r
        });\r
\r
        it("should move the anchor arrow vertically when anchor is right", function() {\r
            createTip({anchor: 'right', anchorOffset: 25});\r
            tip.show();\r
            var tipXY = tip.el.getXY(),\r
                anchorXY = tip.anchorEl.getXY();\r
            expect(anchorXY[1]).toEqual(tipXY[1] + 7 + 25);\r
        });\r
    });\r
\r
    describe("delegate", function() {\r
        var delegatedTarget;\r
\r
        beforeEach(function() {\r
            target.insertHtml('beforeEnd', '<span class="hasTip" id="delegatedTarget">x</span><span class="noTip">x</span>');\r
            delegatedTarget = Ext.get('delegatedTarget');\r
        });\r
\r
        afterEach(function() {\r
            delegatedTarget.destroy();\r
        });\r
\r
        it("should show the tooltip for descendants matching the selector", function() {\r
            createTip({delegate: '.hasTip'});\r
            var spy = spyOn(tip, 'delayShow');\r
            jasmine.fireMouseEvent(delegatedTarget, 'mouseover', delegatedTarget.getX(), delegatedTarget.getY());\r
            expect(spy).toHaveBeenCalled();\r
        });\r
\r
        it("should not show the tooltip for descendants that do not match the selector", function() {\r
            createTip({delegate: '.hasTip'});\r
            var spy = spyOn(tip, 'delayShow');\r
            mouseOverTarget();\r
            expect(spy).not.toHaveBeenCalled();\r
        });\r
\r
        it("should set the triggerElement property to the active descendant element when shown", function() {\r
            createTip({delegate: '.hasTip'});\r
            jasmine.fireMouseEvent(delegatedTarget, 'mouseover', delegatedTarget.getX(), delegatedTarget.getY());\r
            expect(tip.triggerElement).toBe(delegatedTarget.dom);\r
        });\r
\r
        it("should unset the triggerElement property when hiding", function() {\r
            createTip({delegate: '.hasTip'});\r
            jasmine.fireMouseEvent(delegatedTarget, 'mouseover', delegatedTarget.getX(), delegatedTarget.getY());\r
            tip.hide();\r
            expect(tip.triggerElement).not.toBeDefined();\r
        });\r
    });\r
\r
});\r