projects / extjs.git / blame
| Commit | Line | Data |
|---|---|---|
| 6527f429 DM |
1 | describe("Ext.tip.QuickTip", function() {\r |
| 2 | \r | |
| 3 | var target, tip;\r | |
| 4 | \r | |
| 5 | function createTargetEl(attrString) {\r | |
| 6 | target = Ext.getBody().insertHtml('beforeEnd', '<a href="#" ' + attrString + '>x</a>', true);\r | |
| 7 | }\r | |
| 8 | \r | |
| 9 | function mouseoverTarget() {\r | |
| 10 | jasmine.fireMouseEvent(target, 'mouseover', target.getX(), target.getY());\r | |
| 11 | }\r | |
| 12 | \r | |
| 13 | function createTip(cfg) {\r | |
| 14 | tip = new Ext.tip.QuickTip(Ext.apply({}, cfg, {showDelay: 1}));\r | |
| 15 | }\r | |
| 16 | \r | |
| 17 | afterEach(function() {\r | |
| 18 | if (target) {\r | |
| 19 | target.destroy();\r | |
| 20 | }\r | |
| 21 | if (tip) {\r | |
| 22 | tip.destroy();\r | |
| 23 | }\r | |
| 24 | });\r | |
| 25 | \r | |
| 26 | \r | |
| 27 | describe("element attributes", function() {\r | |
| 28 | function setup(attrs) {\r | |
| 29 | runs(function() {\r | |
| 30 | createTargetEl(attrs);\r | |
| 31 | createTip();\r | |
| 32 | mouseoverTarget();\r | |
| 33 | });\r | |
| 34 | waitsFor(function() {\r | |
| 35 | return tip.isVisible();\r | |
| 36 | }, "QuickTip never showed");\r | |
| 37 | }\r | |
| 38 | \r | |
| 39 | it("should display a tooltip containing the ext:qtip attribute's value", function() {\r | |
| 40 | setup('data-qtip="tip text"');\r | |
| 41 | runs(function() {\r | |
| 42 | expect(tip.layout.innerCt.dom).hasHTML('tip text');\r | |
| 43 | });\r | |
| 44 | });\r | |
| 45 | \r | |
| 46 | it("should display the ext:qtitle attribute as the tooltip title", function() {\r | |
| 47 | setup('data-qtip="tip text" data-qtitle="tip title"');\r | |
| 48 | runs(function() {\r | |
| 49 | expect(tip.title).toEqual('tip title');\r | |
| 50 | });\r | |
| 51 | });\r | |
| 52 | \r | |
| 53 | it("should use the ext:qwidth attribute as the tooltip width", function() {\r | |
| 54 | setup('data-qtip="tip text" data-qwidth="234"');\r | |
| 55 | runs(function() {\r | |
| 56 | expect(tip.el.getWidth()).toEqual(234);\r | |
| 57 | });\r | |
| 58 | });\r | |
| 59 | \r | |
| 60 | it("should add the ext:qclass attribute as a className on the tooltip element", function() {\r | |
| 61 | setup('data-qtip="tip text" data-qclass="test-class"');\r | |
| 62 | runs(function() {\r | |
| 63 | expect(tip.el.hasCls('test-class')).toBeTruthy();\r | |
| 64 | });\r | |
| 65 | });\r | |
| 66 | \r | |
| 67 | it("should add the ext:qshowDelay attribute on the tooltip element", function() {\r | |
| 68 | setup('data-qtip="tip text" data-qshowDelay="300"');\r | |
| 69 | runs(function() {\r | |
| 70 | expect(tip.activeTarget.el.getAttribute('data-qshowDelay')).toBe('300');\r | |
| 71 | });\r | |
| 72 | });\r | |
| 73 | \r | |
| 74 | it("should use the ext:hide attribute as an autoHide switch for the tooltip", function() {\r | |
| 75 | setup('data-qtip="tip text" data-hide="user"');\r | |
| 76 | runs(function() {\r | |
| 77 | expect(tip.autoHide).toBeFalsy();\r | |
| 78 | });\r | |
| 79 | });\r | |
| 80 | });\r | |
| 81 | \r | |
| 82 | describe("register", function() {\r | |
| 83 | function setup(registerConfig, targ, attrString) {\r | |
| 84 | runs(function() {\r | |
| 85 | createTargetEl(attrString || '');\r | |
| 86 | createTip({maxWidth: 400});\r | |
| 87 | tip.register(Ext.apply({}, registerConfig || {}, {target: targ || target, text: 'tip text'}));\r | |
| 88 | mouseoverTarget();\r | |
| 89 | });\r | |
| 90 | waitsFor(function() {\r | |
| 91 | return tip.isVisible();\r | |
| 92 | }, "QuickTip never showed");\r | |
| 93 | }\r | |
| 94 | \r | |
| 95 | it("should use the 'target' parameter as a new target", function() {\r | |
| 96 | setup();\r | |
| 97 | // the expectation is just that setup's waitsFor completed\r | |
| 98 | });\r | |
| 99 | \r | |
| 100 | it("should show when registering tooltip as string", function() {\r | |
| 101 | setup({text: 'test text'}, 'foobar', 'id="foobar"');\r | |
| 102 | runs(function() {\r | |
| 103 | expect(tip.isVisible()).toBe(true);\r | |
| 104 | });\r | |
| 105 | });\r | |
| 106 | \r | |
| 107 | it("should show when registering tooltip as HTMLElement", function() {\r | |
| 108 | setup({text: 'test text'}, target.dom);\r | |
| 109 | runs(function() {\r | |
| 110 | expect(tip.isVisible()).toBe(true);\r | |
| 111 | });\r | |
| 112 | });\r | |
| 113 | \r | |
| 114 | it("should show when registering tooltip as Ext.Element", function() {\r | |
| 115 | setup({text: 'test text'});\r | |
| 116 | runs(function() {\r | |
| 117 | expect(tip.isVisible()).toBe(true);\r | |
| 118 | });\r | |
| 119 | });\r | |
| 120 | \r | |
| 121 | it("should use the 'text' parameter as the tooltip content", function() {\r | |
| 122 | setup({text: 'test text'});\r | |
| 123 | runs(function() {\r | |
| 124 | expect(tip.layout.innerCt.dom).hasHTML('test text');\r | |
| 125 | });\r | |
| 126 | });\r | |
| 127 | \r | |
| 128 | it("should use the 'title' parameter as the tooltip title", function() {\r | |
| 129 | setup({title: 'tip title'});\r | |
| 130 | runs(function() {\r | |
| 131 | expect(tip.title).toEqual('tip title');\r | |
| 132 | });\r | |
| 133 | });\r | |
| 134 | \r | |
| 135 | it("should use the 'width' parameter as the tooltip width", function() {\r | |
| 136 | setup({width: 345});\r | |
| 137 | runs(function() {\r | |
| 138 | expect(tip.el.getWidth()).toEqual(345);\r | |
| 139 | });\r | |
| 140 | });\r | |
| 141 | \r | |
| 142 | it("should add the 'cls' parameter to the tooltip element's className", function() {\r | |
| 143 | setup({cls: 'test-class-name'});\r | |
| 144 | runs(function() {\r | |
| 145 | expect(tip.el.hasCls('test-class-name')).toBeTruthy();\r | |
| 146 | });\r | |
| 147 | });\r | |
| 148 | \r | |
| 149 | it("should use the 'autoHide' parameter as the tooltip's autoHide value", function() {\r | |
| 150 | setup({autoHide: false});\r | |
| 151 | runs(function() {\r | |
| 152 | expect(tip.autoHide).toBeFalsy();\r | |
| 153 | });\r | |
| 154 | });\r | |
| 155 | \r | |
| 156 | it("should use the 'dismissDelay' parameter for the tooltip's dismissDelay value", function() {\r | |
| 157 | setup({dismissDelay: 123});\r | |
| 158 | runs(function() {\r | |
| 159 | expect(tip.dismissDelay).toEqual(123);\r | |
| 160 | });\r | |
| 161 | });\r | |
| 162 | \r | |
| 163 | it("should accept a dismissDelay of 0", function() {\r | |
| 164 | setup({dismissDelay: 0});\r | |
| 165 | runs(function() {\r | |
| 166 | expect(tip.dismissDelay).toEqual(0);\r | |
| 167 | });\r | |
| 168 | });\r | |
| 169 | \r | |
| 170 | it("should default to the main tip dismissDelay", function() {\r | |
| 171 | setup({dismissDelay: null});\r | |
| 172 | runs(function() {\r | |
| 173 | expect(tip.dismissDelay).toEqual(5000);\r | |
| 174 | });\r | |
| 175 | });\r | |
| 176 | });\r | |
| 177 | \r | |
| 178 | describe("unregister", function() {\r | |
| 179 | it("should unregister the element as a target", function() {\r | |
| 180 | createTargetEl('');\r | |
| 181 | createTip();\r | |
| 182 | var spy = spyOn(tip, 'delayShow');\r | |
| 183 | tip.register({target: target, text: 'tip text'});\r | |
| 184 | tip.unregister(target);\r | |
| 185 | mouseoverTarget();\r | |
| 186 | expect(spy).not.toHaveBeenCalled();\r | |
| 187 | });\r | |
| 188 | });\r | |
| 189 | \r | |
| 190 | describe('interceptTitles', function () {\r | |
| 191 | it('should remove the title attribute from the target', function () {\r | |
| 192 | var dom;\r | |
| 193 | \r | |
| 194 | createTargetEl('title="tip text"');\r | |
| 195 | \r | |
| 196 | dom = target.dom;\r | |
| 197 | \r | |
| 198 | // Confirm that the target still has the title attribute with which it was configured.\r | |
| 199 | expect(dom.getAttribute('title')).toBe('tip text');\r | |
| 200 | \r | |
| 201 | createTip({interceptTitles: true});\r | |
| 202 | mouseoverTarget();\r | |
| 203 | \r | |
| 204 | // And now it's gone!\r | |
| 205 | expect(dom.getAttribute('title')).toBe(null);\r | |
| 206 | });\r | |
| 207 | \r | |
| 208 | it('should use the title attribute value for the quicktip', function () {\r | |
| 209 | createTargetEl('title="tip text"');\r | |
| 210 | createTip({interceptTitles: true});\r | |
| 211 | mouseoverTarget();\r | |
| 212 | \r | |
| 213 | waitsFor(function () {\r | |
| 214 | return tip.isVisible();\r | |
| 215 | }, 'QuickTip never showed', 2000);\r | |
| 216 | \r | |
| 217 | runs(function () {\r | |
| 218 | expect(tip.layout.innerCt.dom).hasHTML('tip text');\r | |
| 219 | });\r | |
| 220 | });\r | |
| 221 | \r | |
| 222 | it('should use the title attribute value rather than the qtip value when both are set', function () {\r | |
| 223 | createTargetEl('data-qtip="foobar" title="tip text"');\r | |
| 224 | createTip({interceptTitles: true});\r | |
| 225 | mouseoverTarget();\r | |
| 226 | \r | |
| 227 | waitsFor(function () {\r | |
| 228 | return tip.isVisible();\r | |
| 229 | }, 'QuickTip never showed', 2000);\r | |
| 230 | \r | |
| 231 | runs(function () {\r | |
| 232 | expect(tip.layout.innerCt.dom).hasHTML('tip text');\r | |
| 233 | });\r | |
| 234 | });\r | |
| 235 | });\r | |
| 236 | \r | |
| 237 | describe("size", function() {\r | |
| 238 | it("should size to the title of the title is larger than the text", function() {\r | |
| 239 | var body = Ext.htmlEncode('<div style="width: 50px;">a</div>'),\r | |
| 240 | title = Ext.htmlEncode('<div style="width: 100px;">a</div>');\r | |
| 241 | \r | |
| 242 | runs(function() {\r | |
| 243 | createTargetEl('data-qtip="' + body + '" data-qtitle="' + title + '"');\r | |
| 244 | createTip();\r | |
| 245 | mouseoverTarget();\r | |
| 246 | }); \r | |
| 247 | waitsFor(function() {\r | |
| 248 | return tip.isVisible();\r | |
| 249 | }, "QuickTip never showed");\r | |
| 250 | runs(function() {\r | |
| 251 | expect(tip.getWidth()).toBeGreaterThan(100);\r | |
| 252 | }); \r | |
| 253 | }); \r | |
| 254 | });\r | |
| 255 | \r | |
| 256 | });\r |