example-drag.mdx

id	title	sidebar_label
example-drag	Drag	Drag

Note

This example only works with a real browser (not with jsdom, as it does not support getBoundingClientRect).

Usage

awaitdrag(slider,{delta: {x: -100,y: 0},})

Capture

Code

import{fireEvent}from'@testing-library/dom'// https://stackoverflow.com/a/53946549/1179377functionisElement(obj){if(typeofobj!=='object'){returnfalse}letprototypeStr,prototypedo{prototype=Object.getPrototypeOf(obj)// to work in iframeprototypeStr=Object.prototype.toString.call(prototype)// '[object Document]' is used to detect documentif(prototypeStr==='[object Element]'||prototypeStr==='[object Document]'){returntrue}obj=prototype// null is the terminal of object}while(prototype!==null)returnfalse}functiongetElementClientCenter(element){const{left, top, width, height}=element.getBoundingClientRect()return{x: left+width/2,y: top+height/2,}}constgetCoords=charlie=>isElement(charlie) ? getElementClientCenter(charlie) : charlieconstsleep=ms=>newPromise(resolve=>{setTimeout(resolve,ms)})exportdefaultasyncfunctiondrag(element,{to: inTo, delta, steps =20, duration =500},){constfrom=getElementClientCenter(element)constto=delta ? {x: from.x+delta.x,y: from.y+delta.y,} : getCoords(inTo)conststep={x: (to.x-from.x)/steps,y: (to.y-from.y)/steps,}constcurrent={clientX: from.x,clientY: from.y,}fireEvent.mouseEnter(element,current)fireEvent.mouseOver(element,current)fireEvent.mouseMove(element,current)fireEvent.mouseDown(element,current)for(leti=0;i<steps;i++){current.clientX+=step.xcurrent.clientY+=step.yawaitsleep(duration/steps)fireEvent.mouseMove(element,current)}fireEvent.mouseUp(element,current)}