]>
Commit | Line | Data |
---|---|---|
6527f429 DM |
1 | describe('Ext.form.Labelable', function() {\r |
2 | var separator = ':',\r | |
3 | component;\r | |
4 | \r | |
5 | function define(props) {\r | |
6 | Ext.define('spec.Labelable', Ext.apply({\r | |
7 | extend: 'Ext.Component',\r | |
8 | mixins: [ 'Ext.form.Labelable' ],\r | |
9 | initComponent: function() {\r | |
10 | this.callParent();\r | |
11 | this.initLabelable();\r | |
12 | },\r | |
13 | initRenderData: function() {\r | |
14 | return Ext.applyIf(this.callParent(), this.getLabelableRenderData());\r | |
15 | },\r | |
16 | privates: {\r | |
17 | initRenderTpl: function () {\r | |
18 | this.renderTpl = this.getTpl('labelableRenderTpl');\r | |
19 | return this.callParent();\r | |
20 | }\r | |
21 | }\r | |
22 | }, props));\r | |
23 | }\r | |
24 | \r | |
25 | function create(cfg) {\r | |
26 | component = Ext.create('spec.Labelable', Ext.apply({\r | |
27 | renderTo: Ext.getBody()\r | |
28 | }, cfg));\r | |
29 | }\r | |
30 | \r | |
31 | afterEach(function() {\r | |
32 | component.destroy();\r | |
33 | Ext.undefine('spec.Labelable');\r | |
34 | });\r | |
35 | \r | |
36 | describe("rendering", function() {\r | |
37 | beforeEach(function() {\r | |
38 | define({\r | |
39 | ui: 'derp',\r | |
40 | labelClsExtra: 'spec-label-extra',\r | |
41 | fieldBodyCls: 'spec-body-cls',\r | |
42 | extraFieldBodyCls: 'spec-body-extra',\r | |
43 | getSubTplMarkup: function() {\r | |
44 | return '<div style="height:50px;width:150px;background-color:green;"></div>'\r | |
45 | }\r | |
46 | });\r | |
47 | });\r | |
48 | \r | |
49 | describe("child els", function() {\r | |
50 | var proto;\r | |
51 | \r | |
52 | beforeEach(function() {\r | |
53 | proto = spec.Labelable.prototype;\r | |
54 | });\r | |
55 | \r | |
56 | it("should have a labelEl Element as it's first child", function() {\r | |
57 | create();\r | |
58 | expect(component.el.first()).toBe(component.labelEl);\r | |
59 | });\r | |
60 | \r | |
61 | it("should set labelCls on the labelEl", function() {\r | |
62 | create();\r | |
63 | expect(component.labelEl).toHaveCls(proto.labelCls);\r | |
64 | });\r | |
65 | \r | |
66 | it("should set labeCls with UI on the labelEl", function() {\r | |
67 | create();\r | |
68 | expect(component.labelEl).toHaveCls(proto.labelCls + '-derp');\r | |
69 | });\r | |
70 | \r | |
71 | it("should set labelClsExtra on the labelEl", function() {\r | |
72 | create();\r | |
73 | expect(component.labelEl).toHaveCls('spec-label-extra');\r | |
74 | });\r | |
75 | \r | |
76 | it("should add the unselectable cls to the labelEl", function() {\r | |
77 | create();\r | |
78 | expect(component.labelEl).toHaveCls('x-unselectable');\r | |
79 | });\r | |
80 | \r | |
81 | it("should have a bodyEl after the labelEl", function() {\r | |
82 | create();\r | |
83 | expect(component.labelEl.next()).toBe(component.bodyEl);\r | |
84 | });\r | |
85 | \r | |
86 | it("should set baseBodyCls on the bodyEl", function() {\r | |
87 | create();\r | |
88 | expect(component.bodyEl).toHaveCls(proto.baseBodyCls);\r | |
89 | });\r | |
90 | \r | |
91 | it("should set baseBodyCls with UI on the bodyEl", function() {\r | |
92 | create();\r | |
93 | expect(component.bodyEl).toHaveCls(proto.baseBodyCls + '-derp');\r | |
94 | });\r | |
95 | \r | |
96 | it("should set fieldBodyCls on the bodyEl", function() {\r | |
97 | create();\r | |
98 | expect(component.bodyEl).toHaveCls(proto.fieldBodyCls);\r | |
99 | });\r | |
100 | \r | |
101 | it("should set fieldBodyCls with UI on the bodyEl", function() {\r | |
102 | create();\r | |
103 | expect(component.bodyEl).toHaveCls(proto.fieldBodyCls + '-derp');\r | |
104 | });\r | |
105 | \r | |
106 | it("should set extraFieldBodyCls on the bodyEl", function() {\r | |
107 | create();\r | |
108 | expect(component.bodyEl).toHaveCls(proto.extraFieldBodyCls);\r | |
109 | });\r | |
110 | \r | |
111 | it("should not render an errorEl by default", function() {\r | |
112 | create();\r | |
113 | expect(component.errorWrapEl).toBeNull();\r | |
114 | expect(component.errorEl).toBeNull();\r | |
115 | });\r | |
116 | \r | |
117 | it("should render an errorEl if msgTarget is 'side'", function() {\r | |
118 | create({\r | |
119 | msgTarget: 'side'\r | |
120 | });\r | |
121 | expect(component.bodyEl.next()).toBe(component.errorWrapEl);\r | |
122 | expect(component.errorWrapEl.first()).toBe(component.errorEl);\r | |
123 | });\r | |
124 | \r | |
125 | it("should render an errorEl if msgTarget is 'under'", function() {\r | |
126 | create({\r | |
127 | msgTarget: 'under'\r | |
128 | });\r | |
129 | expect(component.bodyEl.next()).toBe(component.errorWrapEl);\r | |
130 | expect(component.errorWrapEl.first()).toBe(component.errorEl);\r | |
131 | });\r | |
132 | \r | |
133 | it("should render ariaErrorEl by default", function() {\r | |
134 | create();\r | |
135 | \r | |
136 | expect(component.ariaErrorEl.dom).toBeDefined();\r | |
137 | });\r | |
138 | \r | |
139 | it("should assign x-hidden-clip to ariaErrorEl", function() {\r | |
140 | create();\r | |
141 | \r | |
142 | expect(component.ariaErrorEl.hasCls('x-hidden-clip')).toBe(true);\r | |
143 | });\r | |
144 | });\r | |
145 | \r | |
146 | describe("fieldLabel and labelSeparator", function() {\r | |
147 | it("should render a hidden label if no fieldLabel was configured", function() {\r | |
148 | create();\r | |
149 | expect(component.labelEl.isVisible()).toBe(false);\r | |
150 | });\r | |
151 | \r | |
152 | it("should render a hidden label if hideLabel:true was configured", function() {\r | |
153 | create({\r | |
154 | fieldLabel: 'Label',\r | |
155 | hideLabel: true\r | |
156 | });\r | |
157 | expect(component.labelEl.isVisible()).toBe(false);\r | |
158 | });\r | |
159 | \r | |
160 | it("should render a visible label if fieldLabel was configured", function() {\r | |
161 | create({\r | |
162 | fieldLabel: 'Label'\r | |
163 | });\r | |
164 | expect(component.labelEl.isVisible()).toBe(true);\r | |
165 | });\r | |
166 | \r | |
167 | it("should render the fieldLabel into the labelEl", function() {\r | |
168 | create({\r | |
169 | fieldLabel: 'Label'\r | |
170 | });\r | |
171 | \r | |
172 | expect(component.labelEl.dom.firstChild.innerHTML).toBe('Label:');\r | |
173 | });\r | |
174 | \r | |
175 | it("should render the labelSeparator after the label", function() {\r | |
176 | create({\r | |
177 | fieldLabel: 'Label',\r | |
178 | labelSeparator: '-'\r | |
179 | });\r | |
180 | \r | |
181 | expect(component.labelEl.dom.firstChild.innerHTML).toBe('Label-');\r | |
182 | });\r | |
183 | \r | |
184 | it("should not render the separator if labelSeparator is empty", function() {\r | |
185 | create({\r | |
186 | fieldLabel: 'Label',\r | |
187 | labelSeparator: ''\r | |
188 | });\r | |
189 | \r | |
190 | expect(component.labelEl.dom.firstChild.innerHTML).toBe('Label');\r | |
191 | });\r | |
192 | \r | |
193 | describe("labelStyle", function() {\r | |
194 | it("should add the labelStyle to the labelEl", function() {\r | |
195 | create({\r | |
196 | fieldLabel: 'Foo',\r | |
197 | labelStyle: 'border-top: 50px solid red;'\r | |
198 | });\r | |
199 | expect(component.labelEl.getStyle('border-top-width')).toBe('50px');\r | |
200 | });\r | |
201 | });\r | |
202 | });\r | |
203 | });\r | |
204 | \r | |
205 | describe("methods", function() {\r | |
206 | describe("setFieldLabel", function() {\r | |
207 | beforeEach(function() {\r | |
208 | define({\r | |
209 | getSubTplMarkup: function() {\r | |
210 | return '<div style="background-color:green;width:200px;height:50px;"></div>';\r | |
211 | }\r | |
212 | });\r | |
213 | });\r | |
214 | \r | |
215 | it("should set the label element's innerHTML", function() {\r | |
216 | create();\r | |
217 | component.setFieldLabel('foo');\r | |
218 | expect(component.labelEl.dom.firstChild.innerHTML).toBe('foo' + separator);\r | |
219 | });\r | |
220 | \r | |
221 | it("should show the label element", function() {\r | |
222 | create();\r | |
223 | component.setFieldLabel('foo');\r | |
224 | expect(component.labelEl.isVisible()).toBe(true);\r | |
225 | });\r | |
226 | \r | |
227 | it("should hide the label element when setting an empty label", function() {\r | |
228 | create({\r | |
229 | fieldLabel: 'foo'\r | |
230 | });\r | |
231 | component.setFieldLabel('');\r | |
232 | expect(component.labelEl.isVisible()).toBe(false);\r | |
233 | });\r | |
234 | \r | |
235 | describe("with under error", function() {\r | |
236 | it("should add the 'x-form-error-wrap-under-side-label' cls to the errorWrapEl when the label is on the side", function() {\r | |
237 | create({\r | |
238 | msgTarget: 'under'\r | |
239 | });\r | |
240 | component.setFieldLabel('foo');\r | |
241 | expect(component.errorWrapEl).toHaveCls('x-form-error-wrap-under-side-label');\r | |
242 | });\r | |
243 | \r | |
244 | it("should not add the 'x-form-error-wrap-under-side-label' cls to the errorWrapEl when the label is on the top", function() {\r | |
245 | create({\r | |
246 | msgTarget: 'under',\r | |
247 | labelAlign: 'top'\r | |
248 | });\r | |
249 | component.setFieldLabel('foo');\r | |
250 | expect(component.errorWrapEl).not.toHaveCls('x-form-error-wrap-under-side-label');\r | |
251 | });\r | |
252 | \r | |
253 | it("should remove the 'x-form-error-wrap-under-side-label' cls from the errorWrapEl when empty label is set", function() {\r | |
254 | create({\r | |
255 | msgTarget: 'under',\r | |
256 | fieldLabel: 'foo'\r | |
257 | });\r | |
258 | component.setFieldLabel('');\r | |
259 | expect(component.errorWrapEl).not.toHaveCls('x-form-error-wrap-under-side-label');\r | |
260 | });\r | |
261 | });\r | |
262 | });\r | |
263 | \r | |
264 | describe("setHideLabel", function() {\r | |
265 | beforeEach(function() {\r | |
266 | define({\r | |
267 | getSubTplMarkup: function() {\r | |
268 | return '<div></div>';\r | |
269 | }\r | |
270 | });\r | |
271 | });\r | |
272 | \r | |
273 | describe("before render", function() {\r | |
274 | it("should hide the label when rendered", function() {\r | |
275 | create({\r | |
276 | fieldLabel: 'Foo',\r | |
277 | hideLabel: false,\r | |
278 | renderTo: null\r | |
279 | });\r | |
280 | component.setHideLabel(true);\r | |
281 | component.render(Ext.getBody());\r | |
282 | expect(component.labelEl.isVisible()).toBe(false);\r | |
283 | });\r | |
284 | \r | |
285 | it("should show the label when rendered", function() {\r | |
286 | create({\r | |
287 | fieldLabel: 'Foo',\r | |
288 | hideLabel: true,\r | |
289 | renderTo: null\r | |
290 | });\r | |
291 | component.setHideLabel(false);\r | |
292 | component.render(Ext.getBody());\r | |
293 | expect(component.labelEl.isVisible()).toBe(true);\r | |
294 | });\r | |
295 | });\r | |
296 | \r | |
297 | describe("after render", function() {\r | |
298 | it("should hide the label", function() {\r | |
299 | create({\r | |
300 | fieldLabel: 'Foo',\r | |
301 | hideLabel: false\r | |
302 | });\r | |
303 | component.setHideLabel(true);\r | |
304 | expect(component.labelEl.isVisible()).toBe(false);\r | |
305 | });\r | |
306 | \r | |
307 | it("should show the label", function() {\r | |
308 | create({\r | |
309 | fieldLabel: 'Foo',\r | |
310 | hideLabel: true\r | |
311 | });\r | |
312 | component.setHideLabel(false);\r | |
313 | expect(component.labelEl.isVisible()).toBe(true);\r | |
314 | });\r | |
315 | \r | |
316 | it("should run a layout", function() {\r | |
317 | create({\r | |
318 | fieldLabel: 'Foo',\r | |
319 | hideLabel: true\r | |
320 | });\r | |
321 | var count = component.componentLayoutCounter;\r | |
322 | component.setHideLabel(false);\r | |
323 | expect(component.componentLayoutCounter).toBe(count + 1);\r | |
324 | count = component.componentLayoutCounter\r | |
325 | component.setHideLabel(true);\r | |
326 | expect(component.componentLayoutCounter).toBe(count + 1);\r | |
327 | });\r | |
328 | });\r | |
329 | });\r | |
330 | \r | |
331 | describe("setHideEmptyLabel", function() {\r | |
332 | beforeEach(function() {\r | |
333 | define({\r | |
334 | getSubTplMarkup: function() {\r | |
335 | return '<div></div>';\r | |
336 | }\r | |
337 | });\r | |
338 | });\r | |
339 | \r | |
340 | describe("before render", function() {\r | |
341 | it("should hide if the label is empty when rendered", function() {\r | |
342 | create({\r | |
343 | fieldLabel: '',\r | |
344 | hideEmptyLabel: false,\r | |
345 | renderTo: null\r | |
346 | });\r | |
347 | component.setHideEmptyLabel(true);\r | |
348 | component.render(Ext.getBody());\r | |
349 | expect(component.labelEl.isVisible()).toBe(false);\r | |
350 | });\r | |
351 | \r | |
352 | it("should show if the label is empty when rendered", function() {\r | |
353 | create({\r | |
354 | fieldLabel: '',\r | |
355 | hideEmptyLabel: true,\r | |
356 | renderTo: null\r | |
357 | });\r | |
358 | component.setHideEmptyLabel(false);\r | |
359 | component.render(Ext.getBody());\r | |
360 | expect(component.labelEl.isVisible()).toBe(true);\r | |
361 | });\r | |
362 | \r | |
363 | it("should not be visible if hideLabel: true is configured", function() {\r | |
364 | create({\r | |
365 | fieldLabel: '',\r | |
366 | hideEmptyLabel: true,\r | |
367 | hideLabel: true,\r | |
368 | renderTo: null\r | |
369 | });\r | |
370 | component.setHideEmptyLabel(false);\r | |
371 | component.render(Ext.getBody());\r | |
372 | expect(component.labelEl.isVisible()).toBe(false);\r | |
373 | });\r | |
374 | \r | |
375 | it("should not hide if the label is not empty", function() {\r | |
376 | create({\r | |
377 | fieldLabel: 'Foo',\r | |
378 | hideEmptyLabel: false,\r | |
379 | renderTo: null\r | |
380 | });\r | |
381 | component.setHideEmptyLabel(true);\r | |
382 | component.render(Ext.getBody());\r | |
383 | expect(component.labelEl.isVisible()).toBe(true);\r | |
384 | });\r | |
385 | });\r | |
386 | \r | |
387 | describe("after render", function() {\r | |
388 | it("should hide if the label is empty", function() {\r | |
389 | create({\r | |
390 | fieldLabel: '',\r | |
391 | hideEmptyLabel: false\r | |
392 | });\r | |
393 | component.setHideEmptyLabel(true);\r | |
394 | expect(component.labelEl.isVisible()).toBe(false);\r | |
395 | });\r | |
396 | \r | |
397 | it("should show if the label is empty", function() {\r | |
398 | create({\r | |
399 | fieldLabel: '',\r | |
400 | hideEmptyLabel: true\r | |
401 | });\r | |
402 | component.setHideEmptyLabel(false);\r | |
403 | expect(component.labelEl.isVisible()).toBe(true);\r | |
404 | });\r | |
405 | \r | |
406 | it("should not be visible if hideLabel: true is configured", function() {\r | |
407 | create({\r | |
408 | fieldLabel: '',\r | |
409 | hideEmptyLabel: true,\r | |
410 | hideLabel: true\r | |
411 | });\r | |
412 | component.setHideEmptyLabel(false);\r | |
413 | expect(component.labelEl.isVisible()).toBe(false);\r | |
414 | });\r | |
415 | \r | |
416 | it("should not hide if the label is not empty", function() {\r | |
417 | create({\r | |
418 | fieldLabel: 'Foo',\r | |
419 | hideEmptyLabel: false\r | |
420 | });\r | |
421 | component.setHideEmptyLabel(true);\r | |
422 | expect(component.labelEl.isVisible()).toBe(true);\r | |
423 | });\r | |
424 | \r | |
425 | it("should run a layout", function() {\r | |
426 | create({\r | |
427 | fieldLabel: '',\r | |
428 | hideEmptyLabel: true\r | |
429 | });\r | |
430 | var count = component.componentLayoutCounter;\r | |
431 | component.setHideEmptyLabel(false);\r | |
432 | expect(component.componentLayoutCounter).toBe(count + 1);\r | |
433 | count = component.componentLayoutCounter\r | |
434 | component.setHideEmptyLabel(true);\r | |
435 | expect(component.componentLayoutCounter).toBe(count + 1);\r | |
436 | });\r | |
437 | });\r | |
438 | });\r | |
439 | \r | |
440 | describe("setActiveError/unsetActiveError", function() {\r | |
441 | var ariaErrorEl;\r | |
442 | \r | |
443 | beforeEach(function() {\r | |
444 | define({\r | |
445 | getSubTplMarkup: function() {\r | |
446 | return '<div></div>';\r | |
447 | }\r | |
448 | });\r | |
449 | \r | |
450 | create();\r | |
451 | \r | |
452 | ariaErrorEl = component.ariaErrorEl;\r | |
453 | });\r | |
454 | \r | |
455 | afterEach(function() {\r | |
456 | ariaErrorEl = null;\r | |
457 | });\r | |
458 | \r | |
459 | describe("setActiveErrors", function() {\r | |
460 | beforeEach(function() {\r | |
461 | component.setActiveErrors(['foo', 'bar']);\r | |
462 | });\r | |
463 | \r | |
464 | it("should set ariaErrorEl text", function() {\r | |
465 | expect(ariaErrorEl.dom.innerHTML).toBe('foo. bar');\r | |
466 | });\r | |
467 | \r | |
468 | it("should point actionEl aria-describedby to ariaErrorEl", function() {\r | |
469 | var actionEl = component.getActionEl();\r | |
470 | \r | |
471 | expect(actionEl.dom.getAttribute('aria-describedby')).toBe(ariaErrorEl.id);\r | |
472 | });\r | |
473 | \r | |
474 | describe("unsetActiveError", function() {\r | |
475 | beforeEach(function() {\r | |
476 | component.unsetActiveError();\r | |
477 | });\r | |
478 | \r | |
479 | it("should clear ariaErrorEl text", function() {\r | |
480 | expect(ariaErrorEl.dom.innerHTML).toBe('');\r | |
481 | });\r | |
482 | \r | |
483 | it("should remove aria-describedby attribute from actionEl", function() {\r | |
484 | var actionEl = component.getActionEl();\r | |
485 | \r | |
486 | expect(actionEl.dom.hasAttribute('aria-describedby')).toBe(false);\r | |
487 | });\r | |
488 | });\r | |
489 | });\r | |
490 | });\r | |
491 | });\r | |
492 | \r | |
493 | describe('layout', function() {\r | |
494 | var dimensions = {\r | |
495 | 1: 'width',\r | |
496 | 2: 'height',\r | |
497 | 3: 'width and height'\r | |
498 | };\r | |
499 | \r | |
500 | function makeLayoutSuite(shrinkWrap, autoFitErrors) {\r | |
501 | describe((shrinkWrap ? ("shrink wrap " + dimensions[shrinkWrap]) : "fixed width and height") +\r | |
502 | " autoFitErrors: " + autoFitErrors, function() {\r | |
503 | var shrinkWidth = (shrinkWrap & 1),\r | |
504 | shrinkHeight = (shrinkWrap & 2),\r | |
505 | errorWidth = 18, // the width of the error when side aligned\r | |
506 | errorHeight = 20, // the height of the error when bottom aligned\r | |
507 | errorIconSize = 16, // the size of the error icon element\r | |
508 | errorIconMargin = 1, // the left margin of the error icon element\r | |
509 | labelWidth = 105, // the width of the label when side aligned\r | |
510 | labelPadding = 5, // right padding of the label when side aligned\r | |
511 | labelInnerY = [3, 4], // the y offset of the inner label element when side aligned\r | |
512 | labelInnerWidth = labelWidth - labelPadding, // the width of the inner label element when side aligned\r | |
513 | bodyWidth = 150, // the width of the bodyEl\r | |
514 | bodyHeight = 50, // the height of the bodyEl\r | |
515 | labelHeight = 23, // the height of the label when top aligned\r | |
516 | hideLabel, topLabel, width, height;\r | |
517 | \r | |
518 | beforeEach(function() {\r | |
519 | define({\r | |
520 | getSubTplMarkup: function() {\r | |
521 | return '<div style="background-color:green;' +\r | |
522 | 'width:' + (shrinkWidth ? (bodyWidth + 'px;') : 'auto;') +\r | |
523 | 'height:' + (shrinkHeight ? (bodyHeight + 'px;') : '100%;') +\r | |
524 | '"></div>';\r | |
525 | }\r | |
526 | });\r | |
527 | });\r | |
528 | \r | |
529 | function create(cfg) {\r | |
530 | cfg = cfg || {};\r | |
531 | \r | |
532 | hideLabel = cfg.hideLabel;\r | |
533 | topLabel = (cfg.labelAlign === 'top');\r | |
534 | width = bodyWidth;\r | |
535 | height = bodyHeight;\r | |
536 | \r | |
537 | if (!hideLabel && !topLabel) {\r | |
538 | width += labelWidth;\r | |
539 | }\r | |
540 | \r | |
541 | if (!hideLabel && topLabel) {\r | |
542 | height += labelHeight;\r | |
543 | }\r | |
544 | \r | |
545 | if (cfg.msgTarget === 'side') {\r | |
546 | width += errorWidth;\r | |
547 | }\r | |
548 | \r | |
549 | if (cfg.msgTarget === 'under') {\r | |
550 | height += errorHeight;\r | |
551 | }\r | |
552 | \r | |
553 | component = Ext.create('spec.Labelable', Ext.apply({\r | |
554 | renderTo: document.body,\r | |
555 | height: shrinkHeight ? null : height,\r | |
556 | width: shrinkWidth ? null : width,\r | |
557 | autoFitErrors: autoFitErrors,\r | |
558 | // use a fixed size element vs. text for the field label for\r | |
559 | // consistency of measurement cross-browser\r | |
560 | fieldLabel: '<span style="display:inline-block;width:' + labelInnerWidth +\r | |
561 | 'px;background-color:red;"> </span>',\r | |
562 | labelSeparator: ''\r | |
563 | }, cfg));\r | |
564 | }\r | |
565 | \r | |
566 | function setError(msg) {\r | |
567 | component.setActiveError(msg || "Error Message");\r | |
568 | }\r | |
569 | \r | |
570 | // makes a suite for side labels (labelAlign: 'left' or labelAlign: 'right')\r | |
571 | // The specs contained herein should produce identical results for left\r | |
572 | // and right alignment, with the exception of the text align of the\r | |
573 | // label's inner element.\r | |
574 | function makeSideLabelSuite(labelAlign) {\r | |
575 | describe(labelAlign + " label", function() {\r | |
576 | var leftLabel = (labelAlign === 'left');\r | |
577 | \r | |
578 | it("should layout", function() {\r | |
579 | create({\r | |
580 | labelAlign: labelAlign\r | |
581 | });\r | |
582 | \r | |
583 | expect(component).toHaveLayout({\r | |
584 | el: {\r | |
585 | w: width,\r | |
586 | h: height\r | |
587 | },\r | |
588 | labelEl: {\r | |
589 | x: 0,\r | |
590 | y: 0,\r | |
591 | w: labelWidth,\r | |
592 | h: height\r | |
593 | },\r | |
594 | '.x-form-item-label-inner': {\r | |
595 | x: leftLabel ? 0 : labelWidth - labelPadding - labelInnerWidth,\r | |
596 | y: labelInnerY,\r | |
597 | w: labelInnerWidth\r | |
598 | },\r | |
599 | bodyEl: {\r | |
600 | x: labelWidth,\r | |
601 | y: 0,\r | |
602 | w: bodyWidth,\r | |
603 | h: bodyHeight\r | |
604 | }\r | |
605 | });\r | |
606 | expect(component.errorWrapEl).toBeNull();\r | |
607 | });\r | |
608 | \r | |
609 | it("should layout with side error", function() {\r | |
610 | create({\r | |
611 | labelAlign: labelAlign,\r | |
612 | msgTarget: 'side'\r | |
613 | });\r | |
614 | \r | |
615 | setError();\r | |
616 | \r | |
617 | expect(component).toHaveLayout({\r | |
618 | el: {\r | |
619 | w: width,\r | |
620 | h: height\r | |
621 | },\r | |
622 | labelEl: {\r | |
623 | x: 0,\r | |
624 | y: 0,\r | |
625 | w: labelWidth,\r | |
626 | h: height\r | |
627 | },\r | |
628 | '.x-form-item-label-inner': {\r | |
629 | x: leftLabel ? 0 : labelWidth - labelPadding - labelInnerWidth,\r | |
630 | y: labelInnerY,\r | |
631 | w: labelInnerWidth\r | |
632 | },\r | |
633 | bodyEl: {\r | |
634 | x: labelWidth,\r | |
635 | y: 0,\r | |
636 | w: bodyWidth,\r | |
637 | h: bodyHeight\r | |
638 | },\r | |
639 | errorWrapEl: {\r | |
640 | x: width - errorWidth,\r | |
641 | y: 0,\r | |
642 | w: errorWidth,\r | |
643 | h: height\r | |
644 | },\r | |
645 | errorEl: {\r | |
646 | x: width - errorWidth + errorIconMargin,\r | |
647 | y: (bodyHeight - errorIconSize) / 2,\r | |
648 | w: errorIconSize,\r | |
649 | h: errorIconSize\r | |
650 | }\r | |
651 | });\r | |
652 | });\r | |
653 | \r | |
654 | it("should layout with hidden side error", function() {\r | |
655 | create({\r | |
656 | labelAlign: labelAlign,\r | |
657 | msgTarget: 'side'\r | |
658 | });\r | |
659 | \r | |
660 | expect(component).toHaveLayout({\r | |
661 | el: {\r | |
662 | w: (shrinkWidth && autoFitErrors) ? width - errorWidth : width,\r | |
663 | h: height\r | |
664 | },\r | |
665 | labelEl: {\r | |
666 | x: 0,\r | |
667 | y: 0,\r | |
668 | w: labelWidth,\r | |
669 | h: height\r | |
670 | },\r | |
671 | '.x-form-item-label-inner': {\r | |
672 | x: leftLabel ? 0 : labelWidth - labelPadding - labelInnerWidth,\r | |
673 | y: labelInnerY,\r | |
674 | w: labelInnerWidth\r | |
675 | },\r | |
676 | bodyEl: {\r | |
677 | x: labelWidth,\r | |
678 | y: 0,\r | |
679 | w: (autoFitErrors && !shrinkWidth) ? bodyWidth + errorWidth : bodyWidth,\r | |
680 | h: bodyHeight\r | |
681 | },\r | |
682 | errorWrapEl: {\r | |
683 | x: autoFitErrors ? 0 : width - errorWidth,\r | |
684 | y: autoFitErrors ? 0 : 0,\r | |
685 | w: autoFitErrors ? 0 : errorWidth,\r | |
686 | h: autoFitErrors ? 0 : height\r | |
687 | },\r | |
688 | errorEl: {\r | |
689 | x: autoFitErrors ? 0 : width - errorWidth + errorIconMargin,\r | |
690 | y: autoFitErrors ? 0 : (bodyHeight - errorIconSize) / 2,\r | |
691 | w: autoFitErrors ? 0 : errorIconSize,\r | |
692 | h: autoFitErrors ? 0 : errorIconSize\r | |
693 | }\r | |
694 | });\r | |
695 | });\r | |
696 | \r | |
697 | // TODO: EXTJSIV-12634\r | |
698 | (Ext.isIE10m && !shrinkHeight ? xit : it)("should layout with under error", function() {\r | |
699 | create({\r | |
700 | labelAlign: labelAlign,\r | |
701 | msgTarget: 'under'\r | |
702 | });\r | |
703 | \r | |
704 | setError();\r | |
705 | \r | |
706 | expect(component).toHaveLayout({\r | |
707 | el: {\r | |
708 | w: width,\r | |
709 | h: height\r | |
710 | },\r | |
711 | labelEl: {\r | |
712 | x: 0,\r | |
713 | y: 0,\r | |
714 | w: labelWidth,\r | |
715 | h: bodyHeight\r | |
716 | },\r | |
717 | '.x-form-item-label-inner': {\r | |
718 | x: leftLabel ? 0 : labelWidth - labelPadding - labelInnerWidth,\r | |
719 | y: labelInnerY,\r | |
720 | w: labelInnerWidth\r | |
721 | },\r | |
722 | bodyEl: {\r | |
723 | x: labelWidth,\r | |
724 | y: 0,\r | |
725 | w: bodyWidth,\r | |
726 | h: bodyHeight\r | |
727 | },\r | |
728 | errorWrapEl: {\r | |
729 | x: 0,\r | |
730 | y: bodyHeight,\r | |
731 | w: width,\r | |
732 | h: errorHeight\r | |
733 | },\r | |
734 | errorEl: {\r | |
735 | x: labelWidth,\r | |
736 | y: bodyHeight,\r | |
737 | w: bodyWidth,\r | |
738 | h: errorHeight\r | |
739 | }\r | |
740 | });\r | |
741 | });\r | |
742 | \r | |
743 | it("should layout with hidden label", function() {\r | |
744 | create({\r | |
745 | labelAlign: labelAlign,\r | |
746 | hideLabel: true\r | |
747 | });\r | |
748 | \r | |
749 | expect(component).toHaveLayout({\r | |
750 | el: {\r | |
751 | w: width,\r | |
752 | h: height\r | |
753 | },\r | |
754 | labelEl: {\r | |
755 | xywh: '0 0 0 0'\r | |
756 | },\r | |
757 | bodyEl: {\r | |
758 | x: 0,\r | |
759 | y: 0,\r | |
760 | w: bodyWidth,\r | |
761 | h: bodyHeight\r | |
762 | }\r | |
763 | });\r | |
764 | expect(component.errorWrapEl).toBeNull();\r | |
765 | });\r | |
766 | \r | |
767 | it("should layout with hidden label and side error", function() {\r | |
768 | create({\r | |
769 | labelAlign: labelAlign,\r | |
770 | hideLabel: true,\r | |
771 | msgTarget: 'side'\r | |
772 | });\r | |
773 | \r | |
774 | setError();\r | |
775 | \r | |
776 | expect(component).toHaveLayout({\r | |
777 | el: {\r | |
778 | w: width,\r | |
779 | h: height\r | |
780 | },\r | |
781 | labelEl: {\r | |
782 | xywh: '0 0 0 0'\r | |
783 | },\r | |
784 | bodyEl: {\r | |
785 | x: 0,\r | |
786 | y: 0,\r | |
787 | w: bodyWidth,\r | |
788 | h: bodyHeight\r | |
789 | },\r | |
790 | errorWrapEl: {\r | |
791 | x: bodyWidth,\r | |
792 | y: 0,\r | |
793 | w: errorWidth,\r | |
794 | h: height\r | |
795 | },\r | |
796 | errorEl: {\r | |
797 | x: bodyWidth + errorIconMargin,\r | |
798 | y: (bodyHeight - errorIconSize) / 2,\r | |
799 | w: errorIconSize,\r | |
800 | h: errorIconSize\r | |
801 | }\r | |
802 | });\r | |
803 | });\r | |
804 | \r | |
805 | it("should layout with hidden label and hidden side error", function() {\r | |
806 | create({\r | |
807 | labelAlign: labelAlign,\r | |
808 | hideLabel: true,\r | |
809 | msgTarget: 'side'\r | |
810 | });\r | |
811 | \r | |
812 | expect(component).toHaveLayout({\r | |
813 | el: {\r | |
814 | w: (shrinkWidth && autoFitErrors) ? width - errorWidth : width,\r | |
815 | h: height\r | |
816 | },\r | |
817 | labelEl: {\r | |
818 | xywh: '0 0 0 0'\r | |
819 | },\r | |
820 | bodyEl: {\r | |
821 | x: 0,\r | |
822 | y: 0,\r | |
823 | w: (autoFitErrors && !shrinkWidth) ? bodyWidth + errorWidth : bodyWidth,\r | |
824 | h: bodyHeight\r | |
825 | },\r | |
826 | errorWrapEl: {\r | |
827 | x: autoFitErrors ? 0 : bodyWidth,\r | |
828 | y: autoFitErrors ? 0 : 0,\r | |
829 | w: autoFitErrors ? 0 : errorWidth,\r | |
830 | h: autoFitErrors ? 0 : height\r | |
831 | },\r | |
832 | errorEl: {\r | |
833 | x: autoFitErrors ? 0 : bodyWidth + errorIconMargin,\r | |
834 | y: autoFitErrors ? 0 : (bodyHeight - errorIconSize) / 2,\r | |
835 | w: autoFitErrors ? 0 : errorIconSize,\r | |
836 | h: autoFitErrors ? 0 : errorIconSize\r | |
837 | }\r | |
838 | });\r | |
839 | });\r | |
840 | \r | |
841 | // TODO: EXTJSIV-12634\r | |
842 | (Ext.isIE10m && !shrinkHeight ? xit : it)("should layout with hidden label and under error", function() {\r | |
843 | create({\r | |
844 | labelAlign: labelAlign,\r | |
845 | hideLabel: true,\r | |
846 | msgTarget: 'under'\r | |
847 | });\r | |
848 | \r | |
849 | setError();\r | |
850 | \r | |
851 | expect(component).toHaveLayout({\r | |
852 | el: {\r | |
853 | w: width,\r | |
854 | h: height\r | |
855 | },\r | |
856 | labelEl: {\r | |
857 | xywh: '0 0 0 0'\r | |
858 | },\r | |
859 | bodyEl: {\r | |
860 | x: 0,\r | |
861 | y: 0,\r | |
862 | w: bodyWidth,\r | |
863 | h: bodyHeight\r | |
864 | },\r | |
865 | errorWrapEl: {\r | |
866 | x: 0,\r | |
867 | y: bodyHeight,\r | |
868 | w: width,\r | |
869 | h: errorHeight\r | |
870 | },\r | |
871 | errorEl: {\r | |
872 | x: 0,\r | |
873 | y: bodyHeight,\r | |
874 | w: width,\r | |
875 | h: errorHeight\r | |
876 | }\r | |
877 | });\r | |
878 | });\r | |
879 | });\r | |
880 | }\r | |
881 | \r | |
882 | makeSideLabelSuite('left'); // labelAlign: 'left'\r | |
883 | makeSideLabelSuite('right'); // labelAlign: 'right'\r | |
884 | \r | |
885 | // TODO: EXTJSIV-12634\r | |
886 | (Ext.isIE10m && !shrinkHeight ? xdescribe : describe)("top label", function() {\r | |
887 | it("should layout", function() {\r | |
888 | create({\r | |
889 | labelAlign: 'top'\r | |
890 | });\r | |
891 | \r | |
892 | expect(component).toHaveLayout({\r | |
893 | el: {\r | |
894 | w: width,\r | |
895 | h: height\r | |
896 | },\r | |
897 | labelEl: {\r | |
898 | x: 0,\r | |
899 | y: 0,\r | |
900 | w: width,\r | |
901 | h: labelHeight\r | |
902 | },\r | |
903 | '.x-form-item-label-inner': {\r | |
904 | x: 0,\r | |
905 | y: 0,\r | |
906 | w: width,\r | |
907 | h: labelHeight\r | |
908 | },\r | |
909 | bodyEl: {\r | |
910 | x: 0,\r | |
911 | y: labelHeight,\r | |
912 | w: bodyWidth,\r | |
913 | h: bodyHeight\r | |
914 | }\r | |
915 | });\r | |
916 | expect(component.errorWrapEl).toBeNull();\r | |
917 | });\r | |
918 | \r | |
919 | it("should layout with side error", function() {\r | |
920 | create({\r | |
921 | labelAlign: 'top',\r | |
922 | msgTarget: 'side'\r | |
923 | });\r | |
924 | \r | |
925 | setError();\r | |
926 | \r | |
927 | expect(component).toHaveLayout({\r | |
928 | el: {\r | |
929 | w: width,\r | |
930 | h: height\r | |
931 | },\r | |
932 | labelEl: {\r | |
933 | x: 0,\r | |
934 | y: 0,\r | |
935 | w: width,\r | |
936 | h: labelHeight\r | |
937 | },\r | |
938 | '.x-form-item-label-inner': {\r | |
939 | x: 0,\r | |
940 | y: 0,\r | |
941 | w: bodyWidth,\r | |
942 | h: labelHeight\r | |
943 | },\r | |
944 | bodyEl: {\r | |
945 | x: 0,\r | |
946 | y: labelHeight,\r | |
947 | w: bodyWidth,\r | |
948 | h: bodyHeight\r | |
949 | },\r | |
950 | errorWrapEl: {\r | |
951 | x: bodyWidth,\r | |
952 | y: labelHeight,\r | |
953 | w: errorWidth,\r | |
954 | h: bodyHeight\r | |
955 | },\r | |
956 | errorEl: {\r | |
957 | x: bodyWidth + errorIconMargin,\r | |
958 | y: labelHeight + ((bodyHeight - errorIconSize) / 2),\r | |
959 | w: errorIconSize,\r | |
960 | h: errorIconSize\r | |
961 | }\r | |
962 | });\r | |
963 | });\r | |
964 | \r | |
965 | it("should layout with hidden side error", function() {\r | |
966 | create({\r | |
967 | labelAlign: 'top',\r | |
968 | msgTarget: 'side'\r | |
969 | });\r | |
970 | \r | |
971 | width = (shrinkWidth && autoFitErrors) ? width - errorWidth : width;\r | |
972 | \r | |
973 | expect(component).toHaveLayout({\r | |
974 | el: {\r | |
975 | w: width,\r | |
976 | h: height\r | |
977 | },\r | |
978 | labelEl: {\r | |
979 | x: 0,\r | |
980 | y: 0,\r | |
981 | w: width,\r | |
982 | h: labelHeight\r | |
983 | },\r | |
984 | '.x-form-item-label-inner': {\r | |
985 | x: 0,\r | |
986 | y: 0,\r | |
987 | w: (autoFitErrors && !shrinkWidth) ? bodyWidth + errorWidth : bodyWidth,\r | |
988 | h: labelHeight\r | |
989 | },\r | |
990 | bodyEl: {\r | |
991 | x: 0,\r | |
992 | y: labelHeight,\r | |
993 | w: (autoFitErrors && !shrinkWidth) ? bodyWidth + errorWidth : bodyWidth,\r | |
994 | h: bodyHeight\r | |
995 | },\r | |
996 | errorWrapEl: {\r | |
997 | x: autoFitErrors ? 0 : bodyWidth,\r | |
998 | y: autoFitErrors ? 0 : labelHeight,\r | |
999 | w: autoFitErrors ? 0 : errorWidth,\r | |
1000 | h: autoFitErrors ? 0 : bodyHeight\r | |
1001 | },\r | |
1002 | errorEl: {\r | |
1003 | x: autoFitErrors ? 0 : bodyWidth + errorIconMargin,\r | |
1004 | y: autoFitErrors ? 0 : labelHeight + ((bodyHeight - errorIconSize) / 2),\r | |
1005 | w: autoFitErrors ? 0 : errorIconSize,\r | |
1006 | h: autoFitErrors ? 0 : errorIconSize\r | |
1007 | }\r | |
1008 | });\r | |
1009 | });\r | |
1010 | \r | |
1011 | it("should layout with under error", function() {\r | |
1012 | create({\r | |
1013 | labelAlign: 'top',\r | |
1014 | msgTarget: 'under'\r | |
1015 | });\r | |
1016 | \r | |
1017 | setError();\r | |
1018 | \r | |
1019 | expect(component).toHaveLayout({\r | |
1020 | el: {\r | |
1021 | w: width,\r | |
1022 | h: height\r | |
1023 | },\r | |
1024 | labelEl: {\r | |
1025 | x: 0,\r | |
1026 | y: 0,\r | |
1027 | w: width,\r | |
1028 | h: labelHeight\r | |
1029 | },\r | |
1030 | '.x-form-item-label-inner': {\r | |
1031 | x: 0,\r | |
1032 | y: 0,\r | |
1033 | w: width,\r | |
1034 | h: labelHeight\r | |
1035 | },\r | |
1036 | bodyEl: {\r | |
1037 | x: 0,\r | |
1038 | y: labelHeight,\r | |
1039 | w: bodyWidth,\r | |
1040 | h: bodyHeight\r | |
1041 | },\r | |
1042 | errorWrapEl: {\r | |
1043 | x: 0,\r | |
1044 | y: labelHeight + bodyHeight,\r | |
1045 | w: width,\r | |
1046 | h: errorHeight\r | |
1047 | },\r | |
1048 | errorEl: {\r | |
1049 | x: 0,\r | |
1050 | y: labelHeight + bodyHeight,\r | |
1051 | w: width,\r | |
1052 | h: errorHeight\r | |
1053 | }\r | |
1054 | });\r | |
1055 | });\r | |
1056 | \r | |
1057 | it("should layout with hidden label", function() {\r | |
1058 | create({\r | |
1059 | labelAlign: 'top',\r | |
1060 | hideLabel: true\r | |
1061 | });\r | |
1062 | \r | |
1063 | expect(component).toHaveLayout({\r | |
1064 | el: {\r | |
1065 | w: width,\r | |
1066 | h: height\r | |
1067 | },\r | |
1068 | labelEl: {\r | |
1069 | xywh: '0 0 0 0'\r | |
1070 | },\r | |
1071 | bodyEl: {\r | |
1072 | x: 0,\r | |
1073 | y: 0,\r | |
1074 | w: bodyWidth,\r | |
1075 | h: bodyHeight\r | |
1076 | }\r | |
1077 | });\r | |
1078 | expect(component.errorWrapEl).toBeNull();\r | |
1079 | });\r | |
1080 | \r | |
1081 | it("should layout with hidden label and side error", function() {\r | |
1082 | create({\r | |
1083 | labelAlign: 'top',\r | |
1084 | hideLabel: true,\r | |
1085 | msgTarget: 'side'\r | |
1086 | });\r | |
1087 | \r | |
1088 | setError();\r | |
1089 | \r | |
1090 | expect(component).toHaveLayout({\r | |
1091 | el: {\r | |
1092 | w: width,\r | |
1093 | h: height\r | |
1094 | },\r | |
1095 | labelEl: {\r | |
1096 | xywh: '0 0 0 0'\r | |
1097 | },\r | |
1098 | bodyEl: {\r | |
1099 | x: 0,\r | |
1100 | y: 0,\r | |
1101 | w: bodyWidth,\r | |
1102 | h: bodyHeight\r | |
1103 | },\r | |
1104 | errorWrapEl: {\r | |
1105 | x: bodyWidth,\r | |
1106 | y: 0,\r | |
1107 | w: errorWidth,\r | |
1108 | h: height\r | |
1109 | },\r | |
1110 | errorEl: {\r | |
1111 | x: bodyWidth + errorIconMargin,\r | |
1112 | y: (bodyHeight - errorIconSize) / 2,\r | |
1113 | w: errorIconSize,\r | |
1114 | h: errorIconSize\r | |
1115 | }\r | |
1116 | });\r | |
1117 | });\r | |
1118 | \r | |
1119 | it("should layout with hidden label and hidden side error", function() {\r | |
1120 | create({\r | |
1121 | labelAlign: 'top',\r | |
1122 | hideLabel: true,\r | |
1123 | msgTarget: 'side'\r | |
1124 | });\r | |
1125 | \r | |
1126 | expect(component).toHaveLayout({\r | |
1127 | el: {\r | |
1128 | w: (shrinkWidth && autoFitErrors) ? width - errorWidth : width,\r | |
1129 | h: height\r | |
1130 | },\r | |
1131 | labelEl: {\r | |
1132 | xywh: '0 0 0 0'\r | |
1133 | },\r | |
1134 | bodyEl: {\r | |
1135 | x: 0,\r | |
1136 | y: 0,\r | |
1137 | w: (autoFitErrors && !shrinkWidth) ? bodyWidth + errorWidth : bodyWidth,\r | |
1138 | h: bodyHeight\r | |
1139 | },\r | |
1140 | errorWrapEl: {\r | |
1141 | x: autoFitErrors ? 0 : bodyWidth,\r | |
1142 | y: autoFitErrors ? 0 : 0,\r | |
1143 | w: autoFitErrors ? 0 : errorWidth,\r | |
1144 | h: autoFitErrors ? 0 : height\r | |
1145 | },\r | |
1146 | errorEl: {\r | |
1147 | x: autoFitErrors ? 0 : bodyWidth + errorIconMargin,\r | |
1148 | y: autoFitErrors ? 0 : (bodyHeight - errorIconSize) / 2,\r | |
1149 | w: autoFitErrors ? 0 : errorIconSize,\r | |
1150 | h: autoFitErrors ? 0 : errorIconSize\r | |
1151 | }\r | |
1152 | });\r | |
1153 | });\r | |
1154 | \r | |
1155 | it("should layout with hidden label and under error", function() {\r | |
1156 | create({\r | |
1157 | labelAlign: 'top',\r | |
1158 | hideLabel: true,\r | |
1159 | msgTarget: 'under'\r | |
1160 | });\r | |
1161 | \r | |
1162 | setError();\r | |
1163 | \r | |
1164 | expect(component).toHaveLayout({\r | |
1165 | el: {\r | |
1166 | w: width,\r | |
1167 | h: height\r | |
1168 | },\r | |
1169 | labelEl: {\r | |
1170 | xywh: '0 0 0 0'\r | |
1171 | },\r | |
1172 | bodyEl: {\r | |
1173 | x: 0,\r | |
1174 | y: 0,\r | |
1175 | w: bodyWidth,\r | |
1176 | h: bodyHeight\r | |
1177 | },\r | |
1178 | errorWrapEl: {\r | |
1179 | x: 0,\r | |
1180 | y: bodyHeight,\r | |
1181 | w: width,\r | |
1182 | h: errorHeight\r | |
1183 | },\r | |
1184 | errorEl: {\r | |
1185 | x: 0,\r | |
1186 | y: bodyHeight,\r | |
1187 | w: width,\r | |
1188 | h: errorHeight\r | |
1189 | }\r | |
1190 | });\r | |
1191 | });\r | |
1192 | });\r | |
1193 | });\r | |
1194 | }\r | |
1195 | \r | |
1196 | makeLayoutSuite(0, false); // fixed width and height\r | |
1197 | makeLayoutSuite(1, true); // shrinkWrap width, autoFitErrors\r | |
1198 | makeLayoutSuite(2, false); // shrinkWrap height\r | |
1199 | makeLayoutSuite(2, true); // shrinkWrap height, autoFitErrors\r | |
1200 | makeLayoutSuite(3, false); // shrinkWrap both\r | |
1201 | makeLayoutSuite(3, true); // shrinkWrap both, autoFitErrors\r | |
1202 | });\r | |
1203 | });\r |