指针
pointer(input: PointerInput): Promise<void>
pointer
API 允许模拟与指针设备的交互。它接受单个指针操作或操作数组。
type PointerInput = PointerActionInput | Array<PointerActionInput>
我们的主要目标受众是按
jest
在jsdom
环境中进行测试,并且jsdom
中没有布局。这意味着与您的浏览器不同,元素不存在于特定的位置、层级和大小。
我们不会尝试确定您描述的指针操作在您布局中的那个位置是否可行。
指针操作
有两种类型的操作:按下和移动。
按下按钮或触摸屏幕
如果指针操作定义了要按下、释放或同时按下和释放的键,则它是一个按下操作。
pointer({keys: '[MouseLeft]'})
您可以同时声明多个按下操作(在同一位置),它们将在内部解析为多个操作。如果您不需要声明其他属性,也可以只提供keys
字符串。
pointer({keys: '[MouseLeft][MouseRight]'})
// or
pointer('[MouseLeft][MouseRight]')
为了在不释放的情况下按下按钮,按钮名称后缀为>
。
要释放先前按下的按钮,标签以/
开头。
pointer('[MouseLeft>]') // press the left mouse button
pointer('[/MouseLeft]') // release the left mouse button
哪些按钮可用取决于pointerMap
.
移动指针
任何不是按下操作的指针操作都描述了指针移动。
您可以通过pointerName
属性声明要移动的指针。默认值为mouse
。
请注意,mouse
指针(pointerId: 1
)也是唯一始终存在并具有位置的指针。touch
指针仅在触摸屏幕时存在,并且每次都会收到一个新的pointerId
。对于这些指针,我们使用按下操作中的“按钮”名称作为pointerName
。
pointer([
// touch the screen at element1
{keys: '[TouchA>]', target: element1},
// move the touch pointer to element2
{pointerName: 'TouchA', target: element2},
// release the touch pointer at the last position (element2)
{keys: '[/TouchA]'},
])
指针位置
指针目标
interface PointerTarget {
target: Element
coords?: PointerCoords
}
PointerTarget
道具允许描述指针在文档上的位置。
您提供的coords
将按原样应用于生成的MouseEvent
,并且可以省略。
target
应该是浏览器中接收指针输入的元素。这是在这些坐标上可以接收指针事件的最顶层元素。
选择目标
interface SelectionTarget {
node?: Node
offset?: number
}
指针操作可以改变文档中的选择。
在浏览器中,每个指针位置都对应于一个 DOM 位置。这是一个 DOM 节点和一个 DOM 偏移量,通常转换为最靠近指针位置的字符。
由于在无布局环境中的所有字符都在同一个布局位置,因此我们假设指针位置最靠近指针target
的最后一个后代。
如果您提供offset
,我们假设指针位置最靠近target.textContent
的第offset
个字符。
如果您还提供node
,我们将node
和offset
视为用于任何选择的精确 DOM 位置。
// element: <div><span>foo</span><span>bar</span></div>
// | marking the cursor.
// [ ] marking a selection.
pointer({target: element, offset: 2, keys: '[MouseLeft]'})
// => <div><span>fo|o</span><span>bar</span></div>
pointer([{target: element, offset: 2, keys: '[MouseLeft>]'}, {offset: 5}])
// => <div><span>fo[o</span><span>ba]r</span></div>
pointer({target: element, node: element, offset: 1, keys: '[MouseLeft]'})
// => <div><span>foo</span>|<span>bar</span></div>