| OLD | NEW |
| (Empty) | |
| 1 // The mouse bot will always be precise. Humans can click anywhere in the boxes. |
| 2 const epsilon = (window.eventSender) ? 0 : 50; |
| 3 |
| 4 const elementCenter = (element) => { |
| 5 const clientRect = element.getBoundingClientRect(); |
| 6 const centerX = (clientRect.left + clientRect.right) / 2; |
| 7 const centerY = (clientRect.top + clientRect.bottom) / 2; |
| 8 return { x: centerX, y: centerY }; |
| 9 }; |
| 10 |
| 11 const mouseMoveToCenter = (element, frameOffset) => { |
| 12 const center = elementCenter(element); |
| 13 eventSender.mouseMoveTo(center.x + frameOffset.x, center.y + frameOffset.y); |
| 14 }; |
| 15 |
| 16 const mouseEventCoordinates = (event) => { |
| 17 return { |
| 18 client: { x: event.clientX, y: event.clientY }, |
| 19 offset: { x: event.offsetX, y: event.offsetY }, |
| 20 page: { x: event.pageX, y: event.pageY }, |
| 21 screen: { x: event.screenX, y: event.screenY }, |
| 22 }; |
| 23 }; |
| 24 |
| 25 const runDragTest = (t, params) => { |
| 26 const domRoot = params.domRoot; |
| 27 |
| 28 const dragged = domRoot.querySelector('.dragged'); |
| 29 let dragStartCoordinates = null; |
| 30 dragged.ondragstart = (event) => { |
| 31 dragStartCoordinates = mouseEventCoordinates(event); |
| 32 }; |
| 33 |
| 34 const dropZone = domRoot.querySelector('.dropzone'); |
| 35 dropZone.ondragover = (event) => { event.preventDefault(); } |
| 36 |
| 37 let dropCoordinates = null; |
| 38 dropZone.ondrop = (event) => { |
| 39 dropCoordinates = mouseEventCoordinates(event); |
| 40 } |
| 41 |
| 42 let dragEndCoordinates = null; |
| 43 return new Promise((resolve, reject) => { |
| 44 dragged.ondragend = (event) => { |
| 45 dragEndCoordinates = mouseEventCoordinates(event); |
| 46 resolve(true); |
| 47 } |
| 48 |
| 49 if (window.eventSender) { |
| 50 mouseMoveToCenter(dragged, params.frameOffset); |
| 51 eventSender.mouseDown(); |
| 52 setTimeout(() => { |
| 53 mouseMoveToCenter(dropZone, params.frameOffset); |
| 54 eventSender.mouseUp(); |
| 55 }, 100); |
| 56 } |
| 57 }).then(() => t.step(() => { |
| 58 assert_approx_equals(dragStartCoordinates.client.x, params.start.client.x, |
| 59 epsilon, 'clientX on the dragstart event should be in the drag me box'); |
| 60 assert_approx_equals(dragStartCoordinates.client.y, params.start.client.y, |
| 61 epsilon, 'clientY on the dragstart event should be in the drag me box'); |
| 62 assert_approx_equals(dragStartCoordinates.page.x, params.start.page.x, |
| 63 epsilon, 'pageX on the dragstart event should be in the drag me box'); |
| 64 assert_approx_equals(dragStartCoordinates.page.y, params.start.page.y, |
| 65 epsilon, 'pageY on the dragstart event should be in the drag me box'); |
| 66 |
| 67 assert_approx_equals(dropCoordinates.client.x, params.end.client.x, epsilon, |
| 68 'clientX on the drop event should be in the drop here box'); |
| 69 assert_approx_equals(dropCoordinates.client.y, params.end.client.y, epsilon, |
| 70 'clientX on the drop event should be in the drop here box'); |
| 71 assert_approx_equals(dropCoordinates.page.x, params.end.page.x, epsilon, |
| 72 'pageX on the drop event should be in the drop here box'); |
| 73 assert_approx_equals(dropCoordinates.page.y, params.end.page.y, epsilon, |
| 74 'pageY on the drop event should be in the drop here box'); |
| 75 |
| 76 assert_approx_equals(dragEndCoordinates.client.x, params.end.client.x, |
| 77 epsilon, 'clientX on the dragend event should be in the drop here box'); |
| 78 assert_approx_equals(dragEndCoordinates.client.y, params.end.client.y, |
| 79 epsilon, 'clientY on the dragend event should be in the drop here box'); |
| 80 assert_approx_equals(dragEndCoordinates.page.x, params.end.page.x, epsilon, |
| 81 'pageX on the dragend event should be in the drop here box'); |
| 82 assert_approx_equals(dragEndCoordinates.page.y, params.end.page.y, epsilon, |
| 83 'pageY on the dragend event should be in the drop here box'); |
| 84 |
| 85 })); |
| 86 }; |
| OLD | NEW |