]>
Commit | Line | Data |
---|---|---|
6527f429 DM |
1 | describe("grid-keys", function(){\r |
2 | function createSuite(buffered) {\r | |
3 | describe(buffered ? "with buffered rendering" : "without buffered rendering", function() {\r | |
4 | var grid, view, store, GridEventModel = Ext.define(null, {\r | |
5 | extend: 'Ext.data.Model',\r | |
6 | fields: [\r | |
7 | 'field1',\r | |
8 | 'field2',\r | |
9 | 'field3',\r | |
10 | 'field4',\r | |
11 | 'field5',\r | |
12 | 'field6',\r | |
13 | 'field7',\r | |
14 | 'field8',\r | |
15 | 'field9',\r | |
16 | 'field10'\r | |
17 | ]\r | |
18 | });\r | |
19 | \r | |
20 | var TAB = 9,\r | |
21 | PAGE_UP = 33,\r | |
22 | PAGE_DOWN = 34,\r | |
23 | END = 35,\r | |
24 | HOME = 36,\r | |
25 | LEFT = 37,\r | |
26 | UP = 38,\r | |
27 | RIGHT = 39,\r | |
28 | DOWN = 40;\r | |
29 | \r | |
30 | function clickAndKey(rowIdx, cellIdx, key, altKey) {\r | |
31 | var visibleCellIdx = view.getHeaderByCell(view.getCellInclusive({row:rowIdx, column: cellIdx})).getVisibleIndex();\r | |
32 | \r | |
33 | view.getNavigationModel().setPosition(rowIdx, visibleCellIdx);\r | |
34 | triggerCellMouseEvent('click', rowIdx, cellIdx);\r | |
35 | triggerCellKeyEvent('keydown', rowIdx, cellIdx, key, altKey);\r | |
36 | triggerCellKeyEvent('keyup', rowIdx, cellIdx, key, altKey);\r | |
37 | triggerCellKeyEvent('keypress', rowIdx, cellIdx, key, altKey);\r | |
38 | }\r | |
39 | \r | |
40 | function triggerCellMouseEvent(type, rowIdx, cellIdx, button, x, y) {\r | |
41 | var target = findCell(rowIdx, cellIdx);\r | |
42 | \r | |
43 | jasmine.fireMouseEvent(target, type, x, y, button);\r | |
44 | }\r | |
45 | \r | |
46 | function triggerCellKeyEvent(type, rowIdx, cellIdx, key, altKey) {\r | |
47 | var target = findCell(rowIdx, cellIdx);\r | |
48 | jasmine.fireKeyEvent(target, type, key, null, null, altKey);\r | |
49 | }\r | |
50 | \r | |
51 | function findCell(rowIdx, cellIdx) {\r | |
52 | return grid.getView().getCellInclusive({\r | |
53 | row: rowIdx,\r | |
54 | column: cellIdx\r | |
55 | }, true);\r | |
56 | }\r | |
57 | \r | |
58 | function makeGrid(selModel, columns, rows) { \r | |
59 | var data = [],\r | |
60 | defaultCols = [],\r | |
61 | i;\r | |
62 | \r | |
63 | for (i = 1; i <= 4; ++i) {\r | |
64 | defaultCols.push({\r | |
65 | name: 'F' + i,\r | |
66 | dataIndex: 'field' + i\r | |
67 | });\r | |
68 | }\r | |
69 | \r | |
70 | rows = rows || 5;\r | |
71 | for (i = 1; i <= rows; ++i) {\r | |
72 | data.push({\r | |
73 | field1: i + '.' + 1,\r | |
74 | field2: i + '.' + 2,\r | |
75 | field3: i + '.' + 3,\r | |
76 | field4: i + '.' + 4,\r | |
77 | field5: i + '.' + 5,\r | |
78 | field6: i + '.' + 6,\r | |
79 | field7: i + '.' + 7,\r | |
80 | field8: i + '.' + 8,\r | |
81 | field9: i + '.' + 9,\r | |
82 | field10: i + '.' + 10\r | |
83 | });\r | |
84 | }\r | |
85 | \r | |
86 | store = new Ext.data.Store({\r | |
87 | model: GridEventModel,\r | |
88 | data: data\r | |
89 | });\r | |
90 | \r | |
91 | grid = new Ext.grid.Panel({\r | |
92 | columns: columns || defaultCols,\r | |
93 | store: store,\r | |
94 | selType: selModel || 'rowmodel',\r | |
95 | width: 1000,\r | |
96 | height: 500,\r | |
97 | bufferedRenderer: buffered,\r | |
98 | viewConfig: {\r | |
99 | mouseOverOutBuffer: 0\r | |
100 | },\r | |
101 | renderTo: Ext.getBody()\r | |
102 | });\r | |
103 | view = grid.getView();\r | |
104 | }\r | |
105 | \r | |
106 | afterEach(function(){\r | |
107 | Ext.destroy(grid, store);\r | |
108 | grid = store = view = null;\r | |
109 | Ext.data.Model.schema.clear();\r | |
110 | });\r | |
111 | \r | |
112 | describe("row model", function(){\r | |
113 | describe("nav keys", function() {\r | |
114 | beforeEach(function(){\r | |
115 | makeGrid();\r | |
116 | grid.view.el.dom.focus();\r | |
117 | });\r | |
118 | describe("down", function() { \r | |
119 | it("should move down a row when pressing the down key on the first row", function(){\r | |
120 | clickAndKey(0, 0, DOWN);\r | |
121 | expect(grid.getSelectionModel().getSelection()[0]).toBe(store.getAt(1));\r | |
122 | });\r | |
123 | \r | |
124 | it("should move down a row when pressing the down key on a middle row", function(){\r | |
125 | clickAndKey(2, 0, DOWN);\r | |
126 | expect(grid.getSelectionModel().getSelection()[0]).toBe(store.getAt(3));\r | |
127 | });\r | |
128 | \r | |
129 | it("should not move down a row when pressing the down key on the last row", function(){\r | |
130 | clickAndKey(4, 0, DOWN);\r | |
131 | expect(grid.getSelectionModel().getSelection()[0]).toBe(store.getAt(4));\r | |
132 | });\r | |
133 | });\r | |
134 | \r | |
135 | describe("up", function() { \r | |
136 | it("should move up a row when pressing the up key on the last row", function(){\r | |
137 | clickAndKey(4, 0, UP);\r | |
138 | expect(grid.getSelectionModel().getSelection()[0]).toBe(store.getAt(3));\r | |
139 | });\r | |
140 | \r | |
141 | it("should move up a row when pressing the up key on a middle row", function(){\r | |
142 | clickAndKey(3, 0, UP);\r | |
143 | expect(grid.getSelectionModel().getSelection()[0]).toBe(store.getAt(2));\r | |
144 | });\r | |
145 | \r | |
146 | it("should not move up a row when pressing the up key on the first row", function(){\r | |
147 | clickAndKey(0, 0, UP);\r | |
148 | expect(grid.getSelectionModel().getSelection()[0]).toBe(store.getAt(0));\r | |
149 | });\r | |
150 | });\r | |
151 | });\r | |
152 | \r | |
153 | describe("special keys", function(){\r | |
154 | beforeEach(function(){\r | |
155 | makeGrid(null, null, 50);\r | |
156 | });\r | |
157 | \r | |
158 | it("should move to the end of the visible rows on page down", function(){\r | |
159 | var sm = grid.getSelectionModel(),\r | |
160 | visible = grid.getNavigationModel().getRowsVisible();\r | |
161 | \r | |
162 | clickAndKey(0, 0, PAGE_DOWN);\r | |
163 | expect(sm.getSelection()[0]).toBe(store.getAt(visible));\r | |
164 | });\r | |
165 | \r | |
166 | it("should move to the top of the visible rows on page up", function(){\r | |
167 | var sm = grid.getSelectionModel(),\r | |
168 | visible = grid.getNavigationModel().getRowsVisible();\r | |
169 | \r | |
170 | clickAndKey(49, 0, PAGE_UP);\r | |
171 | expect(sm.getSelection()[0]).toBe(store.getAt(49 - visible));\r | |
172 | });\r | |
173 | \r | |
174 | it("should move to the last cell on ALT+end", function(){\r | |
175 | var sm = grid.getSelectionModel();\r | |
176 | \r | |
177 | clickAndKey(0, 0, END, true);\r | |
178 | expect(sm.getSelection()[0]).toBe(store.getAt(49));\r | |
179 | });\r | |
180 | \r | |
181 | it("should move to the first cell on ALT+home", function(){\r | |
182 | var sm = grid.getSelectionModel();\r | |
183 | \r | |
184 | clickAndKey(49, 0, HOME, true);\r | |
185 | expect(sm.getSelection()[0]).toBe(store.getAt(0));\r | |
186 | });\r | |
187 | });\r | |
188 | });\r | |
189 | \r | |
190 | describe("cell model", function(){\r | |
191 | function expectSelection(row, column) {\r | |
192 | var pos = grid.getSelectionModel().getCurrentPosition(); \r | |
193 | expect(pos.row).toBe(row);\r | |
194 | expect(pos.column).toBe(column);\r | |
195 | }\r | |
196 | \r | |
197 | describe("simple movement", function(){\r | |
198 | beforeEach(function(){\r | |
199 | makeGrid('cellmodel');\r | |
200 | });\r | |
201 | \r | |
202 | describe("left", function(){\r | |
203 | it("should not move when at the first cell", function(){\r | |
204 | clickAndKey(0, 0, LEFT);\r | |
205 | expectSelection(0, 0);\r | |
206 | });\r | |
207 | \r | |
208 | it("should move the position one to the left", function(){\r | |
209 | clickAndKey(3, 2, LEFT);\r | |
210 | expectSelection(3, 1);\r | |
211 | });\r | |
212 | \r | |
213 | it("should maintain vertical position if not wrapping", function(){\r | |
214 | clickAndKey(2, 1, LEFT);\r | |
215 | expectSelection(2, 0);\r | |
216 | });\r | |
217 | \r | |
218 | it("should wrap to the previous row where possible", function(){\r | |
219 | clickAndKey(4, 0, LEFT);\r | |
220 | expectSelection(3, 3); \r | |
221 | });\r | |
222 | });\r | |
223 | \r | |
224 | describe("up", function(){\r | |
225 | it("should not move when in the first row", function(){\r | |
226 | clickAndKey(0, 2, UP);\r | |
227 | expectSelection(0, 2);\r | |
228 | });\r | |
229 | \r | |
230 | it("should move the position one up", function(){\r | |
231 | clickAndKey(3, 2, UP);\r | |
232 | expectSelection(2, 2);\r | |
233 | });\r | |
234 | \r | |
235 | it("should maintain the vertical position", function(){\r | |
236 | clickAndKey(4, 1, UP);\r | |
237 | expectSelection(3, 1);\r | |
238 | });\r | |
239 | });\r | |
240 | \r | |
241 | describe("right", function(){\r | |
242 | it("should not move when at the last cell", function(){\r | |
243 | clickAndKey(4, 3, RIGHT);\r | |
244 | expectSelection(4, 3);\r | |
245 | });\r | |
246 | \r | |
247 | it("should move the position one to the right", function(){\r | |
248 | clickAndKey(3, 2, RIGHT);\r | |
249 | expectSelection(3, 3);\r | |
250 | });\r | |
251 | \r | |
252 | it("should maintain vertical position if not wrapping", function(){\r | |
253 | clickAndKey(2, 1, RIGHT);\r | |
254 | expectSelection(2, 2);\r | |
255 | });\r | |
256 | \r | |
257 | it("should wrap to the next row where possible", function(){\r | |
258 | clickAndKey(2, 3, RIGHT);\r | |
259 | expectSelection(3, 0); \r | |
260 | });\r | |
261 | });\r | |
262 | \r | |
263 | describe("down", function(){\r | |
264 | it("should not move when in the last row", function(){\r | |
265 | clickAndKey(4, 1, DOWN);\r | |
266 | expectSelection(4, 1);\r | |
267 | });\r | |
268 | \r | |
269 | it("should move the position one down", function(){\r | |
270 | clickAndKey(3, 2, DOWN);\r | |
271 | expectSelection(4, 2);\r | |
272 | });\r | |
273 | \r | |
274 | it("should maintain the vertical position", function(){\r | |
275 | clickAndKey(1, 2, DOWN);\r | |
276 | expectSelection(2, 2);\r | |
277 | });\r | |
278 | });\r | |
279 | });\r | |
280 | \r | |
281 | describe("hidden columns", function() {\r | |
282 | describe("left", function(){\r | |
283 | it("should skip over a hidden first column (left key)", function(){\r | |
284 | makeGrid('cellmodel', [{\r | |
285 | hidden: true,\r | |
286 | dataIndex: 'field1'\r | |
287 | }, {\r | |
288 | dataIndex: 'field2'\r | |
289 | }, {\r | |
290 | dataIndex: 'field3'\r | |
291 | }]);\r | |
292 | clickAndKey(1, 1, LEFT);\r | |
293 | expectSelection(0, 2);\r | |
294 | });\r | |
295 | \r | |
296 | it("should skip over multiple hidden first columns (left key)", function(){\r | |
297 | makeGrid('cellmodel', [{\r | |
298 | hidden: true,\r | |
299 | dataIndex: 'field1'\r | |
300 | }, {\r | |
301 | hidden: true,\r | |
302 | dataIndex: 'field2'\r | |
303 | }, {\r | |
304 | dataIndex: 'field3'\r | |
305 | }, {\r | |
306 | dataIndex: 'field4'\r | |
307 | }]);\r | |
308 | clickAndKey(1, 2, LEFT);\r | |
309 | expectSelection(0, 3);\r | |
310 | });\r | |
311 | \r | |
312 | it("should skip over hidden middle columns (left key)", function(){\r | |
313 | makeGrid('cellmodel', [{\r | |
314 | dataIndex: 'field1'\r | |
315 | }, {\r | |
316 | hidden: true,\r | |
317 | dataIndex: 'field2'\r | |
318 | }, {\r | |
319 | hidden: true,\r | |
320 | dataIndex: 'field3'\r | |
321 | }, {\r | |
322 | dataIndex: 'field4'\r | |
323 | }]);\r | |
324 | clickAndKey(0, 3, LEFT);\r | |
325 | expectSelection(0, 0);\r | |
326 | });\r | |
327 | \r | |
328 | it("should skip over a hidden last column (left key)", function(){\r | |
329 | makeGrid('cellmodel', [{\r | |
330 | dataIndex: 'field1'\r | |
331 | }, {\r | |
332 | dataIndex: 'field2'\r | |
333 | }, {\r | |
334 | hidden: true,\r | |
335 | dataIndex: 'field3'\r | |
336 | }]);\r | |
337 | clickAndKey(1, 0, LEFT);\r | |
338 | expectSelection(0, 1);\r | |
339 | });\r | |
340 | \r | |
341 | it("should skip over multiple hidden last columns (left key)", function() {\r | |
342 | makeGrid('cellmodel', [{\r | |
343 | dataIndex: 'field1'\r | |
344 | }, {\r | |
345 | dataIndex: 'field2'\r | |
346 | }, {\r | |
347 | hidden: true,\r | |
348 | dataIndex: 'field3'\r | |
349 | }, {\r | |
350 | hidden: true,\r | |
351 | dataIndex: 'field4'\r | |
352 | }]);\r | |
353 | clickAndKey(1, 0, LEFT);\r | |
354 | expectSelection(0, 1);\r | |
355 | });\r | |
356 | });\r | |
357 | \r | |
358 | describe("right", function() {\r | |
359 | it("should skip over a hidden first column (right key)", function(){\r | |
360 | makeGrid('cellmodel', [{\r | |
361 | hidden: true,\r | |
362 | dataIndex: 'field1'\r | |
363 | }, {\r | |
364 | dataIndex: 'field2'\r | |
365 | }, {\r | |
366 | dataIndex: 'field3'\r | |
367 | }]);\r | |
368 | clickAndKey(0, 2, RIGHT);\r | |
369 | expectSelection(1, 1);\r | |
370 | });\r | |
371 | \r | |
372 | it("should skip over multiple hidden first columns (right key)", function(){\r | |
373 | makeGrid('cellmodel', [{\r | |
374 | hidden: true,\r | |
375 | dataIndex: 'field1'\r | |
376 | }, {\r | |
377 | hidden: true,\r | |
378 | dataIndex: 'field2'\r | |
379 | }, {\r | |
380 | dataIndex: 'field3'\r | |
381 | }, {\r | |
382 | dataIndex: 'field4'\r | |
383 | }]);\r | |
384 | clickAndKey(0, 3, RIGHT);\r | |
385 | expectSelection(1, 2);\r | |
386 | });\r | |
387 | \r | |
388 | it("should skip over hidden middle columns (right key)", function(){\r | |
389 | makeGrid('cellmodel', [{\r | |
390 | dataIndex: 'field1'\r | |
391 | }, {\r | |
392 | hidden: true,\r | |
393 | dataIndex: 'field2'\r | |
394 | }, {\r | |
395 | hidden: true,\r | |
396 | dataIndex: 'field3'\r | |
397 | }, {\r | |
398 | dataIndex: 'field4'\r | |
399 | }]);\r | |
400 | clickAndKey(0, 0, RIGHT);\r | |
401 | expectSelection(0, 3);\r | |
402 | });\r | |
403 | \r | |
404 | it("should skip over a hidden last column (right key)", function(){\r | |
405 | makeGrid('cellmodel', [{\r | |
406 | dataIndex: 'field1'\r | |
407 | }, {\r | |
408 | dataIndex: 'field2'\r | |
409 | }, {\r | |
410 | hidden: true,\r | |
411 | dataIndex: 'field3'\r | |
412 | }]);\r | |
413 | clickAndKey(0, 1, RIGHT);\r | |
414 | expectSelection(1, 0);\r | |
415 | });\r | |
416 | \r | |
417 | it("should skip over multiple hidden last columns (right key)", function() {\r | |
418 | makeGrid('cellmodel', [{\r | |
419 | dataIndex: 'field1'\r | |
420 | }, {\r | |
421 | dataIndex: 'field2'\r | |
422 | }, {\r | |
423 | hidden: true,\r | |
424 | dataIndex: 'field3'\r | |
425 | }, {\r | |
426 | hidden: true,\r | |
427 | dataIndex: 'field4'\r | |
428 | }]);\r | |
429 | clickAndKey(0, 1, RIGHT);\r | |
430 | expectSelection(1, 0);\r | |
431 | });\r | |
432 | });\r | |
433 | });\r | |
434 | });\r | |
435 | });\r | |
436 | }\r | |
437 | createSuite(false);\r | |
438 | createSuite(true);\r | |
439 | }); |