projects / extjs.git / blame
| Commit | Line | Data |
|---|---|---|
| 6527f429 DM |
1 | describe("Ext.form.field.TextArea", function() {\r |
| 2 | var component, makeComponent;\r | |
| 3 | \r | |
| 4 | function expectAria(attr, value) {\r | |
| 5 | jasmine.expectAriaAttr(component, attr, value);\r | |
| 6 | }\r | |
| 7 | \r | |
| 8 | beforeEach(function() {\r | |
| 9 | makeComponent = function(config) {\r | |
| 10 | config = config || {};\r | |
| 11 | Ext.applyIf(config, {\r | |
| 12 | name: 'test'\r | |
| 13 | });\r | |
| 14 | \r | |
| 15 | if (component) {\r | |
| 16 | component.destroy();\r | |
| 17 | }\r | |
| 18 | \r | |
| 19 | component = new Ext.form.field.TextArea(config);\r | |
| 20 | };\r | |
| 21 | });\r | |
| 22 | \r | |
| 23 | afterEach(function() {\r | |
| 24 | if (component) {\r | |
| 25 | component.destroy();\r | |
| 26 | }\r | |
| 27 | component = makeComponent = null;\r | |
| 28 | });\r | |
| 29 | \r | |
| 30 | it("should encode the input value in the template", function(){\r | |
| 31 | makeComponent({\r | |
| 32 | renderTo: Ext.getBody(),\r | |
| 33 | value: 'test " <br/> test'\r | |
| 34 | });\r | |
| 35 | expect(component.inputEl.dom.value).toBe('test " <br/> test');\r | |
| 36 | });\r | |
| 37 | \r | |
| 38 | it("should be able to set a numeric value", function(){\r | |
| 39 | makeComponent({\r | |
| 40 | renderTo: Ext.getBody()\r | |
| 41 | }); \r | |
| 42 | component.setValue(100);\r | |
| 43 | expect(component.getValue()).toBe('100');\r | |
| 44 | });\r | |
| 45 | \r | |
| 46 | \r | |
| 47 | describe("defaults", function() {\r | |
| 48 | beforeEach(function() {\r | |
| 49 | makeComponent();\r | |
| 50 | });\r | |
| 51 | \r | |
| 52 | it("should have growMin = 60", function() {\r | |
| 53 | expect(component.growMin).toEqual(60);\r | |
| 54 | });\r | |
| 55 | it("should have growMax = 1000", function() {\r | |
| 56 | expect(component.growMax).toEqual(1000);\r | |
| 57 | });\r | |
| 58 | it("should have growAppend = '\n-'", function() {\r | |
| 59 | expect(component.growAppend).toEqual('\n-');\r | |
| 60 | });\r | |
| 61 | it("should have enterIsSpecial = false", function() {\r | |
| 62 | expect(component.enterIsSpecial).toBe(false);\r | |
| 63 | });\r | |
| 64 | it("should have preventScrollbars = false", function() {\r | |
| 65 | expect(component.preventScrollbars).toBe(false);\r | |
| 66 | });\r | |
| 67 | });\r | |
| 68 | \r | |
| 69 | \r | |
| 70 | describe("rendering", function() {\r | |
| 71 | // NOTE this doesn't yet test the main label, error icon, etc. just the parts specific to TextArea.\r | |
| 72 | \r | |
| 73 | beforeEach(function() {\r | |
| 74 | makeComponent({\r | |
| 75 | name: 'fieldName',\r | |
| 76 | value: 'fieldValue',\r | |
| 77 | tabIndex: 5,\r | |
| 78 | renderTo: Ext.getBody()\r | |
| 79 | });\r | |
| 80 | });\r | |
| 81 | \r | |
| 82 | describe("bodyEl", function() {\r | |
| 83 | it("should have the class 'x-form-item-body'", function() {\r | |
| 84 | expect(component.bodyEl.hasCls('x-form-item-body')).toBe(true);\r | |
| 85 | });\r | |
| 86 | \r | |
| 87 | it("should have the id '[id]-bodyEl'", function() {\r | |
| 88 | expect(component.bodyEl.dom.id).toEqual(component.id + '-bodyEl');\r | |
| 89 | });\r | |
| 90 | });\r | |
| 91 | \r | |
| 92 | describe("inputEl", function() {\r | |
| 93 | it("should be a textarea element", function() {\r | |
| 94 | expect(component.inputEl.dom.tagName.toLowerCase()).toEqual('textarea');\r | |
| 95 | });\r | |
| 96 | \r | |
| 97 | it("should have the component's inputId as its id", function() {\r | |
| 98 | expect(component.inputEl.dom.id).toEqual(component.inputId);\r | |
| 99 | });\r | |
| 100 | \r | |
| 101 | it("should have the 'fieldCls' config as a class", function() {\r | |
| 102 | expect(component.inputEl.hasCls(component.fieldCls)).toBe(true);\r | |
| 103 | });\r | |
| 104 | \r | |
| 105 | it("should have a class of 'x-form-text'", function() {\r | |
| 106 | expect(component.inputEl.hasCls('x-form-text')).toBe(true);\r | |
| 107 | });\r | |
| 108 | \r | |
| 109 | it("should have its name set to the 'name' config", function() {\r | |
| 110 | expect(component.inputEl.dom.name).toEqual('fieldName');\r | |
| 111 | });\r | |
| 112 | \r | |
| 113 | it("should have its value set to the 'value' config", function() {\r | |
| 114 | expect(component.inputEl.dom.value).toEqual('fieldValue');\r | |
| 115 | });\r | |
| 116 | \r | |
| 117 | it("should have autocomplete = 'off'", function() {\r | |
| 118 | expect(component.inputEl.dom.getAttribute('autocomplete')).toEqual('off');\r | |
| 119 | });\r | |
| 120 | \r | |
| 121 | it("should have tabindex set to the tabIndex config", function() {\r | |
| 122 | expect('' + component.inputEl.dom.getAttribute("tabIndex")).toEqual('5');\r | |
| 123 | });\r | |
| 124 | });\r | |
| 125 | \r | |
| 126 | describe("ariaEl", function() {\r | |
| 127 | it("should be inputEl", function() {\r | |
| 128 | expect(component.ariaEl).toBe(component.inputEl);\r | |
| 129 | });\r | |
| 130 | });\r | |
| 131 | \r | |
| 132 | describe("ARIA attributes", function() {\r | |
| 133 | it("should have textbox role", function() {\r | |
| 134 | expectAria('role', 'textbox');\r | |
| 135 | });\r | |
| 136 | \r | |
| 137 | it("should have aria-multiline attribute", function() {\r | |
| 138 | expectAria('aria-multiline', 'true');\r | |
| 139 | });\r | |
| 140 | });\r | |
| 141 | \r | |
| 142 | xdescribe("sizing", function(){\r | |
| 143 | it("should have the cols property affect size when shrink wrapping", function(){\r | |
| 144 | var width = component.getWidth();\r | |
| 145 | component.destroy();\r | |
| 146 | makeComponent({\r | |
| 147 | rows: 10,\r | |
| 148 | cols: 40,\r | |
| 149 | renderTo: Ext.getBody()\r | |
| 150 | });\r | |
| 151 | expect(component.getWidth()).toBeGreaterThan(width);\r | |
| 152 | component.destroy();\r | |
| 153 | makeComponent({\r | |
| 154 | rows: 10,\r | |
| 155 | cols: 10,\r | |
| 156 | renderTo: Ext.getBody()\r | |
| 157 | });\r | |
| 158 | expect(component.getWidth()).toBeLessThan(width);\r | |
| 159 | });\r | |
| 160 | \r | |
| 161 | it("should give preference to a calculated/configured width", function(){\r | |
| 162 | component.destroy();\r | |
| 163 | makeComponent({\r | |
| 164 | rows: 10,\r | |
| 165 | cols: 40,\r | |
| 166 | width: 500,\r | |
| 167 | renderTo: Ext.getBody()\r | |
| 168 | });\r | |
| 169 | expect(component.getWidth()).toBe(500);\r | |
| 170 | });\r | |
| 171 | \r | |
| 172 | it("should account for a top label when sizing", function() {\r | |
| 173 | component.destroy();\r | |
| 174 | makeComponent({\r | |
| 175 | renderTo: Ext.getBody(),\r | |
| 176 | width: 100,\r | |
| 177 | height: 100,\r | |
| 178 | labelAlign: 'top',\r | |
| 179 | fieldLabel: 'A label'\r | |
| 180 | });\r | |
| 181 | \r | |
| 182 | var label = component.labelEl,\r | |
| 183 | expected = 100 - (label.getHeight() + label.getMargin('tb'));\r | |
| 184 | \r | |
| 185 | expect(component.inputEl.getHeight()).toBe(expected);\r | |
| 186 | });\r | |
| 187 | });\r | |
| 188 | });\r | |
| 189 | \r | |
| 190 | // TODO: https://sencha.jira.com/browse/EXTJS-18488\r | |
| 191 | (Ext.isIE8 ? xdescribe : describe)("autoSize method and grow configs", function() {\r | |
| 192 | function makeLines(n) {\r | |
| 193 | var out = [],\r | |
| 194 | i;\r | |
| 195 | \r | |
| 196 | for (i = 0; i < n; ++i) {\r | |
| 197 | out.push('a');\r | |
| 198 | }\r | |
| 199 | return out.join('\n')\r | |
| 200 | }\r | |
| 201 | \r | |
| 202 | describe("with an auto height", function() {\r | |
| 203 | beforeEach(function() {\r | |
| 204 | makeComponent({\r | |
| 205 | grow: true,\r | |
| 206 | growMin: 40,\r | |
| 207 | growMax: 200,\r | |
| 208 | renderTo: Ext.getBody()\r | |
| 209 | });\r | |
| 210 | });\r | |
| 211 | \r | |
| 212 | it("should auto height with an initial value", function() {\r | |
| 213 | component.destroy();\r | |
| 214 | makeComponent({\r | |
| 215 | grow: true,\r | |
| 216 | growMin: 40,\r | |
| 217 | growMax: 500,\r | |
| 218 | renderTo: Ext.getBody(),\r | |
| 219 | value: makeLines(10)\r | |
| 220 | });\r | |
| 221 | expect(component.getHeight()).toBeLessThan(500);\r | |
| 222 | expect(component.getHeight()).toBeGreaterThan(40);\r | |
| 223 | });\r | |
| 224 | \r | |
| 225 | it("should set the initial textarea height to growMin", function() {\r | |
| 226 | expect(component.getHeight()).toBe(40);\r | |
| 227 | });\r | |
| 228 | \r | |
| 229 | it("should increase the height of the input as the value becomes taller", function() {\r | |
| 230 | component.setValue(makeLines(4));\r | |
| 231 | var height1 = component.getHeight();\r | |
| 232 | component.setValue(makeLines(5));\r | |
| 233 | var height2 = component.getHeight();\r | |
| 234 | expect(height2).toBeGreaterThan(height1);\r | |
| 235 | });\r | |
| 236 | \r | |
| 237 | it("should decrease the height of the input as the value becomes shorter", function() {\r | |
| 238 | component.setValue('A\nB\nC\nD\nE');\r | |
| 239 | var height1 = component.inputEl.getHeight();\r | |
| 240 | component.setValue('A\nB\nC\nD');\r | |
| 241 | var height2 = component.inputEl.getHeight();\r | |
| 242 | expect(height2).toBeLessThan(height1);\r | |
| 243 | });\r | |
| 244 | \r | |
| 245 | it("should not increase the height above the growMax config", function() {\r | |
| 246 | component.setValue(makeLines(50));\r | |
| 247 | var height = component.getHeight();\r | |
| 248 | expect(height).toBe(200);\r | |
| 249 | });\r | |
| 250 | \r | |
| 251 | it("should not decrease the height below the growMin config", function() {\r | |
| 252 | component.setValue('');\r | |
| 253 | var height = component.getHeight();\r | |
| 254 | expect(height).toBe(40);\r | |
| 255 | });\r | |
| 256 | \r | |
| 257 | it("should work with markup", function(){\r | |
| 258 | component.setValue('<fake tag appears here with longer text that should cause the field to grow');\r | |
| 259 | expect(component.getHeight()).toBeGreaterThan(40);\r | |
| 260 | });\r | |
| 261 | });\r | |
| 262 | \r | |
| 263 | describe("with a fixed height", function() {\r | |
| 264 | it("should have no effect on a configured height", function() {\r | |
| 265 | makeComponent({\r | |
| 266 | renderTo: Ext.getBody(),\r | |
| 267 | grow: true,\r | |
| 268 | growMin: 100,\r | |
| 269 | height: 150,\r | |
| 270 | growMax: 700\r | |
| 271 | });\r | |
| 272 | component.setValue(makeLines(100));\r | |
| 273 | expect(component.getHeight()).toBe(150);\r | |
| 274 | });\r | |
| 275 | \r | |
| 276 | it("should have no effect on a calculated height", function() {\r | |
| 277 | makeComponent({\r | |
| 278 | grow: true,\r | |
| 279 | growMin: 100,\r | |
| 280 | growMax: 700\r | |
| 281 | });\r | |
| 282 | \r | |
| 283 | var ct = new Ext.container.Container({\r | |
| 284 | renderTo: Ext.getBody(),\r | |
| 285 | layout: 'fit',\r | |
| 286 | width: 150,\r | |
| 287 | height: 150,\r | |
| 288 | items: component\r | |
| 289 | });\r | |
| 290 | component.setValue(makeLines(100));\r | |
| 291 | expect(component.getHeight()).toBe(150);\r | |
| 292 | ct.destroy();\r | |
| 293 | });\r | |
| 294 | });\r | |
| 295 | });\r | |
| 296 | \r | |
| 297 | \r | |
| 298 | describe("readOnly", function() {\r | |
| 299 | describe("readOnly config", function() {\r | |
| 300 | it("should set the readonly attribute of the field when rendered", function() {\r | |
| 301 | makeComponent({\r | |
| 302 | readOnly: true,\r | |
| 303 | renderTo: Ext.getBody()\r | |
| 304 | });\r | |
| 305 | expect(component.inputEl.dom.readOnly).toBe(true);\r | |
| 306 | });\r | |
| 307 | });\r | |
| 308 | \r | |
| 309 | describe("setReadOnly method", function() {\r | |
| 310 | it("should set the readOnly state of the field immediately if rendered", function() {\r | |
| 311 | makeComponent({\r | |
| 312 | renderTo: Ext.getBody()\r | |
| 313 | });\r | |
| 314 | component.setReadOnly(true);\r | |
| 315 | expect(component.inputEl.dom.readOnly).toBe(true);\r | |
| 316 | });\r | |
| 317 | \r | |
| 318 | it("should remember the value if the field has not yet been rendered", function() {\r | |
| 319 | makeComponent();\r | |
| 320 | component.setReadOnly(true);\r | |
| 321 | component.render(Ext.getBody());\r | |
| 322 | expect(component.inputEl.dom.readOnly).toBe(true);\r | |
| 323 | });\r | |
| 324 | });\r | |
| 325 | });\r | |
| 326 | \r | |
| 327 | describe("preventScrollbars config", function() {\r | |
| 328 | it("should set overflow:hidden on the textarea if true", function() {\r | |
| 329 | makeComponent({\r | |
| 330 | grow: true,\r | |
| 331 | preventScrollbars: true,\r | |
| 332 | renderTo: Ext.getBody()\r | |
| 333 | });\r | |
| 334 | expect(component.inputEl.getStyle('overflow')).toEqual('hidden');\r | |
| 335 | });\r | |
| 336 | it("should should do nothing if preventScrollbars is false", function() {\r | |
| 337 | makeComponent({\r | |
| 338 | grow: true,\r | |
| 339 | preventScrollbars: false,\r | |
| 340 | renderTo: Ext.getBody()\r | |
| 341 | });\r | |
| 342 | expect(component.inputEl.dom.style.overflow).not.toEqual('hidden');\r | |
| 343 | });\r | |
| 344 | it("should should do nothing if grow is false", function() {\r | |
| 345 | makeComponent({\r | |
| 346 | grow: false,\r | |
| 347 | preventScrollbars: true,\r | |
| 348 | renderTo: Ext.getBody()\r | |
| 349 | });\r | |
| 350 | expect(component.inputEl.getStyle('overflow')).not.toEqual('hidden');\r | |
| 351 | });\r | |
| 352 | });\r | |
| 353 | \r | |
| 354 | describe("initial value", function() {\r | |
| 355 | var makeComponentWithInitialValueAndExpectValueToBeExactAndNonDirty = function(initialValue) {\r | |
| 356 | makeComponent({\r | |
| 357 | value: initialValue\r | |
| 358 | });\r | |
| 359 | expect(component.getValue()).toBe(initialValue);\r | |
| 360 | expect(component.isDirty()).toBeFalsy();\r | |
| 361 | };\r | |
| 362 | \r | |
| 363 | it("should not insert unspecified new lines", function() {\r | |
| 364 | makeComponentWithInitialValueAndExpectValueToBeExactAndNonDirty('initial value');\r | |
| 365 | makeComponentWithInitialValueAndExpectValueToBeExactAndNonDirty(' initial value ');\r | |
| 366 | makeComponentWithInitialValueAndExpectValueToBeExactAndNonDirty(' initial value ');\r | |
| 367 | makeComponentWithInitialValueAndExpectValueToBeExactAndNonDirty(' ');\r | |
| 368 | makeComponentWithInitialValueAndExpectValueToBeExactAndNonDirty(' ');\r | |
| 369 | });\r | |
| 370 | \r | |
| 371 | it("should preserve new lines", function() {\r | |
| 372 | makeComponentWithInitialValueAndExpectValueToBeExactAndNonDirty('\ninitial value');\r | |
| 373 | makeComponentWithInitialValueAndExpectValueToBeExactAndNonDirty('\n\ninitial value');\r | |
| 374 | makeComponentWithInitialValueAndExpectValueToBeExactAndNonDirty(' initial value');\r | |
| 375 | makeComponentWithInitialValueAndExpectValueToBeExactAndNonDirty(' \ninitial value');\r | |
| 376 | makeComponentWithInitialValueAndExpectValueToBeExactAndNonDirty('\n initial value');\r | |
| 377 | makeComponentWithInitialValueAndExpectValueToBeExactAndNonDirty('initial\nvalue');\r | |
| 378 | makeComponentWithInitialValueAndExpectValueToBeExactAndNonDirty('initial \n value');\r | |
| 379 | makeComponentWithInitialValueAndExpectValueToBeExactAndNonDirty('initial \n\n value');\r | |
| 380 | makeComponentWithInitialValueAndExpectValueToBeExactAndNonDirty('initial \n \n value');\r | |
| 381 | makeComponentWithInitialValueAndExpectValueToBeExactAndNonDirty('initial value\n');\r | |
| 382 | makeComponentWithInitialValueAndExpectValueToBeExactAndNonDirty('initial value\n\n');\r | |
| 383 | });\r | |
| 384 | \r | |
| 385 | it("should preserve empty strings", function() {\r | |
| 386 | makeComponentWithInitialValueAndExpectValueToBeExactAndNonDirty('\n');\r | |
| 387 | makeComponentWithInitialValueAndExpectValueToBeExactAndNonDirty(' \n ');\r | |
| 388 | makeComponentWithInitialValueAndExpectValueToBeExactAndNonDirty(' \n ');\r | |
| 389 | makeComponentWithInitialValueAndExpectValueToBeExactAndNonDirty(' \n \n ');\r | |
| 390 | makeComponentWithInitialValueAndExpectValueToBeExactAndNonDirty(' \n \n ');\r | |
| 391 | makeComponentWithInitialValueAndExpectValueToBeExactAndNonDirty('\n \n');\r | |
| 392 | makeComponentWithInitialValueAndExpectValueToBeExactAndNonDirty('\n \n');\r | |
| 393 | });\r | |
| 394 | });\r | |
| 395 | \r | |
| 396 | describe("carriage returns", function(){\r | |
| 397 | var s = 'line1\r\nline2';\r | |
| 398 | \r | |
| 399 | var expectNoCarriageReturns = function(){\r | |
| 400 | expect(component.getValue().indexOf('\r')).toBe(-1); \r | |
| 401 | };\r | |
| 402 | \r | |
| 403 | var expectNoCarriageReturnsAndNotDirty = function() {\r | |
| 404 | expectNoCarriageReturns(); \r | |
| 405 | expect(component.isDirty()).toBe(false); \r | |
| 406 | };\r | |
| 407 | \r | |
| 408 | it("should strip carriage returns from the initial value before render", function(){\r | |
| 409 | makeComponent({\r | |
| 410 | value: s\r | |
| 411 | });\r | |
| 412 | expectNoCarriageReturnsAndNotDirty();\r | |
| 413 | });\r | |
| 414 | \r | |
| 415 | it("should strip carriage returns from the initial value after render", function(){\r | |
| 416 | makeComponent({\r | |
| 417 | value: s,\r | |
| 418 | renderTo: Ext.getBody()\r | |
| 419 | });\r | |
| 420 | expectNoCarriageReturnsAndNotDirty();\r | |
| 421 | });\r | |
| 422 | \r | |
| 423 | it("should strip carriage returns when we call setValue before rendering", function(){\r | |
| 424 | makeComponent(); \r | |
| 425 | component.setValue(s);\r | |
| 426 | expectNoCarriageReturns();\r | |
| 427 | });\r | |
| 428 | \r | |
| 429 | it("should strip carriage returns when we call setValue after rendering", function(){\r | |
| 430 | makeComponent({\r | |
| 431 | renderTo: Ext.getBody()\r | |
| 432 | });\r | |
| 433 | component.setValue(s);\r | |
| 434 | expectNoCarriageReturns();\r | |
| 435 | });\r | |
| 436 | });\r | |
| 437 | \r | |
| 438 | describe("validation", function(){\r | |
| 439 | describe("allowBlank", function(){\r | |
| 440 | it("should not allow only newlines and spaces when used with allowOnlyWhitespace: false", function(){\r | |
| 441 | makeComponent({\r | |
| 442 | allowOnlyWhitespace: false,\r | |
| 443 | value: ' \n\n \n\n'\r | |
| 444 | }); \r | |
| 445 | expect(component.getErrors()).toContain('This field is required'); \r | |
| 446 | }); \r | |
| 447 | }); \r | |
| 448 | });\r | |
| 449 | \r | |
| 450 | (Ext.isIE8 ? xdescribe : describe)("foo", function() {\r | |
| 451 | it("should start out at growMin", function() {\r | |
| 452 | makeComponent({\r | |
| 453 | renderTo: document.body,\r | |
| 454 | grow: true,\r | |
| 455 | growMin: 50\r | |
| 456 | });\r | |
| 457 | \r | |
| 458 | expect(component.getHeight()).toBe(50);\r | |
| 459 | });\r | |
| 460 | \r | |
| 461 | it("should initially render at the height of the text", function() {\r | |
| 462 | makeComponent({\r | |
| 463 | renderTo: document.body,\r | |
| 464 | value: 'm\nm\nm\nm\nm\nm\nm',\r | |
| 465 | grow: true,\r | |
| 466 | growMin: 50\r | |
| 467 | });\r | |
| 468 | \r | |
| 469 | expect(component.getHeight()).toBe(117);\r | |
| 470 | });\r | |
| 471 | \r | |
| 472 | it("should initially render with a height of growMax if initial text height exceeds growMax", function() {\r | |
| 473 | makeComponent({\r | |
| 474 | renderTo: document.body,\r | |
| 475 | value: 'm\nm\nm\nm\nm\nm\nm\nm\nm\nm\nm\nm\nm\nm\nm\nm\nm\nm',\r | |
| 476 | grow: true,\r | |
| 477 | growMax: 200\r | |
| 478 | });\r | |
| 479 | \r | |
| 480 | expect(component.getHeight()).toBe(200);\r | |
| 481 | });\r | |
| 482 | \r | |
| 483 | it("should grow and shrink", function() {\r | |
| 484 | makeComponent({\r | |
| 485 | renderTo: document.body,\r | |
| 486 | grow: true,\r | |
| 487 | growMin: 50,\r | |
| 488 | growMax: 100\r | |
| 489 | });\r | |
| 490 | \r | |
| 491 | expect(component.getHeight()).toBe(50);\r | |
| 492 | \r | |
| 493 | component.setValue('m\nm\nm\nm');\r | |
| 494 | \r | |
| 495 | expect(component.getHeight()).toBe(75);\r | |
| 496 | \r | |
| 497 | component.setValue('m\nm\nm\nm\nm\nm\nm\nm\nm\nm');\r | |
| 498 | \r | |
| 499 | expect(component.getHeight()).toBe(100);\r | |
| 500 | \r | |
| 501 | component.setValue('m\nm\nm\nm');\r | |
| 502 | \r | |
| 503 | expect(component.getHeight()).toBe(75);\r | |
| 504 | \r | |
| 505 | component.setValue('m');\r | |
| 506 | \r | |
| 507 | expect(component.getHeight()).toBe(50);\r | |
| 508 | });\r | |
| 509 | });\r | |
| 510 | \r | |
| 511 | describe('layout', function() {\r | |
| 512 | var dimensions = {\r | |
| 513 | 1: 'width',\r | |
| 514 | 2: 'height',\r | |
| 515 | 3: 'width and height'\r | |
| 516 | };\r | |
| 517 | \r | |
| 518 | function makeLayoutSuite(shrinkWrap, autoFitErrors) {\r | |
| 519 | describe((shrinkWrap ? ("shrink wrap " + dimensions[shrinkWrap]) : "fixed width and height") +\r | |
| 520 | " autoFitErrors: " + autoFitErrors, function() {\r | |
| 521 | var shrinkWidth = (shrinkWrap & 1),\r | |
| 522 | shrinkHeight = (shrinkWrap & 2),\r | |
| 523 | errorWidth = 18, // the width of the error when side aligned\r | |
| 524 | errorHeight = 20, // the height of the error when bottom aligned\r | |
| 525 | errorIconSize = 16, // the size of the error icon element\r | |
| 526 | errorIconMargin = 1, // the left margin of the error icon element\r | |
| 527 | labelWidth = 105, // the width of the label when side aligned\r | |
| 528 | labelPadding = 5, // right padding of the label when side aligned\r | |
| 529 | labelInnerY = [3, 4], // the y offset of the inner label element when side aligned\r | |
| 530 | labelInnerWidth = labelWidth - labelPadding, // the width of the inner label element when side aligned\r | |
| 531 | borderWidth = 1, // the width of the textarea border\r | |
| 532 | bodyWidth = 150, // the width of the bodyEl\r | |
| 533 | bodyHeight = shrinkHeight ? 58 : 100, // the height of the bodyEl\r | |
| 534 | labelHeight = 23, // the height of the label when top aligned\r | |
| 535 | hideLabel, topLabel, width, height;\r | |
| 536 | \r | |
| 537 | function create(cfg) {\r | |
| 538 | cfg = cfg || {};\r | |
| 539 | \r | |
| 540 | hideLabel = cfg.hideLabel;\r | |
| 541 | topLabel = (cfg.labelAlign === 'top');\r | |
| 542 | width = bodyWidth;\r | |
| 543 | height = bodyHeight;\r | |
| 544 | \r | |
| 545 | if (!hideLabel && !topLabel) {\r | |
| 546 | width += labelWidth;\r | |
| 547 | }\r | |
| 548 | \r | |
| 549 | if (!hideLabel && topLabel) {\r | |
| 550 | height += labelHeight;\r | |
| 551 | }\r | |
| 552 | \r | |
| 553 | if (cfg.msgTarget === 'side') {\r | |
| 554 | width += errorWidth;\r | |
| 555 | }\r | |
| 556 | \r | |
| 557 | if (cfg.msgTarget === 'under') {\r | |
| 558 | height += errorHeight;\r | |
| 559 | }\r | |
| 560 | \r | |
| 561 | component = Ext.create('Ext.form.field.TextArea', Ext.apply({\r | |
| 562 | renderTo: document.body,\r | |
| 563 | height: shrinkHeight ? null : height,\r | |
| 564 | width: shrinkWidth ? null : width,\r | |
| 565 | autoFitErrors: autoFitErrors,\r | |
| 566 | // use a fixed size element vs. text for the field label for\r | |
| 567 | // consistency of measurement cross-browser\r | |
| 568 | fieldLabel: '<span style="display:inline-block;width:' + labelInnerWidth +\r | |
| 569 | 'px;background-color:red;"> </span>',\r | |
| 570 | labelSeparator: ''\r | |
| 571 | }, cfg));\r | |
| 572 | }\r | |
| 573 | \r | |
| 574 | function setError(msg) {\r | |
| 575 | component.setActiveError(msg || "Error Message");\r | |
| 576 | }\r | |
| 577 | \r | |
| 578 | // makes a suite for side labels (labelAlign: 'left' or labelAlign: 'right')\r | |
| 579 | // The specs contained herein should produce identical results for left\r | |
| 580 | // and right alignment, with the exception of the text align of the\r | |
| 581 | // label's inner element.\r | |
| 582 | function makeSideLabelSuite(labelAlign) {\r | |
| 583 | describe(labelAlign + " label", function() {\r | |
| 584 | var leftLabel = (labelAlign === 'left');\r | |
| 585 | \r | |
| 586 | // TODO: EXTJS-12634\r | |
| 587 | (Ext.isIE8 ? xit : it)("should layout", function() {\r | |
| 588 | create({\r | |
| 589 | labelAlign: labelAlign\r | |
| 590 | });\r | |
| 591 | \r | |
| 592 | expect(component).toHaveLayout({\r | |
| 593 | el: {\r | |
| 594 | w: width,\r | |
| 595 | h: height\r | |
| 596 | },\r | |
| 597 | labelEl: {\r | |
| 598 | x: 0,\r | |
| 599 | y: 0,\r | |
| 600 | w: labelWidth,\r | |
| 601 | h: height\r | |
| 602 | },\r | |
| 603 | '.x-form-item-label-inner': {\r | |
| 604 | x: leftLabel ? 0 : labelWidth - labelPadding - labelInnerWidth,\r | |
| 605 | y: labelInnerY,\r | |
| 606 | w: labelInnerWidth\r | |
| 607 | },\r | |
| 608 | bodyEl: {\r | |
| 609 | x: labelWidth,\r | |
| 610 | y: 0,\r | |
| 611 | w: bodyWidth,\r | |
| 612 | h: bodyHeight\r | |
| 613 | },\r | |
| 614 | inputEl: {\r | |
| 615 | x: labelWidth + borderWidth,\r | |
| 616 | y: borderWidth,\r | |
| 617 | w: bodyWidth - (borderWidth * 2),\r | |
| 618 | h: bodyHeight - (borderWidth * 2)\r | |
| 619 | }\r | |
| 620 | });\r | |
| 621 | expect(component.errorWrapEl).toBeNull();\r | |
| 622 | });\r | |
| 623 | \r | |
| 624 | // TODO: EXTJS-12634\r | |
| 625 | (Ext.isIE8 ? xit : it)("should layout with side error", function() {\r | |
| 626 | create({\r | |
| 627 | labelAlign: labelAlign,\r | |
| 628 | msgTarget: 'side'\r | |
| 629 | });\r | |
| 630 | \r | |
| 631 | setError();\r | |
| 632 | \r | |
| 633 | expect(component).toHaveLayout({\r | |
| 634 | el: {\r | |
| 635 | w: width,\r | |
| 636 | h: height\r | |
| 637 | },\r | |
| 638 | labelEl: {\r | |
| 639 | x: 0,\r | |
| 640 | y: 0,\r | |
| 641 | w: labelWidth,\r | |
| 642 | h: height\r | |
| 643 | },\r | |
| 644 | '.x-form-item-label-inner': {\r | |
| 645 | x: leftLabel ? 0 : labelWidth - labelPadding - labelInnerWidth,\r | |
| 646 | y: labelInnerY,\r | |
| 647 | w: labelInnerWidth\r | |
| 648 | },\r | |
| 649 | bodyEl: {\r | |
| 650 | x: labelWidth,\r | |
| 651 | y: 0,\r | |
| 652 | w: bodyWidth,\r | |
| 653 | h: bodyHeight\r | |
| 654 | },\r | |
| 655 | inputEl: {\r | |
| 656 | x: labelWidth + borderWidth,\r | |
| 657 | y: borderWidth,\r | |
| 658 | w: bodyWidth - (borderWidth * 2),\r | |
| 659 | h: bodyHeight - (borderWidth * 2)\r | |
| 660 | },\r | |
| 661 | errorWrapEl: {\r | |
| 662 | x: width - errorWidth,\r | |
| 663 | y: 0,\r | |
| 664 | w: errorWidth,\r | |
| 665 | h: height\r | |
| 666 | },\r | |
| 667 | errorEl: {\r | |
| 668 | x: width - errorWidth + errorIconMargin,\r | |
| 669 | y: (bodyHeight - errorIconSize) / 2,\r | |
| 670 | w: errorIconSize,\r | |
| 671 | h: errorIconSize\r | |
| 672 | }\r | |
| 673 | });\r | |
| 674 | });\r | |
| 675 | \r | |
| 676 | // TODO: EXTJS-12634\r | |
| 677 | (Ext.isIE8 ? xit : it)("should layout with hidden side error", function() {\r | |
| 678 | create({\r | |
| 679 | labelAlign: labelAlign,\r | |
| 680 | msgTarget: 'side'\r | |
| 681 | });\r | |
| 682 | \r | |
| 683 | var bdWidth = (autoFitErrors && !shrinkWidth) ? bodyWidth + errorWidth : bodyWidth;\r | |
| 684 | \r | |
| 685 | expect(component).toHaveLayout({\r | |
| 686 | el: {\r | |
| 687 | w: (shrinkWidth && autoFitErrors) ? width - errorWidth : width,\r | |
| 688 | h: height\r | |
| 689 | },\r | |
| 690 | labelEl: {\r | |
| 691 | x: 0,\r | |
| 692 | y: 0,\r | |
| 693 | w: labelWidth,\r | |
| 694 | h: height\r | |
| 695 | },\r | |
| 696 | '.x-form-item-label-inner': {\r | |
| 697 | x: leftLabel ? 0 : labelWidth - labelPadding - labelInnerWidth,\r | |
| 698 | y: labelInnerY,\r | |
| 699 | w: labelInnerWidth\r | |
| 700 | },\r | |
| 701 | bodyEl: {\r | |
| 702 | x: labelWidth,\r | |
| 703 | y: 0,\r | |
| 704 | w: bdWidth,\r | |
| 705 | h: bodyHeight\r | |
| 706 | },\r | |
| 707 | inputEl: {\r | |
| 708 | x: labelWidth + borderWidth,\r | |
| 709 | y: borderWidth,\r | |
| 710 | w: bdWidth - (borderWidth * 2),\r | |
| 711 | h: bodyHeight - (borderWidth * 2)\r | |
| 712 | },\r | |
| 713 | errorWrapEl: {\r | |
| 714 | x: autoFitErrors ? 0 : width - errorWidth,\r | |
| 715 | y: autoFitErrors ? 0 : 0,\r | |
| 716 | w: autoFitErrors ? 0 : errorWidth,\r | |
| 717 | h: autoFitErrors ? 0 : height\r | |
| 718 | },\r | |
| 719 | errorEl: {\r | |
| 720 | x: autoFitErrors ? 0 : width - errorWidth + errorIconMargin,\r | |
| 721 | y: autoFitErrors ? 0 : (bodyHeight - errorIconSize) / 2,\r | |
| 722 | w: autoFitErrors ? 0 : errorIconSize,\r | |
| 723 | h: autoFitErrors ? 0 : errorIconSize\r | |
| 724 | }\r | |
| 725 | });\r | |
| 726 | });\r | |
| 727 | \r | |
| 728 | // TODO: EXTJS-12634\r | |
| 729 | (Ext.isIE10m && !shrinkHeight ? xit : it)("should layout with under error", function() {\r | |
| 730 | create({\r | |
| 731 | labelAlign: labelAlign,\r | |
| 732 | msgTarget: 'under'\r | |
| 733 | });\r | |
| 734 | \r | |
| 735 | setError();\r | |
| 736 | \r | |
| 737 | expect(component).toHaveLayout({\r | |
| 738 | el: {\r | |
| 739 | w: width,\r | |
| 740 | h: height\r | |
| 741 | },\r | |
| 742 | labelEl: {\r | |
| 743 | x: 0,\r | |
| 744 | y: 0,\r | |
| 745 | w: labelWidth,\r | |
| 746 | h: bodyHeight\r | |
| 747 | },\r | |
| 748 | '.x-form-item-label-inner': {\r | |
| 749 | x: leftLabel ? 0 : labelWidth - labelPadding - labelInnerWidth,\r | |
| 750 | y: labelInnerY,\r | |
| 751 | w: labelInnerWidth\r | |
| 752 | },\r | |
| 753 | bodyEl: {\r | |
| 754 | x: labelWidth,\r | |
| 755 | y: 0,\r | |
| 756 | w: bodyWidth,\r | |
| 757 | h: bodyHeight\r | |
| 758 | },\r | |
| 759 | inputEl: {\r | |
| 760 | x: labelWidth + borderWidth,\r | |
| 761 | y: borderWidth,\r | |
| 762 | w: bodyWidth - (borderWidth * 2),\r | |
| 763 | h: bodyHeight - (borderWidth * 2)\r | |
| 764 | },\r | |
| 765 | errorWrapEl: {\r | |
| 766 | x: 0,\r | |
| 767 | y: bodyHeight,\r | |
| 768 | w: width,\r | |
| 769 | h: errorHeight\r | |
| 770 | },\r | |
| 771 | errorEl: {\r | |
| 772 | x: labelWidth,\r | |
| 773 | y: bodyHeight,\r | |
| 774 | w: bodyWidth,\r | |
| 775 | h: errorHeight\r | |
| 776 | }\r | |
| 777 | });\r | |
| 778 | });\r | |
| 779 | \r | |
| 780 | // TODO: EXTJS-12634\r | |
| 781 | (Ext.isIE8 ? xit : it)("should layout with hidden label", function() {\r | |
| 782 | create({\r | |
| 783 | labelAlign: labelAlign,\r | |
| 784 | hideLabel: true\r | |
| 785 | });\r | |
| 786 | \r | |
| 787 | expect(component).toHaveLayout({\r | |
| 788 | el: {\r | |
| 789 | w: width,\r | |
| 790 | h: height\r | |
| 791 | },\r | |
| 792 | labelEl: {\r | |
| 793 | xywh: '0 0 0 0'\r | |
| 794 | },\r | |
| 795 | bodyEl: {\r | |
| 796 | x: 0,\r | |
| 797 | y: 0,\r | |
| 798 | w: bodyWidth,\r | |
| 799 | h: bodyHeight\r | |
| 800 | }\r | |
| 801 | });\r | |
| 802 | expect(component.errorWrapEl).toBeNull();\r | |
| 803 | });\r | |
| 804 | \r | |
| 805 | // TODO: EXTJS-12634\r | |
| 806 | (Ext.isIE8 ? xit : it)("should layout with hidden label and side error", function() {\r | |
| 807 | create({\r | |
| 808 | labelAlign: labelAlign,\r | |
| 809 | hideLabel: true,\r | |
| 810 | msgTarget: 'side'\r | |
| 811 | });\r | |
| 812 | \r | |
| 813 | setError();\r | |
| 814 | \r | |
| 815 | expect(component).toHaveLayout({\r | |
| 816 | el: {\r | |
| 817 | w: width,\r | |
| 818 | h: height\r | |
| 819 | },\r | |
| 820 | labelEl: {\r | |
| 821 | xywh: '0 0 0 0'\r | |
| 822 | },\r | |
| 823 | bodyEl: {\r | |
| 824 | x: 0,\r | |
| 825 | y: 0,\r | |
| 826 | w: bodyWidth,\r | |
| 827 | h: bodyHeight\r | |
| 828 | },\r | |
| 829 | inputEl: {\r | |
| 830 | x: borderWidth,\r | |
| 831 | y: borderWidth,\r | |
| 832 | w: bodyWidth - (borderWidth * 2),\r | |
| 833 | h: bodyHeight - (borderWidth * 2)\r | |
| 834 | },\r | |
| 835 | errorWrapEl: {\r | |
| 836 | x: bodyWidth,\r | |
| 837 | y: 0,\r | |
| 838 | w: errorWidth,\r | |
| 839 | h: height\r | |
| 840 | },\r | |
| 841 | errorEl: {\r | |
| 842 | x: bodyWidth + errorIconMargin,\r | |
| 843 | y: (bodyHeight - errorIconSize) / 2,\r | |
| 844 | w: errorIconSize,\r | |
| 845 | h: errorIconSize\r | |
| 846 | }\r | |
| 847 | });\r | |
| 848 | });\r | |
| 849 | \r | |
| 850 | // TODO: EXTJS-12634\r | |
| 851 | (Ext.isIE8 ? xit : it)("should layout with hidden label and hidden side error", function() {\r | |
| 852 | create({\r | |
| 853 | labelAlign: labelAlign,\r | |
| 854 | hideLabel: true,\r | |
| 855 | msgTarget: 'side'\r | |
| 856 | });\r | |
| 857 | \r | |
| 858 | var bdWidth = (autoFitErrors && !shrinkWidth) ? bodyWidth + errorWidth : bodyWidth;\r | |
| 859 | \r | |
| 860 | expect(component).toHaveLayout({\r | |
| 861 | el: {\r | |
| 862 | w: (shrinkWidth && autoFitErrors) ? width - errorWidth : width,\r | |
| 863 | h: height\r | |
| 864 | },\r | |
| 865 | labelEl: {\r | |
| 866 | xywh: '0 0 0 0'\r | |
| 867 | },\r | |
| 868 | bodyEl: {\r | |
| 869 | x: 0,\r | |
| 870 | y: 0,\r | |
| 871 | w: bdWidth,\r | |
| 872 | h: bodyHeight\r | |
| 873 | },\r | |
| 874 | inputEl: {\r | |
| 875 | x: borderWidth,\r | |
| 876 | y: borderWidth,\r | |
| 877 | w: bdWidth - (borderWidth * 2),\r | |
| 878 | h: bodyHeight - (borderWidth * 2)\r | |
| 879 | },\r | |
| 880 | errorWrapEl: {\r | |
| 881 | x: autoFitErrors ? 0 : bodyWidth,\r | |
| 882 | y: autoFitErrors ? 0 : 0,\r | |
| 883 | w: autoFitErrors ? 0 : errorWidth,\r | |
| 884 | h: autoFitErrors ? 0 : height\r | |
| 885 | },\r | |
| 886 | errorEl: {\r | |
| 887 | x: autoFitErrors ? 0 : bodyWidth + errorIconMargin,\r | |
| 888 | y: autoFitErrors ? 0 : (bodyHeight - errorIconSize) / 2,\r | |
| 889 | w: autoFitErrors ? 0 : errorIconSize,\r | |
| 890 | h: autoFitErrors ? 0 : errorIconSize\r | |
| 891 | }\r | |
| 892 | });\r | |
| 893 | });\r | |
| 894 | \r | |
| 895 | // TODO: EXTJS-12634\r | |
| 896 | (Ext.isIE10m && !shrinkHeight ? xit : it)("should layout with hidden label and under error", function() {\r | |
| 897 | create({\r | |
| 898 | labelAlign: labelAlign,\r | |
| 899 | hideLabel: true,\r | |
| 900 | msgTarget: 'under'\r | |
| 901 | });\r | |
| 902 | \r | |
| 903 | setError();\r | |
| 904 | \r | |
| 905 | expect(component).toHaveLayout({\r | |
| 906 | el: {\r | |
| 907 | w: width,\r | |
| 908 | h: height\r | |
| 909 | },\r | |
| 910 | labelEl: {\r | |
| 911 | xywh: '0 0 0 0'\r | |
| 912 | },\r | |
| 913 | bodyEl: {\r | |
| 914 | x: 0,\r | |
| 915 | y: 0,\r | |
| 916 | w: bodyWidth,\r | |
| 917 | h: bodyHeight\r | |
| 918 | },\r | |
| 919 | inputEl: {\r | |
| 920 | x: borderWidth,\r | |
| 921 | y: borderWidth,\r | |
| 922 | w: bodyWidth - (borderWidth * 2),\r | |
| 923 | h: bodyHeight - (borderWidth * 2)\r | |
| 924 | },\r | |
| 925 | errorWrapEl: {\r | |
| 926 | x: 0,\r | |
| 927 | y: bodyHeight,\r | |
| 928 | w: width,\r | |
| 929 | h: errorHeight\r | |
| 930 | },\r | |
| 931 | errorEl: {\r | |
| 932 | x: 0,\r | |
| 933 | y: bodyHeight,\r | |
| 934 | w: width,\r | |
| 935 | h: errorHeight\r | |
| 936 | }\r | |
| 937 | });\r | |
| 938 | });\r | |
| 939 | });\r | |
| 940 | }\r | |
| 941 | \r | |
| 942 | makeSideLabelSuite('left'); // labelAlign: 'left'\r | |
| 943 | makeSideLabelSuite('right'); // labelAlign: 'right'\r | |
| 944 | \r | |
| 945 | // TODO: EXTJS-12634\r | |
| 946 | (Ext.isIE10m && !shrinkHeight ? xdescribe : describe)("top label", function() {\r | |
| 947 | it("should layout", function() {\r | |
| 948 | create({\r | |
| 949 | labelAlign: 'top'\r | |
| 950 | });\r | |
| 951 | \r | |
| 952 | expect(component).toHaveLayout({\r | |
| 953 | el: {\r | |
| 954 | w: width,\r | |
| 955 | h: height\r | |
| 956 | },\r | |
| 957 | labelEl: {\r | |
| 958 | x: 0,\r | |
| 959 | y: 0,\r | |
| 960 | w: width,\r | |
| 961 | h: labelHeight\r | |
| 962 | },\r | |
| 963 | '.x-form-item-label-inner': {\r | |
| 964 | x: 0,\r | |
| 965 | y: 0,\r | |
| 966 | w: width,\r | |
| 967 | h: labelHeight\r | |
| 968 | },\r | |
| 969 | bodyEl: {\r | |
| 970 | x: 0,\r | |
| 971 | y: labelHeight,\r | |
| 972 | w: bodyWidth,\r | |
| 973 | h: bodyHeight\r | |
| 974 | },\r | |
| 975 | inputEl: {\r | |
| 976 | x: borderWidth,\r | |
| 977 | y: labelHeight + borderWidth,\r | |
| 978 | w: bodyWidth - (borderWidth * 2),\r | |
| 979 | h: bodyHeight - (borderWidth * 2)\r | |
| 980 | }\r | |
| 981 | });\r | |
| 982 | expect(component.errorWrapEl).toBeNull();\r | |
| 983 | });\r | |
| 984 | \r | |
| 985 | it("should layout with side error", function() {\r | |
| 986 | create({\r | |
| 987 | labelAlign: 'top',\r | |
| 988 | msgTarget: 'side'\r | |
| 989 | });\r | |
| 990 | \r | |
| 991 | setError();\r | |
| 992 | \r | |
| 993 | expect(component).toHaveLayout({\r | |
| 994 | el: {\r | |
| 995 | w: width,\r | |
| 996 | h: height\r | |
| 997 | },\r | |
| 998 | labelEl: {\r | |
| 999 | x: 0,\r | |
| 1000 | y: 0,\r | |
| 1001 | w: width,\r | |
| 1002 | h: labelHeight\r | |
| 1003 | },\r | |
| 1004 | '.x-form-item-label-inner': {\r | |
| 1005 | x: 0,\r | |
| 1006 | y: 0,\r | |
| 1007 | w: bodyWidth,\r | |
| 1008 | h: labelHeight\r | |
| 1009 | },\r | |
| 1010 | bodyEl: {\r | |
| 1011 | x: 0,\r | |
| 1012 | y: labelHeight,\r | |
| 1013 | w: bodyWidth,\r | |
| 1014 | h: bodyHeight\r | |
| 1015 | },\r | |
| 1016 | inputEl: {\r | |
| 1017 | x: borderWidth,\r | |
| 1018 | y: labelHeight + borderWidth,\r | |
| 1019 | w: bodyWidth - (borderWidth * 2),\r | |
| 1020 | h: bodyHeight - (borderWidth * 2)\r | |
| 1021 | },\r | |
| 1022 | errorWrapEl: {\r | |
| 1023 | x: bodyWidth,\r | |
| 1024 | y: labelHeight,\r | |
| 1025 | w: errorWidth,\r | |
| 1026 | h: bodyHeight\r | |
| 1027 | },\r | |
| 1028 | errorEl: {\r | |
| 1029 | x: bodyWidth + errorIconMargin,\r | |
| 1030 | y: labelHeight + ((bodyHeight - errorIconSize) / 2),\r | |
| 1031 | w: errorIconSize,\r | |
| 1032 | h: errorIconSize\r | |
| 1033 | }\r | |
| 1034 | });\r | |
| 1035 | });\r | |
| 1036 | \r | |
| 1037 | it("should layout with hidden side error", function() {\r | |
| 1038 | create({\r | |
| 1039 | labelAlign: 'top',\r | |
| 1040 | msgTarget: 'side'\r | |
| 1041 | });\r | |
| 1042 | \r | |
| 1043 | width = (shrinkWidth && autoFitErrors) ? width - errorWidth : width;\r | |
| 1044 | var bdWidth = (autoFitErrors && !shrinkWidth) ? bodyWidth + errorWidth : bodyWidth;\r | |
| 1045 | \r | |
| 1046 | expect(component).toHaveLayout({\r | |
| 1047 | el: {\r | |
| 1048 | w: width,\r | |
| 1049 | h: height\r | |
| 1050 | },\r | |
| 1051 | labelEl: {\r | |
| 1052 | x: 0,\r | |
| 1053 | y: 0,\r | |
| 1054 | w: width,\r | |
| 1055 | h: labelHeight\r | |
| 1056 | },\r | |
| 1057 | '.x-form-item-label-inner': {\r | |
| 1058 | x: 0,\r | |
| 1059 | y: 0,\r | |
| 1060 | w: bdWidth,\r | |
| 1061 | h: labelHeight\r | |
| 1062 | },\r | |
| 1063 | bodyEl: {\r | |
| 1064 | x: 0,\r | |
| 1065 | y: labelHeight,\r | |
| 1066 | w: bdWidth,\r | |
| 1067 | h: bodyHeight\r | |
| 1068 | },\r | |
| 1069 | inputEl: {\r | |
| 1070 | x: borderWidth,\r | |
| 1071 | y: labelHeight + borderWidth,\r | |
| 1072 | w: bdWidth - (borderWidth * 2),\r | |
| 1073 | h: bodyHeight - (borderWidth * 2)\r | |
| 1074 | },\r | |
| 1075 | errorWrapEl: {\r | |
| 1076 | x: autoFitErrors ? 0 : bodyWidth,\r | |
| 1077 | y: autoFitErrors ? 0 : labelHeight,\r | |
| 1078 | w: autoFitErrors ? 0 : errorWidth,\r | |
| 1079 | h: autoFitErrors ? 0 : bodyHeight\r | |
| 1080 | },\r | |
| 1081 | errorEl: {\r | |
| 1082 | x: autoFitErrors ? 0 : bodyWidth + errorIconMargin,\r | |
| 1083 | y: autoFitErrors ? 0 : labelHeight + ((bodyHeight - errorIconSize) / 2),\r | |
| 1084 | w: autoFitErrors ? 0 : errorIconSize,\r | |
| 1085 | h: autoFitErrors ? 0 : errorIconSize\r | |
| 1086 | }\r | |
| 1087 | });\r | |
| 1088 | });\r | |
| 1089 | \r | |
| 1090 | it("should layout with under error", function() {\r | |
| 1091 | create({\r | |
| 1092 | labelAlign: 'top',\r | |
| 1093 | msgTarget: 'under'\r | |
| 1094 | });\r | |
| 1095 | \r | |
| 1096 | setError();\r | |
| 1097 | \r | |
| 1098 | expect(component).toHaveLayout({\r | |
| 1099 | el: {\r | |
| 1100 | w: width,\r | |
| 1101 | h: height\r | |
| 1102 | },\r | |
| 1103 | labelEl: {\r | |
| 1104 | x: 0,\r | |
| 1105 | y: 0,\r | |
| 1106 | w: width,\r | |
| 1107 | h: labelHeight\r | |
| 1108 | },\r | |
| 1109 | '.x-form-item-label-inner': {\r | |
| 1110 | x: 0,\r | |
| 1111 | y: 0,\r | |
| 1112 | w: width,\r | |
| 1113 | h: labelHeight\r | |
| 1114 | },\r | |
| 1115 | bodyEl: {\r | |
| 1116 | x: 0,\r | |
| 1117 | y: labelHeight,\r | |
| 1118 | w: bodyWidth,\r | |
| 1119 | h: bodyHeight\r | |
| 1120 | },\r | |
| 1121 | inputEl: {\r | |
| 1122 | x: borderWidth,\r | |
| 1123 | y: labelHeight + borderWidth,\r | |
| 1124 | w: bodyWidth - (borderWidth * 2),\r | |
| 1125 | h: bodyHeight - (borderWidth * 2)\r | |
| 1126 | },\r | |
| 1127 | errorWrapEl: {\r | |
| 1128 | x: 0,\r | |
| 1129 | y: labelHeight + bodyHeight,\r | |
| 1130 | w: width,\r | |
| 1131 | h: errorHeight\r | |
| 1132 | },\r | |
| 1133 | errorEl: {\r | |
| 1134 | x: 0,\r | |
| 1135 | y: labelHeight + bodyHeight,\r | |
| 1136 | w: width,\r | |
| 1137 | h: errorHeight\r | |
| 1138 | }\r | |
| 1139 | });\r | |
| 1140 | });\r | |
| 1141 | \r | |
| 1142 | it("should layout with hidden label", function() {\r | |
| 1143 | create({\r | |
| 1144 | labelAlign: 'top',\r | |
| 1145 | hideLabel: true\r | |
| 1146 | });\r | |
| 1147 | \r | |
| 1148 | expect(component).toHaveLayout({\r | |
| 1149 | el: {\r | |
| 1150 | w: width,\r | |
| 1151 | h: height\r | |
| 1152 | },\r | |
| 1153 | labelEl: {\r | |
| 1154 | xywh: '0 0 0 0'\r | |
| 1155 | },\r | |
| 1156 | bodyEl: {\r | |
| 1157 | x: 0,\r | |
| 1158 | y: 0,\r | |
| 1159 | w: bodyWidth,\r | |
| 1160 | h: bodyHeight\r | |
| 1161 | },\r | |
| 1162 | inputEl: {\r | |
| 1163 | x: borderWidth,\r | |
| 1164 | y: borderWidth,\r | |
| 1165 | w: bodyWidth - (borderWidth * 2),\r | |
| 1166 | h: bodyHeight - (borderWidth * 2)\r | |
| 1167 | }\r | |
| 1168 | });\r | |
| 1169 | expect(component.errorWrapEl).toBeNull();\r | |
| 1170 | });\r | |
| 1171 | \r | |
| 1172 | it("should layout with hidden label and side error", function() {\r | |
| 1173 | create({\r | |
| 1174 | labelAlign: 'top',\r | |
| 1175 | hideLabel: true,\r | |
| 1176 | msgTarget: 'side'\r | |
| 1177 | });\r | |
| 1178 | \r | |
| 1179 | setError();\r | |
| 1180 | \r | |
| 1181 | expect(component).toHaveLayout({\r | |
| 1182 | el: {\r | |
| 1183 | w: width,\r | |
| 1184 | h: height\r | |
| 1185 | },\r | |
| 1186 | labelEl: {\r | |
| 1187 | xywh: '0 0 0 0'\r | |
| 1188 | },\r | |
| 1189 | bodyEl: {\r | |
| 1190 | x: 0,\r | |
| 1191 | y: 0,\r | |
| 1192 | w: bodyWidth,\r | |
| 1193 | h: bodyHeight\r | |
| 1194 | },\r | |
| 1195 | inputEl: {\r | |
| 1196 | x: borderWidth,\r | |
| 1197 | y: borderWidth,\r | |
| 1198 | w: bodyWidth - (borderWidth * 2),\r | |
| 1199 | h: bodyHeight - (borderWidth * 2)\r | |
| 1200 | },\r | |
| 1201 | errorWrapEl: {\r | |
| 1202 | x: bodyWidth,\r | |
| 1203 | y: 0,\r | |
| 1204 | w: errorWidth,\r | |
| 1205 | h: height\r | |
| 1206 | },\r | |
| 1207 | errorEl: {\r | |
| 1208 | x: bodyWidth + errorIconMargin,\r | |
| 1209 | y: (bodyHeight - errorIconSize) / 2,\r | |
| 1210 | w: errorIconSize,\r | |
| 1211 | h: errorIconSize\r | |
| 1212 | }\r | |
| 1213 | });\r | |
| 1214 | });\r | |
| 1215 | \r | |
| 1216 | it("should layout with hidden label and hidden side error", function() {\r | |
| 1217 | create({\r | |
| 1218 | labelAlign: 'top',\r | |
| 1219 | hideLabel: true,\r | |
| 1220 | msgTarget: 'side'\r | |
| 1221 | });\r | |
| 1222 | \r | |
| 1223 | var bdWidth = (autoFitErrors && !shrinkWidth) ? bodyWidth + errorWidth : bodyWidth;\r | |
| 1224 | \r | |
| 1225 | expect(component).toHaveLayout({\r | |
| 1226 | el: {\r | |
| 1227 | w: (shrinkWidth && autoFitErrors) ? width - errorWidth : width,\r | |
| 1228 | h: height\r | |
| 1229 | },\r | |
| 1230 | labelEl: {\r | |
| 1231 | xywh: '0 0 0 0'\r | |
| 1232 | },\r | |
| 1233 | bodyEl: {\r | |
| 1234 | x: 0,\r | |
| 1235 | y: 0,\r | |
| 1236 | w: bdWidth,\r | |
| 1237 | h: bodyHeight\r | |
| 1238 | },\r | |
| 1239 | inputEl: {\r | |
| 1240 | x: borderWidth,\r | |
| 1241 | y: borderWidth,\r | |
| 1242 | w: bdWidth - (borderWidth * 2),\r | |
| 1243 | h: bodyHeight - (borderWidth * 2)\r | |
| 1244 | },\r | |
| 1245 | errorWrapEl: {\r | |
| 1246 | x: autoFitErrors ? 0 : bodyWidth,\r | |
| 1247 | y: autoFitErrors ? 0 : 0,\r | |
| 1248 | w: autoFitErrors ? 0 : errorWidth,\r | |
| 1249 | h: autoFitErrors ? 0 : height\r | |
| 1250 | },\r | |
| 1251 | errorEl: {\r | |
| 1252 | x: autoFitErrors ? 0 : bodyWidth + errorIconMargin,\r | |
| 1253 | y: autoFitErrors ? 0 : (bodyHeight - errorIconSize) / 2,\r | |
| 1254 | w: autoFitErrors ? 0 : errorIconSize,\r | |
| 1255 | h: autoFitErrors ? 0 : errorIconSize\r | |
| 1256 | }\r | |
| 1257 | });\r | |
| 1258 | });\r | |
| 1259 | \r | |
| 1260 | it("should layout with hidden label and under error", function() {\r | |
| 1261 | create({\r | |
| 1262 | labelAlign: 'top',\r | |
| 1263 | hideLabel: true,\r | |
| 1264 | msgTarget: 'under'\r | |
| 1265 | });\r | |
| 1266 | \r | |
| 1267 | setError();\r | |
| 1268 | \r | |
| 1269 | expect(component).toHaveLayout({\r | |
| 1270 | el: {\r | |
| 1271 | w: width,\r | |
| 1272 | h: height\r | |
| 1273 | },\r | |
| 1274 | labelEl: {\r | |
| 1275 | xywh: '0 0 0 0'\r | |
| 1276 | },\r | |
| 1277 | bodyEl: {\r | |
| 1278 | x: 0,\r | |
| 1279 | y: 0,\r | |
| 1280 | w: bodyWidth,\r | |
| 1281 | h: bodyHeight\r | |
| 1282 | },\r | |
| 1283 | inputEl: {\r | |
| 1284 | x: borderWidth,\r | |
| 1285 | y: borderWidth,\r | |
| 1286 | w: bodyWidth - (borderWidth * 2),\r | |
| 1287 | h: bodyHeight - (borderWidth * 2)\r | |
| 1288 | },\r | |
| 1289 | errorWrapEl: {\r | |
| 1290 | x: 0,\r | |
| 1291 | y: bodyHeight,\r | |
| 1292 | w: width,\r | |
| 1293 | h: errorHeight\r | |
| 1294 | },\r | |
| 1295 | errorEl: {\r | |
| 1296 | x: 0,\r | |
| 1297 | y: bodyHeight,\r | |
| 1298 | w: width,\r | |
| 1299 | h: errorHeight\r | |
| 1300 | }\r | |
| 1301 | });\r | |
| 1302 | });\r | |
| 1303 | });\r | |
| 1304 | });\r | |
| 1305 | }\r | |
| 1306 | \r | |
| 1307 | makeLayoutSuite(0, false); // fixed width and height\r | |
| 1308 | makeLayoutSuite(1, true); // shrinkWrap width, autoFitErrors\r | |
| 1309 | makeLayoutSuite(2, false); // shrinkWrap height\r | |
| 1310 | makeLayoutSuite(2, true); // shrinkWrap height, autoFitErrors\r | |
| 1311 | makeLayoutSuite(3, false); // shrinkWrap both\r | |
| 1312 | makeLayoutSuite(3, true); // shrinkWrap both, autoFitErrors\r | |
| 1313 | });\r | |
| 1314 | \r | |
| 1315 | });\r |