]>
Commit | Line | Data |
---|---|---|
6527f429 DM |
1 | describe("Ext.menu.CheckItem", function(){\r |
2 | var menu, c;\r | |
3 | \r | |
4 | function makeItem(cfg) {\r | |
5 | menu = Ext.widget({\r | |
6 | xtype: 'menu',\r | |
7 | renderTo: document.body,\r | |
8 | items: [\r | |
9 | Ext.apply({\r | |
10 | xtype: 'menucheckitem',\r | |
11 | text: 'foo'\r | |
12 | }, cfg)\r | |
13 | ]\r | |
14 | });\r | |
15 | c = menu.items.getAt(0);\r | |
16 | }\r | |
17 | \r | |
18 | function expectAria(attr, value) {\r | |
19 | jasmine.expectAriaAttr(c, attr, value);\r | |
20 | }\r | |
21 | \r | |
22 | function expectNoAria(attr) {\r | |
23 | jasmine.expectNoAriaAttr(c, attr);\r | |
24 | }\r | |
25 | \r | |
26 | afterEach(function(){\r | |
27 | Ext.destroy(menu);\r | |
28 | c = null;\r | |
29 | });\r | |
30 | \r | |
31 | function clickIt(event) {\r | |
32 | jasmine.fireMouseEvent(c, event || 'click');\r | |
33 | }\r | |
34 | \r | |
35 | describe("initial config", function() {\r | |
36 | describe("normal", function() {\r | |
37 | beforeEach(function() {\r | |
38 | makeItem();\r | |
39 | });\r | |
40 | \r | |
41 | it("should have the checked property as false by default", function(){\r | |
42 | expect(c.checked).toBe(false); \r | |
43 | });\r | |
44 | \r | |
45 | describe("rendered", function() {\r | |
46 | beforeEach(function() {\r | |
47 | menu.show();\r | |
48 | });\r | |
49 | \r | |
50 | it("should have itemEl as ariaEl", function() {\r | |
51 | expect(c.ariaEl).toBe(c.itemEl);\r | |
52 | });\r | |
53 | \r | |
54 | it("should have menuitemcheckbox role", function() {\r | |
55 | expectAria('role', 'menuitemcheckbox');\r | |
56 | });\r | |
57 | \r | |
58 | it("should not have aria-label", function() {\r | |
59 | expectNoAria('aria-label');\r | |
60 | });\r | |
61 | \r | |
62 | describe("aria-checked", function() {\r | |
63 | it("should be false when not checked", function() {\r | |
64 | expectAria('aria-checked', 'false');\r | |
65 | });\r | |
66 | \r | |
67 | it("should be true when checked", function() {\r | |
68 | Ext.destroy(menu);\r | |
69 | \r | |
70 | makeItem({ checked: true });\r | |
71 | \r | |
72 | expectAria('aria-checked', 'true');\r | |
73 | });\r | |
74 | });\r | |
75 | });\r | |
76 | });\r | |
77 | \r | |
78 | describe("plain", function() {\r | |
79 | beforeEach(function() {\r | |
80 | makeItem({ plain: true });\r | |
81 | \r | |
82 | menu.show();\r | |
83 | });\r | |
84 | \r | |
85 | it("should have el as ariaEl", function() {\r | |
86 | expect(c.ariaEl).toBe(c.el);\r | |
87 | });\r | |
88 | \r | |
89 | it("should have menuitemcheckbox role", function() {\r | |
90 | expectAria('role', 'menuitemcheckbox');\r | |
91 | });\r | |
92 | \r | |
93 | it("should have no aria-label", function() {\r | |
94 | expectNoAria('aria-label');\r | |
95 | });\r | |
96 | \r | |
97 | describe("aria-checked", function() {\r | |
98 | it("should be false when not checked", function() {\r | |
99 | expectAria('aria-checked', 'false');\r | |
100 | });\r | |
101 | \r | |
102 | it("should be true when checked", function() {\r | |
103 | Ext.destroy(menu);\r | |
104 | makeItem({ plain: true, checked: true });\r | |
105 | menu.show();\r | |
106 | \r | |
107 | expectAria('aria-checked', 'true');\r | |
108 | });\r | |
109 | });\r | |
110 | });\r | |
111 | \r | |
112 | describe("with submenu", function() {\r | |
113 | beforeEach(function() {\r | |
114 | makeItem({\r | |
115 | menu: {\r | |
116 | items: [{\r | |
117 | text: 'bar'\r | |
118 | }]\r | |
119 | }\r | |
120 | });\r | |
121 | \r | |
122 | menu.show();\r | |
123 | });\r | |
124 | \r | |
125 | it("should have aria-haspopup", function() {\r | |
126 | expectAria('aria-haspopup', 'true');\r | |
127 | });\r | |
128 | \r | |
129 | it("should have aria-owns", function() {\r | |
130 | expectAria('aria-owns', c.menu.id);\r | |
131 | });\r | |
132 | \r | |
133 | it("should have aria-checked", function() {\r | |
134 | expectAria('aria-checked', 'mixed');\r | |
135 | });\r | |
136 | \r | |
137 | it("should have aria-label", function() {\r | |
138 | expectAria('aria-label', 'foo submenu');\r | |
139 | });\r | |
140 | });\r | |
141 | });\r | |
142 | \r | |
143 | describe("setChecked", function() {\r | |
144 | \r | |
145 | it("should set the checked state on the component", function(){\r | |
146 | makeItem();\r | |
147 | c.setChecked(true);\r | |
148 | expect(c.checked).toBe(true);\r | |
149 | \r | |
150 | c.setChecked(false);\r | |
151 | expect(c.checked).toBe(false);\r | |
152 | });\r | |
153 | \r | |
154 | describe("aria-checked attribute", function() {\r | |
155 | beforeEach(function() {\r | |
156 | makeItem();\r | |
157 | menu.show();\r | |
158 | c.setChecked(true);\r | |
159 | });\r | |
160 | \r | |
161 | it("should set aria-checked attribute", function() {\r | |
162 | expectAria('aria-checked', 'true');\r | |
163 | });\r | |
164 | \r | |
165 | it("should reset aria-checked attribute", function() {\r | |
166 | c.setChecked(false);\r | |
167 | \r | |
168 | expectAria('aria-checked', 'false');\r | |
169 | });\r | |
170 | });\r | |
171 | \r | |
172 | describe("element classes", function(){\r | |
173 | it("should add the checkedCls and remove uncheckedCls when checking", function(){\r | |
174 | makeItem();\r | |
175 | c.setChecked(true);\r | |
176 | expect(c.el.hasCls(c.checkedCls)).toBe(true);\r | |
177 | expect(c.el.hasCls(c.uncheckedCls)).toBe(false);\r | |
178 | }); \r | |
179 | \r | |
180 | it("should add the uncheckedCls and remove checkedCls when unchecking", function(){\r | |
181 | makeItem({\r | |
182 | checked: true\r | |
183 | });\r | |
184 | c.setChecked(false);\r | |
185 | expect(c.el.hasCls(c.uncheckedCls)).toBe(true);\r | |
186 | expect(c.el.hasCls(c.checkedCls)).toBe(false);\r | |
187 | }); \r | |
188 | });\r | |
189 | \r | |
190 | describe("events", function() {\r | |
191 | describe("no state change", function() {\r | |
192 | it("should not fire any events setting checked: false when not checked", function() {\r | |
193 | var called = false;\r | |
194 | makeItem();\r | |
195 | c.on('beforecheckchange', function(){\r | |
196 | called = true;\r | |
197 | });\r | |
198 | c.setChecked(false);\r | |
199 | expect(called).toBe(false); \r | |
200 | }); \r | |
201 | \r | |
202 | it("should not fire any events setting checked: true when checked", function() {\r | |
203 | var called = false;\r | |
204 | makeItem({\r | |
205 | checked: true\r | |
206 | });\r | |
207 | c.on('beforecheckchange', function(){\r | |
208 | called = true;\r | |
209 | });\r | |
210 | c.setChecked(true);\r | |
211 | expect(called).toBe(false);\r | |
212 | }); \r | |
213 | }); \r | |
214 | \r | |
215 | describe("supressEvents", function(){\r | |
216 | it("should not fire beforecheckchange", function(){\r | |
217 | var called = false;\r | |
218 | makeItem();\r | |
219 | c.on('beforecheckchange', function(){\r | |
220 | called = true;\r | |
221 | });\r | |
222 | c.setChecked(true, true);\r | |
223 | expect(called).toBe(false); \r | |
224 | }); \r | |
225 | \r | |
226 | it("should not fire checkchange", function(){\r | |
227 | var called = false;\r | |
228 | makeItem();\r | |
229 | c.on('checkchange', function(){\r | |
230 | called = true;\r | |
231 | });\r | |
232 | c.setChecked(true, true);\r | |
233 | expect(called).toBe(false); \r | |
234 | }); \r | |
235 | \r | |
236 | it("should not trigger a checkHandler", function(){\r | |
237 | var called = false;\r | |
238 | makeItem({\r | |
239 | checkHandler: function(){\r | |
240 | called = true;\r | |
241 | }\r | |
242 | });\r | |
243 | c.setChecked(true, true);\r | |
244 | expect(called).toBe(false); \r | |
245 | })\r | |
246 | });\r | |
247 | \r | |
248 | describe("veto", function(){\r | |
249 | it("should not trigger a change if beforecheckchange returns false", function(){\r | |
250 | makeItem();\r | |
251 | c.on('beforecheckchange', function(){\r | |
252 | return false;\r | |
253 | });\r | |
254 | c.setChecked(true);\r | |
255 | expect(c.checked).toBe(false);\r | |
256 | })\r | |
257 | });\r | |
258 | \r | |
259 | describe("params", function(){\r | |
260 | it("should fire beforecheckchange with the item and the new checked state", function(){\r | |
261 | var comp, state;\r | |
262 | makeItem();\r | |
263 | c.on('beforecheckchange', function(arg1, arg2){\r | |
264 | comp = arg1;\r | |
265 | state = arg2;\r | |
266 | });\r | |
267 | c.setChecked(true);\r | |
268 | expect(comp).toBe(c);\r | |
269 | expect(state).toBe(true);\r | |
270 | }); \r | |
271 | \r | |
272 | it("should fire checkchange with the item and the new checked state", function(){\r | |
273 | var comp, state;\r | |
274 | makeItem();\r | |
275 | c.on('checkchange', function(arg1, arg2){\r | |
276 | comp = arg1;\r | |
277 | state = arg2;\r | |
278 | });\r | |
279 | c.setChecked(true);\r | |
280 | expect(comp).toBe(c);\r | |
281 | expect(state).toBe(true);\r | |
282 | });\r | |
283 | \r | |
284 | it("should trigger checkHandler with the item and the new checked state", function(){\r | |
285 | var comp, state;\r | |
286 | makeItem({\r | |
287 | checkHandler: function(arg1, arg2){\r | |
288 | comp = arg1;\r | |
289 | state = arg2;\r | |
290 | }\r | |
291 | });\r | |
292 | c.setChecked(true);\r | |
293 | expect(comp).toBe(c);\r | |
294 | expect(state).toBe(true);\r | |
295 | });\r | |
296 | \r | |
297 | describe("checkHandler scope", function(){\r | |
298 | it("should default the scope to the component", function(){\r | |
299 | var scope;\r | |
300 | makeItem({\r | |
301 | checkHandler: function(){\r | |
302 | scope = this;\r | |
303 | }\r | |
304 | });\r | |
305 | c.setChecked(true);\r | |
306 | expect(scope).toBe(c);\r | |
307 | });\r | |
308 | \r | |
309 | it("should use a passed scope", function(){\r | |
310 | var o = {}, \r | |
311 | scope;\r | |
312 | \r | |
313 | makeItem({\r | |
314 | scope: o,\r | |
315 | checkHandler: function(){\r | |
316 | scope = this;\r | |
317 | }\r | |
318 | });\r | |
319 | c.setChecked(true);\r | |
320 | expect(scope).toBe(o);\r | |
321 | });\r | |
322 | \r | |
323 | it("should be able to resolve to a ViewController", function(){\r | |
324 | makeItem({\r | |
325 | checkHandler: 'doFoo'\r | |
326 | });\r | |
327 | \r | |
328 | var ctrl = new Ext.app.ViewController({\r | |
329 | doFoo: function(){\r | |
330 | return true;\r | |
331 | }\r | |
332 | });\r | |
333 | var checkSpy = spyOn(ctrl, "doFoo");\r | |
334 | \r | |
335 | var ct = new Ext.container.Container({\r | |
336 | renderTo: Ext.getBody(),\r | |
337 | controller: ctrl,\r | |
338 | items: c\r | |
339 | });\r | |
340 | c.setChecked(true);\r | |
341 | expect(checkSpy).toHaveBeenCalled();\r | |
342 | \r | |
343 | ct.destroy();\r | |
344 | checkSpy = null;\r | |
345 | });\r | |
346 | });\r | |
347 | });\r | |
348 | });\r | |
349 | });\r | |
350 | \r | |
351 | describe("handler", function(){\r | |
352 | it("should default the scope to the component", function(){\r | |
353 | var scope;\r | |
354 | makeItem({\r | |
355 | handler: function(){\r | |
356 | scope = this;\r | |
357 | }\r | |
358 | });\r | |
359 | clickIt();\r | |
360 | expect(scope).toBe(c);\r | |
361 | });\r | |
362 | \r | |
363 | it("should use a passed scope", function(){\r | |
364 | var o = {},\r | |
365 | scope;\r | |
366 | \r | |
367 | makeItem({\r | |
368 | scope: o,\r | |
369 | handler: function(){\r | |
370 | scope = this;\r | |
371 | }\r | |
372 | });\r | |
373 | clickIt();\r | |
374 | expect(scope).toBe(o);\r | |
375 | });\r | |
376 | \r | |
377 | it("should be able to resolve to a ViewController", function(){\r | |
378 | makeItem({\r | |
379 | handler: 'doFoo'\r | |
380 | });\r | |
381 | \r | |
382 | var ctrl = new Ext.app.ViewController({\r | |
383 | doFoo: function(){\r | |
384 | return true;\r | |
385 | }\r | |
386 | });\r | |
387 | var checkSpy = spyOn(ctrl, "doFoo");\r | |
388 | \r | |
389 | var ct = new Ext.container.Container({\r | |
390 | renderTo: Ext.getBody(),\r | |
391 | controller: ctrl,\r | |
392 | items: menu // the menu is the one that adds onClick listener. without it the checkitem click won't work.\r | |
393 | });\r | |
394 | \r | |
395 | clickIt();\r | |
396 | expect(checkSpy).toHaveBeenCalled();\r | |
397 | \r | |
398 | ct.destroy();\r | |
399 | checkSpy = null;\r | |
400 | });\r | |
401 | });\r | |
402 | \r | |
403 | describe("setText", function() {\r | |
404 | describe("with submenu", function() {\r | |
405 | beforeEach(function() {\r | |
406 | makeItem({\r | |
407 | menu: {\r | |
408 | items: [{\r | |
409 | text: 'bar'\r | |
410 | }]\r | |
411 | }\r | |
412 | });\r | |
413 | \r | |
414 | menu.show();\r | |
415 | });\r | |
416 | \r | |
417 | it("should set aria-label", function() {\r | |
418 | c.setText('frob');\r | |
419 | \r | |
420 | expectAria('aria-label', 'frob submenu');\r | |
421 | });\r | |
422 | });\r | |
423 | });\r | |
424 | \r | |
425 | describe("pointer interaction", function() {\r | |
426 | beforeEach(function() {\r | |
427 | makeItem();\r | |
428 | \r | |
429 | menu.show();\r | |
430 | });\r | |
431 | \r | |
432 | // Tests here are asynchronous because we want to catch focus flip-flops,\r | |
433 | // and these tender animals are easily scared\r | |
434 | it("should not close the menu when clicked on textEl", function() {\r | |
435 | runs(function() {\r | |
436 | clickIt();\r | |
437 | });\r | |
438 | \r | |
439 | // Can't wait for something because we want *nothing* to happen.\r | |
440 | waits(50);\r | |
441 | \r | |
442 | runs(function() {\r | |
443 | expect(c.isVisible()).toBe(true);\r | |
444 | });\r | |
445 | });\r | |
446 | \r | |
447 | it("should not close the menu when clicked on checkEl", function() {\r | |
448 | runs(function() {\r | |
449 | clickIt();\r | |
450 | });\r | |
451 | \r | |
452 | waits(50);\r | |
453 | \r | |
454 | runs(function() {\r | |
455 | expect(c.isVisible()).toBe(true);\r | |
456 | });\r | |
457 | });\r | |
458 | });\r | |
459 | });\r |