projects / extjs.git / blame
| Commit | Line | Data |
|---|---|---|
| 6527f429 DM |
1 | describe("Ext.tab.Bar", function() {\r |
| 2 | var tabBar;\r | |
| 3 | \r | |
| 4 | function createTabBar(config) {\r | |
| 5 | tabBar = new Ext.tab.Bar(Ext.apply({}, config));\r | |
| 6 | }\r | |
| 7 | \r | |
| 8 | function doClick(targetId, tab) {\r | |
| 9 | tabBar.onClick({\r | |
| 10 | // mock event object can go here if needed\r | |
| 11 | getTarget: function() {\r | |
| 12 | return (tab) ? tab.el : null;\r | |
| 13 | }\r | |
| 14 | }, {\r | |
| 15 | // target el\r | |
| 16 | id: targetId\r | |
| 17 | });\r | |
| 18 | }\r | |
| 19 | \r | |
| 20 | function makeTabs(n, prop) {\r | |
| 21 | var tabs = [],\r | |
| 22 | i, o;\r | |
| 23 | \r | |
| 24 | prop = prop || 'text';\r | |
| 25 | for (i = 1; i <= n; ++i) {\r | |
| 26 | o = {};\r | |
| 27 | o[prop] = 'ItemText' + i;\r | |
| 28 | tabs.push(o);\r | |
| 29 | }\r | |
| 30 | return tabs;\r | |
| 31 | }\r | |
| 32 | \r | |
| 33 | afterEach(function() {\r | |
| 34 | Ext.destroy(tabBar);\r | |
| 35 | tabBar = null;\r | |
| 36 | });\r | |
| 37 | \r | |
| 38 | describe("layout", function() {\r | |
| 39 | var layout;\r | |
| 40 | \r | |
| 41 | beforeEach(function() {\r | |
| 42 | createTabBar();\r | |
| 43 | layout = tabBar.layout;\r | |
| 44 | });\r | |
| 45 | \r | |
| 46 | xit("should be hbox by default", function() {\r | |
| 47 | expect(layout.type).toEqual('hbox');\r | |
| 48 | });\r | |
| 49 | \r | |
| 50 | xit("should have pack start by default", function() {\r | |
| 51 | expect(layout.pack).toEqual('start');\r | |
| 52 | });\r | |
| 53 | \r | |
| 54 | it("should have a default height when there are no tabs", function() {\r | |
| 55 | var tabPanel = Ext.create({\r | |
| 56 | xtype: 'tabpanel',\r | |
| 57 | renderTo: document.body,\r | |
| 58 | width: 100,\r | |
| 59 | height: 100\r | |
| 60 | });\r | |
| 61 | \r | |
| 62 | expect(tabPanel.getTabBar().getHeight()).toBe(27);\r | |
| 63 | \r | |
| 64 | tabPanel.destroy();\r | |
| 65 | });\r | |
| 66 | });\r | |
| 67 | \r | |
| 68 | describe("closing a tab", function() {\r | |
| 69 | var closeListener,\r | |
| 70 | destroyListener,\r | |
| 71 | tabPanel,\r | |
| 72 | item1,\r | |
| 73 | item1CloseButton,\r | |
| 74 | item2;\r | |
| 75 | \r | |
| 76 | beforeEach(function() {\r | |
| 77 | closeListener = jasmine.createSpy();\r | |
| 78 | destroyListener = jasmine.createSpy();\r | |
| 79 | tabPanel = Ext.create('Ext.tab.Panel', {\r | |
| 80 | renderTo: Ext.getBody(),\r | |
| 81 | width: 200,\r | |
| 82 | height: 100,\r | |
| 83 | items: [{\r | |
| 84 | id: 'item1',\r | |
| 85 | title: 'Tab 1',\r | |
| 86 | closable: true,\r | |
| 87 | listeners: {\r | |
| 88 | close: closeListener,\r | |
| 89 | destroy: destroyListener\r | |
| 90 | }\r | |
| 91 | }, {\r | |
| 92 | id: 'item2',\r | |
| 93 | title: 'Tab 2',\r | |
| 94 | closable: true\r | |
| 95 | }]\r | |
| 96 | });\r | |
| 97 | spyOn(tabPanel, 'remove').andCallThrough();\r | |
| 98 | spyOn(tabPanel.getTabBar(), 'remove').andCallThrough();\r | |
| 99 | item1 = Ext.getCmp('item1');\r | |
| 100 | item1CloseButton = item1.tab.closeEl.dom;\r | |
| 101 | item2 = Ext.getCmp('item2');\r | |
| 102 | });\r | |
| 103 | \r | |
| 104 | afterEach(function() {\r | |
| 105 | tabPanel.destroy();\r | |
| 106 | });\r | |
| 107 | \r | |
| 108 | it("should fire 'close' event in the item", function() {\r | |
| 109 | jasmine.fireMouseEvent(item1CloseButton, 'click');\r | |
| 110 | expect(closeListener).toHaveBeenCalled();\r | |
| 111 | });\r | |
| 112 | \r | |
| 113 | it("should fire 'destroy' event in the item", function() {\r | |
| 114 | jasmine.fireMouseEvent(item1CloseButton, 'click');\r | |
| 115 | expect(destroyListener).toHaveBeenCalled();\r | |
| 116 | });\r | |
| 117 | \r | |
| 118 | it("should remove card from tabPanel", function() {\r | |
| 119 | jasmine.fireMouseEvent(item1CloseButton, 'click');\r | |
| 120 | expect(tabPanel.remove).toHaveBeenCalledWith(item1);\r | |
| 121 | });\r | |
| 122 | \r | |
| 123 | it("should remove tab from tabBar", function() {\r | |
| 124 | // backup tab, since item will no longer have a tab after being removed\r | |
| 125 | var tab = item1.tab;\r | |
| 126 | jasmine.fireMouseEvent(item1CloseButton, 'click');\r | |
| 127 | expect(tabPanel.getTabBar().remove).toHaveBeenCalledWith(tab);\r | |
| 128 | });\r | |
| 129 | \r | |
| 130 | it("should activate next tab", function() {\r | |
| 131 | jasmine.fireMouseEvent(item1CloseButton, 'click');\r | |
| 132 | expect(tabPanel.activeTab).toBe(item2);\r | |
| 133 | });\r | |
| 134 | });\r | |
| 135 | \r | |
| 136 | xdescribe("clicking on a tab", function() {\r | |
| 137 | var tab, cardLayout;\r | |
| 138 | \r | |
| 139 | describe("if the tab is enabled", function() {\r | |
| 140 | beforeEach(function() {\r | |
| 141 | cardLayout = {\r | |
| 142 | setActiveItem: jasmine.createSpy()\r | |
| 143 | };\r | |
| 144 | \r | |
| 145 | createTabBar({\r | |
| 146 | cardLayout: cardLayout\r | |
| 147 | });\r | |
| 148 | \r | |
| 149 | tabBar.add({\r | |
| 150 | xtype: 'tab',\r | |
| 151 | id: 'tab1',\r | |
| 152 | card: {\r | |
| 153 | some: 'card'\r | |
| 154 | },\r | |
| 155 | tabBar: tabBar\r | |
| 156 | });\r | |
| 157 | \r | |
| 158 | tabBar.render(document.body);\r | |
| 159 | \r | |
| 160 | tab = tabBar.getComponent('tab1');\r | |
| 161 | \r | |
| 162 | spyOn(tabBar, 'setActiveTab').andCallThrough();\r | |
| 163 | });\r | |
| 164 | \r | |
| 165 | afterEach(function() {\r | |
| 166 | tabBar.destroy();\r | |
| 167 | });\r | |
| 168 | \r | |
| 169 | it("should call setActiveTab", function() {\r | |
| 170 | doClick('tab1', tab);\r | |
| 171 | expect(tabBar.setActiveTab).toHaveBeenCalledWith(tab);\r | |
| 172 | });\r | |
| 173 | \r | |
| 174 | it("should fire the 'change' event", function() {\r | |
| 175 | var callFn;\r | |
| 176 | \r | |
| 177 | tabBar.on('change', callFn = jasmine.createSpy(), this);\r | |
| 178 | \r | |
| 179 | doClick('tab1', tab);\r | |
| 180 | expect(callFn).toHaveBeenCalled();\r | |
| 181 | });\r | |
| 182 | \r | |
| 183 | xit("should set the cardLayout's card to the tab's card", function() {\r | |
| 184 | doClick('tab1');\r | |
| 185 | /*\r | |
| 186 | * Currently the layout is not called if the component is not rendered\r | |
| 187 | * because it causes a null error inside CardLayout. This is either a\r | |
| 188 | * change in behavior or a bug in the layout, but either way it invalidates\r | |
| 189 | * this test for the time being...\r | |
| 190 | */\r | |
| 191 | expect(cardLayout.setActiveItem).toHaveBeenCalledWith(tab.card);\r | |
| 192 | });\r | |
| 193 | \r | |
| 194 | describe("the 'change' event", function() {\r | |
| 195 | var args;\r | |
| 196 | \r | |
| 197 | beforeEach(function() {\r | |
| 198 | tabBar.on('change', function() {\r | |
| 199 | args = arguments;\r | |
| 200 | }, this);\r | |
| 201 | \r | |
| 202 | doClick('tab1');\r | |
| 203 | });\r | |
| 204 | \r | |
| 205 | it("should have a reference to the tabBar", function() {\r | |
| 206 | expect(args[0]).toEqual(tabBar);\r | |
| 207 | });\r | |
| 208 | \r | |
| 209 | it("should have a reference to the tab", function() {\r | |
| 210 | expect(args[1]).toEqual(tab);\r | |
| 211 | });\r | |
| 212 | \r | |
| 213 | it("should have a reference to the tab's card", function() {\r | |
| 214 | expect(args[2]).toEqual(tab.card);\r | |
| 215 | });\r | |
| 216 | });\r | |
| 217 | });\r | |
| 218 | \r | |
| 219 | describe("if the tab disabled config is true", function() {\r | |
| 220 | var cardLayout, tab1, tab2;\r | |
| 221 | \r | |
| 222 | beforeEach(function() {\r | |
| 223 | cardLayout = {\r | |
| 224 | setActiveItem: jasmine.createSpy()\r | |
| 225 | };\r | |
| 226 | \r | |
| 227 | createTabBar({\r | |
| 228 | cardLayout: cardLayout\r | |
| 229 | });\r | |
| 230 | \r | |
| 231 | tabBar.add({\r | |
| 232 | xtype: 'tab',\r | |
| 233 | id: 'tab1',\r | |
| 234 | card: {\r | |
| 235 | some: 'card'\r | |
| 236 | },\r | |
| 237 | tabBar: tabBar\r | |
| 238 | },{\r | |
| 239 | xtype: 'tab',\r | |
| 240 | id: 'tab2',\r | |
| 241 | disabled: true,\r | |
| 242 | card: {\r | |
| 243 | other: 'card'\r | |
| 244 | },\r | |
| 245 | tabBar: tabBar\r | |
| 246 | });\r | |
| 247 | \r | |
| 248 | tab1 = tabBar.items.items[0];\r | |
| 249 | tab2 = tabBar.items.items[1];\r | |
| 250 | });\r | |
| 251 | \r | |
| 252 | afterEach(function() {\r | |
| 253 | tabBar.destroy();\r | |
| 254 | });\r | |
| 255 | \r | |
| 256 | it("should set the tab instance to disabled", function(){\r | |
| 257 | expect(tabBar.getComponent('tab2').disabled).toBe(true);\r | |
| 258 | });\r | |
| 259 | \r | |
| 260 | it("should not call setActiveItem on the layout", function() {\r | |
| 261 | doClick('tab2');\r | |
| 262 | expect(cardLayout.setActiveItem).not.toHaveBeenCalled();\r | |
| 263 | });\r | |
| 264 | });\r | |
| 265 | });\r | |
| 266 | \r | |
| 267 | describe("ensureTabVisible", function() {\r | |
| 268 | var items;\r | |
| 269 | \r | |
| 270 | function expectVisible(item) {\r | |
| 271 | var scroller = tabBar.layout.overflowHandler;\r | |
| 272 | expect(scroller.getItemVisibility(item).fullyVisible).toBe(true);\r | |
| 273 | }\r | |
| 274 | \r | |
| 275 | function expectNotVisible(item) {\r | |
| 276 | var scroller = tabBar.layout.overflowHandler;\r | |
| 277 | expect(scroller.getItemVisibility(item).fullyVisible).toBe(false);\r | |
| 278 | }\r | |
| 279 | \r | |
| 280 | function makeScrollTabs(cfg) {\r | |
| 281 | createTabBar(Ext.apply({\r | |
| 282 | renderTo: Ext.getBody(),\r | |
| 283 | width: 300,\r | |
| 284 | items: makeTabs(10)\r | |
| 285 | }, cfg));\r | |
| 286 | items = tabBar.items;\r | |
| 287 | }\r | |
| 288 | \r | |
| 289 | afterEach(function() {\r | |
| 290 | items = null;\r | |
| 291 | });\r | |
| 292 | \r | |
| 293 | describe("arguments", function() {\r | |
| 294 | it("should default to the activeTab", function() {\r | |
| 295 | makeScrollTabs();\r | |
| 296 | var item = items.last();\r | |
| 297 | tabBar.setActiveTab(item);\r | |
| 298 | // Go to the front\r | |
| 299 | tabBar.layout.overflowHandler.scrollBy(-1000, false);\r | |
| 300 | expectNotVisible(item);\r | |
| 301 | tabBar.ensureTabVisible();\r | |
| 302 | expectVisible(item);\r | |
| 303 | });\r | |
| 304 | \r | |
| 305 | it("should accept a tab", function() {\r | |
| 306 | makeScrollTabs();\r | |
| 307 | var item = items.getAt(8);\r | |
| 308 | expectNotVisible(item);\r | |
| 309 | tabBar.ensureTabVisible(8);\r | |
| 310 | expectVisible(item);\r | |
| 311 | });\r | |
| 312 | \r | |
| 313 | describe("index", function() {\r | |
| 314 | it("should accept 0", function() {\r | |
| 315 | makeScrollTabs();\r | |
| 316 | var item = items.first();\r | |
| 317 | tabBar.layout.overflowHandler.scrollBy(5000, false);\r | |
| 318 | expectNotVisible(item);\r | |
| 319 | tabBar.ensureTabVisible(0);\r | |
| 320 | expectVisible(item);\r | |
| 321 | });\r | |
| 322 | \r | |
| 323 | it("should accept a non-zero index", function() {\r | |
| 324 | makeScrollTabs();\r | |
| 325 | var item = items.getAt(3);\r | |
| 326 | tabBar.layout.overflowHandler.scrollBy(5000, false);\r | |
| 327 | expectNotVisible(item);\r | |
| 328 | tabBar.ensureTabVisible(3);\r | |
| 329 | expectVisible(item);\r | |
| 330 | });\r | |
| 331 | });\r | |
| 332 | \r | |
| 333 | describe("tab panel items", function() {\r | |
| 334 | var tabPanel;\r | |
| 335 | \r | |
| 336 | beforeEach(function() {\r | |
| 337 | tabPanel = new Ext.tab.Panel({\r | |
| 338 | renderTo: Ext.getBody(),\r | |
| 339 | width: 300,\r | |
| 340 | items: makeTabs(10, 'title')\r | |
| 341 | });\r | |
| 342 | tabBar = tabPanel.getTabBar();\r | |
| 343 | });\r | |
| 344 | \r | |
| 345 | afterEach(function() {\r | |
| 346 | tabPanel.destroy();\r | |
| 347 | tabPanel = null;\r | |
| 348 | });\r | |
| 349 | \r | |
| 350 | it("should accept a tabpanel item", function() {\r | |
| 351 | var item = tabBar.items.last();\r | |
| 352 | expectNotVisible(item);\r | |
| 353 | tabBar.ensureTabVisible(tabPanel.items.last());\r | |
| 354 | expectVisible(item);\r | |
| 355 | });\r | |
| 356 | \r | |
| 357 | it("should ignore components not in the tab panel", function() {\r | |
| 358 | var c = new Ext.Component();\r | |
| 359 | var item = tabBar.items.first();\r | |
| 360 | expectVisible(item);\r | |
| 361 | tabBar.ensureTabVisible(c);\r | |
| 362 | expectVisible(item);\r | |
| 363 | \r | |
| 364 | c.destroy();\r | |
| 365 | });\r | |
| 366 | });\r | |
| 367 | });\r | |
| 368 | \r | |
| 369 | it("should not cause issue if there is no scroller", function() {\r | |
| 370 | makeScrollTabs({\r | |
| 371 | width: 3000\r | |
| 372 | });\r | |
| 373 | expect(function() {\r | |
| 374 | tabBar.ensureTabVisible(items.last());\r | |
| 375 | }).not.toThrow();\r | |
| 376 | });\r | |
| 377 | });\r | |
| 378 | \r | |
| 379 | describe("scroll & active tab", function() {\r | |
| 380 | var items;\r | |
| 381 | \r | |
| 382 | function expectVisible(item) {\r | |
| 383 | var scroller = tabBar.layout.overflowHandler;\r | |
| 384 | expect(scroller.getItemVisibility(item).fullyVisible).toBe(true);\r | |
| 385 | }\r | |
| 386 | \r | |
| 387 | function expectNotVisible(item) {\r | |
| 388 | var scroller = tabBar.layout.overflowHandler;\r | |
| 389 | expect(scroller.getItemVisibility(item).fullyVisible).toBe(false);\r | |
| 390 | }\r | |
| 391 | \r | |
| 392 | function makeScrollTabs(cfg) {\r | |
| 393 | createTabBar(Ext.apply({\r | |
| 394 | renderTo: Ext.getBody(),\r | |
| 395 | width: 300,\r | |
| 396 | items: makeTabs(10)\r | |
| 397 | }, cfg));\r | |
| 398 | items = tabBar.items;\r | |
| 399 | }\r | |
| 400 | \r | |
| 401 | afterEach(function() {\r | |
| 402 | items = null;\r | |
| 403 | });\r | |
| 404 | \r | |
| 405 | it("should have the the active tab scrolled to", function() {\r | |
| 406 | makeScrollTabs();\r | |
| 407 | var item = items.last();\r | |
| 408 | tabBar.setActiveTab(item);\r | |
| 409 | expectVisible(item);\r | |
| 410 | \r | |
| 411 | item = items.first();\r | |
| 412 | tabBar.setActiveTab(item);\r | |
| 413 | expectVisible(item);\r | |
| 414 | });\r | |
| 415 | \r | |
| 416 | describe("active item change", function() {\r | |
| 417 | describe("with ensureActiveVisibleOnChange: false", function() {\r | |
| 418 | beforeEach(function() {\r | |
| 419 | makeScrollTabs({\r | |
| 420 | ensureActiveVisibleOnChange: false\r | |
| 421 | });\r | |
| 422 | });\r | |
| 423 | \r | |
| 424 | it("should not move the item into full view when changing the text", function() {\r | |
| 425 | var item = items.last(),\r | |
| 426 | width = item.getWidth();\r | |
| 427 | \r | |
| 428 | tabBar.setActiveTab(item);\r | |
| 429 | tabBar.ensureTabVisible(0);\r | |
| 430 | item.setText('Longer text that will cause a scroll');\r | |
| 431 | expect(item.getWidth()).toBeGreaterThan(width);\r | |
| 432 | expectNotVisible(item);\r | |
| 433 | });\r | |
| 434 | \r | |
| 435 | it("should move the item into full view when changing the icon", function() {\r | |
| 436 | var item = items.last(),\r | |
| 437 | width = item.getWidth();\r | |
| 438 | \r | |
| 439 | tabBar.setActiveTab(item);\r | |
| 440 | tabBar.ensureTabVisible(0);\r | |
| 441 | item.setIcon(Ext.BLANK_IMAGE_URL);\r | |
| 442 | expect(item.getWidth()).toBeGreaterThan(width);\r | |
| 443 | expectNotVisible(item);\r | |
| 444 | });\r | |
| 445 | \r | |
| 446 | it("should move the item into full view when changing the iconCls", function() {\r | |
| 447 | var item = items.last(),\r | |
| 448 | width = item.getWidth();\r | |
| 449 | \r | |
| 450 | tabBar.setActiveTab(item);\r | |
| 451 | tabBar.ensureTabVisible(0);\r | |
| 452 | item.setIconCls('someIconCls');\r | |
| 453 | expect(item.getWidth()).toBeGreaterThan(width);\r | |
| 454 | expectNotVisible(item);\r | |
| 455 | });\r | |
| 456 | \r | |
| 457 | it("should move the item into full view when changing the glyph", function() {\r | |
| 458 | var item = items.last(),\r | |
| 459 | width = item.getWidth();\r | |
| 460 | \r | |
| 461 | tabBar.setActiveTab(item);\r | |
| 462 | tabBar.ensureTabVisible(0);\r | |
| 463 | item.setGlyph(100);\r | |
| 464 | expect(item.getWidth()).toBeGreaterThan(width);\r | |
| 465 | expectNotVisible(item);\r | |
| 466 | });\r | |
| 467 | });\r | |
| 468 | \r | |
| 469 | describe("with ensureActiveVisibleOnChange: true", function() {\r | |
| 470 | beforeEach(function() {\r | |
| 471 | makeScrollTabs({\r | |
| 472 | ensureActiveVisibleOnChange: true\r | |
| 473 | });\r | |
| 474 | });\r | |
| 475 | \r | |
| 476 | it("should move the item into full view when changing the text", function() {\r | |
| 477 | var item = items.last(),\r | |
| 478 | width = item.getWidth();\r | |
| 479 | \r | |
| 480 | tabBar.setActiveTab(item);\r | |
| 481 | tabBar.ensureTabVisible(0);\r | |
| 482 | item.setText('Longer text that will cause a scroll');\r | |
| 483 | expect(item.getWidth()).toBeGreaterThan(width);\r | |
| 484 | expectVisible(item);\r | |
| 485 | });\r | |
| 486 | \r | |
| 487 | it("should move the item into full view when changing the icon", function() {\r | |
| 488 | var item = items.last(),\r | |
| 489 | width = item.getWidth();\r | |
| 490 | \r | |
| 491 | tabBar.setActiveTab(item);\r | |
| 492 | tabBar.ensureTabVisible(0);\r | |
| 493 | item.setIcon(Ext.BLANK_IMAGE_URL);\r | |
| 494 | expect(item.getWidth()).toBeGreaterThan(width);\r | |
| 495 | expectVisible(item);\r | |
| 496 | });\r | |
| 497 | \r | |
| 498 | it("should move the item into full view when changing the iconCls", function() {\r | |
| 499 | var item = items.last(),\r | |
| 500 | width = item.getWidth();\r | |
| 501 | \r | |
| 502 | tabBar.setActiveTab(item);\r | |
| 503 | tabBar.ensureTabVisible(0);\r | |
| 504 | item.setIconCls('someIconCls');\r | |
| 505 | expect(item.getWidth()).toBeGreaterThan(width);\r | |
| 506 | expectVisible(item);\r | |
| 507 | });\r | |
| 508 | \r | |
| 509 | it("should move the item into full view when changing the glyph", function() {\r | |
| 510 | var item = items.last(),\r | |
| 511 | width = item.getWidth();\r | |
| 512 | \r | |
| 513 | tabBar.setActiveTab(item);\r | |
| 514 | tabBar.ensureTabVisible(0);\r | |
| 515 | item.setGlyph(100);\r | |
| 516 | expect(item.getWidth()).toBeGreaterThan(width);\r | |
| 517 | expectVisible(item);\r | |
| 518 | });\r | |
| 519 | });\r | |
| 520 | });\r | |
| 521 | });\r | |
| 522 | \r | |
| 523 | xdescribe("setting the active tab", function() {\r | |
| 524 | var tab;\r | |
| 525 | \r | |
| 526 | beforeEach(function() {\r | |
| 527 | createTabBar();\r | |
| 528 | \r | |
| 529 | tabBar.add({\r | |
| 530 | xtype: 'tab',\r | |
| 531 | card: {\r | |
| 532 | some: 'card'\r | |
| 533 | },\r | |
| 534 | tabBar: tabBar\r | |
| 535 | });\r | |
| 536 | \r | |
| 537 | tab = tabBar.getComponent(0);\r | |
| 538 | });\r | |
| 539 | \r | |
| 540 | it("should set the activeTab property to that tab", function() {\r | |
| 541 | tabBar.setActiveTab(tab);\r | |
| 542 | \r | |
| 543 | expect(tabBar.activeTab).toEqual(tab);\r | |
| 544 | });\r | |
| 545 | });\r | |
| 546 | \r | |
| 547 | describe('moving tab items', function() {\r | |
| 548 | var tabPanel;\r | |
| 549 | \r | |
| 550 | beforeEach(function() {\r | |
| 551 | tabPanel = new Ext.tab.Panel({\r | |
| 552 | deferredRender: false,\r | |
| 553 | renderTo: Ext.getBody(),\r | |
| 554 | width: 300,\r | |
| 555 | items: [{\r | |
| 556 | title: 'Tab 1',\r | |
| 557 | html: 'Tab 1',\r | |
| 558 | id: 'tab1'\r | |
| 559 | }, {\r | |
| 560 | title: 'Tab 2',\r | |
| 561 | html: 'Tab 2',\r | |
| 562 | id: 'tab2'\r | |
| 563 | }, {\r | |
| 564 | title: 'Tab 3',\r | |
| 565 | html: 'Tab 3',\r | |
| 566 | id: 'tab3'\r | |
| 567 | }]\r | |
| 568 | });\r | |
| 569 | tabBar = tabPanel.getTabBar();\r | |
| 570 | });\r | |
| 571 | \r | |
| 572 | afterEach(function() {\r | |
| 573 | tabPanel.destroy();\r | |
| 574 | tabPanel = null;\r | |
| 575 | });\r | |
| 576 | \r | |
| 577 | it('should move the underlying cards to keep the orders synchronized', function() {\r | |
| 578 | // Check initial state\r | |
| 579 | expect(tabBar.getComponent(0).text).toBe('Tab 1');\r | |
| 580 | expect(tabBar.getComponent(1).text).toBe('Tab 2');\r | |
| 581 | expect(tabBar.getComponent(2).text).toBe('Tab 3');\r | |
| 582 | \r | |
| 583 | // Move the first tab item to the end\r | |
| 584 | tabBar.move(0, 2);\r | |
| 585 | // Check the reordered state\r | |
| 586 | expect(tabBar.getComponent(0).text).toBe('Tab 2');\r | |
| 587 | expect(tabBar.getComponent(1).text).toBe('Tab 3');\r | |
| 588 | expect(tabBar.getComponent(2).text).toBe('Tab 1');\r | |
| 589 | \r | |
| 590 | tabPanel.move(0, 2);\r | |
| 591 | // Check the movemenrt of the cards has not blindly passed\r | |
| 592 | // the movement on and de-synchronized the tab items order.\r | |
| 593 | expect(tabBar.getComponent(0).text).toBe('Tab 2');\r | |
| 594 | expect(tabBar.getComponent(1).text).toBe('Tab 3');\r | |
| 595 | expect(tabBar.getComponent(2).text).toBe('Tab 1');\r | |
| 596 | });\r | |
| 597 | });\r | |
| 598 | }); |