1
1
import { expect } from '@vaadin/chai-plugins' ;
2
- import { fixtureSync , nextFrame } from '@vaadin/testing-helpers' ;
2
+ import { fire , fixtureSync , nextFrame } from '@vaadin/testing-helpers' ;
3
3
import sinon from 'sinon' ;
4
4
import '../vaadin-dashboard.js' ;
5
5
import { isSafari } from '@vaadin/component-base/src/browser-utils.js' ;
@@ -11,6 +11,8 @@ import {
11
11
fireResizeOver ,
12
12
fireResizeStart ,
13
13
getElementFromCell ,
14
+ getEventCoordinates ,
15
+ getResizeHandle ,
14
16
onceResized ,
15
17
setMaximumColumnWidth ,
16
18
setMinimumColumnWidth ,
@@ -201,10 +203,34 @@ describe('dashboard - widget resizing', () => {
201
203
[ 0 , 2 ] ,
202
204
] ) ;
203
205
206
+ const resizeHandle = getResizeHandle ( getElementFromCell ( dashboard , 1 , 0 ) ! ) ;
207
+ const { x : initialX , y : initialY } = getEventCoordinates ( resizeHandle , 'bottom' ) ;
208
+
204
209
fireResizeStart ( getElementFromCell ( dashboard , 1 , 0 ) ! ) ;
205
210
await nextFrame ( ) ;
206
211
207
- fireResizeOver ( getElementFromCell ( dashboard , 0 , 0 ) ! , 'top' ) ;
212
+ const targetElement = getElementFromCell ( dashboard , 0 , 0 ) ! ;
213
+ fireResizeOver ( targetElement , 'top' ) ;
214
+ await nextFrame ( ) ;
215
+
216
+ const { x : targetX , y : targetY } = getEventCoordinates ( targetElement , 'top' ) ;
217
+ const event = new MouseEvent ( 'mousemove' , {
218
+ bubbles : true ,
219
+ composed : true ,
220
+ clientX : targetX ,
221
+ clientY : targetY ,
222
+ buttons : 1 ,
223
+ } ) ;
224
+ targetElement . dispatchEvent ( event ) ;
225
+ fire ( resizeHandle , 'track' , {
226
+ state : 'track' ,
227
+ x : targetX ,
228
+ y : targetY - 1 ,
229
+ dx : targetX - initialX ,
230
+ dy : targetY - initialY - 1 ,
231
+ ddx : 0 ,
232
+ ddy : - 1 ,
233
+ } ) ;
208
234
await nextFrame ( ) ;
209
235
210
236
fireResizeEnd ( dashboard ) ;
@@ -323,6 +349,99 @@ describe('dashboard - widget resizing', () => {
323
349
] ) ;
324
350
} ) ;
325
351
352
+ ( isSafari ? it . skip : it ) ( 'should resize only when dragged in the same direction (top -> bottom)' , async ( ) => {
353
+ setMinimumRowHeight ( dashboard , 50 ) ;
354
+ dashboard . items = [ { id : 0 , rowspan : 2 } , { id : 1 } , { id : 2 } ] ;
355
+ await nextFrame ( ) ;
356
+
357
+ // prettier-ignore
358
+ expectLayout ( dashboard , [
359
+ [ 0 , 1 ] ,
360
+ [ 0 , 2 ] ,
361
+ ] ) ;
362
+
363
+ const widget = getElementFromCell ( dashboard , 0 , 1 ) ! ;
364
+ const initialHeight = widget . offsetHeight ;
365
+ fireResizeStart ( widget ) ;
366
+ await nextFrame ( ) ;
367
+
368
+ const targetElement = getElementFromCell ( dashboard , 1 , 1 ) ! ;
369
+ const { x, y } = getEventCoordinates ( targetElement , 'top' ) ;
370
+ const minSizeIncreaseDelta = initialHeight / 2 + 1 ;
371
+ const minSizeIncreaseY = y + minSizeIncreaseDelta ;
372
+ const event = new MouseEvent ( 'mousemove' , {
373
+ bubbles : true ,
374
+ composed : true ,
375
+ clientX : x ,
376
+ clientY : minSizeIncreaseY ,
377
+ buttons : 1 ,
378
+ } ) ;
379
+ targetElement . dispatchEvent ( event ) ;
380
+ await nextFrame ( ) ;
381
+
382
+ let previousHeight = initialHeight ;
383
+ const resizeHandle = getResizeHandle ( widget ) ;
384
+ for ( let i = 1 ; i < 5 ; i ++ ) {
385
+ fire ( resizeHandle , 'track' , {
386
+ state : 'track' ,
387
+ x,
388
+ y : minSizeIncreaseY + i ,
389
+ dx : 0 ,
390
+ dy : minSizeIncreaseDelta + i ,
391
+ ddx : 0 ,
392
+ ddy : 1 ,
393
+ } ) ;
394
+ await nextFrame ( ) ;
395
+ const newHeight = getElementFromCell ( dashboard , 0 , 1 ) ! . offsetHeight ;
396
+ expect ( newHeight >= previousHeight ) . to . be . true ;
397
+ previousHeight = newHeight ;
398
+ }
399
+ } ) ;
400
+
401
+ it ( 'should resize only when dragged in the same direction (bottom -> top)' , async ( ) => {
402
+ setMinimumRowHeight ( dashboard , 50 ) ;
403
+ dashboard . items = [ { id : 0 , rowspan : 2 } , { id : 1 } , { id : 2 , rowspan : 3 } ] ;
404
+ await nextFrame ( ) ;
405
+
406
+ const widget = getElementFromCell ( dashboard , 2 , 1 ) ! ;
407
+ const initialHeight = widget . offsetHeight ;
408
+ fireResizeStart ( widget ) ;
409
+ await nextFrame ( ) ;
410
+
411
+ const targetElement = getElementFromCell ( dashboard , 1 , 1 ) ! ;
412
+ const { x, y } = getEventCoordinates ( targetElement , 'top' ) ;
413
+ const minSizeDecreaseDelta = initialHeight / 3 + 1 ;
414
+ const minSizeDecreaseY = y - minSizeDecreaseDelta ;
415
+ const event = new MouseEvent ( 'mousemove' , {
416
+ bubbles : true ,
417
+ composed : true ,
418
+ clientX : x ,
419
+ clientY : minSizeDecreaseY ,
420
+ buttons : 1 ,
421
+ } ) ;
422
+ targetElement . dispatchEvent ( event ) ;
423
+ await nextFrame ( ) ;
424
+
425
+ let previousHeight = initialHeight ;
426
+ const resizeHandle = getResizeHandle ( widget ) ;
427
+
428
+ for ( let i = 1 ; i < 5 ; i ++ ) {
429
+ fire ( resizeHandle , 'track' , {
430
+ state : 'track' ,
431
+ x,
432
+ y : minSizeDecreaseY - i ,
433
+ dx : 0 ,
434
+ dy : minSizeDecreaseDelta - i ,
435
+ ddx : 0 ,
436
+ ddy : - 1 ,
437
+ } ) ;
438
+ await nextFrame ( ) ;
439
+ const newHeight = getElementFromCell ( dashboard , 1 , 1 ) ! . offsetHeight ;
440
+ expect ( newHeight <= previousHeight ) . to . be . true ;
441
+ previousHeight = newHeight ;
442
+ }
443
+ } ) ;
444
+
326
445
it ( 'should dispatch an item resized event' , async ( ) => {
327
446
const resizeEndSpy = sinon . spy ( ) ;
328
447
dashboard . addEventListener ( 'dashboard-item-resized' , resizeEndSpy ) ;
0 commit comments